New tokens for Checkbox

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')};
+    border-color: ${dt('checkbox.focus.border.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    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 {

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 {

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',

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

components/lib/themes/lara/checkbox/index.js

@@ -1,8 +1,8 @@
 export default {
     root: {
-        borderRadius: '{rounded.sm}',
+        borderRadius: '{border.radius.sm}',
-        width: '1.25rem',
+        width: '1.5rem',
-        height: '1.25rem',
+        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}',

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