From 2966a83ffd1c062989ccc56065d95fcc9a6329a0 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Jul 2024 11:44:06 +0300
Subject: [PATCH] Disabled and checked token for checkbox

---
 apps/showcase/doc/checkbox/DisabledDoc.vue    | 21 ++++++++++++-------
 .../src/checkbox/style/CheckboxStyle.js       |  1 +
 .../themes/src/presets/aura/checkbox/index.js |  1 +
 .../themes/src/presets/lara/checkbox/index.js |  1 +
 .../themes/src/presets/nora/checkbox/index.js |  1 +
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/showcase/doc/checkbox/DisabledDoc.vue b/apps/showcase/doc/checkbox/DisabledDoc.vue
index f27f945a3..59fdf040f 100644
--- a/apps/showcase/doc/checkbox/DisabledDoc.vue
+++ b/apps/showcase/doc/checkbox/DisabledDoc.vue
@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" disabled />
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,18 @@
 export default {
     data() {
         return {
-            checked: false,
+            checked1: false,
+            checked2: true,
             code: {
                 basic: `
-<Checkbox v-model="checked" disabled />
+<Checkbox v-model="checked1" binary disabled />
+<Checkbox v-model="checked2" binary disabled />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" disabled />
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
     </div>
 </template>
 
@@ -36,8 +40,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" disabled />
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
     </div>
 </template>
 
diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js
index ad0eae635..6f4cdb148 100644
--- a/packages/primevue/src/checkbox/style/CheckboxStyle.js
+++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js
@@ -106,6 +106,7 @@ const theme = ({ dt }) => `
 
 .p-checkbox.p-disabled .p-checkbox-box {
     background: ${dt('checkbox.disabled.background')};
+    border-color: ${dt('checkbox.checked.disabled.border.color')};
 }
 
 .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
diff --git a/packages/themes/src/presets/aura/checkbox/index.js b/packages/themes/src/presets/aura/checkbox/index.js
index 24444d109..92aafc31e 100644
--- a/packages/themes/src/presets/aura/checkbox/index.js
+++ b/packages/themes/src/presets/aura/checkbox/index.js
@@ -14,6 +14,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
diff --git a/packages/themes/src/presets/lara/checkbox/index.js b/packages/themes/src/presets/lara/checkbox/index.js
index 80ee69df5..c0be95dca 100644
--- a/packages/themes/src/presets/lara/checkbox/index.js
+++ b/packages/themes/src/presets/lara/checkbox/index.js
@@ -14,6 +14,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
diff --git a/packages/themes/src/presets/nora/checkbox/index.js b/packages/themes/src/presets/nora/checkbox/index.js
index b365bb61d..1f931c42a 100644
--- a/packages/themes/src/presets/nora/checkbox/index.js
+++ b/packages/themes/src/presets/nora/checkbox/index.js
@@ -14,6 +14,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {