Button enhancements (#416)

* fix(button): Adjust tertiary button based on designer feedback from survey. * fix(button): fixing issue with top and bottom padding to make height of large buttons 48px.
Sage · Jan 22, 2025 · ffec4af · ffec4af
1 parent a0f60d0
commit ffec4af
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 13 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -875,7 +875,6 @@
       "button.color.typical.subtle.label-disabled": "abf3e02aaab0fdee015db2435d7354caa55f0c34",
       "button.color.typical.tertiary.bg-activeDisabled": "087fd421d6d09939aa8fb5121793a9b365a6248d",
       "button.color.typical.tertiary.border-disabled": "130f4b8a0bb497d9086be10fff1a0f9c526130cf",
-      "button.color.typical.tertiary.label-active-copy": "33271ba1542cb0732ccac61203aa422df518bd8e",
       "button.color.typical.tertiary.label-disabled": "55ac76cec8eb098dddc9c9c3738904d382c15dfa",
       "button.color.typical.toggle.bg-activeDisabled": "04c4b9951628c3c4f7dc001b4cee82aabdd1c3b0",
       "button.color.typical.toggle.label-activeDisabled": "04cad986dc6312e442d5bcbc854e1ba65609d8de",
@@ -2247,7 +2246,6 @@
       "button.color.typical.subtle.label-disabled": "abf3e02aaab0fdee015db2435d7354caa55f0c34",
       "button.color.typical.tertiary.bg-activeDisabled": "087fd421d6d09939aa8fb5121793a9b365a6248d",
       "button.color.typical.tertiary.border-disabled": "130f4b8a0bb497d9086be10fff1a0f9c526130cf",
-      "button.color.typical.tertiary.label-active-copy": "33271ba1542cb0732ccac61203aa422df518bd8e",
       "button.color.typical.tertiary.label-disabled": "55ac76cec8eb098dddc9c9c3738904d382c15dfa",
       "button.color.typical.toggle.bg-activeDisabled": "04c4b9951628c3c4f7dc001b4cee82aabdd1c3b0",
       "button.color.typical.toggle.label-activeDisabled": "04cad986dc6312e442d5bcbc854e1ba65609d8de",
@@ -3596,7 +3594,6 @@
       "button.color.typical.tertiary.border-active": "343304e18f39b2e5aa679c68f082cc54367ecca0",
       "button.color.typical.tertiary.border-disabled": "130f4b8a0bb497d9086be10fff1a0f9c526130cf",
       "button.color.typical.tertiary.label-active": "755faa1ea3687787885ab3d6eef6818b6b7fa4cf",
-      "button.color.typical.tertiary.label-active-copy": "33271ba1542cb0732ccac61203aa422df518bd8e",
       "button.color.typical.tertiary.label-disabled": "55ac76cec8eb098dddc9c9c3738904d382c15dfa",
       "button.color.typical.tertiary.label-enabled": "af8918e7910c3a8732526c70197a178ae4c119ec",
       "button.color.typical.tertiary.label-hover": "beecf025dd3c88b151f351579f9bdecc245c52d4",
@@ -5084,7 +5081,6 @@
       "button.color.typical.subtle.label-disabled": "abf3e02aaab0fdee015db2435d7354caa55f0c34",
       "button.color.typical.tertiary.bg-activeDisabled": "087fd421d6d09939aa8fb5121793a9b365a6248d",
       "button.color.typical.tertiary.border-disabled": "130f4b8a0bb497d9086be10fff1a0f9c526130cf",
-      "button.color.typical.tertiary.label-active-copy": "33271ba1542cb0732ccac61203aa422df518bd8e",
       "button.color.typical.tertiary.label-disabled": "55ac76cec8eb098dddc9c9c3738904d382c15dfa",
       "button.color.typical.toggle.bg-activeDisabled": "04c4b9951628c3c4f7dc001b4cee82aabdd1c3b0",
       "button.color.typical.toggle.label-activeDisabled": "04cad986dc6312e442d5bcbc854e1ba65609d8de",

diff --git a/data/tokens/components/button.json b/data/tokens/components/button.json
@@ -245,7 +245,7 @@
           },
           "L": {
             "$type": "spacing",
-            "$value": "{global.space.micro.XL}",
+            "$value": "{global.space.micro.XL} - 0.5",
             "$description": "Top and bottom padding on Large buttons "
           }
         },
@@ -771,7 +771,7 @@
           },
           "label-enabled": {
             "$type": "color",
-            "$value": "{modes.color.interactive.monochrome.generic.defaultAlt}"
+            "$value": "{modes.color.interactive.monochrome.generic.default}"
           },
           "label-hover": {
             "$type": "color",
@@ -789,7 +789,7 @@
           },
           "bg-enabled": {
             "$type": "color",
-            "$value": "{modes.color.interactive.monochrome.subtle.default}"
+            "$value": "{button.color.none}"
           },
           "bg-hover": {
             "$type": "color",
@@ -803,13 +803,17 @@
             "$type": "color",
             "$value": "{modes.color.interactive.inactive.default}"
           },
-          "label-active": {
+          "border-enabled": {
             "$type": "color",
-            "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}"
+            "$value": "{modes.color.interactive.monochrome.generic.defaultAlt2}"
+          },
+          "border-hover": {
+            "$type": "color",
+            "$value": "{modes.color.interactive.monochrome.generic.default}"
           },
-          "label-active-copy": {
+          "label-active": {
             "$type": "color",
-            "$value": "{modes.color.interactive.monochrome.frozen.withActive}"
+            "$value": "{modes.color.interactive.monochrome.generic.withActiveAlt}"
           },
           "label-disabled": {
             "$type": "color",
@@ -1027,7 +1031,7 @@
       },
       "tertiary": {
         "$type": "borderWidth",
-        "$value": "{global.borderwidth.none}",
+        "$value": "{global.borderwidth.XS}",
         "$description": "tertiary button border "
       },
       "primary": {

diff --git a/data/tokens/context/frozenproduct.json b/data/tokens/context/frozenproduct.json
@@ -91,7 +91,11 @@
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{modes.color.interactive.primary.frozen.hover}"
+            "$value": "{modes.color.none}"
+          },
+          "border-disabled": {
+            "$type": "color",
+            "$value": "{modes.color.none}"
           },
           "label-enabled": {
             "$type": "color",

diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json
@@ -708,6 +708,20 @@
               "$value": "{modes.color.interactive.monochrome.generic.active}",
               "$description": "subtle and toggle button text"
             },
+            "defaultAlt2": {
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "alpha",
+                    "value": "0.42",
+                    "space": "lch"
+                  }
+                }
+              },
+              "$type": "color",
+              "$value": "{modes.color.interactive.monochrome.generic.active}",
+              "$description": "Tertiary border color"
+            },
             "hoverAlt": {
               "$extensions": {
                 "studio.tokens": {

diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json
@@ -733,6 +733,20 @@
               "$value": "{modes.color.interactive.monochrome.generic.active}",
               "$description": "subtle and toggle button text"
             },
+            "defaultAlt2": {
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "alpha",
+                    "value": "0.42",
+                    "space": "lch"
+                  }
+                }
+              },
+              "$type": "color",
+              "$value": "{modes.color.interactive.monochrome.generic.active}",
+              "$description": "Tertiary border color"
+            },
             "hoverAlt": {
               "$extensions": {
                 "studio.tokens": {