From fc2a466b0202c49cf76bf503b3c324b563e2f116 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 May 2024 11:33:44 +0300
Subject: [PATCH] New tokens for Checkbox

---
 .../lib/checkbox/style/CheckboxStyle.js       | 12 +++++++++---
 .../lib/inputtext/style/InputTextStyle.js     |  2 +-
 components/lib/themes/aura/checkbox/index.js  | 13 +++++++++++--
 components/lib/themes/aura/index.js           |  3 ++-
 components/lib/themes/lara/checkbox/index.js  | 19 ++++++++++++++-----
 layouts/AppConfigurator.vue                   |  2 +-
 6 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js
index a27e07f30..f47912d2c 100644
--- a/components/lib/checkbox/style/CheckboxStyle.js
+++ b/components/lib/checkbox/style/CheckboxStyle.js
@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
     background: ${dt('checkbox.background')};
     width: ${dt('checkbox.width')};
     height: ${dt('checkbox.width')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('checkbox.shadow')};
 }
@@ -72,8 +72,14 @@ const theme = ({ dt }) => `
 }
 
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    border-color: ${dt('checkbox.focus.border.color')};
+    box-shadow: ${dt('checkbox.focus.ring.shadow')};
+    outline: ${dt('checkbox.focus.ring.width')} ${dt('checkbox.focus.ring.style')} ${dt('checkbox.focus.ring.color')};
+    outline-offset: ${dt('checkbox.focus.ring.offset')};
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: ${dt('checkbox.checked.focus.border.color')};
 }
 
 .p-checkbox.p-invalid > .p-checkbox-box {
diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js
index 5378ea8cf..be0d174bb 100644
--- a/components/lib/inputtext/style/InputTextStyle.js
+++ b/components/lib/inputtext/style/InputTextStyle.js
@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
 }
 
 .p-inputtext.p-variant-filled:enabled:focus {
-    background-color: ${dt('inputtext.filled.focus.background')};
+    background: ${dt('inputtext.filled.focus.background')};
 }
 
 .p-inputtext:disabled {
diff --git a/components/lib/themes/aura/checkbox/index.js b/components/lib/themes/aura/checkbox/index.js
index bab6c1f50..cb273d396 100644
--- a/components/lib/themes/aura/checkbox/index.js
+++ b/components/lib/themes/aura/checkbox/index.js
@@ -1,6 +1,6 @@
 export default {
     root: {
-        borderRadius: '{rounded.sm}',
+        borderRadius: '{border.radius.sm}',
         width: '1.25rem',
         height: '1.25rem',
         background: '{form.field.background}',
@@ -10,10 +10,19 @@ export default {
         filledBackground: '{form.field.filled.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
+        focusBorderColor: '{form.field.border.color}',
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
+        checkedFocusBorderColor: '{primary.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
-        shadow: '{form.field.shadow}'
+        shadow: '{form.field.shadow}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     icon: {
         size: '0.875rem',
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 22d42fcfe..85c2f5597 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -122,7 +122,8 @@ export default {
             width: '1px',
             style: 'solid',
             color: '{primary.color}',
-            offset: '2px'
+            offset: '2px',
+            shadow: 'none'
         },
         anchorGutter: '2px',
         primary: {
diff --git a/components/lib/themes/lara/checkbox/index.js b/components/lib/themes/lara/checkbox/index.js
index bab6c1f50..3f229dbe1 100644
--- a/components/lib/themes/lara/checkbox/index.js
+++ b/components/lib/themes/lara/checkbox/index.js
@@ -1,8 +1,8 @@
 export default {
     root: {
-        borderRadius: '{rounded.sm}',
-        width: '1.25rem',
-        height: '1.25rem',
+        borderRadius: '{border.radius.sm}',
+        width: '1.5rem',
+        height: '1.5rem',
         background: '{form.field.background}',
         checkedBackground: '{primary.color}',
         checkedHoverBackground: '{primary.hover.color}',
@@ -10,13 +10,22 @@ export default {
         filledBackground: '{form.field.filled.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
+        focusBorderColor: '{form.field.focus.border.color}',
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
+        checkedFocusBorderColor: '{primary.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
-        shadow: '{form.field.shadow}'
+        shadow: '{form.field.shadow}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     icon: {
-        size: '0.875rem',
+        size: '1rem',
         color: '{form.field.color}',
         checkedColor: '{primary.inverse.color}',
         checkedHoverColor: '{primary.inverse.color}',
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 935c346df..45ddd4be3 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -209,7 +209,7 @@ export default {
             const preset = value === 'Lara' ? Lara : Aura;
             const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
-            $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).update();
+            $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use();
         }
     },
     computed: {