diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 0991b887..a44cdbd9 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -311,6 +311,10 @@ "type": "borderWidth" } }, + "hover-decoration-thickness": { + "value": "0.125rem", + "type": "borderWidth" + }, "underline": { "offset": { "value": "0.25rem", @@ -1615,6 +1619,10 @@ "type": "typography" } } + }, + "maxWidth": { + "value": "34.125rem", + "type": "sizing" } }, "checkbox": { diff --git a/build/web/css/.css b/build/web/css/.css index 752309de..ae38497c 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -65,6 +65,7 @@ --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 */ @@ -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..71da6448 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -14,6 +14,7 @@ --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; @@ -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..f37dc0da 100644 --- a/build/web/css/components/link.css +++ b/build/web/css/components/link.css @@ -14,5 +14,6 @@ --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 752309de..ae38497c 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -65,6 +65,7 @@ --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 */ @@ -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..4d08152e 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -63,6 +63,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa $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 @@ -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..3c9c0e9c 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -12,6 +12,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa $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; @@ -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..ae99e306 100644 --- a/build/web/scss/components/link.scss +++ b/build/web/scss/components/link.scss @@ -12,4 +12,5 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa $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 245c1606..4d08152e 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -63,6 +63,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa $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 @@ -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..21fa2e4f 100644 --- a/tokens/components/link/tokens.json +++ b/tokens/components/link/tokens.json @@ -78,6 +78,10 @@ "type": "borderWidth" } }, + "hover-decoration-thickness": { + "value": "{border.width.md.value}", + "type": "borderWidth" + }, "underline": { "offset": { "value": "{border.width.lg.value}",