From 2e829637bc7247bf3bc42e1e4852ad28cc7b2485 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 29 Jun 2023 13:57:51 -0700 Subject: [PATCH] add container component tokens --- build/figma/figma.tokens.json | 92 +++++++++++++++++++++++ build/web/css/.css | 24 +++++- build/web/css/components.css | 24 +++++- build/web/css/components/container.css | 29 +++++++ build/web/css/tokens.css | 24 +++++- build/web/scss/.scss | 26 ++++++- build/web/scss/components.scss | 26 ++++++- build/web/scss/components/container.scss | 26 +++++++ build/web/scss/tokens.scss | 26 ++++++- package.json | 2 +- tokens/components/container/tokens.json | 96 ++++++++++++++++++++++++ 11 files changed, 385 insertions(+), 10 deletions(-) create mode 100644 build/web/css/components/container.css create mode 100644 build/web/scss/components/container.scss create mode 100644 tokens/components/container/tokens.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index c3778133..7dd619fa 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -254,6 +254,98 @@ "full": { "value": "100%", "type": "sizing" + }, + "size": { + "xs": { + "value": "20rem", + "type": "sizing" + }, + "sm": { + "value": "30rem", + "type": "sizing" + }, + "md": { + "value": "48rem", + "type": "sizing" + }, + "lg": { + "value": "64rem", + "type": "sizing" + }, + "xl": { + "value": "75rem", + "type": "sizing" + }, + "full": { + "value": "100%", + "type": "sizing" + } + }, + "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" + } } }, "outline": { diff --git a/build/web/css/.css b/build/web/css/.css index 60c6d134..e6737aa8 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 18:11:06 GMT + * Generated on Thu, 29 Jun 2023 20:51:42 GMT */ :root { @@ -60,6 +60,28 @@ --gcds-container-lg: 64rem; --gcds-container-xl: 75rem; --gcds-container-full: 100%; + --gcds-container-size-xs: 20rem; + --gcds-container-size-sm: 30rem; + --gcds-container-size-md: 48rem; + --gcds-container-size-lg: 64rem; + --gcds-container-size-xl: 75rem; + --gcds-container-size-full: 100%; + --gcds-container-spacing-0: 0; + --gcds-container-spacing-50: 0.1875rem; + --gcds-container-spacing-100: 0.375rem; + --gcds-container-spacing-150: 0.5625rem; + --gcds-container-spacing-200: 0.75rem; + --gcds-container-spacing-250: 0.9375rem; + --gcds-container-spacing-300: 1.125rem; + --gcds-container-spacing-400: 1.5rem; + --gcds-container-spacing-450: 2.25rem; + --gcds-container-spacing-500: 3rem; + --gcds-container-spacing-550: 3.75rem; + --gcds-container-spacing-600: 4.5rem; + --gcds-container-spacing-700: 6rem; + --gcds-container-spacing-800: 7.5rem; + --gcds-container-spacing-900: 9rem; + --gcds-container-spacing-1000: 10.5rem; --gcds-outline-width: 0.1875rem; /* Global outline: width */ --gcds-spacing-0: 0; --gcds-spacing-50: 0.1875rem; diff --git a/build/web/css/components.css b/build/web/css/components.css index b7938a71..7e46c273 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -1,9 +1,31 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 18:11:06 GMT + * Generated on Thu, 29 Jun 2023 20:51:42 GMT */ :root { + --gcds-container-size-xs: 20rem; + --gcds-container-size-sm: 30rem; + --gcds-container-size-md: 48rem; + --gcds-container-size-lg: 64rem; + --gcds-container-size-xl: 75rem; + --gcds-container-size-full: 100%; + --gcds-container-spacing-0: 0; + --gcds-container-spacing-50: 0.1875rem; + --gcds-container-spacing-100: 0.375rem; + --gcds-container-spacing-150: 0.5625rem; + --gcds-container-spacing-200: 0.75rem; + --gcds-container-spacing-250: 0.9375rem; + --gcds-container-spacing-300: 1.125rem; + --gcds-container-spacing-400: 1.5rem; + --gcds-container-spacing-450: 2.25rem; + --gcds-container-spacing-500: 3rem; + --gcds-container-spacing-550: 3.75rem; + --gcds-container-spacing-600: 4.5rem; + --gcds-container-spacing-700: 6rem; + --gcds-container-spacing-800: 7.5rem; + --gcds-container-spacing-900: 9rem; + --gcds-container-spacing-1000: 10.5rem; --gcds-alert-border-width: 0.375rem; --gcds-alert-button-border-radius: 0.375rem; --gcds-alert-button-border-width: 0.125rem; diff --git a/build/web/css/components/container.css b/build/web/css/components/container.css new file mode 100644 index 00000000..03682edb --- /dev/null +++ b/build/web/css/components/container.css @@ -0,0 +1,29 @@ +/** + * Do not edit directly + * Generated on Thu, 29 Jun 2023 20:51:42 GMT + */ + +:root { + --gcds-container-size-xs: 20rem; + --gcds-container-size-sm: 30rem; + --gcds-container-size-md: 48rem; + --gcds-container-size-lg: 64rem; + --gcds-container-size-xl: 75rem; + --gcds-container-size-full: 100%; + --gcds-container-spacing-0: 0; + --gcds-container-spacing-50: 0.1875rem; + --gcds-container-spacing-100: 0.375rem; + --gcds-container-spacing-150: 0.5625rem; + --gcds-container-spacing-200: 0.75rem; + --gcds-container-spacing-250: 0.9375rem; + --gcds-container-spacing-300: 1.125rem; + --gcds-container-spacing-400: 1.5rem; + --gcds-container-spacing-450: 2.25rem; + --gcds-container-spacing-500: 3rem; + --gcds-container-spacing-550: 3.75rem; + --gcds-container-spacing-600: 4.5rem; + --gcds-container-spacing-700: 6rem; + --gcds-container-spacing-800: 7.5rem; + --gcds-container-spacing-900: 9rem; + --gcds-container-spacing-1000: 10.5rem; +} diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 60c6d134..e6737aa8 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 18:11:06 GMT + * Generated on Thu, 29 Jun 2023 20:51:42 GMT */ :root { @@ -60,6 +60,28 @@ --gcds-container-lg: 64rem; --gcds-container-xl: 75rem; --gcds-container-full: 100%; + --gcds-container-size-xs: 20rem; + --gcds-container-size-sm: 30rem; + --gcds-container-size-md: 48rem; + --gcds-container-size-lg: 64rem; + --gcds-container-size-xl: 75rem; + --gcds-container-size-full: 100%; + --gcds-container-spacing-0: 0; + --gcds-container-spacing-50: 0.1875rem; + --gcds-container-spacing-100: 0.375rem; + --gcds-container-spacing-150: 0.5625rem; + --gcds-container-spacing-200: 0.75rem; + --gcds-container-spacing-250: 0.9375rem; + --gcds-container-spacing-300: 1.125rem; + --gcds-container-spacing-400: 1.5rem; + --gcds-container-spacing-450: 2.25rem; + --gcds-container-spacing-500: 3rem; + --gcds-container-spacing-550: 3.75rem; + --gcds-container-spacing-600: 4.5rem; + --gcds-container-spacing-700: 6rem; + --gcds-container-spacing-800: 7.5rem; + --gcds-container-spacing-900: 9rem; + --gcds-container-spacing-1000: 10.5rem; --gcds-outline-width: 0.1875rem; /* Global outline: width */ --gcds-spacing-0: 0; --gcds-spacing-50: 0.1875rem; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index a48a7f2d..d2210511 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 18:11:06 GMT +// Generated on Thu, 29 Jun 2023 20:51:42 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -58,6 +58,28 @@ $gcds-container-md: 48rem; $gcds-container-lg: 64rem; $gcds-container-xl: 75rem; $gcds-container-full: 100%; +$gcds-container-size-xs: 20rem; +$gcds-container-size-sm: 30rem; +$gcds-container-size-md: 48rem; +$gcds-container-size-lg: 64rem; +$gcds-container-size-xl: 75rem; +$gcds-container-size-full: 100%; +$gcds-container-spacing-0: 0; +$gcds-container-spacing-50: 0.1875rem; +$gcds-container-spacing-100: 0.375rem; +$gcds-container-spacing-150: 0.5625rem; +$gcds-container-spacing-200: 0.75rem; +$gcds-container-spacing-250: 0.9375rem; +$gcds-container-spacing-300: 1.125rem; +$gcds-container-spacing-400: 1.5rem; +$gcds-container-spacing-450: 2.25rem; +$gcds-container-spacing-500: 3rem; +$gcds-container-spacing-550: 3.75rem; +$gcds-container-spacing-600: 4.5rem; +$gcds-container-spacing-700: 6rem; +$gcds-container-spacing-800: 7.5rem; +$gcds-container-spacing-900: 9rem; +$gcds-container-spacing-1000: 10.5rem; $gcds-outline-width: 0.1875rem; // Global outline: width $gcds-spacing-0: 0; $gcds-spacing-50: 0.1875rem; @@ -586,4 +608,4 @@ $gcds-verify-banner-summary-padding: 0.75rem; $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0; $gcds-verify-banner-text: #333333; $gcds-verify-banner-toggle-text: #2b4380; -$gcds-verify-banner-toggle-font-weight: 700; \ No newline at end of file +$gcds-verify-banner-toggle-font-weight: 700; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index b7fed78a..96d8fc4a 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -1,7 +1,29 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 18:11:06 GMT +// Generated on Thu, 29 Jun 2023 20:51:42 GMT +$gcds-container-size-xs: 20rem; +$gcds-container-size-sm: 30rem; +$gcds-container-size-md: 48rem; +$gcds-container-size-lg: 64rem; +$gcds-container-size-xl: 75rem; +$gcds-container-size-full: 100%; +$gcds-container-spacing-0: 0; +$gcds-container-spacing-50: 0.1875rem; +$gcds-container-spacing-100: 0.375rem; +$gcds-container-spacing-150: 0.5625rem; +$gcds-container-spacing-200: 0.75rem; +$gcds-container-spacing-250: 0.9375rem; +$gcds-container-spacing-300: 1.125rem; +$gcds-container-spacing-400: 1.5rem; +$gcds-container-spacing-450: 2.25rem; +$gcds-container-spacing-500: 3rem; +$gcds-container-spacing-550: 3.75rem; +$gcds-container-spacing-600: 4.5rem; +$gcds-container-spacing-700: 6rem; +$gcds-container-spacing-800: 7.5rem; +$gcds-container-spacing-900: 9rem; +$gcds-container-spacing-1000: 10.5rem; $gcds-alert-border-width: 0.375rem; $gcds-alert-button-border-radius: 0.375rem; $gcds-alert-button-border-width: 0.125rem; @@ -475,4 +497,4 @@ $gcds-verify-banner-summary-padding: 0.75rem; $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0; $gcds-verify-banner-text: #333333; $gcds-verify-banner-toggle-text: #2b4380; -$gcds-verify-banner-toggle-font-weight: 700; \ No newline at end of file +$gcds-verify-banner-toggle-font-weight: 700; diff --git a/build/web/scss/components/container.scss b/build/web/scss/components/container.scss new file mode 100644 index 00000000..f85d265e --- /dev/null +++ b/build/web/scss/components/container.scss @@ -0,0 +1,26 @@ + +// Do not edit directly +// Generated on Thu, 29 Jun 2023 20:51:42 GMT + +$gcds-container-size-xs: 20rem; +$gcds-container-size-sm: 30rem; +$gcds-container-size-md: 48rem; +$gcds-container-size-lg: 64rem; +$gcds-container-size-xl: 75rem; +$gcds-container-size-full: 100%; +$gcds-container-spacing-0: 0; +$gcds-container-spacing-50: 0.1875rem; +$gcds-container-spacing-100: 0.375rem; +$gcds-container-spacing-150: 0.5625rem; +$gcds-container-spacing-200: 0.75rem; +$gcds-container-spacing-250: 0.9375rem; +$gcds-container-spacing-300: 1.125rem; +$gcds-container-spacing-400: 1.5rem; +$gcds-container-spacing-450: 2.25rem; +$gcds-container-spacing-500: 3rem; +$gcds-container-spacing-550: 3.75rem; +$gcds-container-spacing-600: 4.5rem; +$gcds-container-spacing-700: 6rem; +$gcds-container-spacing-800: 7.5rem; +$gcds-container-spacing-900: 9rem; +$gcds-container-spacing-1000: 10.5rem; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index a48a7f2d..d2210511 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 18:11:06 GMT +// Generated on Thu, 29 Jun 2023 20:51:42 GMT $gcds-color-blue-100: #d7e5f5; $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white @@ -58,6 +58,28 @@ $gcds-container-md: 48rem; $gcds-container-lg: 64rem; $gcds-container-xl: 75rem; $gcds-container-full: 100%; +$gcds-container-size-xs: 20rem; +$gcds-container-size-sm: 30rem; +$gcds-container-size-md: 48rem; +$gcds-container-size-lg: 64rem; +$gcds-container-size-xl: 75rem; +$gcds-container-size-full: 100%; +$gcds-container-spacing-0: 0; +$gcds-container-spacing-50: 0.1875rem; +$gcds-container-spacing-100: 0.375rem; +$gcds-container-spacing-150: 0.5625rem; +$gcds-container-spacing-200: 0.75rem; +$gcds-container-spacing-250: 0.9375rem; +$gcds-container-spacing-300: 1.125rem; +$gcds-container-spacing-400: 1.5rem; +$gcds-container-spacing-450: 2.25rem; +$gcds-container-spacing-500: 3rem; +$gcds-container-spacing-550: 3.75rem; +$gcds-container-spacing-600: 4.5rem; +$gcds-container-spacing-700: 6rem; +$gcds-container-spacing-800: 7.5rem; +$gcds-container-spacing-900: 9rem; +$gcds-container-spacing-1000: 10.5rem; $gcds-outline-width: 0.1875rem; // Global outline: width $gcds-spacing-0: 0; $gcds-spacing-50: 0.1875rem; @@ -586,4 +608,4 @@ $gcds-verify-banner-summary-padding: 0.75rem; $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0; $gcds-verify-banner-text: #333333; $gcds-verify-banner-toggle-text: #2b4380; -$gcds-verify-banner-toggle-font-weight: 700; \ No newline at end of file +$gcds-verify-banner-toggle-font-weight: 700; diff --git a/package.json b/package.json index b3eb0b0e..7e8a552c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-tokens", - "version": "1.3.1", + "version": "1.3.2", "author": "Government of Canada | Gouvernement du Canada", "description": "GC Design System Tokens", "homepage": "https://design-system.alpha.canada.ca/", diff --git a/tokens/components/container/tokens.json b/tokens/components/container/tokens.json new file mode 100644 index 00000000..cca85c66 --- /dev/null +++ b/tokens/components/container/tokens.json @@ -0,0 +1,96 @@ +{ + "container": { + "size": { + "xs": { + "value": "{container.xs.value}", + "type": "sizing" + }, + "sm": { + "value": "{container.sm.value}", + "type": "sizing" + }, + "md": { + "value": "{container.md.value}", + "type": "sizing" + }, + "lg": { + "value": "{container.lg.value}", + "type": "sizing" + }, + "xl": { + "value": "{container.xl.value}", + "type": "sizing" + }, + "full": { + "value": "{container.full.value}", + "type": "sizing" + } + }, + "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" + } + } + } +}