From 84bf4af18a2ebc4b811dc49260b80c9ce22a51c8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 6 Apr 2024 23:08:16 +0300
Subject: [PATCH] Temporarily use emerald as main color for testing, refactored
 Checkbox styles.

---
 .../lib/checkbox/style/CheckboxStyle.js       |  2 +-
 .../themes/primeone/base/checkbox/index.js    | 14 +++++-----
 .../primeone/presets/aura/checkbox/index.js   |  2 +-
 doc/checkbox/IndeterminateDoc.vue             |  2 +-
 themes/app-theme.js                           | 26 +++++++++----------
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js
index b9f0f9c29..124efa728 100644
--- a/components/lib/checkbox/style/CheckboxStyle.js
+++ b/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'
diff --git a/components/lib/themes/primeone/base/checkbox/index.js b/components/lib/themes/primeone/base/checkbox/index.js
index be953d6bb..c552a52a0 100644
--- a/components/lib/themes/primeone/base/checkbox/index.js
+++ b/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')};
 }
 
diff --git a/components/lib/themes/primeone/presets/aura/checkbox/index.js b/components/lib/themes/primeone/presets/aura/checkbox/index.js
index 932808c1e..15ccb8e37 100644
--- a/components/lib/themes/primeone/presets/aura/checkbox/index.js
+++ b/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}',
diff --git a/doc/checkbox/IndeterminateDoc.vue b/doc/checkbox/IndeterminateDoc.vue
index 63182ea3d..61989ae87 100644
--- a/doc/checkbox/IndeterminateDoc.vue
+++ b/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 />
diff --git a/themes/app-theme.js b/themes/app-theme.js
index 13d425f39..3a1992f32 100644
--- a/themes/app-theme.js
+++ b/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)'
                 }
             }
-        }
+        }*/
     }
 });