From 0441be9252e546c431bcf88b6097599a6107878b Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Fri, 21 Jun 2024 09:15:23 -0400 Subject: [PATCH] refactor: Update stepper tokens to match V2 design --- build/figma/figma.tokens.json | 29 ++++++++++++++++---------- build/web/css/.css | 6 +++--- build/web/css/components.css | 6 +++--- build/web/css/components/stepper.css | 6 +++--- build/web/css/tokens.css | 6 +++--- build/web/scss/.scss | 6 +++--- build/web/scss/components.scss | 6 +++--- build/web/scss/components/stepper.scss | 6 +++--- build/web/scss/tokens.scss | 6 +++--- tokens/components/stepper/tokens.json | 29 ++++++++++++++++---------- 10 files changed, 60 insertions(+), 46 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 8b0f8cde..9022ce45 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -4007,21 +4007,28 @@ }, "stepper": { "font": { - "value": { - "fontFamily": "\"Lato\", sans-serif", - "fontWeight": "600", - "lineHeight": "124.44444444444444%", - "fontSize": "1.40625rem" + "desktop": { + "value": { + "fontFamily": "\"Lato\", sans-serif", + "fontWeight": "600", + "lineHeight": "124.44444444444444%", + "fontSize": "1.40625rem" + }, + "type": "typography" }, - "type": "typography" + "mobile": { + "value": { + "fontFamily": "\"Lato\", sans-serif", + "fontWeight": "700", + "lineHeight": "133.33333333333334%", + "fontSize": "1.125rem" + }, + "type": "typography" + } }, "margin": { - "value": "0 0 1.125rem", + "value": "0 0 0.75rem", "type": "spacing" - }, - "text": { - "value": "#43474E", - "type": "color" } }, "textarea": { diff --git a/build/web/css/.css b/build/web/css/.css index 9ffdb73e..9cc8734d 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -746,9 +746,9 @@ --gcds-signature-signature-height: 1.6875rem; --gcds-signature-white-default: #ffffff; --gcds-signature-wordmark-height: 3rem; - --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; - --gcds-stepper-margin: 0 0 1.125rem; - --gcds-stepper-text: #43474e; + --gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; + --gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; + --gcds-stepper-margin: 0 0 0.75rem; --gcds-textarea-border-radius: 0.1875rem; --gcds-textarea-border-width: 0.125rem; --gcds-textarea-danger-border: #d3080c; diff --git a/build/web/css/components.css b/build/web/css/components.css index 3ea7d358..ff2d8bf0 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -604,9 +604,9 @@ --gcds-signature-signature-height: 1.6875rem; --gcds-signature-white-default: #ffffff; --gcds-signature-wordmark-height: 3rem; - --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; - --gcds-stepper-margin: 0 0 1.125rem; - --gcds-stepper-text: #43474e; + --gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; + --gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; + --gcds-stepper-margin: 0 0 0.75rem; --gcds-textarea-border-radius: 0.1875rem; --gcds-textarea-border-width: 0.125rem; --gcds-textarea-danger-border: #d3080c; diff --git a/build/web/css/components/stepper.css b/build/web/css/components/stepper.css index e3133149..09b90589 100644 --- a/build/web/css/components/stepper.css +++ b/build/web/css/components/stepper.css @@ -3,7 +3,7 @@ */ :root { - --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; - --gcds-stepper-margin: 0 0 1.125rem; - --gcds-stepper-text: #43474e; + --gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; + --gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; + --gcds-stepper-margin: 0 0 0.75rem; } diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 9ffdb73e..9cc8734d 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -746,9 +746,9 @@ --gcds-signature-signature-height: 1.6875rem; --gcds-signature-white-default: #ffffff; --gcds-signature-wordmark-height: 3rem; - --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; - --gcds-stepper-margin: 0 0 1.125rem; - --gcds-stepper-text: #43474e; + --gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; + --gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; + --gcds-stepper-margin: 0 0 0.75rem; --gcds-textarea-border-radius: 0.1875rem; --gcds-textarea-border-width: 0.125rem; --gcds-textarea-danger-border: #d3080c; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index a25e4dec..b784eb9a 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -744,9 +744,9 @@ $gcds-signature-color-text: #000000; $gcds-signature-signature-height: 1.6875rem; $gcds-signature-white-default: #ffffff; $gcds-signature-wordmark-height: 3rem; -$gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; -$gcds-stepper-margin: 0 0 1.125rem; -$gcds-stepper-text: #43474e; +$gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; +$gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; +$gcds-stepper-margin: 0 0 0.75rem; $gcds-textarea-border-radius: 0.1875rem; $gcds-textarea-border-width: 0.125rem; $gcds-textarea-danger-border: #d3080c; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index 142c9e93..b15593d4 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -602,9 +602,9 @@ $gcds-signature-color-text: #000000; $gcds-signature-signature-height: 1.6875rem; $gcds-signature-white-default: #ffffff; $gcds-signature-wordmark-height: 3rem; -$gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; -$gcds-stepper-margin: 0 0 1.125rem; -$gcds-stepper-text: #43474e; +$gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; +$gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; +$gcds-stepper-margin: 0 0 0.75rem; $gcds-textarea-border-radius: 0.1875rem; $gcds-textarea-border-width: 0.125rem; $gcds-textarea-danger-border: #d3080c; diff --git a/build/web/scss/components/stepper.scss b/build/web/scss/components/stepper.scss index d428ab86..9cb346e6 100644 --- a/build/web/scss/components/stepper.scss +++ b/build/web/scss/components/stepper.scss @@ -1,6 +1,6 @@ // Do not edit directly. -$gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; -$gcds-stepper-margin: 0 0 1.125rem; -$gcds-stepper-text: #43474e; +$gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; +$gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; +$gcds-stepper-margin: 0 0 0.75rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index a25e4dec..b784eb9a 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -744,9 +744,9 @@ $gcds-signature-color-text: #000000; $gcds-signature-signature-height: 1.6875rem; $gcds-signature-white-default: #ffffff; $gcds-signature-wordmark-height: 3rem; -$gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; -$gcds-stepper-margin: 0 0 1.125rem; -$gcds-stepper-text: #43474e; +$gcds-stepper-font-desktop: 600 1.40625rem/124.44444444444444% "Lato", sans-serif; +$gcds-stepper-font-mobile: 700 1.125rem/133.33333333333334% "Lato", sans-serif; +$gcds-stepper-margin: 0 0 0.75rem; $gcds-textarea-border-radius: 0.1875rem; $gcds-textarea-border-width: 0.125rem; $gcds-textarea-danger-border: #d3080c; diff --git a/tokens/components/stepper/tokens.json b/tokens/components/stepper/tokens.json index 9fe2fcd0..0ca718f0 100644 --- a/tokens/components/stepper/tokens.json +++ b/tokens/components/stepper/tokens.json @@ -1,21 +1,28 @@ { "stepper": { "font": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.semibold}", - "lineHeight": "{lineHeights.h6}", - "fontSize": "{fontSizes.h6}" + "desktop": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.semibold}", + "lineHeight": "{lineHeights.h6}", + "fontSize": "{fontSizes.h6}" + }, + "type": "typography" }, - "type": "typography" + "mobile": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.bold}", + "lineHeight": "{lineHeights.h6Mobile}", + "fontSize": "{fontSizes.h6Mobile}" + }, + "type": "typography" + } }, "margin": { - "value": "0 0 {spacing.300.value}", + "value": "0 0 {spacing.200.value}", "type": "spacing" - }, - "text": { - "value": "{text.secondary.value}", - "type": "color" } } }