Disabled and checked token for checkbox

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>
 

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 {

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: {

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: {

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: {