refactor: fixed button tokens

open-craft · Dec 26, 2023 · 7c399b1 · 7c399b1
1 parent 3d835b2
commit 7c399b1
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 31 deletions.
diff --git a/src/Button/index.scss b/src/Button/index.scss
@@ -41,15 +41,15 @@
         bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base));
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-base);
       }
 
       &.btn-lg::before {
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-lg);
       }
 
       &.btn-sm::before {
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-sm);
       }
 
       &:active,

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 
 :root {
@@ -236,7 +236,6 @@
   --pgn-spacing-card-margin-group: 12px;
   --pgn-spacing-card-spacer-y: .75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-focus-gap: 1px;
   --pgn-spacing-btn-block-spacing-y: .5rem;
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
@@ -493,6 +492,7 @@
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -584,7 +584,8 @@
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
   --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
   --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -600,5 +601,6 @@
   --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
   --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
   --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
   --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
 }
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
  */
 
 :root {
@@ -580,7 +580,6 @@
   --pgn-color-alert-title: var(--pgn-color-black);
   --pgn-color-theme-active-gray: var(--pgn-color-gray-900);
   --pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
-  --pgn-color-theme-focus-gray: var(--pgn-color-gray-300);
   --pgn-color-theme-border-gray: var(--pgn-color-gray-200);
   --pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
   --pgn-color-border: var(--pgn-color-gray-200);
@@ -1112,10 +1111,11 @@
   --pgn-color-theme-default-light: var(--pgn-color-light-500);
   --pgn-color-theme-default-brand: var(--pgn-color-brand-500);
   --pgn-color-theme-default-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-focus-dark: var(--pgn-color-dark-300);
-  --pgn-color-theme-focus-light: var(--pgn-color-light-300);
-  --pgn-color-theme-focus-brand: var(--pgn-color-brand-300);
-  --pgn-color-theme-focus-primary: var(--pgn-color-primary-300);
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500);
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
   --pgn-color-theme-border-dark: var(--pgn-color-dark-200);
   --pgn-color-theme-border-light: var(--pgn-color-light-200);
   --pgn-color-theme-border-brand: var(--pgn-color-brand-200);
@@ -1444,11 +1444,11 @@
   --pgn-color-theme-default-info: var(--pgn-color-info-500);
   --pgn-color-theme-default-success: var(--pgn-color-success-500);
   --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-focus-danger: var(--pgn-color-danger-300);
-  --pgn-color-theme-focus-warning: var(--pgn-color-warning-300);
-  --pgn-color-theme-focus-info: var(--pgn-color-info-300);
-  --pgn-color-theme-focus-success: var(--pgn-color-success-300);
-  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-300);
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500);
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500);
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
   --pgn-color-theme-border-danger: var(--pgn-color-danger-200);
   --pgn-color-theme-border-warning: var(--pgn-color-warning-200);
   --pgn-color-theme-border-info: var(--pgn-color-info-200);

diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
@@ -27,7 +27,7 @@
         "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
       },
       "focus": {
-        "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
         "border-gap": {
           "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
           "type": "dimension",
@@ -88,9 +88,13 @@
       "focus": {
         "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
         "border-radius": {
-          "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-          "type": "dimension",
-          "source": "$btn-focus-border-radius"
+          "base": {
+            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "type": "dimension",
+            "source": "$btn-focus-border-radius"
+          },
+          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
         }
       }
     }

diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
@@ -62,16 +62,16 @@
         "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." }
       },
       "focus": {
-        "primary": { "value": "{color.primary.300}", "type": "color", "description": "Theme-specific primary focus color." },
-        "secondary": { "value": "{color.secondary.300}", "type": "color", "description": "Theme-specific secondary focus color." },
-        "brand": { "value": "{color.brand.300}", "type": "color", "description": "Theme-specific brand focus color." },
-        "success": { "value": "{color.success.300}", "type": "color", "description": "Theme-specific success focus color." },
-        "info": { "value": "{color.info.300}", "type": "color", "description": "Theme-specific info focus color." },
-        "warning": { "value": "{color.warning.300}", "type": "color", "description": "Theme-specific warning focus color." },
-        "danger": { "value": "{color.danger.300}", "type": "color", "description": "Theme-specific danger focus color." },
-        "light": { "value": "{color.light.300}", "type": "color", "description": "Theme-specific light focus color." },
-        "dark": { "value": "{color.dark.300}", "type": "color", "description": "Theme-specific dark focus color." },
-        "gray": { "value": "{color.gray.300}", "type": "color", "description": "Theme-specific gray focus color." }
+        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." },
+        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." },
+        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." },
+        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." },
+        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." },
+        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." },
+        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." },
+        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." },
+        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." },
+        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." }
       },
       "default": {
         "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." },