Good news! You're viewing the latest version of L&G's digital design language
diff --git a/projects/canopy/src/lib/docs/welcome/inside.component.ts b/projects/canopy/src/lib/docs/welcome/inside.component.ts
index e3f98164c..53c954800 100644
--- a/projects/canopy/src/lib/docs/welcome/inside.component.ts
+++ b/projects/canopy/src/lib/docs/welcome/inside.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
@for (section of sections; track section) {
-
-
+
{{ section.heading }}
diff --git a/projects/canopy/src/lib/docs/welcome/usage.component.scss b/projects/canopy/src/lib/docs/welcome/usage.component.scss
index ccba84165..2ac689862 100644
--- a/projects/canopy/src/lib/docs/welcome/usage.component.scss
+++ b/projects/canopy/src/lib/docs/welcome/usage.component.scss
@@ -3,7 +3,7 @@
:host {
display: flex;
align-items: flex-end;
- row-gap: var(--space-md);
+ row-gap: var(--space-5);
flex-wrap: wrap;
@include mixins.lg-breakpoint('md') {
diff --git a/projects/canopy/src/lib/docs/welcome/usage.component.ts b/projects/canopy/src/lib/docs/welcome/usage.component.ts
index a17ba6fed..90ba4d51a 100644
--- a/projects/canopy/src/lib/docs/welcome/usage.component.ts
+++ b/projects/canopy/src/lib/docs/welcome/usage.component.ts
@@ -9,7 +9,7 @@ import { LgMarginDirective } from '../../spacing';
template: `
-
+
First time using Canopy?
@@ -26,7 +26,7 @@ import { LgMarginDirective } from '../../spacing';
opens in a new tab
-
-
+
-
Request access to the Figma design libraries
-
-
-
+
+
+
-
+
-
- {{ primaryLink.text }}
-
+ @for (primaryLink of primaryLinks; track primaryLink.id) {
+
+ {{ primaryLink.text }}
+
+ }
-
- {{ secondaryLink.text }}
-
-
-
-
-
+ @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+
+ @if (!secondaryLink.isButton) {
+ {{ secondaryLink.text }}
+ } @else {
+
+ }
+
+ }
@@ -154,9 +155,11 @@ export const StandardFooter = {
const compactTemplate = `
+
```
-Use the default (`sm`) row-gap.
+Use the default (`4`) row-gap.
```html
```
-### Inputs
-
-The current available spacing variants are `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`, `xxxxxl`.
+## Inputs
+
+The current available spacing variants are:
+
+{(() => {
+ const spacingVars = getDefaultSpacingVariables();
+ const variants = Object.keys(spacingVars)
+ .filter(key => key.startsWith('--space-'))
+ .map(key => key.replace('--space-', ''))
+ .sort((a, b) => {
+ // Handle 'none' specially
+ if (a === 'none') return -1;
+ if (b === 'none') return 1;
+ // Sort numbers numerically
+ return parseInt(a) - parseInt(b);
+ })
+ .map(variant => `'${variant}'`)
+ .join(', ');
+
+ return `'none', ${variants}`;
+})()}
+
| Name | Description | Type | Default | Required |
|------------|--------------------------------------------|:----------------:|:-------:|:--------:|
-| `lgRowGap` | The row gap variant applied to the element | `SpacingVariant` | `sm` | Yes |
+| `lgRowGap` | The row gap variant applied to the element | `SpacingVariant` | `4` | Yes |
***
diff --git a/projects/canopy/src/lib/spacing/row-gap/docs/row-gap.stories.ts b/projects/canopy/src/lib/spacing/row-gap/docs/row-gap.stories.ts
index cd9ef5782..16c3fb11f 100644
--- a/projects/canopy/src/lib/spacing/row-gap/docs/row-gap.stories.ts
+++ b/projects/canopy/src/lib/spacing/row-gap/docs/row-gap.stories.ts
@@ -12,20 +12,7 @@ import {
} from '../../../grid';
import { LgMarginDirective } from '../../margin';
-const spaces = [
- 'undefined',
- 'none',
- 'xxxs',
- 'xxs',
- 'xs',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- 'xxl',
- 'xxxl',
- 'xxxxl',
-];
+const spaces = [ 'undefined', 'none', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ];
@Component({
selector: 'lg-row-gap-story',
@@ -126,7 +113,7 @@ export const RowGap = {
template,
}),
args: {
- rowGap: 'sm',
+ rowGap: '4',
},
parameters: {
docs: {
diff --git a/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.spec.ts b/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.spec.ts
index 06f13cad2..01852ecb3 100644
--- a/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.spec.ts
+++ b/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.spec.ts
@@ -41,14 +41,14 @@ describe('LgRowGapDirective', () => {
testElements = fixture.debugElement.queryAll(By.css('div'));
});
- it('should default to `sm` row-gap', () => {
- expect(testElements[0].nativeElement.getAttribute('class')).toEqual('lg-row-gap--sm');
+ it('should default to `4` row-gap', () => {
+ expect(testElements[0].nativeElement.getAttribute('class')).toEqual('lg-row-gap--4');
});
it('should add row-gap class for the given value and remove any previous row-gap class', () => {
const tests = [
- { rowGap: 'xs', expectedPrevious: 'sm' },
- { rowGap: 'xxxl', expectedPrevious: 'xs' },
+ { rowGap: '3', expectedPrevious: '4' },
+ { rowGap: '9', expectedPrevious: '3' },
];
tests.forEach(t => {
diff --git a/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.ts b/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.ts
index 5928056db..88ce29f79 100644
--- a/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.ts
+++ b/projects/canopy/src/lib/spacing/row-gap/row-gap.directive.ts
@@ -11,7 +11,7 @@ export class LgRowGapDirective {
private hostElement = inject(ElementRef);
private readonly classPrefix = 'lg-row-gap--';
- private readonly defaultGap = 'sm';
+ private readonly defaultGap = '4';
lgRowGapClass = `${this.classPrefix}${this.defaultGap}`;
diff --git a/projects/canopy/src/lib/spacing/spacing.interface.ts b/projects/canopy/src/lib/spacing/spacing.interface.ts
index 45c83e7b1..96f2e4d2e 100644
--- a/projects/canopy/src/lib/spacing/spacing.interface.ts
+++ b/projects/canopy/src/lib/spacing/spacing.interface.ts
@@ -1,15 +1,15 @@
export type SpacingVariant =
| 'none'
- | 'xxxs'
- | 'xxs'
- | 'xs'
- | 'sm'
- | 'md'
- | 'lg'
- | 'xl'
- | 'xxl'
- | 'xxxl'
- | 'xxxxl';
+ | '1'
+ | '2'
+ | '3'
+ | '4'
+ | '5'
+ | '6'
+ | '7'
+ | '8'
+ | '9'
+ | '10';
export interface SpacingResponsive {
xs?: SpacingVariant;
@@ -20,16 +20,17 @@ export interface SpacingResponsive {
xxl?: SpacingVariant;
}
-export enum SpacingValues {
- none = '0',
- xxxs = '0.25rem',
- xxs = '0.5rem',
- xs = '0.75rem',
- sm = '1rem',
- md = '1.5rem',
- lg = '2rem',
- xl = '2.5rem',
- xxl = '3rem',
- xxxl = '4.5rem',
- xxxxl = '9rem',
-}
+// Reference CSS tokens
+export const SpacingValues = {
+ none: '0',
+ 1: 'var(--space-1)',
+ 2: 'var(--space-2)',
+ 3: 'var(--space-3)',
+ 4: 'var(--space-4)',
+ 5: 'var(--space-5)',
+ 6: 'var(--space-6)',
+ 7: 'var(--space-7)',
+ 8: 'var(--space-8)',
+ 9: 'var(--space-9)',
+ 10: 'var(--space-10)',
+} as const;
diff --git a/projects/canopy/src/lib/spacing/spacing.service.spec.ts b/projects/canopy/src/lib/spacing/spacing.service.spec.ts
index 17ffc8f2c..5b6a8099e 100644
--- a/projects/canopy/src/lib/spacing/spacing.service.spec.ts
+++ b/projects/canopy/src/lib/spacing/spacing.service.spec.ts
@@ -26,35 +26,33 @@ describe('SpacingService', () => {
describe('createNewClasses method', () => {
describe('when given non-responsive spacing varaints', () => {
it('should return the correct class and add styles for padding ', () => {
- expect(spacingService.createNewClasses('sm', 'padding')).toEqual([
- 'lg-padding--sm',
+ expect(spacingService.createNewClasses('4', 'padding')).toEqual([
+ 'lg-padding--4',
]);
expect(dynamicStyleService.addRules).toHaveBeenCalledWith([
- { selector: 'lg-padding--sm', declaration: 'padding:1rem!important' },
+ { selector: 'lg-padding--4', declaration: 'padding:var(--space-4)!important' },
]);
});
it('should return the correct class and add styles for margin', () => {
- expect(spacingService.createNewClasses('sm', 'margin')).toEqual([
- 'lg-margin--sm',
- ]);
+ expect(spacingService.createNewClasses('4', 'margin')).toEqual([ 'lg-margin--4' ]);
expect(dynamicStyleService.addRules).toHaveBeenCalledWith([
- { selector: 'lg-margin--sm', declaration: 'margin:1rem!important' },
+ { selector: 'lg-margin--4', declaration: 'margin:var(--space-4)!important' },
]);
});
it('should return the correct classes and add styles for margin on specific sides', () => {
[ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ].forEach(side => {
- const className = `lg-${side.replace('-', '__')}--md`;
+ const className = `lg-${side.replace('-', '__')}--5`;
- expect(spacingService.createNewClasses('md', side)).toEqual([ className ]);
+ expect(spacingService.createNewClasses('5', side)).toEqual([ className ]);
expect(dynamicStyleService.addRules).toHaveBeenCalledWith([
{
- selector: `lg-${side.replace('-', '__')}--md`,
- declaration: `${side}:1.5rem!important`,
+ selector: `lg-${side.replace('-', '__')}--5`,
+ declaration: `${side}:var(--space-5)!important`,
},
]);
});
@@ -63,14 +61,14 @@ describe('SpacingService', () => {
it('should return the correct class and add styles for padding on specific sides', () => {
[ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ].forEach(
side => {
- const className = `lg-${side.replace('-', '__')}--md`;
+ const className = `lg-${side.replace('-', '__')}--5`;
- expect(spacingService.createNewClasses('md', side)).toEqual([ className ]);
+ expect(spacingService.createNewClasses('5', side)).toEqual([ className ]);
expect(dynamicStyleService.addRules).toHaveBeenCalledWith([
{
- selector: `lg-${side.replace('-', '__')}--md`,
- declaration: `${side}:1.5rem!important`,
+ selector: `lg-${side.replace('-', '__')}--5`,
+ declaration: `${side}:var(--space-5)!important`,
},
]);
},
@@ -81,28 +79,28 @@ describe('SpacingService', () => {
describe('when given responsive spacing objects', () => {
describe('when given a single object', () => {
it('should return the correct class and add styles for padding', () => {
- expect(spacingService.createNewClasses({ sm: 'md' }, 'padding')).toEqual([
- 'lg-padding--sm--md',
+ expect(spacingService.createNewClasses({ sm: '5' }, 'padding')).toEqual([
+ 'lg-padding--sm--5',
]);
expect(dynamicStyleService.addRulesToMediaQuery).toHaveBeenCalledWith([
{
- selector: 'lg-padding--sm--md',
- declaration: 'padding:1.5rem!important',
+ selector: 'lg-padding--sm--5',
+ declaration: 'padding:var(--space-5)!important',
breakpoint: BreakpointValues.sm,
},
]);
});
it('should return the correct class and add styles for margin', () => {
- expect(spacingService.createNewClasses({ sm: 'md' }, 'margin')).toEqual([
- 'lg-margin--sm--md',
+ expect(spacingService.createNewClasses({ sm: '5' }, 'margin')).toEqual([
+ 'lg-margin--sm--5',
]);
expect(dynamicStyleService.addRulesToMediaQuery).toHaveBeenCalledWith([
{
- selector: 'lg-margin--sm--md',
- declaration: 'margin:1.5rem!important',
+ selector: 'lg-margin--sm--5',
+ declaration: 'margin:var(--space-5)!important',
breakpoint: BreakpointValues.sm,
},
]);
@@ -119,16 +117,16 @@ describe('SpacingService', () => {
'padding-bottom',
'padding-left',
].forEach(side => {
- const className = `lg-${side.replace('-', '__')}--sm--md`;
+ const className = `lg-${side.replace('-', '__')}--sm--5`;
- expect(spacingService.createNewClasses({ sm: 'md' }, side)).toEqual([
+ expect(spacingService.createNewClasses({ sm: '5' }, side)).toEqual([
className,
]);
expect(dynamicStyleService.addRulesToMediaQuery).toHaveBeenCalledWith([
{
- selector: `lg-${side.replace('-', '__')}--sm--md`,
- declaration: `${side}:1.5rem!important`,
+ selector: `lg-${side.replace('-', '__')}--sm--5`,
+ declaration: `${side}:var(--space-5)!important`,
breakpoint: BreakpointValues.sm,
},
]);
@@ -139,26 +137,23 @@ describe('SpacingService', () => {
describe('when given multiple objects', () => {
it('should return all the correct classes and add each style', () => {
expect(
- spacingService.createNewClasses(
- { sm: 'md', md: 'xl', lg: 'xxxl' },
- 'padding',
- ),
- ).toEqual([ 'lg-padding--sm--md', 'lg-padding--md--xl', 'lg-padding--lg--xxxl' ]);
+ spacingService.createNewClasses({ sm: '5', md: '7', lg: '9' }, 'padding'),
+ ).toEqual([ 'lg-padding--sm--5', 'lg-padding--md--7', 'lg-padding--lg--9' ]);
expect(dynamicStyleService.addRulesToMediaQuery).toHaveBeenCalledWith([
{
- selector: 'lg-padding--sm--md',
- declaration: 'padding:1.5rem!important',
+ selector: 'lg-padding--sm--5',
+ declaration: 'padding:var(--space-5)!important',
breakpoint: BreakpointValues.sm,
},
{
- selector: 'lg-padding--md--xl',
- declaration: 'padding:2.5rem!important',
+ selector: 'lg-padding--md--7',
+ declaration: 'padding:var(--space-7)!important',
breakpoint: BreakpointValues.md,
},
{
- selector: 'lg-padding--lg--xxxl',
- declaration: 'padding:4.5rem!important',
+ selector: 'lg-padding--lg--9',
+ declaration: 'padding:var(--space-9)!important',
breakpoint: BreakpointValues.lg,
},
]);
diff --git a/projects/canopy/src/lib/spacing/spacing.service.ts b/projects/canopy/src/lib/spacing/spacing.service.ts
index 7cec86934..da1711489 100644
--- a/projects/canopy/src/lib/spacing/spacing.service.ts
+++ b/projects/canopy/src/lib/spacing/spacing.service.ts
@@ -16,7 +16,7 @@ export class SpacingService {
* which are applied via the DynamicStyleService:
* e.g. `.lg-padding`, `padding: 1rem`
*
- * @param spacing e.g. 'sm' for SpacingVariant, or {sm: 'lg', md: 'xxl'} for SpacingResponsive
+ * @param spacing e.g. 'sm' for SpacingVariant, or {sm: '6', md: '8'} for SpacingResponsive
* @param cssProperty e.g. 'padding-top' or 'margin-right'
* @returns an array of the created class names
*/
@@ -32,7 +32,7 @@ export class SpacingService {
}
if (typeof spacing === 'object') {
- // Responsive e.g. spacing = {sm: "md", md: "xxl"}
+ // Responsive e.g. spacing = {sm: "5", md: "8"}
Object.keys(spacing).forEach(key => {
const selector = `lg-${cssProperty.replace('-', '__')}--${key}--${spacing[key]}`;
@@ -47,7 +47,7 @@ export class SpacingService {
this.dynamicStyleService.addRulesToMediaQuery(responsiveSpacingRules);
} else {
- // Non-resposive e.g. spacing = "sm"
+ // Non-resposive e.g. spacing = "4"
const selector = `lg-${cssProperty.replace('-', '__')}--${spacing}`;
this.dynamicStyleService.addRules([
diff --git a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
index c18ad38e8..4c16bf229 100644
--- a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
+++ b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
@@ -91,7 +91,9 @@ export const StandardSpinner = {
source: {
code: `
# Display a spinner while loading
-
+ @if (!loaded) {
+
+ }
# Tell screen reader to read a message when loading is finished
Loading complete
diff --git a/projects/canopy/src/lib/spinner/spinner.component.scss b/projects/canopy/src/lib/spinner/spinner.component.scss
index 3afb35e7d..b7534a3d1 100644
--- a/projects/canopy/src/lib/spinner/spinner.component.scss
+++ b/projects/canopy/src/lib/spinner/spinner.component.scss
@@ -47,7 +47,7 @@
}
.lg-spinner__content {
- margin-top: var(--space-md);
+ margin-top: var(--space-5);
text-align: center;
&--light {
diff --git a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
index c25b68664..e147cdf88 100644
--- a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
+++ b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
@@ -29,7 +29,9 @@ This directive can be used together with the `LgSpinnerComponent` to show a spin
```html
# Display a spinner while loading
-
+@if (!loaded) {
+
+}
# Tell the screen reader to read a message when loading is finished
Loading complete
diff --git a/projects/canopy/src/lib/table/docs/guide.mdx b/projects/canopy/src/lib/table/docs/guide.mdx
index 41baf95d2..24f5254c6 100644
--- a/projects/canopy/src/lib/table/docs/guide.mdx
+++ b/projects/canopy/src/lib/table/docs/guide.mdx
@@ -109,7 +109,7 @@ Sometimes a table can be used to display large amounts of copy, including button
Note that each `LgTableCellComponent` has the `stack` input set to true, which stacks the label and content on top of each other on small screens, instead of side by side. Also note the use of `
` to control width of the columns on large screens. This can be seen on the [table with long copy story](./?path=/story/components-table-examples--with-long-copy-table).
-Also note the use of the [margin directive](./?path=/docs/helpers-directives-margin-guide--docs), such as `lgMarginBottom="xs"`, to add extra space around content, making it more readable.
+Also note the use of the [margin directive](./?path=/docs/helpers-directives-margin-guide--docs), such as `lgMarginBottom="3"`, to add extra space around content, making it more readable.
```html
@@ -127,8 +127,8 @@ Also note the use of the [margin directive](./?path=/docs/helpers-directives-mar
- Item one: Lorem ipsum dolor sit amet
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+ Item one: Lorem ipsum dolor sit amet
+ consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
|
Sed ut perspiciatis
diff --git a/projects/canopy/src/lib/table/docs/table.stories.ts b/projects/canopy/src/lib/table/docs/table.stories.ts
index 08fa7331b..c69a23281 100644
--- a/projects/canopy/src/lib/table/docs/table.stories.ts
+++ b/projects/canopy/src/lib/table/docs/table.stories.ts
@@ -1,6 +1,5 @@
-import { ChangeDetectorRef, Component, Input, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
import type { TableVariant } from '../table.interface';
import { AlignmentOptions, TableColumnLayoutBreakpoints } from '../table.interface';
@@ -98,7 +97,7 @@ const expandableTableTemplate = `
|
-
+ @for (book of books; track $index; let i = $index) {
|
|
-
+ }
`;
@@ -187,10 +186,10 @@ const withLongCopyTableTemplate = `
-
+
Item one: Lorem ipsum dolor sit amet
-
+
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
@@ -213,13 +212,13 @@ const withLongCopyTableTemplate = `
|
-
+
Item two: At vero eos et accusamus
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil.
-
+
Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
@@ -240,11 +239,11 @@ const withLongCopyTableTemplate = `
|
-
+
Item three: Ut enim ad minima veniam
Proportionate final payment: Applies
-
+
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur. Tempora incidunt ut labore et dolore magnam
@@ -446,7 +445,6 @@ export default {
LgInputDirective,
LgMarginDirective,
LgSuffixDirective,
- NgFor,
],
}),
],
@@ -464,11 +462,13 @@ const standardTableTemplate = `
|
-
- | {{ book.author }} |
- {{ book.title }} |
- {{ book.published }} |
-
+ @for (book of books; track book.title) {
+
+ | {{ book.author }} |
+ {{ book.title }} |
+ {{ book.published }} |
+
+ }
`;
@@ -546,15 +546,17 @@ const withInputTableTemplate = `
-
- | {{ book.author }} |
-
-
-
- %
-
- |
-
+ @for (book of books; track book.author) {
+
+ | {{ book.author }} |
+
+
+
+ %
+
+ |
+
+ }
`;
diff --git a/projects/canopy/src/lib/table/table-cell/table-cell.component.scss b/projects/canopy/src/lib/table/table-cell/table-cell.component.scss
index d974b6e3c..24b99e289 100644
--- a/projects/canopy/src/lib/table/table-cell/table-cell.component.scss
+++ b/projects/canopy/src/lib/table/table-cell/table-cell.component.scss
@@ -10,12 +10,12 @@
align-items: stretch;
.lg-table-cell__label {
- margin-bottom: var(--space-xxs);
+ margin-bottom: var(--space-2);
}
.lg-table-cell__content {
margin-left: 0;
- margin-bottom: var(--space-md);
+ margin-bottom: var(--space-5);
text-align: start;
}
@@ -62,7 +62,7 @@
.lg-table-cell__label {
font-weight: var(--font-weight-500);
- padding-right: var(--space-md);
+ padding-right: var(--space-5);
}
@each $columns-breakpoint in table.$columns-breakpoints {
@@ -70,7 +70,7 @@
.lg-table-cell {
@include mixins.lg-breakpoint($columns-breakpoint) {
display: table-cell;
- padding: var(--space-sm);
+ padding: var(--space-4);
}
&--toggle-cell {
diff --git a/projects/canopy/src/lib/table/table-head-cell/table-head-cell.component.scss b/projects/canopy/src/lib/table/table-head-cell/table-head-cell.component.scss
index 6049ca409..9a017dd8e 100644
--- a/projects/canopy/src/lib/table/table-head-cell/table-head-cell.component.scss
+++ b/projects/canopy/src/lib/table/table-head-cell/table-head-cell.component.scss
@@ -6,7 +6,7 @@
font-weight: var(--font-weight-500);
background-color: transparent;
border-bottom: solid var(--table-header-border-width) var(--table-header-border-color);
- padding: var(--space-xs) 0;
+ padding: var(--space-3) 0;
vertical-align: bottom;
&--align-end {
@@ -18,7 +18,7 @@
.lg-table--columns-#{$columns-breakpoint} {
.lg-table-head-cell {
@include mixins.lg-breakpoint($columns-breakpoint) {
- padding: var(--space-sm);
+ padding: var(--space-4);
display: table-cell;
}
}
diff --git a/projects/canopy/src/lib/table/table-row-toggle/table-row-toggle.component.scss b/projects/canopy/src/lib/table/table-row-toggle/table-row-toggle.component.scss
index f17fc0336..973d2b858 100644
--- a/projects/canopy/src/lib/table/table-row-toggle/table-row-toggle.component.scss
+++ b/projects/canopy/src/lib/table/table-row-toggle/table-row-toggle.component.scss
@@ -9,7 +9,7 @@
background: transparent;
appearance: none;
cursor: pointer;
- padding: 0 var(--space-xxs) 0 0;
+ padding: 0 var(--space-2) 0 0;
min-width: var(--table-toggle-width);
min-height: var(--table-toggle-width);
@@ -20,7 +20,7 @@
&__heading-icon {
transition: transform var(--animation-duration) var(--animation-fn);
- margin-right: var(--space-xxs);
+ margin-right: var(--space-2);
&--active {
transform: rotateX(180deg);
diff --git a/projects/canopy/src/lib/table/table-row/table-row.component.scss b/projects/canopy/src/lib/table/table-row/table-row.component.scss
index 331f13cdc..cb196532a 100644
--- a/projects/canopy/src/lib/table/table-row/table-row.component.scss
+++ b/projects/canopy/src/lib/table/table-row/table-row.component.scss
@@ -4,7 +4,7 @@
.lg-table-row {
display: flex;
flex-direction: column;
- padding: var(--space-xs);
+ padding: var(--space-3);
&__detail {
padding: 0;
diff --git a/projects/canopy/src/lib/table/table/table.component.spec.ts b/projects/canopy/src/lib/table/table/table.component.spec.ts
index 363b1d27a..765bada4a 100644
--- a/projects/canopy/src/lib/table/table/table.component.spec.ts
+++ b/projects/canopy/src/lib/table/table/table.component.spec.ts
@@ -1,8 +1,7 @@
import { DebugElement } from '@angular/core';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { MockRender, MockComponents, ngMocks } from 'ng-mocks';
-import { NgFor } from '@angular/common';
+import { MockComponents, MockRender, ngMocks } from 'ng-mocks';
import { LgTableCellComponent } from '../table-cell/table-cell.component';
import { LgTableHeadComponent } from '../table-head/table-head.component';
@@ -45,7 +44,6 @@ describe('TableComponent', () => {
LgTableHeadCellComponent,
LgTableCellComponent,
LgTableRowToggleComponent,
- NgFor,
MockComponents(LgIconComponent, LgTableExpandedDetailComponent),
],
}).compileComponents();
@@ -64,11 +62,13 @@ describe('TableComponent', () => {
-
- | {{book.author}} |
- {{book.title}} |
- {{book.published}} |
-
+ @for (book of books; track book.title) {
+
+ | {{book.author}} |
+ {{book.title}} |
+ {{book.published}} |
+
+ }
`,
diff --git a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
index 6c8b51371..5f5c74f0b 100644
--- a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
@@ -1,5 +1,4 @@
import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
import { LgTabsComponent } from '../tabs.component';
import { LgTabNavBarComponent } from '../tab-nav-bar/tab-nav-bar.component';
@@ -12,12 +11,7 @@ export default {
component: LgTabsComponent,
decorators: [
moduleMetadata({
- imports: [
- LgTabNavBarComponent,
- LgTabNavBarLinkDirective,
- LgTabNavContentComponent,
- NgFor,
- ],
+ imports: [ LgTabNavBarComponent, LgTabNavBarLinkDirective, LgTabNavContentComponent ],
}),
],
argTypes: {
@@ -103,11 +97,13 @@ export default {
function getTemplate(preventDefault?: boolean) {
return `
- {{tab}}
+ }
diff --git a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
index 0589f9f59..0ea45cad3 100644
--- a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
@@ -103,12 +103,14 @@ const template = `
[lgMarginBottom]="'none'"
[lgMarginLeft]="'none'"
>
-
- {{ tab.header }}
-
- {{ tab.content }}
-
-
+ @for (tab of tabs; track tab.header) {
+
+ {{ tab.header }}
+
+ {{ tab.content }}
+
+
+ }
`;
diff --git a/projects/canopy/src/lib/tabs/scss-modules/_tab-item.scss b/projects/canopy/src/lib/tabs/scss-modules/_tab-item.scss
index 27cadd571..ab57cb49c 100644
--- a/projects/canopy/src/lib/tabs/scss-modules/_tab-item.scss
+++ b/projects/canopy/src/lib/tabs/scss-modules/_tab-item.scss
@@ -3,21 +3,21 @@
/* stylelint-disable nesting-selector-no-missing-scoping-root */
@mixin lg-tab-item() {
position: relative;
- padding: 0 var(--space-xxs);
+ padding: 0 var(--space-2);
height: var(--tabs-list-item-line-height);
margin-top: 0;
- margin-right: var(--space-sm);
- margin-left: calc(-1 * var(--space-xxs));
+ margin-right: var(--space-4);
+ margin-left: calc(-1 * var(--space-2));
background: transparent;
border: 0;
white-space: nowrap;
color: var(--tabs-list-item-color);
overflow: hidden;
text-overflow: ellipsis;
- max-width: calc(100% + var(--space-sm));
+ max-width: calc(100% + var(--space-4));
@include mixins.lg-breakpoint('lg') {
- margin-right: var(--space-lg);
+ margin-right: var(--space-6);
height: var(--tabs-list-item-lg-line-height);
}
@@ -29,8 +29,8 @@
content: '';
position: absolute;
bottom: 0;
- width: calc(100% - var(--space-xxs) - var(--space-xxs));
- left: var(--space-xxs);
+ width: calc(100% - var(--space-2) - var(--space-2));
+ left: var(--space-2);
}
&--selected {
diff --git a/projects/canopy/src/lib/tabs/tab-nav-bar/tab-nav-bar.component.scss b/projects/canopy/src/lib/tabs/tab-nav-bar/tab-nav-bar.component.scss
index e6b280047..f4f1acebb 100644
--- a/projects/canopy/src/lib/tabs/tab-nav-bar/tab-nav-bar.component.scss
+++ b/projects/canopy/src/lib/tabs/tab-nav-bar/tab-nav-bar.component.scss
@@ -5,16 +5,16 @@
position: relative;
display: flex;
flex-wrap: wrap;
- padding: 0 var(--space-sm);
+ padding: 0 var(--space-4);
font-size: var(--text-base-size);
font-weight: var(--tabs-list-item-font-weight);
@include mixins.lg-breakpoint('md') {
- padding: 0 var(--space-md);
+ padding: 0 var(--space-5);
}
@include mixins.lg-breakpoint('lg') {
- padding: 0 var(--space-lg);
+ padding: 0 var(--space-6);
}
&:after {
diff --git a/projects/canopy/src/lib/tabs/tab-nav-content/tab-nav-content.component.scss b/projects/canopy/src/lib/tabs/tab-nav-content/tab-nav-content.component.scss
index e43850a7e..91653da7b 100644
--- a/projects/canopy/src/lib/tabs/tab-nav-content/tab-nav-content.component.scss
+++ b/projects/canopy/src/lib/tabs/tab-nav-content/tab-nav-content.component.scss
@@ -1,14 +1,14 @@
@use '../../../styles/mixins';
.lg-tab-nav-content {
- padding: var(--space-sm);
+ padding: var(--space-4);
display: block;
@include mixins.lg-breakpoint('md') {
- padding: var(--space-md);
+ padding: var(--space-5);
}
@include mixins.lg-breakpoint('lg') {
- padding: var(--space-lg);
+ padding: var(--space-6);
}
}
diff --git a/projects/canopy/src/lib/tabs/tabs.component.scss b/projects/canopy/src/lib/tabs/tabs.component.scss
index 363a4bc84..4571097bf 100644
--- a/projects/canopy/src/lib/tabs/tabs.component.scss
+++ b/projects/canopy/src/lib/tabs/tabs.component.scss
@@ -3,13 +3,13 @@
.lg-tabs {
display: block;
- margin-left: calc(-1 * var(--space-sm));
- margin-right: calc(-1 * var(--space-sm));
+ margin-left: calc(-1 * var(--space-4));
+ margin-right: calc(-1 * var(--space-4));
margin-bottom: var(--component-margin);
@include mixins.lg-breakpoint('md') {
- margin-left: calc(-1 * var(--space-lg));
- margin-right: calc(-1 * var(--space-lg));
+ margin-left: calc(-1 * var(--space-6));
+ margin-right: calc(-1 * var(--space-6));
}
}
@@ -18,15 +18,15 @@
display: flex;
flex-wrap: wrap;
list-style: none;
- padding: 0 var(--space-sm);
+ padding: 0 var(--space-4);
margin-left: 0;
@include mixins.lg-breakpoint('md') {
- padding: 0 var(--space-md);
+ padding: 0 var(--space-5);
}
@include mixins.lg-breakpoint('lg') {
- padding: 0 var(--space-lg);
+ padding: 0 var(--space-6);
}
}
@@ -43,13 +43,13 @@
}
.lg-tabs__content-section {
- padding: var(--space-sm);
+ padding: var(--space-4);
@include mixins.lg-breakpoint('md') {
- padding: var(--space-md);
+ padding: var(--space-5);
}
@include mixins.lg-breakpoint('lg') {
- padding: var(--space-lg);
+ padding: var(--space-6);
}
}
diff --git a/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts b/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts
index 7cf6c21ee..0dbb6e6fc 100644
--- a/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts
+++ b/projects/canopy/src/lib/utils/dynamic-style.service.spec.ts
@@ -132,7 +132,7 @@ describe('DynamicStyleService', () => {
]);
expect(service.styleTag.innerHTML).toBe(
- '@media(min-width:20rem){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:2rem}}@media(min-width:64rem){.lg-padding{padding:3rem}}',
+ '@media(min-width:0){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:2rem}}@media(min-width:64rem){.lg-padding{padding:3rem}}',
);
});
@@ -339,7 +339,7 @@ describe('DynamicStyleService', () => {
]);
expect(service.styleTag.innerHTML).toBe(
- '@media(min-width:20rem){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:1rem}.lg-margin{margin:1rem}}',
+ '@media(min-width:0){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:1rem}.lg-margin{margin:1rem}}',
);
});
});
@@ -391,7 +391,7 @@ describe('DynamicStyleService', () => {
]);
expect(service.styleTag.innerHTML).toBe(
- '.lg-padding{padding:1rem}.lg-margin{margin:1rem}@media(min-width:20rem){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:2rem}}@media(min-width:64rem){.lg-padding{padding:3rem}}',
+ '.lg-padding{padding:1rem}.lg-margin{margin:1rem}@media(min-width:0){.lg-padding{padding:1rem}}@media(min-width:48rem){.lg-padding{padding:2rem}}@media(min-width:64rem){.lg-padding{padding:3rem}}',
);
});
});
diff --git a/projects/canopy/src/lib/variant/docs/variant.stories.ts b/projects/canopy/src/lib/variant/docs/variant.stories.ts
index ff87c706c..aedd8b523 100644
--- a/projects/canopy/src/lib/variant/docs/variant.stories.ts
+++ b/projects/canopy/src/lib/variant/docs/variant.stories.ts
@@ -13,7 +13,7 @@ const variants = [ 'generic', 'info', 'success', 'warning', 'error' ];
@Component({
selector: 'lg-variant-story',
template: `
-
+
The variant directive
diff --git a/projects/canopy/src/styles/blockquote.scss b/projects/canopy/src/styles/blockquote.scss
index 8e835a60a..51fb50785 100644
--- a/projects/canopy/src/styles/blockquote.scss
+++ b/projects/canopy/src/styles/blockquote.scss
@@ -2,12 +2,12 @@
blockquote {
border-left: var(--border-radius-lg) solid var(--blockquote-border-left-colour);
- padding-left: var(--space-sm);
+ padding-left: var(--space-4);
@include mixins.lg-font-size('2');
cite {
display: block;
- margin-top: var(--space-sm);
+ margin-top: var(--space-4);
font-style: normal;
@include mixins.lg-font-size('1', 'strong');
}
diff --git a/projects/canopy/src/styles/docs/link/link.stories.ts b/projects/canopy/src/styles/docs/link/link.stories.ts
index a4a4a94e9..31d7abda5 100644
--- a/projects/canopy/src/styles/docs/link/link.stories.ts
+++ b/projects/canopy/src/styles/docs/link/link.stories.ts
@@ -35,7 +35,7 @@ export const Links = {
};
const linksInlineMessagesTemplate = `
-Example of link text within an alert.
+Example of link text within an alert.
Example of link text within an alert.
Example of link text within an alert.
Example of link text within an alert.
diff --git a/projects/canopy/src/styles/grid.scss b/projects/canopy/src/styles/grid.scss
index 07eccd056..97fcd9d56 100644
--- a/projects/canopy/src/styles/grid.scss
+++ b/projects/canopy/src/styles/grid.scss
@@ -3,19 +3,24 @@
@use 'sass:math';
:root {
- --grid-margin: var(--space-sm);
- --grid-gutter: var(--space-sm);
+ --grid-margin: var(--dimensions-small-4); // 1
+ --grid-gutter: var(--dimensions-small-6); // 1.75
@include mixins.lg-breakpoint('md') {
- --grid-margin: var(--space-lg);
+ --grid-margin: var(--dimensions-small-6); // 1.75
}
@include mixins.lg-breakpoint('lg') {
- --grid-gutter: calc(var(--space-sm) + var(--space-xxxs));
+ --grid-margin: var(--dimensions-large-6); // 2
+ --grid-gutter: var(--dimensions-large-6); // 2
}
@include mixins.lg-breakpoint('xl') {
- --grid-gutter: var(--space-lg);
+ --grid-margin: var(--dimensions-large-8); // 4.5
+ }
+
+ @include mixins.lg-breakpoint('xxl') {
+ --grid-margin: var(--dimensions-large-9); // 6.5
}
}
@@ -100,40 +105,6 @@ $columns: 12;
}
}
-.lg-col-xs {
- @include col-style;
-
- flex-grow: 1;
- flex-basis: 0;
- max-width: 100%;
-}
-
-.lg-col-xs-offset-0 {
- margin-left: 0;
-}
-
-@for $i from 1 through $columns {
- .lg-col-xs-#{$i},
- .lg-col-xs-#{$i}-offset {
- @extend .lg-col-xs;
- }
-}
-
-@for $i from 1 through $columns {
- $width: math.percentage(math.div($i, $columns));
-
- .lg-col-xs-#{$i} {
- flex-basis: $width;
- max-width: $width;
- }
-
- .lg-col-xs-offset-#{$i} {
- margin-left: $width;
- }
-}
-
-@include lg-grid-alignment('xs');
-
@include mixins.lg-breakpoint('sm') {
.lg-col-sm {
@include col-style;
diff --git a/projects/canopy/src/styles/list.scss b/projects/canopy/src/styles/list.scss
index 309692199..2a67539ac 100644
--- a/projects/canopy/src/styles/list.scss
+++ b/projects/canopy/src/styles/list.scss
@@ -11,8 +11,8 @@ ol {
& > li {
counter-increment: custom-counter;
position: relative;
- padding-left: var(--space-md);
- padding-bottom: var(--space-sm);
+ padding-left: var(--space-5);
+ padding-bottom: var(--space-4);
&::before {
color: var(--custom-list-counter-color);
diff --git a/projects/canopy/src/styles/mixins.scss b/projects/canopy/src/styles/mixins.scss
index 26d1e6729..e155caef6 100644
--- a/projects/canopy/src/styles/mixins.scss
+++ b/projects/canopy/src/styles/mixins.scss
@@ -133,8 +133,8 @@
}
$breakpoints: (
- // 320
- 'sm': 20rem,
+ // 0
+ 'sm': 0,
// 768
'md': 48rem,
// 1024
diff --git a/projects/canopy/src/styles/spacing.scss b/projects/canopy/src/styles/spacing.scss
index dfa5c8152..0af16c83d 100644
--- a/projects/canopy/src/styles/spacing.scss
+++ b/projects/canopy/src/styles/spacing.scss
@@ -1,44 +1,82 @@
@use 'mixins';
:root {
- /* spacing values */
- --space-unit: 1rem;
- --space-xxxs: calc(0.25 * var(--space-unit)); // 4
- --space-xxs: calc(0.5 * var(--space-unit)); // 8
- --space-xs: calc(0.75 * var(--space-unit)); // 12
- --space-sm: var(--space-unit); // 16
- --space-md: calc(1.5 * var(--space-unit)); // 24
- --space-lg: calc(2 * var(--space-unit)); // 32
- --space-xl: calc(2.5 * var(--space-unit)); // 40
- --space-xxl: calc(3 * var(--space-unit)); // 48
- --space-xxxl: calc(4.5 * var(--space-unit)); // 72
- --space-xxxxl: calc(9 * var(--space-unit)); // 144
-
- --component-padding: var(--space-sm);
- --component-margin: var(--space-md);
+ --space-1: var(--sm-space-1);
+ --space-2: var(--sm-space-2);
+ --space-3: var(--sm-space-3);
+ --space-4: var(--sm-space-4);
+ --space-5: var(--sm-space-5);
+ --space-6: var(--sm-space-6);
+ --space-7: var(--sm-space-7);
+ --space-8: var(--sm-space-8);
+ --space-9: var(--sm-space-9);
+ --space-10: var(--sm-space-10);
@include mixins.lg-breakpoint('md') {
- --component-padding: var(--space-lg);
+ --space-1: var(--md-space-1);
+ --space-2: var(--md-space-2);
+ --space-3: var(--md-space-3);
+ --space-4: var(--md-space-4);
+ --space-5: var(--md-space-5);
+ --space-6: var(--md-space-6);
+ --space-7: var(--md-space-7);
+ --space-8: var(--md-space-8);
+ --space-9: var(--md-space-9);
+ --space-10: var(--md-space-10);
}
@include mixins.lg-breakpoint('lg') {
- --component-margin: var(--space-lg);
+ --space-1: var(--lg-space-1);
+ --space-2: var(--lg-space-2);
+ --space-3: var(--lg-space-3);
+ --space-4: var(--lg-space-4);
+ --space-5: var(--lg-space-5);
+ --space-6: var(--lg-space-6);
+ --space-7: var(--lg-space-7);
+ --space-8: var(--lg-space-8);
+ --space-9: var(--lg-space-9);
+ --space-10: var(--lg-space-10);
+ }
+
+ @include mixins.lg-breakpoint('xl') {
+ --space-1: var(--xl-space-1);
+ --space-2: var(--xl-space-2);
+ --space-3: var(--xl-space-3);
+ --space-4: var(--xl-space-4);
+ --space-5: var(--xl-space-5);
+ --space-6: var(--xl-space-6);
+ --space-7: var(--xl-space-7);
+ --space-8: var(--xl-space-8);
+ --space-9: var(--xl-space-9);
+ --space-10: var(--xl-space-10);
+ }
+
+ @include mixins.lg-breakpoint('xxl') {
+ --space-1: var(--xxl-space-1);
+ --space-2: var(--xxl-space-2);
+ --space-3: var(--xxl-space-3);
+ --space-4: var(--xxl-space-4);
+ --space-5: var(--xxl-space-5);
+ --space-6: var(--xxl-space-6);
+ --space-7: var(--xxl-space-7);
+ --space-8: var(--xxl-space-8);
+ --space-9: var(--xxl-space-9);
+ --space-10: var(--xxl-space-10);
+ }
+
+ --component-padding: var(--space-4);
+ --component-margin: var(--space-5);
+
+ @include mixins.lg-breakpoint('md') {
+ --component-padding: var(--space-6);
+ }
+
+ @include mixins.lg-breakpoint('lg') {
+ --component-margin: var(--space-6);
}
}
-$spacing-list: (
- 'none',
- 'xxxs',
- 'xxs',
- 'xs',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- 'xxl',
- 'xxxl',
- 'xxxxl'
-);
+$spacing-list: ('none', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10');
@function space($val) {
@if $val == 'none' {
diff --git a/projects/canopy/src/styles/tokens/layout.css b/projects/canopy/src/styles/tokens/layout.css
new file mode 100644
index 000000000..1d3fdd953
--- /dev/null
+++ b/projects/canopy/src/styles/tokens/layout.css
@@ -0,0 +1,316 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+ --sm-page-cols: 1;
+ --sm-page-gutter: 1.75rem;
+ --sm-page-min-width: 20rem;
+ --sm-page-margin: 1rem;
+ --sm-page-max-width: 47.9375rem;
+ --sm-border-radius-1: 0.25rem;
+ --sm-border-radius-2: 0.5rem;
+ --sm-border-radius-3: 0.75rem;
+ --sm-border-radius-4: 1rem;
+ --sm-border-radius-5: 1.25rem;
+ --sm-border-radius-6: 1.75rem;
+ --sm-border-radius-7: 2.25rem;
+ --sm-border-radius-8: 3rem;
+ --sm-border-radius-9: 3.75rem;
+ --sm-border-radius-10: 5.25rem;
+ --sm-border-width-sm: 0.0625rem;
+ --sm-border-width-md: 0.125rem;
+ --sm-border-width-lg: 0.25rem;
+ --sm-colspan-1: 18rem;
+ --sm-colspan-2: 18rem;
+ --sm-colspan-3: 18rem;
+ --sm-colspan-4: 18rem;
+ --sm-colspan-5: 18rem;
+ --sm-colspan-6: 18rem;
+ --sm-colspan-7: 18rem;
+ --sm-colspan-8: 18rem;
+ --sm-colspan-9: 18rem;
+ --sm-colspan-10: 18rem;
+ --sm-colspan-11: 18rem;
+ --sm-colspan-12: 18rem;
+ --sm-font-size-1: 1rem;
+ --sm-font-size-2: 1.25rem;
+ --sm-font-size-3: 1.5rem;
+ --sm-font-size-4: 1.75rem;
+ --sm-font-size-5: 2rem;
+ --sm-font-size-6: 2.5rem;
+ --sm-font-size-7: 3rem;
+ --sm-font-size-8: 3.5rem;
+ --sm-font-size-9: 4.25rem;
+ --sm-font-size-0-6: 0.75rem;
+ --sm-font-size-0-8: 0.875rem;
+ --sm-line-height-1: 1.375rem;
+ --sm-line-height-2: 1.75rem;
+ --sm-line-height-3: 2.125rem;
+ --sm-line-height-4: 2.25rem;
+ --sm-line-height-5: 2.375rem;
+ --sm-line-height-6: 3rem;
+ --sm-line-height-7: 3.625rem;
+ --sm-line-height-8: 4.1875rem;
+ --sm-line-height-9: 4.8125rem;
+ --sm-line-height-0-6: 0.875rem;
+ --sm-line-height-0-8: 1.0625rem;
+ --sm-space-1: 0.25rem;
+ --sm-space-2: 0.5rem;
+ --sm-space-3: 0.75rem;
+ --sm-space-4: 1rem;
+ --sm-space-5: 1.25rem;
+ --sm-space-6: 1.75rem;
+ --sm-space-7: 2.25rem;
+ --sm-space-8: 3rem;
+ --sm-space-9: 3.75rem;
+ --sm-space-10: 5.25rem;
+ --md-page-cols: 12;
+ --md-page-gutter: 1.75rem;
+ --md-page-min-width: 48rem;
+ --md-page-margin: 1.75rem;
+ --md-page-max-width: 63.9375rem;
+ --md-border-radius-1: 0.25rem;
+ --md-border-radius-2: 0.5rem;
+ --md-border-radius-3: 0.75rem;
+ --md-border-radius-4: 1rem;
+ --md-border-radius-5: 1.25rem;
+ --md-border-radius-6: 1.75rem;
+ --md-border-radius-7: 2.25rem;
+ --md-border-radius-8: 3rem;
+ --md-border-radius-9: 3.75rem;
+ --md-border-radius-10: 5.25rem;
+ --md-border-width-sm: 0.0625rem;
+ --md-border-width-md: 0.125rem;
+ --md-border-width-lg: 0.25rem;
+ --md-colspan-1: 2.125rem;
+ --md-colspan-2: 5.9375rem;
+ --md-colspan-3: 9.8125rem;
+ --md-colspan-4: 13.65625rem;
+ --md-colspan-5: 17.5rem;
+ --md-colspan-6: 21.3125rem;
+ --md-colspan-7: 25.25rem;
+ --md-colspan-8: 29.0625rem;
+ --md-colspan-9: 32.9375rem;
+ --md-colspan-10: 36.8125rem;
+ --md-colspan-11: 40.625rem;
+ --md-colspan-12: 44.5rem;
+ --md-font-size-1: 1rem;
+ --md-font-size-2: 1.25rem;
+ --md-font-size-3: 1.5rem;
+ --md-font-size-4: 1.75rem;
+ --md-font-size-5: 2rem;
+ --md-font-size-6: 2.5rem;
+ --md-font-size-7: 3rem;
+ --md-font-size-8: 3.5rem;
+ --md-font-size-9: 4.25rem;
+ --md-font-size-0-6: 0.75rem;
+ --md-font-size-0-8: 0.875rem;
+ --md-line-height-1: 1.375rem;
+ --md-line-height-2: 1.75rem;
+ --md-line-height-3: 2.125rem;
+ --md-line-height-4: 2.25rem;
+ --md-line-height-5: 2.375rem;
+ --md-line-height-6: 3rem;
+ --md-line-height-7: 3.625rem;
+ --md-line-height-8: 4.1875rem;
+ --md-line-height-9: 4.8125rem;
+ --md-line-height-0-6: 0.875rem;
+ --md-line-height-0-8: 1.0625rem;
+ --md-space-1: 0.25rem;
+ --md-space-2: 0.5rem;
+ --md-space-3: 0.75rem;
+ --md-space-4: 1rem;
+ --md-space-5: 1.25rem;
+ --md-space-6: 1.75rem;
+ --md-space-7: 2.25rem;
+ --md-space-8: 3rem;
+ --md-space-9: 3.75rem;
+ --md-space-10: 5.25rem;
+ --lg-page-cols: 12;
+ --lg-page-gutter: 2rem;
+ --lg-page-min-width: 64rem;
+ --lg-page-margin: 2rem;
+ --lg-page-max-width: 79.9375rem;
+ --lg-border-radius-1: 0.25rem;
+ --lg-border-radius-2: 0.5rem;
+ --lg-border-radius-3: 0.75rem;
+ --lg-border-radius-4: 1rem;
+ --lg-border-radius-5: 1.5rem;
+ --lg-border-radius-6: 2rem;
+ --lg-border-radius-7: 3rem;
+ --lg-border-radius-8: 4.5rem;
+ --lg-border-radius-9: 6.5rem;
+ --lg-border-radius-10: 9.75rem;
+ --lg-border-width-sm: 0.0625rem;
+ --lg-border-width-md: 0.125rem;
+ --lg-border-width-lg: 0.25rem;
+ --lg-colspan-1: 3.1875rem;
+ --lg-colspan-2: 8.3125rem;
+ --lg-colspan-3: 13.5rem;
+ --lg-colspan-4: 18.65625rem;
+ --lg-colspan-5: 23.8125rem;
+ --lg-colspan-6: 29rem;
+ --lg-colspan-7: 34.1875rem;
+ --lg-colspan-8: 39.3125rem;
+ --lg-colspan-9: 44.5rem;
+ --lg-colspan-10: 49.6875rem;
+ --lg-colspan-11: 54.8125rem;
+ --lg-colspan-12: 60rem;
+ --lg-font-size-1: 1rem;
+ --lg-font-size-2: 1.25rem;
+ --lg-font-size-3: 1.5rem;
+ --lg-font-size-4: 2rem;
+ --lg-font-size-5: 2.5rem;
+ --lg-font-size-6: 3rem;
+ --lg-font-size-7: 3.875rem;
+ --lg-font-size-8: 4.75rem;
+ --lg-font-size-9: 7.1875rem;
+ --lg-font-size-0-6: 0.75rem;
+ --lg-font-size-0-8: 0.875rem;
+ --lg-line-height-1: 1.375rem;
+ --lg-line-height-2: 1.75rem;
+ --lg-line-height-3: 2.125rem;
+ --lg-line-height-4: 2.625rem;
+ --lg-line-height-5: 3rem;
+ --lg-line-height-6: 3.625rem;
+ --lg-line-height-7: 4.625rem;
+ --lg-line-height-8: 5.6875rem;
+ --lg-line-height-9: 7.1875rem;
+ --lg-line-height-0-6: 0.875rem;
+ --lg-line-height-0-8: 1.0625rem;
+ --lg-space-1: 0.25rem;
+ --lg-space-2: 0.5rem;
+ --lg-space-3: 0.75rem;
+ --lg-space-4: 1rem;
+ --lg-space-5: 1.5rem;
+ --lg-space-6: 2rem;
+ --lg-space-7: 3rem;
+ --lg-space-8: 4.5rem;
+ --lg-space-9: 6.5rem;
+ --lg-space-10: 9.75rem;
+ --xl-page-cols: 12;
+ --xl-page-gutter: 2rem;
+ --xl-page-min-width: 80rem;
+ --xl-page-margin: 4.5rem;
+ --xl-page-max-width: 89.9375rem;
+ --xl-border-radius-1: 0.25rem;
+ --xl-border-radius-2: 0.5rem;
+ --xl-border-radius-3: 0.75rem;
+ --xl-border-radius-4: 1rem;
+ --xl-border-radius-5: 1.5rem;
+ --xl-border-radius-6: 2rem;
+ --xl-border-radius-7: 3rem;
+ --xl-border-radius-8: 4.5rem;
+ --xl-border-radius-9: 6.5rem;
+ --xl-border-radius-10: 9.75rem;
+ --xl-border-width-sm: 0.0625rem;
+ --xl-border-width-md: 0.125rem;
+ --xl-border-width-lg: 0.25rem;
+ --xl-colspan-1: 4.0625rem;
+ --xl-colspan-2: 10.125rem;
+ --xl-colspan-3: 16.25rem;
+ --xl-colspan-4: 22.3125rem;
+ --xl-colspan-5: 28.375rem;
+ --xl-colspan-6: 34.5rem;
+ --xl-colspan-7: 40.5625rem;
+ --xl-colspan-8: 46.625rem;
+ --xl-colspan-9: 52.75rem;
+ --xl-colspan-10: 58.8125rem;
+ --xl-colspan-11: 64.875rem;
+ --xl-colspan-12: 71rem;
+ --xl-font-size-1: 1rem;
+ --xl-font-size-2: 1.25rem;
+ --xl-font-size-3: 1.5rem;
+ --xl-font-size-4: 2rem;
+ --xl-font-size-5: 2.5rem;
+ --xl-font-size-6: 3rem;
+ --xl-font-size-7: 3.875rem;
+ --xl-font-size-8: 4.75rem;
+ --xl-font-size-9: 7.1875rem;
+ --xl-font-size-0-6: 0.75rem;
+ --xl-font-size-0-8: 0.875rem;
+ --xl-line-height-1: 1.375rem;
+ --xl-line-height-2: 1.75rem;
+ --xl-line-height-3: 2.125rem;
+ --xl-line-height-4: 2.625rem;
+ --xl-line-height-5: 3rem;
+ --xl-line-height-6: 3.625rem;
+ --xl-line-height-7: 4.625rem;
+ --xl-line-height-8: 5.6875rem;
+ --xl-line-height-9: 7.1875rem;
+ --xl-line-height-0-6: 0.875rem;
+ --xl-line-height-0-8: 1.0625rem;
+ --xl-space-1: 0.25rem;
+ --xl-space-2: 0.5rem;
+ --xl-space-3: 0.75rem;
+ --xl-space-4: 1rem;
+ --xl-space-5: 1.5rem;
+ --xl-space-6: 2rem;
+ --xl-space-7: 3rem;
+ --xl-space-8: 4.5rem;
+ --xl-space-9: 6.5rem;
+ --xl-space-10: 9.75rem;
+ --xxl-page-cols: 12;
+ --xxl-page-gutter: 2rem;
+ --xxl-page-min-width: 90rem;
+ --xxl-page-margin: 6.5rem;
+ --xxl-page-max-width: 105rem;
+ --xxl-border-radius-1: 0.25rem;
+ --xxl-border-radius-2: 0.5rem;
+ --xxl-border-radius-3: 0.75rem;
+ --xxl-border-radius-4: 1rem;
+ --xxl-border-radius-5: 1.5rem;
+ --xxl-border-radius-6: 2rem;
+ --xxl-border-radius-7: 3rem;
+ --xxl-border-radius-8: 4.5rem;
+ --xxl-border-radius-9: 6.5rem;
+ --xxl-border-radius-10: 9.75rem;
+ --xxl-border-width-sm: 0.0625rem;
+ --xxl-border-width-md: 0.125rem;
+ --xxl-border-width-lg: 0.25rem;
+ --xxl-colspan-1: 4.5625rem;
+ --xxl-colspan-2: 11.125rem;
+ --xxl-colspan-3: 17.75rem;
+ --xxl-colspan-4: 24.3125rem;
+ --xxl-colspan-5: 30.875rem;
+ --xxl-colspan-6: 37.5rem;
+ --xxl-colspan-7: 44.0625rem;
+ --xxl-colspan-8: 50.625rem;
+ --xxl-colspan-9: 57.25rem;
+ --xxl-colspan-10: 63.8125rem;
+ --xxl-colspan-11: 70.375rem;
+ --xxl-colspan-12: 77rem;
+ --xxl-font-size-1: 1rem;
+ --xxl-font-size-2: 1.25rem;
+ --xxl-font-size-3: 1.5rem;
+ --xxl-font-size-4: 2rem;
+ --xxl-font-size-5: 2.5rem;
+ --xxl-font-size-6: 3rem;
+ --xxl-font-size-7: 3.875rem;
+ --xxl-font-size-8: 4.75rem;
+ --xxl-font-size-9: 7.1875rem;
+ --xxl-font-size-0-6: 0.75rem;
+ --xxl-font-size-0-8: 0.875rem;
+ --xxl-line-height-1: 1.375rem;
+ --xxl-line-height-2: 1.75rem;
+ --xxl-line-height-3: 2.125rem;
+ --xxl-line-height-4: 2.625rem;
+ --xxl-line-height-5: 3rem;
+ --xxl-line-height-6: 3.625rem;
+ --xxl-line-height-7: 4.625rem;
+ --xxl-line-height-8: 5.6875rem;
+ --xxl-line-height-9: 7.1875rem;
+ --xxl-line-height-0-6: 0.875rem;
+ --xxl-line-height-0-8: 1.0625rem;
+ --xxl-space-1: 0.25rem;
+ --xxl-space-2: 0.5rem;
+ --xxl-space-3: 0.75rem;
+ --xxl-space-4: 1rem;
+ --xxl-space-5: 1.5rem;
+ --xxl-space-6: 2rem;
+ --xxl-space-7: 3rem;
+ --xxl-space-8: 4.5rem;
+ --xxl-space-9: 6.5rem;
+ --xxl-space-10: 9.75rem;
+}
diff --git a/projects/canopy/src/styles/tokens/variables.css b/projects/canopy/src/styles/tokens/variables.css
new file mode 100644
index 000000000..1603a8233
--- /dev/null
+++ b/projects/canopy/src/styles/tokens/variables.css
@@ -0,0 +1,632 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+ --dimensions-small-1: 0.25rem;
+ --dimensions-small-2: 0.5rem;
+ --dimensions-small-3: 0.75rem;
+ --dimensions-small-4: 1rem;
+ --dimensions-small-5: 1.25rem;
+ --dimensions-small-6: 1.75rem;
+ --dimensions-small-7: 2.25rem;
+ --dimensions-small-8: 3rem;
+ --dimensions-small-9: 3.75rem;
+ --dimensions-small-10: 5.25rem;
+ --dimensions-large-1: 0.25rem;
+ --dimensions-large-2: 0.5rem;
+ --dimensions-large-3: 0.75rem;
+ --dimensions-large-4: 1rem;
+ --dimensions-large-5: 1.5rem;
+ --dimensions-large-6: 2rem;
+ --dimensions-large-7: 3rem;
+ --dimensions-large-8: 4.5rem;
+ --dimensions-large-9: 6.5rem;
+ --dimensions-large-10: 9.75rem;
+ --colour-blue-0: #ffffff;
+ --colour-blue-100: #d2effb;
+ --colour-blue-200: #aee1f7;
+ --colour-blue-300: #76c8f1;
+ --colour-blue-400: #42aeea;
+ --colour-blue-500: #1e84d2;
+ --colour-blue-600: #005dba;
+ --colour-blue-700: #003894;
+ --colour-blue-800: #001d6e;
+ --colour-blue-900: #000a52;
+ --colour-blue-1000: #000039;
+ --colour-green-0: #ffffff;
+ --colour-green-100: #dff6eb;
+ --colour-green-200: #caeedd;
+ --colour-green-300: #7fce9f;
+ --colour-green-400: #43af6e;
+ --colour-green-500: #1a8952;
+ --colour-green-600: #00633d;
+ --colour-green-700: #014a39;
+ --colour-green-800: #01312e;
+ --colour-green-900: #012425;
+ --colour-green-1000: #011b1f;
+ --colour-red-0: #ffffff;
+ --colour-red-100: #ffd5d2;
+ --colour-red-200: #ffc2bd;
+ --colour-red-300: #ff7e7e;
+ --colour-red-400: #ff3e51;
+ --colour-red-500: #e2223e;
+ --colour-red-600: #c50b30;
+ --colour-red-700: #ad092a;
+ --colour-red-800: #940824;
+ --colour-red-900: #6e061b;
+ --colour-red-1000: #480411;
+ --colour-yellow-0: #ffffff;
+ --colour-yellow-100: #fffbdc;
+ --colour-yellow-200: #fff9c7;
+ --colour-yellow-300: #fff298;
+ --colour-yellow-400: #ffe969;
+ --colour-yellow-500: #ffd335;
+ --colour-yellow-600: #ffb600;
+ --colour-yellow-700: #e48616;
+ --colour-yellow-800: #c86426;
+ --colour-yellow-900: #904029;
+ --colour-yellow-1000: #572722;
+ --colour-greyscale-0: #ffffff;
+ --colour-greyscale-100: #f4f4f4;
+ --colour-greyscale-200: #d3d3d3;
+ --colour-greyscale-300: #bcbdbd;
+ --colour-greyscale-400: #a6a7a7;
+ --colour-greyscale-500: #858686;
+ --colour-greyscale-600: #7a7b7b;
+ --colour-greyscale-700: #4d4f4f;
+ --colour-greyscale-800: #343634;
+ --colour-greyscale-900: #1d1d1b;
+ --colour-greyscale-1000: #000000;
+ --font-size-small-1: 1rem;
+ --font-size-small-2: 1.25rem;
+ --font-size-small-3: 1.5rem;
+ --font-size-small-4: 1.75rem;
+ --font-size-small-5: 2rem;
+ --font-size-small-6: 2.5rem;
+ --font-size-small-7: 3rem;
+ --font-size-small-8: 3.5rem;
+ --font-size-small-9: 4.25rem;
+ --font-size-small-0-6: 0.75rem;
+ --font-size-small-0-8: 0.875rem;
+ --font-size-large-1: 1rem;
+ --font-size-large-2: 1.25rem;
+ --font-size-large-3: 1.5rem;
+ --font-size-large-4: 2rem;
+ --font-size-large-5: 2.5rem;
+ --font-size-large-6: 3rem;
+ --font-size-large-7: 3.875rem;
+ --font-size-large-8: 4.75rem;
+ --font-size-large-9: 7.1875rem;
+ --font-size-large-0-6: 0.75rem;
+ --font-size-large-0-8: 0.875rem;
+ --line-height-small-1: 1.375rem;
+ --line-height-small-2: 1.75rem;
+ --line-height-small-3: 2.125rem;
+ --line-height-small-4: 2.25rem;
+ --line-height-small-5: 2.375rem;
+ --line-height-small-6: 3rem;
+ --line-height-small-7: 3.625rem;
+ --line-height-small-8: 4.1875rem;
+ --line-height-small-9: 4.8125rem;
+ --line-height-small-0-6: 0.875rem;
+ --line-height-small-0-8: 1.0625rem;
+ --line-height-large-1: 1.375rem;
+ --line-height-large-2: 1.75rem;
+ --line-height-large-3: 2.125rem;
+ --line-height-large-4: 2.625rem;
+ --line-height-large-5: 3rem;
+ --line-height-large-6: 3.625rem;
+ --line-height-large-7: 4.625rem;
+ --line-height-large-8: 5.6875rem;
+ --line-height-large-9: 7.1875rem;
+ --line-height-large-0-6: 0.875rem;
+ --line-height-large-0-8: 1.0625rem;
+ --productive-font-weight-300: 18.75rem;
+ --productive-font-weight-400: 25rem;
+ --productive-font-weight-500: 31.25rem;
+ --productive-font-weight-700: 43.75rem;
+ --productive-letter-spacing-ultra-condensed: -0.0125rem;
+ --productive-letter-spacing-condensed: -0.00625rem;
+ --productive-letter-spacing-normal: 0.0125rem;
+ --productive-letter-spacing-expanded: 0.01875rem;
+ --productive-font-family: 'Nunito Sans';
+ --expressive-font-weight-300: 18.75rem;
+ --expressive-font-weight-400: 25rem;
+ --expressive-font-weight-500: 31.25rem;
+ --expressive-font-weight-700: 43.75rem;
+ --expressive-letter-spacing-ultra-condensed: -0.08125rem;
+ --expressive-letter-spacing-condensed: -0.075rem;
+ --expressive-letter-spacing-normal: -0.03125rem;
+ --expressive-font-family: 'ABC Otto';
+ --sm-page-cols: 1;
+ --sm-page-gutter: 1.75rem;
+ --sm-page-min-width: 20rem;
+ --sm-page-margin: 1rem;
+ --sm-page-max-width: 47.9375rem;
+ --sm-border-radius-1: 0.25rem;
+ --sm-border-radius-2: 0.5rem;
+ --sm-border-radius-3: 0.75rem;
+ --sm-border-radius-4: 1rem;
+ --sm-border-radius-5: 1.25rem;
+ --sm-border-radius-6: 1.75rem;
+ --sm-border-radius-7: 2.25rem;
+ --sm-border-radius-8: 3rem;
+ --sm-border-radius-9: 3.75rem;
+ --sm-border-radius-10: 5.25rem;
+ --sm-border-width-sm: 0.0625rem;
+ --sm-border-width-md: 0.125rem;
+ --sm-border-width-lg: 0.25rem;
+ --sm-colspan-1: 18rem;
+ --sm-colspan-2: 18rem;
+ --sm-colspan-3: 18rem;
+ --sm-colspan-4: 18rem;
+ --sm-colspan-5: 18rem;
+ --sm-colspan-6: 18rem;
+ --sm-colspan-7: 18rem;
+ --sm-colspan-8: 18rem;
+ --sm-colspan-9: 18rem;
+ --sm-colspan-10: 18rem;
+ --sm-colspan-11: 18rem;
+ --sm-colspan-12: 18rem;
+ --sm-font-size-1: 1rem;
+ --sm-font-size-2: 1.25rem;
+ --sm-font-size-3: 1.5rem;
+ --sm-font-size-4: 1.75rem;
+ --sm-font-size-5: 2rem;
+ --sm-font-size-6: 2.5rem;
+ --sm-font-size-7: 3rem;
+ --sm-font-size-8: 3.5rem;
+ --sm-font-size-9: 4.25rem;
+ --sm-font-size-0-6: 0.75rem;
+ --sm-font-size-0-8: 0.875rem;
+ --sm-line-height-1: 1.375rem;
+ --sm-line-height-2: 1.75rem;
+ --sm-line-height-3: 2.125rem;
+ --sm-line-height-4: 2.25rem;
+ --sm-line-height-5: 2.375rem;
+ --sm-line-height-6: 3rem;
+ --sm-line-height-7: 3.625rem;
+ --sm-line-height-8: 4.1875rem;
+ --sm-line-height-9: 4.8125rem;
+ --sm-line-height-0-6: 0.875rem;
+ --sm-line-height-0-8: 1.0625rem;
+ --sm-space-1: 0.25rem;
+ --sm-space-2: 0.5rem;
+ --sm-space-3: 0.75rem;
+ --sm-space-4: 1rem;
+ --sm-space-5: 1.25rem;
+ --sm-space-6: 1.75rem;
+ --sm-space-7: 2.25rem;
+ --sm-space-8: 3rem;
+ --sm-space-9: 3.75rem;
+ --sm-space-10: 5.25rem;
+ --md-page-cols: 12;
+ --md-page-gutter: 1.75rem;
+ --md-page-min-width: 48rem;
+ --md-page-margin: 1.75rem;
+ --md-page-max-width: 63.9375rem;
+ --md-border-radius-1: 0.25rem;
+ --md-border-radius-2: 0.5rem;
+ --md-border-radius-3: 0.75rem;
+ --md-border-radius-4: 1rem;
+ --md-border-radius-5: 1.25rem;
+ --md-border-radius-6: 1.75rem;
+ --md-border-radius-7: 2.25rem;
+ --md-border-radius-8: 3rem;
+ --md-border-radius-9: 3.75rem;
+ --md-border-radius-10: 5.25rem;
+ --md-border-width-sm: 0.0625rem;
+ --md-border-width-md: 0.125rem;
+ --md-border-width-lg: 0.25rem;
+ --md-colspan-1: 2.125rem;
+ --md-colspan-2: 5.9375rem;
+ --md-colspan-3: 9.8125rem;
+ --md-colspan-4: 13.65625rem;
+ --md-colspan-5: 17.5rem;
+ --md-colspan-6: 21.3125rem;
+ --md-colspan-7: 25.25rem;
+ --md-colspan-8: 29.0625rem;
+ --md-colspan-9: 32.9375rem;
+ --md-colspan-10: 36.8125rem;
+ --md-colspan-11: 40.625rem;
+ --md-colspan-12: 44.5rem;
+ --md-font-size-1: 1rem;
+ --md-font-size-2: 1.25rem;
+ --md-font-size-3: 1.5rem;
+ --md-font-size-4: 1.75rem;
+ --md-font-size-5: 2rem;
+ --md-font-size-6: 2.5rem;
+ --md-font-size-7: 3rem;
+ --md-font-size-8: 3.5rem;
+ --md-font-size-9: 4.25rem;
+ --md-font-size-0-6: 0.75rem;
+ --md-font-size-0-8: 0.875rem;
+ --md-line-height-1: 1.375rem;
+ --md-line-height-2: 1.75rem;
+ --md-line-height-3: 2.125rem;
+ --md-line-height-4: 2.25rem;
+ --md-line-height-5: 2.375rem;
+ --md-line-height-6: 3rem;
+ --md-line-height-7: 3.625rem;
+ --md-line-height-8: 4.1875rem;
+ --md-line-height-9: 4.8125rem;
+ --md-line-height-0-6: 0.875rem;
+ --md-line-height-0-8: 1.0625rem;
+ --md-space-1: 0.25rem;
+ --md-space-2: 0.5rem;
+ --md-space-3: 0.75rem;
+ --md-space-4: 1rem;
+ --md-space-5: 1.25rem;
+ --md-space-6: 1.75rem;
+ --md-space-7: 2.25rem;
+ --md-space-8: 3rem;
+ --md-space-9: 3.75rem;
+ --md-space-10: 5.25rem;
+ --lg-page-cols: 12;
+ --lg-page-gutter: 2rem;
+ --lg-page-min-width: 64rem;
+ --lg-page-margin: 2rem;
+ --lg-page-max-width: 79.9375rem;
+ --lg-border-radius-1: 0.25rem;
+ --lg-border-radius-2: 0.5rem;
+ --lg-border-radius-3: 0.75rem;
+ --lg-border-radius-4: 1rem;
+ --lg-border-radius-5: 1.5rem;
+ --lg-border-radius-6: 2rem;
+ --lg-border-radius-7: 3rem;
+ --lg-border-radius-8: 4.5rem;
+ --lg-border-radius-9: 6.5rem;
+ --lg-border-radius-10: 9.75rem;
+ --lg-border-width-sm: 0.0625rem;
+ --lg-border-width-md: 0.125rem;
+ --lg-border-width-lg: 0.25rem;
+ --lg-colspan-1: 3.1875rem;
+ --lg-colspan-2: 8.3125rem;
+ --lg-colspan-3: 13.5rem;
+ --lg-colspan-4: 18.65625rem;
+ --lg-colspan-5: 23.8125rem;
+ --lg-colspan-6: 29rem;
+ --lg-colspan-7: 34.1875rem;
+ --lg-colspan-8: 39.3125rem;
+ --lg-colspan-9: 44.5rem;
+ --lg-colspan-10: 49.6875rem;
+ --lg-colspan-11: 54.8125rem;
+ --lg-colspan-12: 60rem;
+ --lg-font-size-1: 1rem;
+ --lg-font-size-2: 1.25rem;
+ --lg-font-size-3: 1.5rem;
+ --lg-font-size-4: 2rem;
+ --lg-font-size-5: 2.5rem;
+ --lg-font-size-6: 3rem;
+ --lg-font-size-7: 3.875rem;
+ --lg-font-size-8: 4.75rem;
+ --lg-font-size-9: 7.1875rem;
+ --lg-font-size-0-6: 0.75rem;
+ --lg-font-size-0-8: 0.875rem;
+ --lg-line-height-1: 1.375rem;
+ --lg-line-height-2: 1.75rem;
+ --lg-line-height-3: 2.125rem;
+ --lg-line-height-4: 2.625rem;
+ --lg-line-height-5: 3rem;
+ --lg-line-height-6: 3.625rem;
+ --lg-line-height-7: 4.625rem;
+ --lg-line-height-8: 5.6875rem;
+ --lg-line-height-9: 7.1875rem;
+ --lg-line-height-0-6: 0.875rem;
+ --lg-line-height-0-8: 1.0625rem;
+ --lg-space-1: 0.25rem;
+ --lg-space-2: 0.5rem;
+ --lg-space-3: 0.75rem;
+ --lg-space-4: 1rem;
+ --lg-space-5: 1.5rem;
+ --lg-space-6: 2rem;
+ --lg-space-7: 3rem;
+ --lg-space-8: 4.5rem;
+ --lg-space-9: 6.5rem;
+ --lg-space-10: 9.75rem;
+ --xl-page-cols: 12;
+ --xl-page-gutter: 2rem;
+ --xl-page-min-width: 80rem;
+ --xl-page-margin: 4.5rem;
+ --xl-page-max-width: 89.9375rem;
+ --xl-border-radius-1: 0.25rem;
+ --xl-border-radius-2: 0.5rem;
+ --xl-border-radius-3: 0.75rem;
+ --xl-border-radius-4: 1rem;
+ --xl-border-radius-5: 1.5rem;
+ --xl-border-radius-6: 2rem;
+ --xl-border-radius-7: 3rem;
+ --xl-border-radius-8: 4.5rem;
+ --xl-border-radius-9: 6.5rem;
+ --xl-border-radius-10: 9.75rem;
+ --xl-border-width-sm: 0.0625rem;
+ --xl-border-width-md: 0.125rem;
+ --xl-border-width-lg: 0.25rem;
+ --xl-colspan-1: 4.0625rem;
+ --xl-colspan-2: 10.125rem;
+ --xl-colspan-3: 16.25rem;
+ --xl-colspan-4: 22.3125rem;
+ --xl-colspan-5: 28.375rem;
+ --xl-colspan-6: 34.5rem;
+ --xl-colspan-7: 40.5625rem;
+ --xl-colspan-8: 46.625rem;
+ --xl-colspan-9: 52.75rem;
+ --xl-colspan-10: 58.8125rem;
+ --xl-colspan-11: 64.875rem;
+ --xl-colspan-12: 71rem;
+ --xl-font-size-1: 1rem;
+ --xl-font-size-2: 1.25rem;
+ --xl-font-size-3: 1.5rem;
+ --xl-font-size-4: 2rem;
+ --xl-font-size-5: 2.5rem;
+ --xl-font-size-6: 3rem;
+ --xl-font-size-7: 3.875rem;
+ --xl-font-size-8: 4.75rem;
+ --xl-font-size-9: 7.1875rem;
+ --xl-font-size-0-6: 0.75rem;
+ --xl-font-size-0-8: 0.875rem;
+ --xl-line-height-1: 1.375rem;
+ --xl-line-height-2: 1.75rem;
+ --xl-line-height-3: 2.125rem;
+ --xl-line-height-4: 2.625rem;
+ --xl-line-height-5: 3rem;
+ --xl-line-height-6: 3.625rem;
+ --xl-line-height-7: 4.625rem;
+ --xl-line-height-8: 5.6875rem;
+ --xl-line-height-9: 7.1875rem;
+ --xl-line-height-0-6: 0.875rem;
+ --xl-line-height-0-8: 1.0625rem;
+ --xl-space-1: 0.25rem;
+ --xl-space-2: 0.5rem;
+ --xl-space-3: 0.75rem;
+ --xl-space-4: 1rem;
+ --xl-space-5: 1.5rem;
+ --xl-space-6: 2rem;
+ --xl-space-7: 3rem;
+ --xl-space-8: 4.5rem;
+ --xl-space-9: 6.5rem;
+ --xl-space-10: 9.75rem;
+ --xxl-page-cols: 12;
+ --xxl-page-gutter: 2rem;
+ --xxl-page-min-width: 90rem;
+ --xxl-page-margin: 6.5rem;
+ --xxl-page-max-width: 105rem;
+ --xxl-border-radius-1: 0.25rem;
+ --xxl-border-radius-2: 0.5rem;
+ --xxl-border-radius-3: 0.75rem;
+ --xxl-border-radius-4: 1rem;
+ --xxl-border-radius-5: 1.5rem;
+ --xxl-border-radius-6: 2rem;
+ --xxl-border-radius-7: 3rem;
+ --xxl-border-radius-8: 4.5rem;
+ --xxl-border-radius-9: 6.5rem;
+ --xxl-border-radius-10: 9.75rem;
+ --xxl-border-width-sm: 0.0625rem;
+ --xxl-border-width-md: 0.125rem;
+ --xxl-border-width-lg: 0.25rem;
+ --xxl-colspan-1: 4.5625rem;
+ --xxl-colspan-2: 11.125rem;
+ --xxl-colspan-3: 17.75rem;
+ --xxl-colspan-4: 24.3125rem;
+ --xxl-colspan-5: 30.875rem;
+ --xxl-colspan-6: 37.5rem;
+ --xxl-colspan-7: 44.0625rem;
+ --xxl-colspan-8: 50.625rem;
+ --xxl-colspan-9: 57.25rem;
+ --xxl-colspan-10: 63.8125rem;
+ --xxl-colspan-11: 70.375rem;
+ --xxl-colspan-12: 77rem;
+ --xxl-font-size-1: 1rem;
+ --xxl-font-size-2: 1.25rem;
+ --xxl-font-size-3: 1.5rem;
+ --xxl-font-size-4: 2rem;
+ --xxl-font-size-5: 2.5rem;
+ --xxl-font-size-6: 3rem;
+ --xxl-font-size-7: 3.875rem;
+ --xxl-font-size-8: 4.75rem;
+ --xxl-font-size-9: 7.1875rem;
+ --xxl-font-size-0-6: 0.75rem;
+ --xxl-font-size-0-8: 0.875rem;
+ --xxl-line-height-1: 1.375rem;
+ --xxl-line-height-2: 1.75rem;
+ --xxl-line-height-3: 2.125rem;
+ --xxl-line-height-4: 2.625rem;
+ --xxl-line-height-5: 3rem;
+ --xxl-line-height-6: 3.625rem;
+ --xxl-line-height-7: 4.625rem;
+ --xxl-line-height-8: 5.6875rem;
+ --xxl-line-height-9: 7.1875rem;
+ --xxl-line-height-0-6: 0.875rem;
+ --xxl-line-height-0-8: 1.0625rem;
+ --xxl-space-1: 0.25rem;
+ --xxl-space-2: 0.5rem;
+ --xxl-space-3: 0.75rem;
+ --xxl-space-4: 1rem;
+ --xxl-space-5: 1.5rem;
+ --xxl-space-6: 2rem;
+ --xxl-space-7: 3rem;
+ --xxl-space-8: 4.5rem;
+ --xxl-space-9: 6.5rem;
+ --xxl-space-10: 9.75rem;
+ --blue-brand-tint-1: #d2effb;
+ --blue-brand-tint-2: #aee1f7;
+ --blue-brand-tint-3: #42aeea;
+ --blue-brand-tint-4: #005dba;
+ --blue-brand-tint-5: #001d6e;
+ --blue-brand-tint-6: #000a52;
+ --blue-brand-tint-7: #000039;
+ --blue-border-mono-1: #ffffff;
+ --blue-border-mono-2: #f4f4f4;
+ --blue-border-mono-3: #d3d3d3;
+ --blue-border-mono-4: #a6a7a7;
+ --blue-border-mono-5: #1d1d1b;
+ --blue-border-colour-1: #42aeea;
+ --blue-border-colour-2: #001d6e;
+ --blue-interactive-default-1: #ffffff;
+ --blue-interactive-default-2: #d2effb;
+ --blue-interactive-default-3: #42aeea;
+ --blue-interactive-default-4: #005dba;
+ --blue-interactive-default-5: #1d1d1b;
+ --blue-interactive-reversed-1: #1d1d1b;
+ --blue-interactive-reversed-2: #4d4f4f;
+ --blue-interactive-reversed-3: #001d6e;
+ --blue-interactive-reversed-4: #005dba;
+ --blue-interactive-reversed-5: #42aeea;
+ --blue-interactive-reversed-6: #aee1f7;
+ --blue-interactive-reversed-7: #f4f4f4;
+ --blue-interactive-reversed-8: #ffffff;
+ --blue-interactive-reversed-9: #ffffff;
+ --blue-surface-fill-1: #ffffff;
+ --blue-surface-fill-2: #f4f4f4;
+ --blue-surface-fill-3: #aee1f7;
+ --blue-surface-fill-4: #42aeea;
+ --blue-surface-fill-5: #005dba;
+ --blue-surface-fill-6: #001d6e;
+ --blue-text-static-1: #1d1d1b;
+ --blue-text-static-2: #4d4f4f;
+ --blue-text-static-3: #001d6e;
+ --blue-text-static-4: #d2effb;
+ --blue-text-static-5: #ffffff;
+ --blue-text-interactive-1: #f4f4f4;
+ --blue-text-interactive-2: #005dba;
+ --blue-text-interactive-3: #001d6e;
+ --blue-text-interactive-4: #000a52;
+ --blue-text-interactive-5: #000039;
+ --blue-text-interactive-6: #000000;
+ --green-brand-tint-1: #dff6eb;
+ --green-brand-tint-2: #caeedd;
+ --green-brand-tint-3: #43af6e;
+ --green-brand-tint-4: #00633d;
+ --green-brand-tint-5: #01312e;
+ --green-brand-tint-6: #012425;
+ --green-brand-tint-7: #011b1f;
+ --green-border-mono-1: #ffffff;
+ --green-border-mono-2: #f4f4f4;
+ --green-border-mono-3: #d3d3d3;
+ --green-border-mono-4: #a6a7a7;
+ --green-border-mono-5: #1d1d1b;
+ --green-border-colour-1: #43af6e;
+ --green-border-colour-2: #01312e;
+ --green-interactive-default-1: #ffffff;
+ --green-interactive-default-2: #dff6eb;
+ --green-interactive-default-3: #43af6e;
+ --green-interactive-default-4: #00633d;
+ --green-interactive-default-5: #1d1d1b;
+ --green-interactive-reversed-1: #1d1d1b;
+ --green-interactive-reversed-2: #4d4f4f;
+ --green-interactive-reversed-3: #01312e;
+ --green-interactive-reversed-4: #00633d;
+ --green-interactive-reversed-5: #43af6e;
+ --green-interactive-reversed-6: #caeedd;
+ --green-interactive-reversed-7: #f4f4f4;
+ --green-interactive-reversed-8: #ffffff;
+ --green-interactive-reversed-9: #ffffff;
+ --green-surface-fill-1: #ffffff;
+ --green-surface-fill-2: #f4f4f4;
+ --green-surface-fill-3: #caeedd;
+ --green-surface-fill-4: #43af6e;
+ --green-surface-fill-5: #00633d;
+ --green-surface-fill-6: #01312e;
+ --green-text-static-1: #1d1d1b;
+ --green-text-static-2: #4d4f4f;
+ --green-text-static-3: #01312e;
+ --green-text-static-4: #dff6eb;
+ --green-text-static-5: #ffffff;
+ --green-text-interactive-1: #f4f4f4;
+ --green-text-interactive-2: #00633d;
+ --green-text-interactive-3: #01312e;
+ --green-text-interactive-4: #012425;
+ --green-text-interactive-5: #011b1f;
+ --green-text-interactive-6: #000000;
+ --red-brand-tint-1: #ffd5d2;
+ --red-brand-tint-2: #ffc2bd;
+ --red-brand-tint-3: #ff3e51;
+ --red-brand-tint-4: #c50b30;
+ --red-brand-tint-5: #940824;
+ --red-brand-tint-6: #6e061b;
+ --red-brand-tint-7: #480411;
+ --red-border-mono-1: #ffffff;
+ --red-border-mono-2: #f4f4f4;
+ --red-border-mono-3: #d3d3d3;
+ --red-border-mono-4: #a6a7a7;
+ --red-border-mono-5: #1d1d1b;
+ --red-border-colour-1: #ff3e51;
+ --red-border-colour-2: #940824;
+ --red-interactive-default-1: #ffffff;
+ --red-interactive-default-2: #ffd5d2;
+ --red-interactive-default-3: #ff3e51;
+ --red-interactive-default-4: #c50b30;
+ --red-interactive-default-5: #1d1d1b;
+ --red-interactive-reversed-1: #1d1d1b;
+ --red-interactive-reversed-2: #4d4f4f;
+ --red-interactive-reversed-3: #480411;
+ --red-interactive-reversed-4: #c50b30;
+ --red-interactive-reversed-5: #ff3e51;
+ --red-interactive-reversed-6: #ffd5d2;
+ --red-interactive-reversed-7: #f4f4f4;
+ --red-interactive-reversed-8: #ffffff;
+ --red-interactive-reversed-9: #ffffff;
+ --red-surface-fill-1: #ffffff;
+ --red-surface-fill-2: #f4f4f4;
+ --red-surface-fill-3: #ffd5d2;
+ --red-surface-fill-4: #ff3e51;
+ --red-surface-fill-5: #c50b30;
+ --red-surface-fill-6: #940824;
+ --red-text-static-1: #1d1d1b;
+ --red-text-static-2: #4d4f4f;
+ --red-text-static-3: #940824;
+ --red-text-static-4: #ffd5d2;
+ --red-text-static-5: #ffffff;
+ --red-text-interactive-1: #f4f4f4;
+ --red-text-interactive-2: #c50b30;
+ --red-text-interactive-3: #940824;
+ --red-text-interactive-4: #6e061b;
+ --red-text-interactive-5: #480411;
+ --red-text-interactive-6: #000000;
+ --yellow-brand-tint-1: #fffbdc;
+ --yellow-brand-tint-2: #fff9c7;
+ --yellow-brand-tint-3: #ffe969;
+ --yellow-brand-tint-4: #ffb600;
+ --yellow-brand-tint-5: #c86426;
+ --yellow-brand-tint-6: #904029;
+ --yellow-brand-tint-7: #572722;
+ --yellow-border-mono-1: #ffffff;
+ --yellow-border-mono-2: #1d1d1b;
+ --yellow-border-mono-3: #d3d3d3;
+ --yellow-border-mono-4: #a6a7a7;
+ --yellow-border-mono-5: #1d1d1b;
+ --yellow-border-colour-1: #ffe969;
+ --yellow-border-colour-2: #c86426;
+ --yellow-interactive-default-1: #1d1d1b;
+ --yellow-interactive-default-2: #fffbdc;
+ --yellow-interactive-default-3: #ffe969;
+ --yellow-interactive-default-4: #ffb600;
+ --yellow-interactive-default-5: #000000;
+ --yellow-interactive-reversed-1: #000000;
+ --yellow-interactive-reversed-2: #4d4f4f;
+ --yellow-interactive-reversed-3: #572722;
+ --yellow-interactive-reversed-4: #ffb600;
+ --yellow-interactive-reversed-5: #ffe969;
+ --yellow-interactive-reversed-6: #fff9c7;
+ --yellow-interactive-reversed-7: #f4f4f4;
+ --yellow-interactive-reversed-8: #1d1d1b;
+ --yellow-interactive-reversed-9: #ffffff;
+ --yellow-surface-fill-1: #ffffff;
+ --yellow-surface-fill-2: #f4f4f4;
+ --yellow-surface-fill-3: #fff9c7;
+ --yellow-surface-fill-4: #ffe969;
+ --yellow-surface-fill-5: #ffb600;
+ --yellow-surface-fill-6: #c86426;
+ --yellow-text-static-1: #1d1d1b;
+ --yellow-text-static-2: #4d4f4f;
+ --yellow-text-static-3: #904029;
+ --yellow-text-static-4: #572722;
+ --yellow-text-static-5: #1d1d1b;
+ --yellow-text-interactive-1: #1d1d1b;
+ --yellow-text-interactive-2: #1d1d1b;
+ --yellow-text-interactive-3: #1d1d1b;
+ --yellow-text-interactive-4: #1d1d1b;
+ --yellow-text-interactive-5: #000000;
+ --yellow-text-interactive-6: #000000;
+}
diff --git a/projects/canopy/src/styles/variables.scss b/projects/canopy/src/styles/variables.scss
index f9e57b164..c9d43cfb6 100644
--- a/projects/canopy/src/styles/variables.scss
+++ b/projects/canopy/src/styles/variables.scss
@@ -32,3 +32,6 @@
@use 'variables/typography';
@use 'variables/main' as main2;
+
+@use 'tokens/variables';
+@use 'tokens/layout';
diff --git a/projects/canopy/src/styles/variables/components/_card.scss b/projects/canopy/src/styles/variables/components/_card.scss
index 58e313c7c..347422087 100644
--- a/projects/canopy/src/styles/variables/components/_card.scss
+++ b/projects/canopy/src/styles/variables/components/_card.scss
@@ -6,10 +6,10 @@
--card-principle-data-point-label-color: var(--colour-greyscale-700);
--card-principle-data-point-date-color: var(--colour-greyscale-900);
--card-principle-data-point-value-color: var(--colour-greyscale-900);
- --card-header-margin-bottom: var(--space-lg);
+ --card-header-margin-bottom: var(--space-6);
--card-navigation-link-padding-bottom: 1.25rem;
- --card-navigation-link-padding-top: var(--space-sm);
- --card-navigation-link-padding-top-md: var(--space-md);
+ --card-navigation-link-padding-top: var(--space-4);
+ --card-navigation-link-padding-top-md: var(--space-5);
--card-hero-image-width: 13.75rem; // 220px
--card-hero-image-height: 10.25rem; // 164px
}
diff --git a/projects/canopy/src/styles/variables/components/_hero.scss b/projects/canopy/src/styles/variables/components/_hero.scss
index d4d93198b..18010d499 100644
--- a/projects/canopy/src/styles/variables/components/_hero.scss
+++ b/projects/canopy/src/styles/variables/components/_hero.scss
@@ -1,5 +1,5 @@
:root {
- --hero-padding: var(--space-sm);
+ --hero-padding: var(--space-4);
--hero-color: var(--colour-greyscale-0);
--hero-bg-color: var(--colour-blue-700);
--hero-rule-color: rgba(255, 255, 255, 0.2);
diff --git a/projects/canopy/src/styles/variables/components/_promo-card.scss b/projects/canopy/src/styles/variables/components/_promo-card.scss
index 959cfd3d0..ebf014d7b 100644
--- a/projects/canopy/src/styles/variables/components/_promo-card.scss
+++ b/projects/canopy/src/styles/variables/components/_promo-card.scss
@@ -1,6 +1,6 @@
:root {
- --promo-card-gap-sm: var(--space-xxl);
- --promo-card-gap-lg: var(--space-lg);
+ --promo-card-gap-sm: var(--space-8);
+ --promo-card-gap-lg: var(--space-6);
--promo-card-image-dimension: 21.5rem;
}
diff --git a/projects/canopy/src/styles/variables/components/_radio.scss b/projects/canopy/src/styles/variables/components/_radio.scss
index 2341fe4a8..e7264a19c 100644
--- a/projects/canopy/src/styles/variables/components/_radio.scss
+++ b/projects/canopy/src/styles/variables/components/_radio.scss
@@ -15,6 +15,6 @@
--radio-segment-separator-border-width: var(--border-width);
--radio-segment-separator-border-color: var(--colour-greyscale-200);
- --radio-segment-label-min-width: calc(6 * var(--space-unit));
+ --radio-segment-label-min-width: calc(6 * var(--space-4));
--radio-segment-hover-bg-color: var(--colour-blue-700);
}
diff --git a/projects/canopy/src/styles/variables/components/_spinner.scss b/projects/canopy/src/styles/variables/components/_spinner.scss
index e7877f609..dca70b6a9 100644
--- a/projects/canopy/src/styles/variables/components/_spinner.scss
+++ b/projects/canopy/src/styles/variables/components/_spinner.scss
@@ -1,8 +1,8 @@
:root {
--spinner-border-width: 0.1875rem; //3px
- --spinner-diameter: var(--space-lg);
- --spinner-diameter--sm: var(--space-md);
- --spinner-diameter--xs: var(--space-sm);
+ --spinner-diameter: var(--space-6);
+ --spinner-diameter--sm: var(--space-5);
+ --spinner-diameter--xs: var(--space-4);
--spinner-rotation-speed: 800ms;
--spinner-ring-top-color: var(--colour-red-600);
diff --git a/projects/canopy/src/styles/variables/components/_table.scss b/projects/canopy/src/styles/variables/components/_table.scss
index 0bf74cc38..702ec68ff 100644
--- a/projects/canopy/src/styles/variables/components/_table.scss
+++ b/projects/canopy/src/styles/variables/components/_table.scss
@@ -3,5 +3,5 @@
--table-header-border-width: 0.125rem;
--table-header-border-color: var(--colour-greyscale-900);
--table-row-border-color: var(--colour-greyscale-200);
- --table-toggle-width: var(--space-xxl);
+ --table-toggle-width: var(--space-8);
}
diff --git a/projects/canopy/src/styles/variables/components/_tabs.scss b/projects/canopy/src/styles/variables/components/_tabs.scss
index 39ee9f3f3..5f033e35c 100644
--- a/projects/canopy/src/styles/variables/components/_tabs.scss
+++ b/projects/canopy/src/styles/variables/components/_tabs.scss
@@ -2,7 +2,7 @@
--tabs-border-bottom-width: var(--border-width);
--tabs-border-bottom-color: var(--colour-greyscale-200);
- --tabs-list-item-line-height: var(--space-xxl);
+ --tabs-list-item-line-height: var(--space-6);
--tabs-list-item-lg-line-height: 3.25rem; // 52px;
--tabs-list-item-color: var(--colour-greyscale-900);
--tabs-list-item-font-weight: var(--font-weight-400);
diff --git a/projects/canopy/src/styles/variables/components/_toggle.scss b/projects/canopy/src/styles/variables/components/_toggle.scss
index 8f3f7720b..11aeafcb7 100644
--- a/projects/canopy/src/styles/variables/components/_toggle.scss
+++ b/projects/canopy/src/styles/variables/components/_toggle.scss
@@ -11,9 +11,9 @@
--toggle-outer-height: 1rem;
--toggle-outer-width: var(--toggle-outer-height);
- --toggle-switch-height: var(--space-md);
+ --toggle-switch-height: var(--space-5);
--toggle-switch-width: calc(var(--toggle-switch-height) * 1.85);
- --toggle-switch-dot-offset: var(--space-xxxs);
+ --toggle-switch-dot-offset: var(--space-1);
--toggle-switch-off-bg-color: var(--colour-greyscale-100);
--toggle-switch-off-dot-bg-color: var(--colour-blue-600);
diff --git a/projects/canopy/src/styles/variables/components/button/_button.scss b/projects/canopy/src/styles/variables/components/button/_button.scss
index 2859fb8c5..2bea43d44 100644
--- a/projects/canopy/src/styles/variables/components/button/_button.scss
+++ b/projects/canopy/src/styles/variables/components/button/_button.scss
@@ -7,7 +7,7 @@
--btn-vertical-padding: var(--form-field-vertical-padding); // 9px
--btn-horizontal-padding: 1.1875rem; // 19px
- --btn-vertical-padding--sm: calc(var(--space-xxxs) - var(--border-width));
+ --btn-vertical-padding--sm: calc(var(--space-1) - var(--border-width));
--btn-horizontal-padding--sm: var(--btn-horizontal-padding);
--btn-icon-text-padding: 0.625rem; // 10px
diff --git a/scripts/generate-css-variables.js b/scripts/generate-css-variables.js
index 223c8e0ce..89b73bcd1 100644
--- a/scripts/generate-css-variables.js
+++ b/scripts/generate-css-variables.js
@@ -3,8 +3,9 @@
const fsExtra = require('fs-extra');
const path = require('path');
-// Configuration
+// Configuration - now includes both directories
const variablesDir = path.join(__dirname, '../projects/canopy/src/styles/variables');
+const tokensDir = path.join(__dirname, '../projects/canopy/src/styles/tokens');
const outputDir = path.join(__dirname, '../projects/canopy/storybook/css-variables');
// Ensure output directory exists
@@ -18,6 +19,12 @@ const toCamelCase = (str) => {
// Get all files recursively from a directory
const getFilesRecursively = (dir) => {
const results = [];
+
+ // Check if directory exists
+ if (!fsExtra.existsSync(dir)) {
+ return results;
+ }
+
const files = fsExtra.readdirSync(dir, { withFileTypes: true });
for (const file of files) {
@@ -25,7 +32,7 @@ const getFilesRecursively = (dir) => {
if (file.isDirectory()) {
results.push(...getFilesRecursively(filePath));
- } else if (file.name.endsWith('.scss')) {
+ } else if (file.name.endsWith('.scss') || file.name.endsWith('.css')) {
results.push(filePath);
}
}
@@ -45,10 +52,20 @@ const objectToString = (obj) => {
return `{\n${formattedItems}\n}`;
};
-// Find all SCSS files in the variables directory
-const processVariablesFiles = () => {
- // Get all scss files recursively
- const files = getFilesRecursively(variablesDir);
+// Process files from a specific directory
+const processFilesFromDirectory = (sourceDir, outputSubDir = '') => {
+ // Check if directory exists
+ if (!fsExtra.existsSync(sourceDir)) {
+ console.log(`Directory does not exist: ${sourceDir}`);
+ return;
+ }
+
+ console.log(`Processing directory: ${sourceDir}`);
+
+ // Get all scss/css files recursively
+ const files = getFilesRecursively(sourceDir);
+
+ console.log(`Found ${files.length} CSS/SCSS files in ${sourceDir}`);
files.forEach(filePath => {
const content = fsExtra.readFileSync(filePath, 'utf-8');
@@ -71,19 +88,19 @@ const processVariablesFiles = () => {
});
if (Object.keys(variablesObj).length > 0) {
- // Create relative path from variablesDir
- const relativePath = path.relative(variablesDir, filePath);
+ // Create relative path from sourceDir
+ const relativePath = path.relative(sourceDir, filePath);
// Create output filename - remove underscore and change extension to .ts
- const fileName = path.basename(relativePath).replace(/^_/, '').replace('.scss', '.ts');
+ const fileName = path.basename(relativePath).replace(/^_/, '').replace(/\.(scss|css)$/, '.ts');
// Get base name without extension for the variable name
- const baseFileName = path.basename(relativePath).replace(/^_/, '').replace('.scss', '');
+ const baseFileName = path.basename(relativePath).replace(/^_/, '').replace(/\.(scss|css)$/, '');
const variableName = toCamelCase(baseFileName) + 'Variables';
// For nested files, create appropriate directory structure
const relativeDir = path.dirname(relativePath);
- const outputPath = path.join(outputDir, relativeDir);
+ const outputPath = path.join(outputDir, outputSubDir, relativeDir);
// Ensure the output directory exists (handles nested directories)
fsExtra.ensureDirSync(outputPath);
@@ -92,7 +109,7 @@ const processVariablesFiles = () => {
// Generate the TypeScript content with default export for compatibility
const tsContent = `// AUTO-GENERATED FILE - DO NOT MODIFY
-// Generated by generate-css-variables.js
+// Generated by generate-css-variables.js from ${path.relative(__dirname, filePath)}
const ${variableName} = ${objectToString(variablesObj)};
@@ -101,6 +118,8 @@ export default ${variableName};
fsExtra.writeFileSync(outputFilePath, tsContent);
console.log(`Generated ${outputFilePath} with ${Object.keys(variablesObj).length} variables as ${variableName}`);
+ } else {
+ console.log(`No CSS variables found in ${filePath}`);
}
});
};
@@ -116,8 +135,16 @@ const cleanOutputDir = () => {
// Main execution
try {
cleanOutputDir();
- processVariablesFiles();
- console.log('CSS variables extraction completed successfully!');
+
+ // Process variables directory
+ console.log('\n=== Processing variables directory ===');
+ processFilesFromDirectory(variablesDir, 'variables');
+
+ // Process entire tokens directory (including all subdirectories)
+ console.log('\n=== Processing tokens directory (all subdirectories) ===');
+ processFilesFromDirectory(tokensDir, 'tokens');
+
+ console.log('\nCSS variables extraction completed successfully!');
} catch (error) {
console.error('Error generating CSS variables:', error);
process.exit(1);