From 3520377e74e1cf80b7fe674774c3e9f9bf25fd52 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 May 2024 11:38:15 +0300
Subject: [PATCH] Updated tokens for Buttons

---
 components/lib/button/style/ButtonStyle.js |  69 ++++++------
 components/lib/themes/aura/button/index.js | 124 ++++++++++++++++++---
 components/lib/themes/lara/button/index.js | 123 +++++++++++++++++---
 3 files changed, 253 insertions(+), 63 deletions(-)

diff --git a/components/lib/button/style/ButtonStyle.js b/components/lib/button/style/ButtonStyle.js
index 28b486e9d..bed25aca2 100644
--- a/components/lib/button/style/ButtonStyle.js
+++ b/components/lib/button/style/ButtonStyle.js
@@ -12,14 +12,14 @@ const theme = ({ dt }) => `
     color: ${dt('button.primary.color')};
     background: ${dt('button.primary.background')};
     border: 1px solid ${dt('button.primary.border.color')};
-    padding: 0.5rem 1rem;
+    padding: ${dt('button.padding.y')} ${dt('button.padding.x')};
     font-size: 1rem;
     font-family: inherit;
     font-feature-settings: inherit;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    border-radius: ${dt('border.radius.md')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    border-radius: ${dt('button.border.radius')};
     outline-color: transparent;
-    gap: 0.5rem;
+    gap: ${dt('button.gap')};
 }
 
 .p-button:disabled {
@@ -36,31 +36,32 @@ const theme = ({ dt }) => `
 
 .p-button-icon-only {
     justify-content: center;
-    width: 2.5rem;
-    padding: 0.5rem 0;
+    width: ${dt('button.icon.only.width')};
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .p-button-icon-only.p-button-rounded {
     border-radius: 50%;
-    height: 2.5rem;
+    height: ${dt('button.icon.only.width')};
 }
 
 .p-button-sm {
-    font-size: 0.875rem;
-    padding: 0.375rem 0.875rem;
+    font-size: ${dt('button.sm.font.size')};
+    padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};
 }
 
 .p-button-sm .p-button-icon {
-    font-size: 0.875rem;
+    font-size: ${dt('button.sm.font.size')};
 }
 
 .p-button-lg {
-    font-size: 1.25rem;
-    padding: 0.625rem 1.25rem;
+    font-size: ${dt('button.lg.font.size')};
+    padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
 }
 
 .p-button-lg .p-button-icon {
-    font-size: 1.25rem;
+    font-size: ${dt('button.lg.font.size')};
 }
 
 .p-button-vertical {
@@ -68,7 +69,7 @@ const theme = ({ dt }) => `
 }
 
 .p-button-label {
-    font-weight: 500;
+    font-weight: ${dt('button.label.font.weight')};
 }
 
 .p-fluid .p-button {
@@ -76,7 +77,7 @@ const theme = ({ dt }) => `
 }
 
 .p-fluid .p-button-icon-only {
-    width: 2.5rem;
+    width: ${dt('button.icon.only.width')};
 }
 
 .p-button:not(:disabled):hover {
@@ -92,12 +93,12 @@ const theme = ({ dt }) => `
 }
 
 .p-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('button.primary.focus.ring.shadow')};
+    outline: ${dt('button.focus.ring.width')} ${dt('button.focus.ring.style')} ${dt('button.primary.focus.ring.color')};
+    outline-offset: ${dt('button.focus.ring.offset')};
 }
 
 .p-button .p-badge {
-    margin-left: 0.5rem;
     min-width: 1rem;
     height: 1rem;
     line-height: 1rem;
@@ -106,14 +107,13 @@ const theme = ({ dt }) => `
 }
 
 .p-button-raised {
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: ${dt('button.raised.shadow')};
 }
 
 .p-button-rounded {
-    border-radius: 2rem;
+    border-radius: ${dt('button.rounded.border.radius')};
 }
 
