Temporarily use emerald as main color for testing, refactored Checkbox styles.

components/lib/checkbox/style/CheckboxStyle.js

@@ -4,7 +4,7 @@ const classes = {
     root: ({ instance, props }) => [
         'p-checkbox p-component',
         {
-            'p-highlight': instance.checked,
+            'p-checkbox-checked': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'

components/lib/themes/primeone/base/checkbox/index.js

@@ -52,21 +52,21 @@ export default {
     border-color: ${dt('checkbox.hover.border.color')};
 }
 
-.p-checkbox.p-highlight .p-checkbox-box {
+.p-checkbox-checked .p-checkbox-box {
     border-color: ${dt('checkbox.checked.border.color')};
     background: ${dt('checkbox.checked.background')};
 }
 
-.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon {
+.p-checkbox-checked .p-checkbox-icon {
     color: ${dt('checkbox.icon.checked.color')};
 }
 
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background: ${dt('checkbox.checked.hover.background')};
     border-color: ${dt('checkbox.checked.hover.border.color')};
 }
 
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box .p-checkbox-icon {
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
     color: ${dt('checkbox.icon.checked.hover.color')};
 }
 
@@ -80,14 +80,14 @@ export default {
 }
 
 .p-checkbox.p-variant-filled .p-checkbox-box {
-    background: ${dt('checkbox.checked.filled.background')};
+    background: ${dt('checkbox.filled.background')};
 }
 
-.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+.p-checkbox-checked.p-variant-filled .p-checkbox-box {
     background: ${dt('checkbox.checked.background')};
 }
 
-.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
     background: ${dt('checkbox.checked.hover.background')};
 }
 

components/lib/themes/primeone/presets/aura/checkbox/index.js

@@ -9,7 +9,7 @@ export default {
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
         borderColor: '{form.field.border.color}',
-        hoverBordercolor: '{form.field.hover.border.color}',
+        hoverBorderColor: '{form.field.hover.border.color}',
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',

doc/checkbox/IndeterminateDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>When <i>indeterminate</i> is present, the checkbox state specified as indeterminate.</p>
+        <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" indeterminate binary />

themes/app-theme.js

@@ -5,18 +5,18 @@ import Aura from 'primevue/themes/primeone/aura';
 const Noir = definePreset(Aura, {
     semantic: {
         primary: {
-            50: '{zinc.50}',
-            100: '{zinc.100}',
-            200: '{zinc.200}',
-            300: '{zinc.300}',
-            400: '{zinc.400}',
-            500: '{zinc.500}',
-            600: '{zinc.600}',
-            700: '{zinc.700}',
-            800: '{zinc.800}',
-            900: '{zinc.900}',
-            950: '{zinc.950}'
-        },
+            50: '{emerald.50}',
+            100: '{emerald.100}',
+            200: '{emerald.200}',
+            300: '{emerald.300}',
+            400: '{emerald.400}',
+            500: '{emerald.500}',
+            600: '{emerald.600}',
+            700: '{emerald.700}',
+            800: '{emerald.800}',
+            900: '{emerald.900}',
+            950: '{emerald.950}'
+        } /*,
         colorScheme: {
             light: {
                 primary: {
@@ -46,7 +46,7 @@ const Noir = definePreset(Aura, {
                     focusColor: 'rgba(255,255,255,.87)'
                 }
             }
-        }
+        }*/
     }
 });