Skip to content

Commit

Permalink
feat: add new grid functionality (#205)
Browse files Browse the repository at this point in the history
  • Loading branch information
melaniebmn authored Nov 30, 2023
1 parent a14fb37 commit cfeb4df
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 200 deletions.
22 changes: 5 additions & 17 deletions build/web/css/.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 07 Nov 2023 17:39:09 GMT
* Generated on Wed, 29 Nov 2023 22:36:35 GMT
*/

:root {
Expand Down Expand Up @@ -466,22 +466,10 @@
--gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-footer-link-focus-outline-offset: 0.125rem;
--gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
--gcds-grid-gap-0: 0;
--gcds-grid-gap-50: 0.1875rem;
--gcds-grid-gap-100: 0.375rem;
--gcds-grid-gap-150: 0.5625rem;
--gcds-grid-gap-200: 0.75rem;
--gcds-grid-gap-250: 0.9375rem;
--gcds-grid-gap-300: 1.125rem;
--gcds-grid-gap-400: 1.5rem;
--gcds-grid-gap-450: 2.25rem;
--gcds-grid-gap-500: 3rem;
--gcds-grid-gap-550: 3.75rem;
--gcds-grid-gap-600: 4.5rem;
--gcds-grid-gap-700: 6rem;
--gcds-grid-gap-800: 7.5rem;
--gcds-grid-gap-900: 9rem;
--gcds-grid-gap-1000: 10.5rem;
--gcds-grid-columns-default-base: 1;
--gcds-grid-columns-default-tablet: 6;
--gcds-grid-columns-default-desktop: 12;
--gcds-grid-gap: 3rem;
--gcds-header-brand-border-color: #26374a;
--gcds-header-brand-border-width: 0.1875rem;
--gcds-header-brand-grid-gap: 0.75rem;
Expand Down
22 changes: 5 additions & 17 deletions build/web/css/components.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 07 Nov 2023 17:39:09 GMT
* Generated on Wed, 29 Nov 2023 22:36:34 GMT
*/

:root {
Expand Down Expand Up @@ -328,22 +328,10 @@
--gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-footer-link-focus-outline-offset: 0.125rem;
--gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
--gcds-grid-gap-0: 0;
--gcds-grid-gap-50: 0.1875rem;
--gcds-grid-gap-100: 0.375rem;
--gcds-grid-gap-150: 0.5625rem;
--gcds-grid-gap-200: 0.75rem;
--gcds-grid-gap-250: 0.9375rem;
--gcds-grid-gap-300: 1.125rem;
--gcds-grid-gap-400: 1.5rem;
--gcds-grid-gap-450: 2.25rem;
--gcds-grid-gap-500: 3rem;
--gcds-grid-gap-550: 3.75rem;
--gcds-grid-gap-600: 4.5rem;
--gcds-grid-gap-700: 6rem;
--gcds-grid-gap-800: 7.5rem;
--gcds-grid-gap-900: 9rem;
--gcds-grid-gap-1000: 10.5rem;
--gcds-grid-columns-default-base: 1;
--gcds-grid-columns-default-tablet: 6;
--gcds-grid-columns-default-desktop: 12;
--gcds-grid-gap: 3rem;
--gcds-header-brand-border-color: #26374a;
--gcds-header-brand-border-width: 0.1875rem;
--gcds-header-brand-grid-gap: 0.75rem;
Expand Down
22 changes: 5 additions & 17 deletions build/web/css/components/grid.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
/**
* Do not edit directly
* Generated on Thu, 22 Jun 2023 14:47:37 GMT
* Generated on Wed, 29 Nov 2023 22:36:35 GMT
*/

:root {
--gcds-grid-gap-0: 0;
--gcds-grid-gap-50: 0.1875rem;
--gcds-grid-gap-100: 0.375rem;
--gcds-grid-gap-150: 0.5625rem;
--gcds-grid-gap-200: 0.75rem;
--gcds-grid-gap-250: 0.9375rem;
--gcds-grid-gap-300: 1.125rem;
--gcds-grid-gap-400: 1.5rem;
--gcds-grid-gap-450: 2.25rem;
--gcds-grid-gap-500: 3rem;
--gcds-grid-gap-550: 3.75rem;
--gcds-grid-gap-600: 4.5rem;
--gcds-grid-gap-700: 6rem;
--gcds-grid-gap-800: 7.5rem;
--gcds-grid-gap-900: 9rem;
--gcds-grid-gap-1000: 10.5rem;
--gcds-grid-columns-default-base: 1;
--gcds-grid-columns-default-tablet: 6;
--gcds-grid-columns-default-desktop: 12;
--gcds-grid-gap: 3rem;
}
22 changes: 5 additions & 17 deletions build/web/css/tokens.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 07 Nov 2023 17:39:09 GMT
* Generated on Wed, 29 Nov 2023 22:36:34 GMT
*/

:root {
Expand Down Expand Up @@ -466,22 +466,10 @@
--gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-footer-link-focus-outline-offset: 0.125rem;
--gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
--gcds-grid-gap-0: 0;
--gcds-grid-gap-50: 0.1875rem;
--gcds-grid-gap-100: 0.375rem;
--gcds-grid-gap-150: 0.5625rem;
--gcds-grid-gap-200: 0.75rem;
--gcds-grid-gap-250: 0.9375rem;
--gcds-grid-gap-300: 1.125rem;
--gcds-grid-gap-400: 1.5rem;
--gcds-grid-gap-450: 2.25rem;
--gcds-grid-gap-500: 3rem;
--gcds-grid-gap-550: 3.75rem;
--gcds-grid-gap-600: 4.5rem;
--gcds-grid-gap-700: 6rem;
--gcds-grid-gap-800: 7.5rem;
--gcds-grid-gap-900: 9rem;
--gcds-grid-gap-1000: 10.5rem;
--gcds-grid-columns-default-base: 1;
--gcds-grid-columns-default-tablet: 6;
--gcds-grid-columns-default-desktop: 12;
--gcds-grid-gap: 3rem;
--gcds-header-brand-border-color: #26374a;
--gcds-header-brand-border-width: 0.1875rem;
--gcds-header-brand-grid-gap: 0.75rem;
Expand Down
22 changes: 5 additions & 17 deletions build/web/scss/.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Tue, 07 Nov 2023 17:39:09 GMT
// Generated on Wed, 29 Nov 2023 22:36:34 GMT

$gcds-color-blue-100: #d7e5f5;
$gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
Expand Down Expand Up @@ -464,22 +464,10 @@ $gcds-footer-link-focus-radius: 0.1875rem;
$gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
$gcds-footer-link-focus-outline-offset: 0.125rem;
$gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
$gcds-grid-gap-0: 0;
$gcds-grid-gap-50: 0.1875rem;
$gcds-grid-gap-100: 0.375rem;
$gcds-grid-gap-150: 0.5625rem;
$gcds-grid-gap-200: 0.75rem;
$gcds-grid-gap-250: 0.9375rem;
$gcds-grid-gap-300: 1.125rem;
$gcds-grid-gap-400: 1.5rem;
$gcds-grid-gap-450: 2.25rem;
$gcds-grid-gap-500: 3rem;
$gcds-grid-gap-550: 3.75rem;
$gcds-grid-gap-600: 4.5rem;
$gcds-grid-gap-700: 6rem;
$gcds-grid-gap-800: 7.5rem;
$gcds-grid-gap-900: 9rem;
$gcds-grid-gap-1000: 10.5rem;
$gcds-grid-columns-default-base: 1;
$gcds-grid-columns-default-tablet: 6;
$gcds-grid-columns-default-desktop: 12;
$gcds-grid-gap: 3rem;
$gcds-header-brand-border-color: #26374a;
$gcds-header-brand-border-width: 0.1875rem;
$gcds-header-brand-grid-gap: 0.75rem;
Expand Down
22 changes: 5 additions & 17 deletions build/web/scss/components.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Tue, 07 Nov 2023 17:39:08 GMT
// Generated on Wed, 29 Nov 2023 22:36:34 GMT

$gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
$gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
Expand Down Expand Up @@ -326,22 +326,10 @@ $gcds-footer-link-focus-radius: 0.1875rem;
$gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
$gcds-footer-link-focus-outline-offset: 0.125rem;
$gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
$gcds-grid-gap-0: 0;
$gcds-grid-gap-50: 0.1875rem;
$gcds-grid-gap-100: 0.375rem;
$gcds-grid-gap-150: 0.5625rem;
$gcds-grid-gap-200: 0.75rem;
$gcds-grid-gap-250: 0.9375rem;
$gcds-grid-gap-300: 1.125rem;
$gcds-grid-gap-400: 1.5rem;
$gcds-grid-gap-450: 2.25rem;
$gcds-grid-gap-500: 3rem;
$gcds-grid-gap-550: 3.75rem;
$gcds-grid-gap-600: 4.5rem;
$gcds-grid-gap-700: 6rem;
$gcds-grid-gap-800: 7.5rem;
$gcds-grid-gap-900: 9rem;
$gcds-grid-gap-1000: 10.5rem;
$gcds-grid-columns-default-base: 1;
$gcds-grid-columns-default-tablet: 6;
$gcds-grid-columns-default-desktop: 12;
$gcds-grid-gap: 3rem;
$gcds-header-brand-border-color: #26374a;
$gcds-header-brand-border-width: 0.1875rem;
$gcds-header-brand-grid-gap: 0.75rem;
Expand Down
22 changes: 5 additions & 17 deletions build/web/scss/components/grid.scss
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@

// Do not edit directly
// Generated on Thu, 22 Jun 2023 14:47:37 GMT
// Generated on Wed, 29 Nov 2023 22:36:34 GMT

$gcds-grid-gap-0: 0;
$gcds-grid-gap-50: 0.1875rem;
$gcds-grid-gap-100: 0.375rem;
$gcds-grid-gap-150: 0.5625rem;
$gcds-grid-gap-200: 0.75rem;
$gcds-grid-gap-250: 0.9375rem;
$gcds-grid-gap-300: 1.125rem;
$gcds-grid-gap-400: 1.5rem;
$gcds-grid-gap-450: 2.25rem;
$gcds-grid-gap-500: 3rem;
$gcds-grid-gap-550: 3.75rem;
$gcds-grid-gap-600: 4.5rem;
$gcds-grid-gap-700: 6rem;
$gcds-grid-gap-800: 7.5rem;
$gcds-grid-gap-900: 9rem;
$gcds-grid-gap-1000: 10.5rem;
$gcds-grid-columns-default-base: 1;
$gcds-grid-columns-default-tablet: 6;
$gcds-grid-columns-default-desktop: 12;
$gcds-grid-gap: 3rem;
22 changes: 5 additions & 17 deletions build/web/scss/tokens.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Tue, 07 Nov 2023 17:39:08 GMT
// Generated on Wed, 29 Nov 2023 22:36:33 GMT

$gcds-color-blue-100: #d7e5f5;
$gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
Expand Down Expand Up @@ -464,22 +464,10 @@ $gcds-footer-link-focus-radius: 0.1875rem;
$gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff;
$gcds-footer-link-focus-outline-offset: 0.125rem;
$gcds-footer-link-focus-outline: 0.1875rem solid #0535d2;
$gcds-grid-gap-0: 0;
$gcds-grid-gap-50: 0.1875rem;
$gcds-grid-gap-100: 0.375rem;
$gcds-grid-gap-150: 0.5625rem;
$gcds-grid-gap-200: 0.75rem;
$gcds-grid-gap-250: 0.9375rem;
$gcds-grid-gap-300: 1.125rem;
$gcds-grid-gap-400: 1.5rem;
$gcds-grid-gap-450: 2.25rem;
$gcds-grid-gap-500: 3rem;
$gcds-grid-gap-550: 3.75rem;
$gcds-grid-gap-600: 4.5rem;
$gcds-grid-gap-700: 6rem;
$gcds-grid-gap-800: 7.5rem;
$gcds-grid-gap-900: 9rem;
$gcds-grid-gap-1000: 10.5rem;
$gcds-grid-columns-default-base: 1;
$gcds-grid-columns-default-tablet: 6;
$gcds-grid-columns-default-desktop: 12;
$gcds-grid-gap: 3rem;
$gcds-header-brand-border-color: #26374a;
$gcds-header-brand-border-width: 0.1875rem;
$gcds-header-brand-grid-gap: 0.75rem;
Expand Down
82 changes: 18 additions & 64 deletions tokens/components/grid/tokens.json
Original file line number Diff line number Diff line change
@@ -1,70 +1,24 @@
{
"grid": {
"gap": {
"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"
"columns": {
"default": {
"base": {
"value": 1,
"type": "sizing"
},
"tablet": {
"value": 6,
"type": "sizing"
},
"desktop": {
"value": 12,
"type": "sizing"
}
}
},
"gap": {
"value": "{spacing.500.value}",
"type": "spacing"
}
}
}

0 comments on commit cfeb4df

Please sign in to comment.