-/* Default Severities */
 .p-button-secondary {
     background: ${dt('button.secondary.background')};
     border: 1px solid ${dt('button.secondary.border.color')};
@@ -132,6 +132,11 @@ const theme = ({ dt }) => `
     color: ${dt('button.secondary.active.color')};
 }
 
+.p-button-secondary:focus-visible {
+    outline-color: ${dt('button.secondary.focus.ring.color')};
+    box-shadow: ${dt('button.secondary.focus.ring.shadow')};
+}
+
 .p-button-success {
     background: ${dt('button.success.background')};
     border: 1px solid ${dt('button.success.border.color')};
@@ -151,7 +156,8 @@ const theme = ({ dt }) => `
 }
 
 .p-button-success:focus-visible {
-    outline-color: ${dt('button.success.background')};
+    outline-color: ${dt('button.success.focus.ring.color')};
+    box-shadow: ${dt('button.success.focus.ring.shadow')};
 }
 
 .p-button-info {
@@ -173,7 +179,8 @@ const theme = ({ dt }) => `
 }
 
 .p-button-info:focus-visible {
-    outline-color: ${dt('button.info.background')};
+    outline-color: ${dt('button.info.focus.ring.color')};
+    box-shadow: ${dt('button.info.focus.ring.shadow')};
 }
 
 .p-button-warn {
@@ -195,7 +202,8 @@ const theme = ({ dt }) => `
 }
 
 .p-button-warn:focus-visible {
-    background: ${dt('button.warn.background')};
+    outline-color: ${dt('button.warn.focus.ring.color')};
+    box-shadow: ${dt('button.warn.focus.ring.shadow')};
 }
 
 .p-button-help {
@@ -217,7 +225,8 @@ const theme = ({ dt }) => `
 }
 
 .p-button-help:focus-visible {
-    outline-color: ${dt('button.help.background')};
+    outline-color: ${dt('button.help.focus.ring.color')};
+    box-shadow: ${dt('button.help.focus.ring.shadow')};
 }
 
 .p-button-danger {
@@ -239,7 +248,8 @@ const theme = ({ dt }) => `
 }
 
 .p-button-danger:focus-visible {
-    background: ${dt('button.danger.background')};
+    outline-color: ${dt('button.danger.focus.ring.color')};
+    box-shadow: ${dt('button.danger.focus.ring.shadow')};
 }
 
 .p-button-contrast {
@@ -261,11 +271,10 @@ const theme = ({ dt }) => `
 }
 
 .p-button-contrast:focus-visible {
-    outline-color: ${dt('button.contrast.background')};
+    outline-color: ${dt('button.contrast.focus.ring.color')};
+    box-shadow: ${dt('button.contrast.focus.ring.shadow')};
 }
 
-
-/* Outlined Buttons */
 .p-button-outlined {
     background: transparent;
     border-color: ${dt('button.outlined.primary.border.color')};
@@ -420,7 +429,6 @@ const theme = ({ dt }) => `
     color: ${dt('button.outlined.plain.color')};
 }
 
