feat: stepper.button.sizing

deven-org · May 11, 2023 · 421a8bb · 421a8bb
1 parent 9c635ff
commit 421a8bb
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 95 deletions.
diff --git a/packages/figma-design-tokens/input/tokens/core/BLR_COR.json b/packages/figma-design-tokens/input/tokens/core/BLR_COR.json
@@ -61,6 +61,10 @@
         "value": "24px",
         "type": "dimension"
       },
+      "28": {
+        "value": "28px",
+        "type": "dimension"
+      },
       "32": {
         "value": "32px",
         "type": "dimension"
@@ -167,6 +171,10 @@
         "value": "1.5rem",
         "type": "dimension"
       },
+      "28": {
+        "value": "1.75rem",
+        "type": "dimension"
+      },
       "32": {
         "value": "2rem",
         "type": "dimension"

diff --git a/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json b/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json
@@ -308,108 +308,125 @@
         }
       }
     },
-    "StepperButton": {
-      "SurfaceFill": {
-        "Rest": {
-          "value": "{q.surface.brand.silent.rest}",
-          "type": "color"
-        },
-        "Hover": {
-          "value": "{q.surface.brand.silent.hover}",
-          "type": "color"
-        },
-        "Pressed": {
-          "value": "{q.surface.brand.silent.pressed}",
-          "type": "color"
-        },
-        "Focus": {
-          "value": "{q.surface.brand.silent.rest}",
-          "type": "color"
-        },
-        "Disabled": {
-          "value": "{q.surface.disabled.beta}",
-          "type": "color"
-        }
-      },
-      "SurfaceStroke": {
-        "Rest": {
-          "value": "{q.stroke.brand.alpha.rest}",
-          "type": "color"
-        },
-        "Hover": {
-          "value": "{q.stroke.brand.alpha.hover}",
-          "type": "color"
-        },
-        "Pressed": {
-          "value": "{q.stroke.brand.alpha.pressed}",
-          "type": "color"
-        },
-        "Focus": {
-          "value": "{q.stroke.brand.alpha.rest}",
-          "type": "color"
-        },
-        "Disabled": {
-          "value": "{q.stroke.disabled.alpha}",
-          "type": "color"
-        }
-      },
-      "Icon": {
-        "Rest": {
-          "value": "{q.content.onbrand.beta.rest}",
-          "type": "color"
-        },
-        "Hover": {
-          "value": "{q.content.onbrand.beta.hover}",
-          "type": "color"
-        },
-        "Pressed": {
-          "value": "{q.content.onbrand.beta.pressed}",
-          "type": "color"
-        },
-        "Focus": {
-          "value": "{q.content.onbrand.beta.rest}",
-          "type": "color"
-        },
-        "Disabled": {
-          "value": "{q.content.ondisabled.alpha}",
-          "type": "color"
-        }
-      },
-      "Border": {
-        "Rest": {
-          "value": {
-            "color": "{Action.StepperButton.SurfaceStroke.Rest}",
-            "width": "{core.borderWidth.None}"
+    "Stepper": {
+      "Button": {
+        "SurfaceFill": {
+          "Rest": {
+            "value": "{q.surface.brand.silent.rest}",
+            "type": "color"
           },
-          "type": "border"
-        },
-        "Hover": {
-          "value": {
-            "color": "{Action.StepperButton.SurfaceStroke.Hover}",
-            "width": "{core.borderWidth.None}"
+          "Hover": {
+            "value": "{q.surface.brand.silent.hover}",
+            "type": "color"
+          },
+          "Pressed": {
+            "value": "{q.surface.brand.silent.pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{q.surface.brand.silent.rest}",
+            "type": "color"
           },
-          "type": "border"
+          "Disabled": {
+            "value": "{q.surface.disabled.beta}",
+            "type": "color"
+          }
         },
-        "Pressed": {
-          "value": {
-            "color": "{Action.StepperButton.SurfaceStroke.Pressed}",
-            "width": "{core.borderWidth.None}"
+        "SurfaceStroke": {
+          "Rest": {
+            "value": "{q.stroke.brand.alpha.rest}",
+            "type": "color"
+          },
+          "Hover": {
+            "value": "{q.stroke.brand.alpha.hover}",
+            "type": "color"
           },
-          "type": "border"
+          "Pressed": {
+            "value": "{q.stroke.brand.alpha.pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{Global.Focus}",
+            "type": "color"
+          },
+          "Disabled": {
+            "value": "{q.stroke.disabled.alpha}",
+            "type": "color"
+          }
         },
-        "Focused": {
-          "value": {
-            "color": "{Action.StepperButton.SurfaceStroke.Focused}",
-            "width": "{core.borderWidth.None}"
+        "Icon": {
+          "Rest": {
+            "value": "{q.content.onbrand.beta.rest}",
+            "type": "color"
+          },
+          "Hover": {
+            "value": "{q.content.onbrand.beta.hover}",
+            "type": "color"
+          },
+          "Pressed": {
+            "value": "{q.content.onbrand.beta.pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{q.content.onbrand.beta.rest}",
+            "type": "color"
           },
-          "type": "border"
+          "Disabled": {
+            "value": "{q.content.ondisabled.alpha}",
+            "type": "color"
+          }
         },
-        "Disabled": {
-          "value": {
-            "color": "{Action.StepperButton.SurfaceStroke.Disabled}",
-            "width": "{core.borderWidth.None}"
+        "Border": {
+          "Rest": {
+            "value": {
+              "color": "{Action.Stepper.Button.SurfaceStroke.Rest}",
+              "width": "{core.borderWidth.None}"
+            },
+            "type": "border"
+          },
+          "Hover": {
+            "value": {
+              "color": "{Action.Stepper.Button.SurfaceStroke.Hover}",
+              "width": "{core.borderWidth.None}"
+            },
+            "type": "border"
           },
-          "type": "border"
+          "Pressed": {
+            "value": {
+              "color": "{Action.Stepper.Button.SurfaceStroke.Pressed}",
+              "width": "{core.borderWidth.None}"
+            },
+            "type": "border"
+          },
+          "Focus": {
+            "value": "{Global.FocusBorder}",
+            "type": "border"
+          },
+          "Disabled": {
+            "value": {
+              "color": "{Action.Stepper.Button.SurfaceStroke.Disabled}",
+              "width": "{core.borderWidth.None}"
+            },
+            "type": "border"
+          }
+        },
+        "SM": {
+          "Sizing": {
+            "value": "{core.dimensionREM.16}",
+            "type": "sizing"
+          }
+        },
+        "MD": {
+          "Sizing": {
+            "value": "{core.dimensionREM.20}",
+            "type": "sizing"
+          }
+        },
+        "LG": {
+          "Sizing": {
+            "value": "{core.dimensionREM.28}",
+            "type": "sizing"
+          }
         }
       }
     }
@@ -746,4 +763,4 @@
       }
     }
   }
-}
+}