From 5d6f38f3137c9bf4763e267b06651b7d7a829a11 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Tue, 9 Jul 2024 15:37:45 -0400 Subject: [PATCH 1/2] fix: Add missing component tokens for card and link --- build/figma/figma.tokens.json | 12 ++++++++++++ build/web/css/.css | 2 ++ build/web/css/components.css | 2 ++ build/web/css/components/card.css | 1 + build/web/css/components/link.css | 1 + build/web/css/tokens.css | 2 ++ build/web/scss/.scss | 2 ++ build/web/scss/components.scss | 2 ++ build/web/scss/components/card.scss | 1 + build/web/scss/components/link.scss | 1 + build/web/scss/tokens.scss | 2 ++ tokens/components/card/tokens.json | 4 ++++ tokens/components/link/tokens.json | 8 ++++++++ 13 files changed, 40 insertions(+) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 0991b887..df26c08b 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -284,6 +284,14 @@ "type": "typography" } }, + "hover": { + "decoration": { + "thickness": { + "value": "0.125rem", + "type": "borderWidth" + } + } + }, "regular": { "desktop": { "value": { @@ -1615,6 +1623,10 @@ "type": "typography" } } + }, + "maxWidth": { + "value": "34.125rem", + "type": "sizing" } }, "checkbox": { diff --git a/build/web/css/.css b/build/web/css/.css index 752309de..8dfd0f64 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -62,6 +62,7 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; @@ -310,6 +311,7 @@ --gcds-card-badge-padding: 0.1875rem 1.5rem; --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; + --gcds-card-max-width: 34.125rem; --gcds-checkbox-check-border-width: 0.3125rem; --gcds-checkbox-check-height: 1.5rem; --gcds-checkbox-check-left: 1rem; diff --git a/build/web/css/components.css b/build/web/css/components.css index b424334c..e4bf4cea 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -11,6 +11,7 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; @@ -168,6 +169,7 @@ --gcds-card-badge-padding: 0.1875rem 1.5rem; --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; + --gcds-card-max-width: 34.125rem; --gcds-checkbox-check-border-width: 0.3125rem; --gcds-checkbox-check-height: 1.5rem; --gcds-checkbox-check-left: 1rem; diff --git a/build/web/css/components/card.css b/build/web/css/components/card.css index 1f7fe45b..8b30e5b9 100644 --- a/build/web/css/components/card.css +++ b/build/web/css/components/card.css @@ -26,4 +26,5 @@ --gcds-card-badge-padding: 0.1875rem 1.5rem; --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; + --gcds-card-max-width: 34.125rem; } diff --git a/build/web/css/components/link.css b/build/web/css/components/link.css index d4c98193..4cb73c50 100644 --- a/build/web/css/components/link.css +++ b/build/web/css/components/link.css @@ -11,6 +11,7 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 752309de..8dfd0f64 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -62,6 +62,7 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; @@ -310,6 +311,7 @@ --gcds-card-badge-padding: 0.1875rem 1.5rem; --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; + --gcds-card-max-width: 34.125rem; --gcds-checkbox-check-border-width: 0.3125rem; --gcds-checkbox-check-height: 1.5rem; --gcds-checkbox-check-left: 1rem; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 245c1606..92cd1632 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -60,6 +60,7 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; @@ -308,6 +309,7 @@ $gcds-card-badge-background-color: #20809D; $gcds-card-badge-padding: 0.1875rem 1.5rem; $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; +$gcds-card-max-width: 34.125rem; $gcds-checkbox-check-border-width: 0.3125rem; $gcds-checkbox-check-height: 1.5rem; $gcds-checkbox-check-left: 1rem; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index f2379f28..d07706cb 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -9,6 +9,7 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; @@ -166,6 +167,7 @@ $gcds-card-badge-background-color: #20809D; $gcds-card-badge-padding: 0.1875rem 1.5rem; $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; +$gcds-card-max-width: 34.125rem; $gcds-checkbox-check-border-width: 0.3125rem; $gcds-checkbox-check-height: 1.5rem; $gcds-checkbox-check-left: 1rem; diff --git a/build/web/scss/components/card.scss b/build/web/scss/components/card.scss index fd059939..252d4833 100644 --- a/build/web/scss/components/card.scss +++ b/build/web/scss/components/card.scss @@ -24,3 +24,4 @@ $gcds-card-badge-background-color: #20809D; $gcds-card-badge-padding: 0.1875rem 1.5rem; $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; +$gcds-card-max-width: 34.125rem; diff --git a/build/web/scss/components/link.scss b/build/web/scss/components/link.scss index 62804c1e..1e6fc945 100644 --- a/build/web/scss/components/link.scss +++ b/build/web/scss/components/link.scss @@ -9,6 +9,7 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index 245c1606..92cd1632 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -60,6 +60,7 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; @@ -308,6 +309,7 @@ $gcds-card-badge-background-color: #20809D; $gcds-card-badge-padding: 0.1875rem 1.5rem; $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif; $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif; +$gcds-card-max-width: 34.125rem; $gcds-checkbox-check-border-width: 0.3125rem; $gcds-checkbox-check-height: 1.5rem; $gcds-checkbox-check-left: 1rem; diff --git a/tokens/components/card/tokens.json b/tokens/components/card/tokens.json index d4d8c38b..42e3efdd 100644 --- a/tokens/components/card/tokens.json +++ b/tokens/components/card/tokens.json @@ -133,6 +133,10 @@ "type": "typography" } } + }, + "maxWidth": { + "value": "34.125rem", + "type": "sizing" } } } diff --git a/tokens/components/link/tokens.json b/tokens/components/link/tokens.json index e88d7e40..fa48bee5 100644 --- a/tokens/components/link/tokens.json +++ b/tokens/components/link/tokens.json @@ -51,6 +51,14 @@ "type": "typography" } }, + "hover": { + "decoration": { + "thickness": { + "value": "{border.width.md.value}", + "type": "borderWidth" + } + } + }, "regular": { "desktop": { "value": { From 15d1749d9beb6142bcbb7f667d2f44abbd0847a7 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Wed, 10 Jul 2024 08:12:11 -0400 Subject: [PATCH 2/2] Add missing hover token to link --- build/figma/figma.tokens.json | 12 ++++-------- build/web/css/.css | 2 +- build/web/css/components.css | 2 +- build/web/css/components/link.css | 2 +- build/web/css/tokens.css | 2 +- build/web/scss/.scss | 2 +- build/web/scss/components.scss | 2 +- build/web/scss/components/link.scss | 2 +- build/web/scss/tokens.scss | 2 +- tokens/components/link/tokens.json | 12 ++++-------- 10 files changed, 16 insertions(+), 24 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index df26c08b..a44cdbd9 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -284,14 +284,6 @@ "type": "typography" } }, - "hover": { - "decoration": { - "thickness": { - "value": "0.125rem", - "type": "borderWidth" - } - } - }, "regular": { "desktop": { "value": { @@ -319,6 +311,10 @@ "type": "borderWidth" } }, + "hover-decoration-thickness": { + "value": "0.125rem", + "type": "borderWidth" + }, "underline": { "offset": { "value": "0.25rem", diff --git a/build/web/css/.css b/build/web/css/.css index 8dfd0f64..ae38497c 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -62,10 +62,10 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; - --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; + --gcds-link-hover-decoration-thickness: 0.125rem; --gcds-link-underline-offset: 0.25rem; --gcds-text-light: #ffffff; /* Global color: text light */ --gcds-text-primary: #333333; /* Global color: text primary */ diff --git a/build/web/css/components.css b/build/web/css/components.css index e4bf4cea..71da6448 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -11,10 +11,10 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; - --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; + --gcds-link-hover-decoration-thickness: 0.125rem; --gcds-link-underline-offset: 0.25rem; --gcds-text-character-limit: 65ch; --gcds-text-role-light: #ffffff; diff --git a/build/web/css/components/link.css b/build/web/css/components/link.css index 4cb73c50..f37dc0da 100644 --- a/build/web/css/components/link.css +++ b/build/web/css/components/link.css @@ -11,9 +11,9 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; - --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; + --gcds-link-hover-decoration-thickness: 0.125rem; --gcds-link-underline-offset: 0.25rem; } diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 8dfd0f64..ae38497c 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -62,10 +62,10 @@ --gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; - --gcds-link-font-hover-decoration-thickness: 0.125rem; --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; --gcds-link-decoration-thickness: 0.0625rem; + --gcds-link-hover-decoration-thickness: 0.125rem; --gcds-link-underline-offset: 0.25rem; --gcds-text-light: #ffffff; /* Global color: text light */ --gcds-text-primary: #333333; /* Global color: text primary */ diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 92cd1632..4d08152e 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -60,10 +60,10 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; -$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; +$gcds-link-hover-decoration-thickness: 0.125rem; $gcds-link-underline-offset: 0.25rem; $gcds-text-light: #ffffff; // Global color: text light $gcds-text-primary: #333333; // Global color: text primary diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index d07706cb..3c9c0e9c 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -9,10 +9,10 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; -$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; +$gcds-link-hover-decoration-thickness: 0.125rem; $gcds-link-underline-offset: 0.25rem; $gcds-text-character-limit: 65ch; $gcds-text-role-light: #ffffff; diff --git a/build/web/scss/components/link.scss b/build/web/scss/components/link.scss index 1e6fc945..ae99e306 100644 --- a/build/web/scss/components/link.scss +++ b/build/web/scss/components/link.scss @@ -9,8 +9,8 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; -$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; +$gcds-link-hover-decoration-thickness: 0.125rem; $gcds-link-underline-offset: 0.25rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index 92cd1632..4d08152e 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -60,10 +60,10 @@ $gcds-link-focus-border-radius: 0.1875rem; $gcds-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-link-font-small-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; -$gcds-link-font-hover-decoration-thickness: 0.125rem; $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif; $gcds-link-decoration-thickness: 0.0625rem; +$gcds-link-hover-decoration-thickness: 0.125rem; $gcds-link-underline-offset: 0.25rem; $gcds-text-light: #ffffff; // Global color: text light $gcds-text-primary: #333333; // Global color: text primary diff --git a/tokens/components/link/tokens.json b/tokens/components/link/tokens.json index fa48bee5..21fa2e4f 100644 --- a/tokens/components/link/tokens.json +++ b/tokens/components/link/tokens.json @@ -51,14 +51,6 @@ "type": "typography" } }, - "hover": { - "decoration": { - "thickness": { - "value": "{border.width.md.value}", - "type": "borderWidth" - } - } - }, "regular": { "desktop": { "value": { @@ -86,6 +78,10 @@ "type": "borderWidth" } }, + "hover-decoration-thickness": { + "value": "{border.width.md.value}", + "type": "borderWidth" + }, "underline": { "offset": { "value": "{border.width.lg.value}",