-/* Text Button */
 .p-button-text {
     background: transparent;
     border-color: transparent;
@@ -565,7 +573,6 @@ const theme = ({ dt }) => `
     color: ${dt('button.text.plain.color')};
 }
 
-/* Link Button */
 .p-button-link {
     background: transparent;
     border-color: transparent;
diff --git a/components/lib/themes/aura/button/index.js b/components/lib/themes/aura/button/index.js
index cf6d134dd..c882910e3 100644
--- a/components/lib/themes/aura/button/index.js
+++ b/components/lib/themes/aura/button/index.js
@@ -1,4 +1,31 @@
 export default {
+    root: {
+        borderRadius: '{form.field.border.radius}',
+        roundedBorderRadius: '2rem',
+        gap: '0.5rem',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        iconOnlyWidth: '2.5rem',
+        sm: {
+            fontSize: '0.875rem',
+            paddingX: '0.625rem',
+            paddingY: '0.375rem'
+        },
+        lg: {
+            fontSize: '1.125rem',
+            paddingX: '0.875rem',
+            paddingY: '0.625rem'
+        },
+        label: {
+            fontWeight: '500'
+        },
+        raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            offset: '{focus.ring.offset}'
+        }
+    },
     colorScheme: {
         light: {
             root: {
@@ -11,7 +38,11 @@ export default {
                     activeBorderColor: '{primary.active.color}',
                     color: '{primary.inverseColor}',
                     hoverColor: '{primary.inverseColor}',
-                    activeColor: '{primary.inverseColor}'
+                    activeColor: '{primary.inverseColor}',
+                    focusRing: {
+                        color: '{primary.color}',
+                        shadow: 'none'
+                    }
                 },
                 secondary: {
                     background: '{surface.100}',
@@ -22,7 +53,11 @@ export default {
                     activeBorderColor: '{surface.300}',
                     color: '{surface.600}',
                     hoverColor: '{surface.700}',
-                    activeColor: '{surface.800}'
+                    activeColor: '{surface.800}',
+                    focusRing: {
+                        color: '{surface.600}',
+                        shadow: 'none'
+                    }
                 },
                 info: {
                     background: '{sky.500}',
@@ -33,7 +68,11 @@ export default {
                     activeBorderColor: '{sky.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: '{sky.500}',
+                        shadow: 'none'
+                    }
                 },
                 success: {
                     background: '{green.500}',
@@ -44,7 +83,11 @@ export default {
                     activeBorderColor: '{green.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: '{green.500}',
+                        shadow: 'none'
+                    }
                 },
                 warn: {
                     background: '{orange.500}',
@@ -55,7 +98,11 @@ export default {
                     activeBorderColor: '{orange.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: '{orange.500}',
+                        shadow: 'none'
+                    }
                 },
                 help: {
                     background: '{purple.500}',
@@ -66,7 +113,11 @@ export default {
                     activeBorderColor: '{purple.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: '{purple.500}',
+                        shadow: 'none'
+                    }
                 },
                 danger: {
                     background: '{red.500}',
@@ -77,7 +128,11 @@ export default {
                     activeBorderColor: '{red.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: '{red.500}',
+                        shadow: 'none'
+                    }
                 },
                 contrast: {
                     background: '{surface.950}',
@@ -88,7 +143,11 @@ export default {
                     activeBorderColor: '{surface.800}',
                     color: '{surface.0}',
                     hoverColor: '{surface.0}',
-                    activeColor: '{surface.0}'
+                    activeColor: '{surface.0}',
+                    focusRing: {
+                        color: '{surface.950}',
+                        shadow: 'none'
+                    }
                 }
             },
             outlined: {
@@ -206,7 +265,11 @@ export default {
                     activeBorderColor: '{primary.active.color}',
                     color: '{primary.inverseColor}',
                     hoverColor: '{primary.inverseColor}',
-                    activeColor: '{primary.inverseColor}'
+                    activeColor: '{primary.inverseColor}',
+                    focusRing: {
+                        color: '{primary.color}',
+                        shadow: 'none'
+                    }
                 },
                 secondary: {
                     background: '{surface.800}',
@@ -217,7 +280,11 @@ export default {
                     activeBorderColor: '{surface.600}',
                     color: '{surface.300}',
                     hoverColor: '{surface.200}',
-                    activeColor: '{surface.100}'
+                    activeColor: '{surface.100}',
+                    focusRing: {
+                        color: '{surface.300}',
+                        shadow: 'none'
+                    }
                 },
                 info: {
                     background: '{sky.400}',
@@ -228,7 +295,11 @@ export default {
                     activeBorderColor: '{sky.200}',
                     color: '{sky.950}',
                     hoverColor: '{sky.950}',
-                    activeColor: '{sky.950}'
+                    activeColor: '{sky.950}',
+                    focusRing: {
+                        color: '{sky.400}',
+                        shadow: 'none'
+                    }
                 },
                 success: {
                     background: '{green.400}',
@@ -239,7 +310,12 @@ export default {
                     activeBorderColor: '{green.200}',
                     color: '{green.950}',
                     hoverColor: '{green.950}',
-                    activeColor: '{green.950}'
+                    activeColor: '{green.950}',
+                    activeColor: '{green.950}',
+                    focusRing: {
+                        color: '{green.400}',
+                        shadow: 'none'
+                    }
                 },
                 warn: {
                     background: '{orange.400}',
@@ -250,7 +326,11 @@ export default {
                     activeBorderColor: '{orange.200}',
                     color: '{orange.950}',
                     hoverColor: '{orange.950}',
-                    activeColor: '{orange.950}'
+                    activeColor: '{orange.950}',
+                    focusRing: {
+                        color: '{orange.400}',
+                        shadow: 'none'
+                    }
                 },
                 help: {
                     background: '{purple.400}',
@@ -261,7 +341,11 @@ export default {
                     activeBorderColor: '{purple.200}',
                     color: '{purple.950}',
                     hoverColor: '{purple.950}',
-                    activeColor: '{purple.950}'
+                    activeColor: '{purple.950}',
+                    focusRing: {
+                        color: '{purple.400}',
+                        shadow: 'none'
+                    }
                 },
                 danger: {
                     background: '{red.400}',
@@ -272,7 +356,11 @@ export default {
                     activeBorderColor: '{red.200}',
                     color: '{red.950}',
                     hoverColor: '{red.950}',
-                    activeColor: '{red.950}'
+                    activeColor: '{red.950}',
+                    focusRing: {
+                        color: '{red.400}',
+                        shadow: 'none'
+                    }
                 },
                 contrast: {
                     background: '{surface.0}',
@@ -283,7 +371,11 @@ export default {
                     activeBorderColor: '{surface.200}',
                     color: '{surface.950}',
                     hoverColor: '{surface.950}',
-                    activeColor: '{surface.950}'
+                    activeColor: '{surface.950}',
+                    focusRing: {
+                        color: '{surface.0}',
+                        shadow: 'none'
+                    }
                 }
             },
             outlined: {
diff --git a/components/lib/themes/lara/button/index.js b/components/lib/themes/lara/button/index.js
index cf6d134dd..0f60b3e0d 100644
--- a/components/lib/themes/lara/button/index.js
+++ b/components/lib/themes/lara/button/index.js
@@ -1,4 +1,31 @@
 export default {
+    root: {
+        borderRadius: '{form.field.border.radius}',
+        roundedBorderRadius: '2rem',
+        gap: '0.5rem',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        iconOnlyWidth: '2.5rem',
+        sm: {
+            fontSize: '0.875rem',
+            paddingX: '0.625rem',
+            paddingY: '0.5rem'
+        },
+        lg: {
+            fontSize: '1.125rem',
+            paddingX: '0.875rem',
+            paddingY: '0.75rem'
+        },
+        label: {
+            fontWeight: '600'
+        },
+        raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            offset: '{form.field.focus.ring.offset}'
+        }
+    },
     colorScheme: {
         light: {
             root: {
@@ -11,7 +38,11 @@ export default {
                     activeBorderColor: '{primary.active.color}',
                     color: '{primary.inverseColor}',
                     hoverColor: '{primary.inverseColor}',
-                    activeColor: '{primary.inverseColor}'
+                    activeColor: '{primary.inverseColor}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {primary.200}'
+                    }
                 },
                 secondary: {
                     background: '{surface.100}',
@@ -22,7 +53,11 @@ export default {
                     activeBorderColor: '{surface.300}',
                     color: '{surface.600}',
                     hoverColor: '{surface.700}',
-                    activeColor: '{surface.800}'
+                    activeColor: '{surface.800}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {surface.200}'
+                    }
                 },
                 info: {
                     background: '{sky.500}',
@@ -33,7 +68,11 @@ export default {
                     activeBorderColor: '{sky.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {sky.200}'
+                    }
                 },
                 success: {
                     background: '{green.500}',
@@ -44,7 +83,11 @@ export default {
                     activeBorderColor: '{green.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {green.200}'
+                    }
                 },
                 warn: {
                     background: '{orange.500}',
@@ -55,7 +98,11 @@ export default {
                     activeBorderColor: '{orange.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {orange.200}'
+                    }
                 },
                 help: {
                     background: '{purple.500}',
@@ -66,7 +113,11 @@ export default {
                     activeBorderColor: '{purple.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {purple.200}'
+                    }
                 },
                 danger: {
                     background: '{red.500}',
@@ -77,7 +128,11 @@ export default {
                     activeBorderColor: '{red.700}',
                     color: '#ffffff',
                     hoverColor: '#ffffff',
-                    activeColor: '#ffffff'
+                    activeColor: '#ffffff',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {red.200}'
+                    }
                 },
                 contrast: {
                     background: '{surface.950}',
@@ -88,7 +143,11 @@ export default {
                     activeBorderColor: '{surface.800}',
                     color: '{surface.0}',
                     hoverColor: '{surface.0}',
-                    activeColor: '{surface.0}'
+                    activeColor: '{surface.0}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem {surface.400}'
+                    }
                 }
             },
             outlined: {
@@ -206,7 +265,11 @@ export default {
                     activeBorderColor: '{primary.active.color}',
                     color: '{primary.inverseColor}',
                     hoverColor: '{primary.inverseColor}',
-                    activeColor: '{primary.inverseColor}'
+                    activeColor: '{primary.inverseColor}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
+                    }
                 },
                 secondary: {
                     background: '{surface.800}',
@@ -217,7 +280,11 @@ export default {
                     activeBorderColor: '{surface.600}',
                     color: '{surface.300}',
                     hoverColor: '{surface.200}',
-                    activeColor: '{surface.100}'
+                    activeColor: '{surface.100}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
+                    }
                 },
                 info: {
                     background: '{sky.400}',
@@ -228,7 +295,11 @@ export default {
                     activeBorderColor: '{sky.200}',
                     color: '{sky.950}',
                     hoverColor: '{sky.950}',
-                    activeColor: '{sky.950}'
+                    activeColor: '{sky.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {sky.400}, transparent 80%)'
+                    }
                 },
                 success: {
                     background: '{green.400}',
@@ -239,7 +310,11 @@ export default {
                     activeBorderColor: '{green.200}',
                     color: '{green.950}',
                     hoverColor: '{green.950}',
-                    activeColor: '{green.950}'
+                    activeColor: '{green.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {green.400}, transparent 80%)'
+                    }
                 },
                 warn: {
                     background: '{orange.400}',
@@ -250,7 +325,11 @@ export default {
                     activeBorderColor: '{orange.200}',
                     color: '{orange.950}',
                     hoverColor: '{orange.950}',
-                    activeColor: '{orange.950}'
+                    activeColor: '{orange.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {orange.400}, transparent 80%)'
+                    }
                 },
                 help: {
                     background: '{purple.400}',
@@ -261,7 +340,11 @@ export default {
                     activeBorderColor: '{purple.200}',
                     color: '{purple.950}',
                     hoverColor: '{purple.950}',
-                    activeColor: '{purple.950}'
+                    activeColor: '{purple.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {purple.400}, transparent 80%)'
+                    }
                 },
                 danger: {
                     background: '{red.400}',
@@ -272,7 +355,11 @@ export default {
                     activeBorderColor: '{red.200}',
                     color: '{red.950}',
                     hoverColor: '{red.950}',
-                    activeColor: '{red.950}'
+                    activeColor: '{red.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {red.400}, transparent 80%)'
+                    }
                 },
                 contrast: {
                     background: '{surface.0}',
@@ -283,7 +370,11 @@ export default {
                     activeBorderColor: '{surface.200}',
                     color: '{surface.950}',
                     hoverColor: '{surface.950}',
-                    activeColor: '{surface.950}'
+                    activeColor: '{surface.950}',
+                    focusRing: {
+                        color: 'transparent',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.0}, transparent 80%)'
+                    }
                 }
             },
             outlined: {