From 946bbfce254ed16b98767e35fd5a4a89b6823135 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 19 Oct 2023 10:57:20 -0700 Subject: [PATCH 1/2] add gcds-text tokens --- build/figma/figma.tokens.json | 132 +++++++++++++++++++++++++++ build/web/css/.css | 27 +++++- build/web/css/components.css | 27 +++++- build/web/css/components/text.css | 45 +++++++++ build/web/css/tokens.css | 27 +++++- build/web/scss/.scss | 27 +++++- build/web/scss/components.scss | 27 +++++- build/web/scss/components/text.scss | 42 +++++++++ build/web/scss/tokens.scss | 27 +++++- package.json | 2 +- tokens/components/text/tokens.json | 136 ++++++++++++++++++++++++++++ 11 files changed, 512 insertions(+), 7 deletions(-) create mode 100644 build/web/css/components/text.css create mode 100644 build/web/scss/components/text.scss create mode 100644 tokens/components/text/tokens.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 3110844e..1263eec8 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -264,6 +264,138 @@ "secondary": { "value": "#43474E", "type": "color" + }, + "characterLimit": { + "value": "65ch", + "type": "sizing" + }, + "role": { + "light": { + "value": "#FFF", + "type": "color" + }, + "primary": { + "value": "#333333", + "type": "color" + }, + "secondary": { + "value": "#43474E", + "type": "color" + } + }, + "size": { + "body": { + "desktop": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "120%", + "fontSize": "1.25rem" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "150%", + "fontSize": "1rem" + }, + "type": "typography" + } + }, + "caption": { + "desktop": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "135%", + "fontSize": "1.1111111111111112rem" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "140.625%", + "fontSize": "0.8888888888888888rem" + }, + "type": "typography" + } + } + }, + "spacing": { + "0": { + "value": "0", + "type": "spacing" + }, + "50": { + "value": "0.1875rem", + "type": "spacing" + }, + "100": { + "value": "0.375rem", + "type": "spacing" + }, + "150": { + "value": "0.5625rem", + "type": "spacing" + }, + "200": { + "value": "0.75rem", + "type": "spacing" + }, + "250": { + "value": "0.9375rem", + "type": "spacing" + }, + "300": { + "value": "1.125rem", + "type": "spacing" + }, + "400": { + "value": "1.5rem", + "type": "spacing" + }, + "450": { + "value": "2.25rem", + "type": "spacing" + }, + "500": { + "value": "3rem", + "type": "spacing" + }, + "550": { + "value": "3.75rem", + "type": "spacing" + }, + "600": { + "value": "4.5rem", + "type": "spacing" + }, + "700": { + "value": "6rem", + "type": "spacing" + }, + "800": { + "value": "7.5rem", + "type": "spacing" + }, + "900": { + "value": "9rem", + "type": "spacing" + }, + "1000": { + "value": "10.5rem", + "type": "spacing" + } + }, + "weight": { + "bold": { + "value": "700", + "type": "fontWeights" + } } }, "container": { diff --git a/build/web/css/.css b/build/web/css/.css index 19506182..afef81e7 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Fri, 13 Oct 2023 21:38:05 GMT + * Generated on Thu, 19 Oct 2023 17:50:31 GMT */ :root { @@ -59,6 +59,31 @@ --gcds-text-light: #ffffff; /* Global color: text light */ --gcds-text-primary: #333333; /* Global color: text primary */ --gcds-text-secondary: #43474e; /* Global color: text secondary */ + --gcds-text-character-limit: 65ch; + --gcds-text-role-light: #ffffff; + --gcds-text-role-primary: #333333; + --gcds-text-role-secondary: #43474e; + --gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; + --gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; + --gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; + --gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-text-spacing-0: 0; + --gcds-text-spacing-50: 0.1875rem; + --gcds-text-spacing-100: 0.375rem; + --gcds-text-spacing-150: 0.5625rem; + --gcds-text-spacing-200: 0.75rem; + --gcds-text-spacing-250: 0.9375rem; + --gcds-text-spacing-300: 1.125rem; + --gcds-text-spacing-400: 1.5rem; + --gcds-text-spacing-450: 2.25rem; + --gcds-text-spacing-500: 3rem; + --gcds-text-spacing-550: 3.75rem; + --gcds-text-spacing-600: 4.5rem; + --gcds-text-spacing-700: 6rem; + --gcds-text-spacing-800: 7.5rem; + --gcds-text-spacing-900: 9rem; + --gcds-text-spacing-1000: 10.5rem; + --gcds-text-weight-bold: 700; --gcds-container-xs: 20rem; --gcds-container-sm: 30rem; --gcds-container-md: 48rem; diff --git a/build/web/css/components.css b/build/web/css/components.css index cf33f069..441bb557 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Fri, 13 Oct 2023 21:38:05 GMT + * Generated on Thu, 19 Oct 2023 17:50:31 GMT */ :root { @@ -9,6 +9,31 @@ --gcds-link-focus-outline-width: 0.1875rem; --gcds-link-focus-text: #ffffff; --gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; + --gcds-text-character-limit: 65ch; + --gcds-text-role-light: #ffffff; + --gcds-text-role-primary: #333333; + --gcds-text-role-secondary: #43474e; + --gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; + --gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; + --gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; + --gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-text-spacing-0: 0; + --gcds-text-spacing-50: 0.1875rem; + --gcds-text-spacing-100: 0.375rem; + --gcds-text-spacing-150: 0.5625rem; + --gcds-text-spacing-200: 0.75rem; + --gcds-text-spacing-250: 0.9375rem; + --gcds-text-spacing-300: 1.125rem; + --gcds-text-spacing-400: 1.5rem; + --gcds-text-spacing-450: 2.25rem; + --gcds-text-spacing-500: 3rem; + --gcds-text-spacing-550: 3.75rem; + --gcds-text-spacing-600: 4.5rem; + --gcds-text-spacing-700: 6rem; + --gcds-text-spacing-800: 7.5rem; + --gcds-text-spacing-900: 9rem; + --gcds-text-spacing-1000: 10.5rem; + --gcds-text-weight-bold: 700; --gcds-container-border: 0.0625rem solid #7d828b; --gcds-container-size-xs: 20rem; --gcds-container-size-sm: 30rem; diff --git a/build/web/css/components/text.css b/build/web/css/components/text.css new file mode 100644 index 00000000..d12bb1bd --- /dev/null +++ b/build/web/css/components/text.css @@ -0,0 +1,45 @@ +/** + * Do not edit directly + * Generated on Thu, 19 Oct 2023 17:50:31 GMT + */ + +:root { + --gcds-text-character-limit: 65ch; + --gcds-text-role-light: #ffffff; + --gcds-text-role-primary: #333333; + --gcds-text-role-secondary: #43474e; + --gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; + --gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; + --gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; + --gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-text-spacing-0: 0; + --gcds-text-spacing-50: 0.1875rem; + --gcds-text-spacing-100: 0.375rem; + --gcds-text-spacing-150: 0.5625rem; + --gcds-text-spacing-200: 0.75rem; + --gcds-text-spacing-250: 0.9375rem; + --gcds-text-spacing-300: 1.125rem; + --gcds-text-spacing-400: 1.5rem; + --gcds-text-spacing-450: 2.25rem; + --gcds-text-spacing-500: 3rem; + --gcds-text-spacing-550: 3.75rem; + --gcds-text-spacing-600: 4.5rem; + --gcds-text-spacing-700: 6rem; + --gcds-text-spacing-800: 7.5rem; + --gcds-text-spacing-900: 9rem; + --gcds-text-spacing-1000: 10.5rem; + --gcds-text-weight-bold: 700; + --gcds-textarea-border-radius: 0.1875rem; + --gcds-textarea-border-width: 0.125rem; + --gcds-textarea-danger-border: #d3080c; + --gcds-textarea-default-background: #ffffff; + --gcds-textarea-default-text: #333333; + --gcds-textarea-disabled-background: #d6d9dd; + --gcds-textarea-disabled-text: #545961; + --gcds-textarea-focus-text: #0535d2; + --gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif; + --gcds-textarea-margin: 0 0 1.5rem; + --gcds-textarea-min-height: 3rem; + --gcds-textarea-outline-width: 0.1875rem; + --gcds-textarea-padding: 0.75rem; +} diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 19506182..afef81e7 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Fri, 13 Oct 2023 21:38:05 GMT + * Generated on Thu, 19 Oct 2023 17:50:31 GMT */ :root { @@ -59,6 +59,31 @@ --gcds-text-light: #ffffff; /* Global color: text light */ --gcds-text-primary: #333333; /* Global color: text primary */ --gcds-text-secondary: #43474e; /* Global color: text secondary */ + --gcds-text-character-limit: 65ch; + --gcds-text-role-light: #ffffff; + --gcds-text-role-primary: #333333; + --gcds-text-role-secondary: #43474e; + --gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; + --gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; + --gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; + --gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; + --gcds-text-spacing-0: 0; + --gcds-text-spacing-50: 0.1875rem; + --gcds-text-spacing-100: 0.375rem; + --gcds-text-spacing-150: 0.5625rem; + --gcds-text-spacing-200: 0.75rem; + --gcds-text-spacing-250: 0.9375rem; + --gcds-text-spacing-300: 1.125rem; + --gcds-text-spacing-400: 1.5rem; + --gcds-text-spacing-450: 2.25rem; + --gcds-text-spacing-500: 3rem; + --gcds-text-spacing-550: 3.75rem; + --gcds-text-spacing-600: 4.5rem; + --gcds-text-spacing-700: 6rem; + --gcds-text-spacing-800: 7.5rem; + --gcds-text-spacing-900: 9rem; + --gcds-text-spacing-1000: 10.5rem; + --gcds-text-weight-bold: 700; --gcds-container-xs: 20rem; --gcds-container-sm: 30rem; --gcds-container-md: 48rem; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index e2da1ebe..63d5e0ec 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 13 Oct 2023 21:38:05 GMT +// Generated on Thu, 19 Oct 2023 17:50:30 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -57,6 +57,31 @@ $gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-text-light: #ffffff; // Global color: text light $gcds-text-primary: #333333; // Global color: text primary $gcds-text-secondary: #43474e; // Global color: text secondary +$gcds-text-character-limit: 65ch; +$gcds-text-role-light: #ffffff; +$gcds-text-role-primary: #333333; +$gcds-text-role-secondary: #43474e; +$gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; +$gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; +$gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; +$gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-text-spacing-0: 0; +$gcds-text-spacing-50: 0.1875rem; +$gcds-text-spacing-100: 0.375rem; +$gcds-text-spacing-150: 0.5625rem; +$gcds-text-spacing-200: 0.75rem; +$gcds-text-spacing-250: 0.9375rem; +$gcds-text-spacing-300: 1.125rem; +$gcds-text-spacing-400: 1.5rem; +$gcds-text-spacing-450: 2.25rem; +$gcds-text-spacing-500: 3rem; +$gcds-text-spacing-550: 3.75rem; +$gcds-text-spacing-600: 4.5rem; +$gcds-text-spacing-700: 6rem; +$gcds-text-spacing-800: 7.5rem; +$gcds-text-spacing-900: 9rem; +$gcds-text-spacing-1000: 10.5rem; +$gcds-text-weight-bold: 700; $gcds-container-xs: 20rem; $gcds-container-sm: 30rem; $gcds-container-md: 48rem; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index b7e7a2ab..fb66a220 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -1,12 +1,37 @@ // Do not edit directly -// Generated on Fri, 13 Oct 2023 21:38:05 GMT +// Generated on Thu, 19 Oct 2023 17:50:30 GMT $gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-focus-background: #0535d2; $gcds-link-focus-outline-width: 0.1875rem; $gcds-link-focus-text: #ffffff; $gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; +$gcds-text-character-limit: 65ch; +$gcds-text-role-light: #ffffff; +$gcds-text-role-primary: #333333; +$gcds-text-role-secondary: #43474e; +$gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; +$gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; +$gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; +$gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-text-spacing-0: 0; +$gcds-text-spacing-50: 0.1875rem; +$gcds-text-spacing-100: 0.375rem; +$gcds-text-spacing-150: 0.5625rem; +$gcds-text-spacing-200: 0.75rem; +$gcds-text-spacing-250: 0.9375rem; +$gcds-text-spacing-300: 1.125rem; +$gcds-text-spacing-400: 1.5rem; +$gcds-text-spacing-450: 2.25rem; +$gcds-text-spacing-500: 3rem; +$gcds-text-spacing-550: 3.75rem; +$gcds-text-spacing-600: 4.5rem; +$gcds-text-spacing-700: 6rem; +$gcds-text-spacing-800: 7.5rem; +$gcds-text-spacing-900: 9rem; +$gcds-text-spacing-1000: 10.5rem; +$gcds-text-weight-bold: 700; $gcds-container-border: 0.0625rem solid #7d828b; $gcds-container-size-xs: 20rem; $gcds-container-size-sm: 30rem; diff --git a/build/web/scss/components/text.scss b/build/web/scss/components/text.scss new file mode 100644 index 00000000..dcf95a01 --- /dev/null +++ b/build/web/scss/components/text.scss @@ -0,0 +1,42 @@ + +// Do not edit directly +// Generated on Thu, 19 Oct 2023 17:50:30 GMT + +$gcds-text-character-limit: 65ch; +$gcds-text-role-light: #ffffff; +$gcds-text-role-primary: #333333; +$gcds-text-role-secondary: #43474e; +$gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; +$gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; +$gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; +$gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-text-spacing-0: 0; +$gcds-text-spacing-50: 0.1875rem; +$gcds-text-spacing-100: 0.375rem; +$gcds-text-spacing-150: 0.5625rem; +$gcds-text-spacing-200: 0.75rem; +$gcds-text-spacing-250: 0.9375rem; +$gcds-text-spacing-300: 1.125rem; +$gcds-text-spacing-400: 1.5rem; +$gcds-text-spacing-450: 2.25rem; +$gcds-text-spacing-500: 3rem; +$gcds-text-spacing-550: 3.75rem; +$gcds-text-spacing-600: 4.5rem; +$gcds-text-spacing-700: 6rem; +$gcds-text-spacing-800: 7.5rem; +$gcds-text-spacing-900: 9rem; +$gcds-text-spacing-1000: 10.5rem; +$gcds-text-weight-bold: 700; +$gcds-textarea-border-radius: 0.1875rem; +$gcds-textarea-border-width: 0.125rem; +$gcds-textarea-danger-border: #d3080c; +$gcds-textarea-default-background: #ffffff; +$gcds-textarea-default-text: #333333; +$gcds-textarea-disabled-background: #d6d9dd; +$gcds-textarea-disabled-text: #545961; +$gcds-textarea-focus-text: #0535d2; +$gcds-textarea-font: 400 1.25rem/120% "Noto Sans", sans-serif; +$gcds-textarea-margin: 0 0 1.5rem; +$gcds-textarea-min-height: 3rem; +$gcds-textarea-outline-width: 0.1875rem; +$gcds-textarea-padding: 0.75rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index e2da1ebe..63d5e0ec 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 13 Oct 2023 21:38:05 GMT +// Generated on Thu, 19 Oct 2023 17:50:30 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -57,6 +57,31 @@ $gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-text-light: #ffffff; // Global color: text light $gcds-text-primary: #333333; // Global color: text primary $gcds-text-secondary: #43474e; // Global color: text secondary +$gcds-text-character-limit: 65ch; +$gcds-text-role-light: #ffffff; +$gcds-text-role-primary: #333333; +$gcds-text-role-secondary: #43474e; +$gcds-text-size-body-desktop: 400 1.25rem/120% "Noto Sans", sans-serif; +$gcds-text-size-body-mobile: 400 1rem/150% "Noto Sans", sans-serif; +$gcds-text-size-caption-desktop: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; +$gcds-text-size-caption-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sans-serif; +$gcds-text-spacing-0: 0; +$gcds-text-spacing-50: 0.1875rem; +$gcds-text-spacing-100: 0.375rem; +$gcds-text-spacing-150: 0.5625rem; +$gcds-text-spacing-200: 0.75rem; +$gcds-text-spacing-250: 0.9375rem; +$gcds-text-spacing-300: 1.125rem; +$gcds-text-spacing-400: 1.5rem; +$gcds-text-spacing-450: 2.25rem; +$gcds-text-spacing-500: 3rem; +$gcds-text-spacing-550: 3.75rem; +$gcds-text-spacing-600: 4.5rem; +$gcds-text-spacing-700: 6rem; +$gcds-text-spacing-800: 7.5rem; +$gcds-text-spacing-900: 9rem; +$gcds-text-spacing-1000: 10.5rem; +$gcds-text-weight-bold: 700; $gcds-container-xs: 20rem; $gcds-container-sm: 30rem; $gcds-container-md: 48rem; diff --git a/package.json b/package.json index 1eddab1b..7933546b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-tokens", - "version": "1.8.0", + "version": "1.9.0", "author": "Government of Canada | Gouvernement du Canada", "description": "GC Design System Tokens", "homepage": "https://design-system.alpha.canada.ca/", diff --git a/tokens/components/text/tokens.json b/tokens/components/text/tokens.json new file mode 100644 index 00000000..b3f7aa8f --- /dev/null +++ b/tokens/components/text/tokens.json @@ -0,0 +1,136 @@ +{ + "text": { + "characterLimit": { + "value": "65ch", + "type": "sizing" + }, + "role": { + "light": { + "value": "{text.light.value}", + "type": "color" + }, + "primary": { + "value": "{text.primary.value}", + "type": "color" + }, + "secondary": { + "value": "{text.secondary.value}", + "type": "color" + } + }, + "size": { + "body": { + "desktop": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.text}", + "fontSize": "{fontSizes.text}" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.textMobile}", + "fontSize": "{fontSizes.textMobile}" + }, + "type": "typography" + } + }, + "caption": { + "desktop": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.caption}", + "fontSize": "{fontSizes.caption}" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.captionMobile}", + "fontSize": "{fontSizes.captionMobile}" + }, + "type": "typography" + } + } + }, + "spacing": { + "0": { + "value": "{spacing.0.value}", + "type": "spacing" + }, + "50": { + "value": "{spacing.50.value}", + "type": "spacing" + }, + "100": { + "value": "{spacing.100.value}", + "type": "spacing" + }, + "150": { + "value": "{spacing.150.value}", + "type": "spacing" + }, + "200": { + "value": "{spacing.200.value}", + "type": "spacing" + }, + "250": { + "value": "{spacing.250.value}", + "type": "spacing" + }, + "300": { + "value": "{spacing.300.value}", + "type": "spacing" + }, + "400": { + "value": "{spacing.400.value}", + "type": "spacing" + }, + "450": { + "value": "{spacing.450.value}", + "type": "spacing" + }, + "500": { + "value": "{spacing.500.value}", + "type": "spacing" + }, + "550": { + "value": "{spacing.550.value}", + "type": "spacing" + }, + "600": { + "value": "{spacing.600.value}", + "type": "spacing" + }, + "700": { + "value": "{spacing.700.value}", + "type": "spacing" + }, + "800": { + "value": "{spacing.800.value}", + "type": "spacing" + }, + "900": { + "value": "{spacing.900.value}", + "type": "spacing" + }, + "1000": { + "value": "{spacing.1000.value}", + "type": "spacing" + } + }, + "weight": { + "bold": { + "value": "{fontWeights.bold.value}", + "type": "fontWeights" + } + } + } +} From 03639c3bfaafcfbaae36f21288a58fdd870755eb Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 19 Oct 2023 11:30:07 -0700 Subject: [PATCH 2/2] add character limit tokens for gcds-heading --- build/figma/figma.tokens.json | 26 ++++++++++++++++++++++++++ build/web/css/.css | 8 +++++++- build/web/css/components.css | 8 +++++++- build/web/css/components/heading.css | 8 +++++++- build/web/scss/.scss | 8 +++++++- build/web/scss/components.scss | 8 +++++++- build/web/scss/components/heading.scss | 8 +++++++- build/web/scss/tokens.scss | 8 +++++++- tokens/components/heading/tokens.json | 26 ++++++++++++++++++++++++++ 9 files changed, 101 insertions(+), 7 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 1263eec8..2bbe280a 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -2547,6 +2547,32 @@ } }, "heading": { + "characterLimit": { + "h1": { + "value": "31ch", + "type": "sizing" + }, + "h2": { + "value": "35ch", + "type": "sizing" + }, + "h3": { + "value": "40ch", + "type": "sizing" + }, + "h4": { + "value": "45ch", + "type": "sizing" + }, + "h5": { + "value": "50ch", + "type": "sizing" + }, + "h6": { + "value": "57ch", + "type": "sizing" + } + }, "default": { "text": { "value": "#333333", diff --git a/build/web/css/.css b/build/web/css/.css index afef81e7..58258b24 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 19 Oct 2023 17:50:31 GMT + * Generated on Thu, 19 Oct 2023 18:11:33 GMT */ :root { @@ -484,6 +484,12 @@ --gcds-header-container-max-width: 71.25rem; --gcds-header-margin: 0 0 0.75rem; --gcds-header-skiptonav-top: 1.5rem; + --gcds-heading-character-limit-h1: 31ch; + --gcds-heading-character-limit-h2: 35ch; + --gcds-heading-character-limit-h3: 40ch; + --gcds-heading-character-limit-h4: 45ch; + --gcds-heading-character-limit-h5: 50ch; + --gcds-heading-character-limit-h6: 57ch; --gcds-heading-default-text: #333333; --gcds-heading-h1-border-background: #d3080c; --gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/css/components.css b/build/web/css/components.css index 441bb557..641dcbac 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 19 Oct 2023 17:50:31 GMT + * Generated on Thu, 19 Oct 2023 18:11:33 GMT */ :root { @@ -346,6 +346,12 @@ --gcds-header-container-max-width: 71.25rem; --gcds-header-margin: 0 0 0.75rem; --gcds-header-skiptonav-top: 1.5rem; + --gcds-heading-character-limit-h1: 31ch; + --gcds-heading-character-limit-h2: 35ch; + --gcds-heading-character-limit-h3: 40ch; + --gcds-heading-character-limit-h4: 45ch; + --gcds-heading-character-limit-h5: 50ch; + --gcds-heading-character-limit-h6: 57ch; --gcds-heading-default-text: #333333; --gcds-heading-h1-border-background: #d3080c; --gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/css/components/heading.css b/build/web/css/components/heading.css index 445e01c5..2bac079f 100644 --- a/build/web/css/components/heading.css +++ b/build/web/css/components/heading.css @@ -1,9 +1,15 @@ /** * Do not edit directly - * Generated on Thu, 05 Oct 2023 20:55:52 GMT + * Generated on Thu, 19 Oct 2023 18:11:33 GMT */ :root { + --gcds-heading-character-limit-h1: 31ch; + --gcds-heading-character-limit-h2: 35ch; + --gcds-heading-character-limit-h3: 40ch; + --gcds-heading-character-limit-h4: 45ch; + --gcds-heading-character-limit-h5: 50ch; + --gcds-heading-character-limit-h6: 57ch; --gcds-heading-default-text: #333333; --gcds-heading-h1-border-background: #d3080c; --gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 63d5e0ec..8e29a0d3 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 19 Oct 2023 17:50:30 GMT +// Generated on Thu, 19 Oct 2023 18:11:33 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -482,6 +482,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem; $gcds-header-container-max-width: 71.25rem; $gcds-header-margin: 0 0 0.75rem; $gcds-header-skiptonav-top: 1.5rem; +$gcds-heading-character-limit-h1: 31ch; +$gcds-heading-character-limit-h2: 35ch; +$gcds-heading-character-limit-h3: 40ch; +$gcds-heading-character-limit-h4: 45ch; +$gcds-heading-character-limit-h5: 50ch; +$gcds-heading-character-limit-h6: 57ch; $gcds-heading-default-text: #333333; $gcds-heading-h1-border-background: #d3080c; $gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index fb66a220..e93f045d 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 19 Oct 2023 17:50:30 GMT +// Generated on Thu, 19 Oct 2023 18:11:33 GMT $gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-link-focus-background: #0535d2; @@ -344,6 +344,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem; $gcds-header-container-max-width: 71.25rem; $gcds-header-margin: 0 0 0.75rem; $gcds-header-skiptonav-top: 1.5rem; +$gcds-heading-character-limit-h1: 31ch; +$gcds-heading-character-limit-h2: 35ch; +$gcds-heading-character-limit-h3: 40ch; +$gcds-heading-character-limit-h4: 45ch; +$gcds-heading-character-limit-h5: 50ch; +$gcds-heading-character-limit-h6: 57ch; $gcds-heading-default-text: #333333; $gcds-heading-h1-border-background: #d3080c; $gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/scss/components/heading.scss b/build/web/scss/components/heading.scss index b5244301..6dc064bb 100644 --- a/build/web/scss/components/heading.scss +++ b/build/web/scss/components/heading.scss @@ -1,7 +1,13 @@ // Do not edit directly -// Generated on Thu, 05 Oct 2023 20:55:52 GMT +// Generated on Thu, 19 Oct 2023 18:11:33 GMT +$gcds-heading-character-limit-h1: 31ch; +$gcds-heading-character-limit-h2: 35ch; +$gcds-heading-character-limit-h3: 40ch; +$gcds-heading-character-limit-h4: 45ch; +$gcds-heading-character-limit-h5: 50ch; +$gcds-heading-character-limit-h6: 57ch; $gcds-heading-default-text: #333333; $gcds-heading-h1-border-background: #d3080c; $gcds-heading-h1-border-height: 0.375rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index 63d5e0ec..8e29a0d3 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 19 Oct 2023 17:50:30 GMT +// Generated on Thu, 19 Oct 2023 18:11:33 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -482,6 +482,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem; $gcds-header-container-max-width: 71.25rem; $gcds-header-margin: 0 0 0.75rem; $gcds-header-skiptonav-top: 1.5rem; +$gcds-heading-character-limit-h1: 31ch; +$gcds-heading-character-limit-h2: 35ch; +$gcds-heading-character-limit-h3: 40ch; +$gcds-heading-character-limit-h4: 45ch; +$gcds-heading-character-limit-h5: 50ch; +$gcds-heading-character-limit-h6: 57ch; $gcds-heading-default-text: #333333; $gcds-heading-h1-border-background: #d3080c; $gcds-heading-h1-border-height: 0.375rem; diff --git a/tokens/components/heading/tokens.json b/tokens/components/heading/tokens.json index c61d0df6..c9df21d4 100644 --- a/tokens/components/heading/tokens.json +++ b/tokens/components/heading/tokens.json @@ -1,5 +1,31 @@ { "heading": { + "characterLimit": { + "h1": { + "value": "31ch", + "type": "sizing" + }, + "h2": { + "value": "35ch", + "type": "sizing" + }, + "h3": { + "value": "40ch", + "type": "sizing" + }, + "h4": { + "value": "45ch", + "type": "sizing" + }, + "h5": { + "value": "50ch", + "type": "sizing" + }, + "h6": { + "value": "57ch", + "type": "sizing" + } + }, "default": { "text": { "value": "{text.primary.value}",