Skip to content

Commit

Permalink
Merge pull request #132 from cds-snc/add-new-container-tokens
Browse files Browse the repository at this point in the history 
add container component tokens
  • Loading branch information
@melaniebmn
melaniebmn authored Jun 29, 2023
2 parents 7c62730 + 2e82963 commit 748986e
Show file tree
Hide file tree
Showing 11 changed files with 385 additions and 10 deletions.
92 changes: 92 additions & 0 deletions build/figma/figma.tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
24 changes: 23 additions & 1 deletion build/web/css/.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
24 changes: 23 additions & 1 deletion build/web/css/components.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
29 changes: 29 additions & 0 deletions build/web/css/components/container.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 23 additions & 1 deletion build/web/css/tokens.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
26 changes: 24 additions & 2 deletions build/web/scss/.scss
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
$gcds-verify-banner-toggle-font-weight: 700;
26 changes: 24 additions & 2 deletions build/web/scss/components.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
$gcds-verify-banner-toggle-font-weight: 700;
26 changes: 26 additions & 0 deletions build/web/scss/components/container.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
26 changes: 24 additions & 2 deletions build/web/scss/tokens.scss
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
$gcds-verify-banner-toggle-font-weight: 700;
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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/",
Expand Down
Loading

0 comments on commit 748986e

Please sign in to comment.