diff --git a/.github/workflows/test_design_tokens_build.yaml b/.github/workflows/test_design_tokens_build.yaml index f68b06b4..039cf16f 100644 --- a/.github/workflows/test_design_tokens_build.yaml +++ b/.github/workflows/test_design_tokens_build.yaml @@ -35,6 +35,10 @@ jobs: run: npm install working-directory: ./packages/design-tokens + - name: Prettier format check + run: npm run format:check + working-directory: ./packages/design-tokens + - name: Run test suite with npm script run: npm run test working-directory: ./packages/design-tokens diff --git a/packages/design-tokens/build-output.js b/packages/design-tokens/build-output.js index e6f08adf..42a467b6 100644 --- a/packages/design-tokens/build-output.js +++ b/packages/design-tokens/build-output.js @@ -239,14 +239,13 @@ const sd = new StyleDictionary({ { destination: "variables.scss", format: "scss/map-deep", - filter: (t) => ( + filter: (t) => /* strip metadata */ - !(['$themes', '$metadata'].includes(t)) - ), + !["$themes", "$metadata"].includes(t), options: { - "mapName": "bcds", - "themeable": false - } + mapName: "bcds", + themeable: false, + }, }, ], }, @@ -264,14 +263,13 @@ const sd = new StyleDictionary({ { destination: "variables.scss", format: "scss/map-deep", - filter: (t) => ( + filter: (t) => /* strip metadata */ - !(['$themes', '$metadata'].includes(t)) - ), + !["$themes", "$metadata"].includes(t), options: { - "mapName": "bcds", - "themeable": false - } + mapName: "bcds", + themeable: false, + }, }, ], }, diff --git a/packages/design-tokens/build-output.test.js b/packages/design-tokens/build-output.test.js index b785989f..e781c0e3 100644 --- a/packages/design-tokens/build-output.test.js +++ b/packages/design-tokens/build-output.test.js @@ -19,7 +19,7 @@ test("build-output.js should complete without errors", async () => { } console.log("build-output.js executed successfully:", stdout); resolve(); - }, + } ); }); assert.ok(true); @@ -107,7 +107,7 @@ test("theme.blue.100 should be present in all output files", async () => { const fileContent = readFileSync(filePath, "utf-8"); assert.ok( fileContent.includes(token), - `Expected token "${token}" to be present in file ${file}`, + `Expected token "${token}" to be present in file ${file}` ); } }); diff --git a/packages/design-tokens/build/css-prefixed/variables.css b/packages/design-tokens/build/css-prefixed/variables.css index 45d60c2d..94ed2d64 100644 --- a/packages/design-tokens/build/css-prefixed/variables.css +++ b/packages/design-tokens/build/css-prefixed/variables.css @@ -14,69 +14,87 @@ --bcds-surface-opacity-80: 0.8; --bcds-surface-opacity-90: 0.9; --bcds-surface-opacity-100: 1; - --bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ - --bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ - --bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ - --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ + --bcds-surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ + --bcds-surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ + --bcds-surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ + --bcds-surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ --bcds-surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */ - --bcds-surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */ - --bcds-surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */ - --bcds-surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */ - --bcds-surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */ - --bcds-surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */ + --bcds-surface-color-primary-button-hover: #1e5189; /** Fill colour used when user hovers over primary button */ + --bcds-surface-color-primary-button-disabled: #edebe9; /** Fill colour for inactive primary buttons */ + --bcds-surface-color-primary-danger-button-default: #ce3e39; /** Default fill colour for buttons in danger/warning state */ + --bcds-surface-color-primary-danger-button-hover: #a2312d; /** Fill colour used when user hovers over danger/warning button */ + --bcds-surface-color-primary-danger-button-disabled: #edebe9; /** Default fill colour for disabled danger/warning button */ --bcds-surface-color-primary-default: #013366; /** Default theme colour for components and layout */ - --bcds-surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */ - --bcds-surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */ - --bcds-surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */ - --bcds-surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */ - --bcds-surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */ - --bcds-surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */ - --bcds-surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */ - --bcds-surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */ - --bcds-surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */ - --bcds-surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */ - --bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */ - --bcds-surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */ - --bcds-surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */ - --bcds-surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */ - --bcds-surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */ - --bcds-surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */ - --bcds-surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */ - --bcds-surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */ - --bcds-surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */ - --bcds-surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */ - --bcds-surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */ - --bcds-surface-color-background-white: #FFFFFF; /** White background */ - --bcds-surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */ - --bcds-surface-color-background-light-blue: #F1F8FE; /** Light blue background */ + --bcds-surface-color-primary-hover: #1e5189; /** Hover variant of surface.color.primary.default */ + --bcds-surface-color-primary-pressed: #01264c; /** Selected/pressed variant of surface.color.primary.default */ + --bcds-surface-color-primary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.primary default */ + --bcds-surface-color-secondary-button-default: #ffffff; /** Fill colour for secondary buttons */ + --bcds-surface-color-secondary-button-hover: #edebe9; /** Fill colour used when user hovers over secondary button */ + --bcds-surface-color-secondary-button-disabled: #edebe9; /** Fill colour for inactive secondary buttons */ + --bcds-surface-color-secondary-default: #ffffff; /** Light theme colour for components and layout */ + --bcds-surface-color-secondary-hover: #edebe9; /** Hover variant of surface.color.secondary.default */ + --bcds-surface-color-secondary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.secondary.default */ + --bcds-surface-color-secondary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.secondary default */ + --bcds-surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 + ); /** Default fill colour for tertiary buttons */ + --bcds-surface-color-tertiary-button-hover: #eceae8; /** Fill colour used when user hovers over tertiary button */ + --bcds-surface-color-tertiary-button-disabled: #edebe9; /** Fill colour for inactive tertiary buttons */ + --bcds-surface-color-tertiary-default: #ffffff00; /** Alternative light theme colour for components and layout */ + --bcds-surface-color-tertiary-hover: #eceae8; /** Hover variant of surface.color.tertiary.default */ + --bcds-surface-color-tertiary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.tertiary.default */ + --bcds-surface-color-tertiary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.tertiary default */ + --bcds-surface-color-menus-default: #ffffff; /** Default fill colour for menu items */ + --bcds-surface-color-menus-hover: #edebe9; /** Fill colour used when user hovers over a menu item */ + --bcds-surface-color-forms-default: #ffffff; /** Default fill colour for form/input fields */ + --bcds-surface-color-forms-disabled: #edebe9; /** Fill colour for inactive/disabled form/input fields */ + --bcds-surface-color-background-white: #ffffff; /** White background */ + --bcds-surface-color-background-light-gray: #faf9f8; /** Default background colour for layout */ + --bcds-surface-color-background-light-blue: #f1f8fe; /** Light blue background */ --bcds-surface-color-background-dark-blue: #053662; /** Dark blue background */ - --bcds-surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */ + --bcds-surface-color-border-default: #d8d8d8; /** Lighter border colour for UI elements */ --bcds-surface-color-border-medium: #898785; /** Default border colour for UI elements */ --bcds-surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */ - --bcds-surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */ - --bcds-surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */ - --bcds-support-surface-color-info: #F7F9FC; - --bcds-support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */ - --bcds-support-surface-color-success: #F6FFF8; /** Background colour for success messages */ - --bcds-support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */ + --bcds-surface-color-border-active: #2e5dd7; /** Used as the active stroke colour for UI elements */ + --bcds-surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 + ); /** Background overlay colour for images and modal dialogues */ + --bcds-support-surface-color-info: #f7f9fc; + --bcds-support-surface-color-danger: #f4e1e2; /** Background colour for error, failure or danger messages */ + --bcds-support-surface-color-success: #f6fff8; /** Background colour for success messages */ + --bcds-support-surface-color-warning: #fef1d8; /** Background colour for warning messages */ --bcds-support-border-color-info: #053662; /** Border stroke for general/informational messages */ - --bcds-support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */ - --bcds-support-border-color-success: #42814A; /** Border stroke for success messages */ - --bcds-support-border-color-warning: #F8BB47; /** Border stroke for warning messages */ + --bcds-support-border-color-danger: #ce3e39; /** Border stroke for error, failure or danger messages */ + --bcds-support-border-color-success: #42814a; /** Border stroke for success messages */ + --bcds-support-border-color-warning: #f8bb47; /** Border stroke for warning messages */ --bcds-icons-size-xsmall: 14px; /** Smallest icon size */ --bcds-icons-size-small: 16px; --bcds-icons-size-medium: 20px; /** Default icon size */ --bcds-icons-size-large: 24px; --bcds-icons-size-xlarge: 32px; /** Largest icon size */ - --bcds-icons-color-primary: #2D2D2D; /** Default colour for icons */ + --bcds-icons-color-primary: #2d2d2d; /** Default colour for icons */ --bcds-icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */ - --bcds-icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */ - --bcds-icons-color-link: #255A90; /** Use for hyperlinked icons */ + --bcds-icons-color-disabled: #9f9d9c; /** Use only for inactive/disabled icons */ + --bcds-icons-color-link: #255a90; /** Use for hyperlinked icons */ --bcds-icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */ - --bcds-icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */ - --bcds-icons-color-success: #42814A; /** Emphasis colour for icons in success state */ - --bcds-icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */ - --bcds-icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */ + --bcds-icons-color-danger: #ce3e39; /** Emphasis colour for icons in error, failure or danger state */ + --bcds-icons-color-success: #42814a; /** Emphasis colour for icons in success state */ + --bcds-icons-color-warning: #f8bb47; /** Emphasis colour for icons in warning state */ + --bcds-icons-color-primary-invert: #ffffff; /** Default colour for icons on dark backgrounds */ --bcds-layout-border-width-none: 0; --bcds-layout-border-width-small: 1px; --bcds-layout-border-width-medium: 2px; @@ -103,7 +121,7 @@ --bcds-layout-border-radius-medium: 4px; --bcds-layout-border-radius-large: 6px; --bcds-layout-border-radius-circular: 9999px; /** Used for components with a circular radius */ - --bcds-typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */ + --bcds-typography-font-families-bc-sans: "BC Sans"; /** BC Sans font. Requires BC Sans package */ --bcds-typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */ --bcds-typography-line-heights-xxdense: 1.313rem; --bcds-typography-line-heights-xdense: 1.688rem; @@ -129,82 +147,82 @@ --bcds-typography-font-size-display: 3rem; --bcds-typography-letter-spacing-0: 0em; /** System token, used to generate type styles */ --bcds-typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */ - --bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */ - --bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */ - --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */ - --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */ - --bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */ - --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */ - --bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */ - --bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */ - --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */ - --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */ - --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */ - --bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */ - --bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */ - --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */ - --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */ - --bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ - --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ - --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ - --bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ - --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ - --bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ - --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */ - --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */ - --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */ - --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */ - --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */ - --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */ - --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */ - --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */ - --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */ - --bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */ - --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */ - --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */ + --bcds-typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; /** Labels and captions */ + --bcds-typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; /** Smaller body text */ + --bcds-typography-regular-body: 400 1rem/1.688rem "BC Sans"; /** Default body text */ + --bcds-typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; /** Larger body text */ + --bcds-typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; /** Alternate (unbolded) style for Heading 6 */ + --bcds-typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; /** Alternate (unbolded) style for Heading 5 */ + --bcds-typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; /** Alternate (unbolded) style for Heading 4 */ + --bcds-typography-regular-h3: 400 1.75rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 3 */ + --bcds-typography-regular-h2: 400 2rem/3.375rem "BC Sans"; /** Alternate (unbolded) style for Heading 2 */ + --bcds-typography-regular-h1: 400 2.25rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 1 */ + --bcds-typography-regular-display: 400 3rem/AUTO "BC Sans"; /** Extra-large body text size. Do not use for headings */ + --bcds-typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; /** Labels and captions (bolded) */ + --bcds-typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; /** Default for small body text (bolded) */ + --bcds-typography-bold-body: 700 1rem/1.688rem "BC Sans"; /** Default for body text (bolded) */ + --bcds-typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (bolded) */ + --bcds-typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ + --bcds-typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ + --bcds-typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ + --bcds-typography-bold-h3: 700 1.75rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ + --bcds-typography-bold-h2: 700 2rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ + --bcds-typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ + --bcds-typography-bold-display: 700 3rem/AUTO "BC Sans"; /** Extra-large font size (bolded). Do not use for headings */ + --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; /** Labels and captions (italic) */ + --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; /** Small body text (italic) */ + --bcds-typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; /** Default for body text (italic) */ + --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (italic) */ + --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; /** Alternate (italic) style for Heading 6 */ + --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; /** Alternate (italic) style for Heading 5 */ + --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; /** Alternate (italic) style for Heading 4 */ + --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 3 */ + --bcds-typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; /** Alternate (italic) style for Heading 2 */ + --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 1 */ + --bcds-typography-italic-display: 400 italic 3rem/AUTO "BC Sans"; /** Extra-large font size (italic). Do not use for headings */ --bcds-typography-text-case-none: none; --bcds-typography-text-decoration-none: none; /** System token, used to generate type styles */ --bcds-typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */ - --bcds-typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */ + --bcds-typography-color-primary: #2d2d2d; /** Default colour for all body text and headings */ --bcds-typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */ - --bcds-typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */ - --bcds-typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */ - --bcds-typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */ - --bcds-typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */ - --bcds-typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */ - --bcds-typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */ - --bcds-theme-gold-10: #FEF8E8; /** Gold scale — lightest */ - --bcds-theme-gold-20: #FEF0D8; /** Gold scale */ - --bcds-theme-gold-30: #FDE9C4; /** Gold scale */ - --bcds-theme-gold-40: #FCE2B0; /** Gold scale */ - --bcds-theme-gold-50: #FBDA9D; /** Gold scale */ - --bcds-theme-gold-60: #FBD389; /** Gold scale */ - --bcds-theme-gold-70: #FACC75; /** Gold scale */ - --bcds-theme-gold-80: #F9C462; /** Gold scale */ - --bcds-theme-gold-90: #F8BA47; /** Gold scale */ - --bcds-theme-gold-100: #FCBA19; /** Gold scale — darkest */ - --bcds-theme-blue-10: #F1F8FE; /** Blue scale — lightest */ - --bcds-theme-blue-20: #D8EAFD; /** Blue scale */ - --bcds-theme-blue-30: #C1DDFC; /** Blue scale */ - --bcds-theme-blue-40: #A8D0FB; /** Blue scale */ - --bcds-theme-blue-50: #91C4FA; /** Blue scale */ - --bcds-theme-blue-60: #7AB8F9; /** Blue scale */ - --bcds-theme-blue-70: #5595D9; /** Blue scale */ - --bcds-theme-blue-80: #3470B1; /** Blue scale */ - --bcds-theme-blue-90: #1E5189; /** Blue scale */ + --bcds-typography-color-placeholder: #9f9d9c; /** Use for placeholder text in forms */ + --bcds-typography-color-disabled: #9f9d9c; /** Use only for text in inactive user interface elements */ + --bcds-typography-color-link: #255a90; /** Use for hyperlinks in body text and headings */ + --bcds-typography-color-danger: #ce3e39; /** Use for error, failure or danger message text */ + --bcds-typography-color-primary-invert: #ffffff; /** Default colour for text on dark backgrounds */ + --bcds-typography-color-secondary-invert: #eceae8; /** Secondary colour for text on dark backgrounds */ + --bcds-theme-gold-10: #fef8e8; /** Gold scale — lightest */ + --bcds-theme-gold-20: #fef0d8; /** Gold scale */ + --bcds-theme-gold-30: #fde9c4; /** Gold scale */ + --bcds-theme-gold-40: #fce2b0; /** Gold scale */ + --bcds-theme-gold-50: #fbda9d; /** Gold scale */ + --bcds-theme-gold-60: #fbd389; /** Gold scale */ + --bcds-theme-gold-70: #facc75; /** Gold scale */ + --bcds-theme-gold-80: #f9c462; /** Gold scale */ + --bcds-theme-gold-90: #f8ba47; /** Gold scale */ + --bcds-theme-gold-100: #fcba19; /** Gold scale — darkest */ + --bcds-theme-blue-10: #f1f8fe; /** Blue scale — lightest */ + --bcds-theme-blue-20: #d8eafd; /** Blue scale */ + --bcds-theme-blue-30: #c1ddfc; /** Blue scale */ + --bcds-theme-blue-40: #a8d0fb; /** Blue scale */ + --bcds-theme-blue-50: #91c4fa; /** Blue scale */ + --bcds-theme-blue-60: #7ab8f9; /** Blue scale */ + --bcds-theme-blue-70: #5595d9; /** Blue scale */ + --bcds-theme-blue-80: #3470b1; /** Blue scale */ + --bcds-theme-blue-90: #1e5189; /** Blue scale */ --bcds-theme-blue-100: #013366; /** Blue scale — darkest */ - --bcds-theme-gray-10: #FAF9F8; /** Greyscale — lightest */ - --bcds-theme-gray-20: #F3F2F1; /** Greyscale */ - --bcds-theme-gray-30: #ECEAE8; /** Greyscale */ - --bcds-theme-gray-40: #E0DEDC; /** Greyscale */ - --bcds-theme-gray-50: #D1CFCD; /** Greyscale */ - --bcds-theme-gray-60: #C6C5C3; /** Greyscale */ - --bcds-theme-gray-70: #9F9D9C; /** Greyscale */ - --bcds-theme-gray-80: #605E5C; /** Greyscale */ - --bcds-theme-gray-90: #3D3C3B; /** Greyscale */ + --bcds-theme-gray-10: #faf9f8; /** Greyscale — lightest */ + --bcds-theme-gray-20: #f3f2f1; /** Greyscale */ + --bcds-theme-gray-30: #eceae8; /** Greyscale */ + --bcds-theme-gray-40: #e0dedc; /** Greyscale */ + --bcds-theme-gray-50: #d1cfcd; /** Greyscale */ + --bcds-theme-gray-60: #c6c5c3; /** Greyscale */ + --bcds-theme-gray-70: #9f9d9c; /** Greyscale */ + --bcds-theme-gray-80: #605e5c; /** Greyscale */ + --bcds-theme-gray-90: #3d3c3b; /** Greyscale */ --bcds-theme-gray-100: #353433; /** Greyscale */ --bcds-theme-gray-110: #252423; /** Greyscale — darkest */ - --bcds-theme-gray-white: #FFFFFF; /** White */ + --bcds-theme-gray-white: #ffffff; /** White */ --bcds-theme-primary-blue: #013366; /** Primary Blue (Blue 100) */ - --bcds-theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */ + --bcds-theme-primary-gold: #fcba19; /** Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/build/css/variables.css b/packages/design-tokens/build/css/variables.css index a90e295d..99c3316f 100644 --- a/packages/design-tokens/build/css/variables.css +++ b/packages/design-tokens/build/css/variables.css @@ -14,69 +14,87 @@ --surface-opacity-80: 0.8; --surface-opacity-90: 0.9; --surface-opacity-100: 1; - --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ - --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ - --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ - --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ + --surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ + --surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ + --surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ + --surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ --surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */ - --surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */ - --surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */ - --surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */ - --surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */ - --surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */ + --surface-color-primary-button-hover: #1e5189; /** Fill colour used when user hovers over primary button */ + --surface-color-primary-button-disabled: #edebe9; /** Fill colour for inactive primary buttons */ + --surface-color-primary-danger-button-default: #ce3e39; /** Default fill colour for buttons in danger/warning state */ + --surface-color-primary-danger-button-hover: #a2312d; /** Fill colour used when user hovers over danger/warning button */ + --surface-color-primary-danger-button-disabled: #edebe9; /** Default fill colour for disabled danger/warning button */ --surface-color-primary-default: #013366; /** Default theme colour for components and layout */ - --surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */ - --surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */ - --surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */ - --surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */ - --surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */ - --surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */ - --surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */ - --surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */ - --surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */ - --surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */ - --surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */ - --surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */ - --surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */ - --surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */ - --surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */ - --surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */ - --surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */ - --surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */ - --surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */ - --surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */ - --surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */ - --surface-color-background-white: #FFFFFF; /** White background */ - --surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */ - --surface-color-background-light-blue: #F1F8FE; /** Light blue background */ + --surface-color-primary-hover: #1e5189; /** Hover variant of surface.color.primary.default */ + --surface-color-primary-pressed: #01264c; /** Selected/pressed variant of surface.color.primary.default */ + --surface-color-primary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.primary default */ + --surface-color-secondary-button-default: #ffffff; /** Fill colour for secondary buttons */ + --surface-color-secondary-button-hover: #edebe9; /** Fill colour used when user hovers over secondary button */ + --surface-color-secondary-button-disabled: #edebe9; /** Fill colour for inactive secondary buttons */ + --surface-color-secondary-default: #ffffff; /** Light theme colour for components and layout */ + --surface-color-secondary-hover: #edebe9; /** Hover variant of surface.color.secondary.default */ + --surface-color-secondary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.secondary.default */ + --surface-color-secondary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.secondary default */ + --surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 + ); /** Default fill colour for tertiary buttons */ + --surface-color-tertiary-button-hover: #eceae8; /** Fill colour used when user hovers over tertiary button */ + --surface-color-tertiary-button-disabled: #edebe9; /** Fill colour for inactive tertiary buttons */ + --surface-color-tertiary-default: #ffffff00; /** Alternative light theme colour for components and layout */ + --surface-color-tertiary-hover: #eceae8; /** Hover variant of surface.color.tertiary.default */ + --surface-color-tertiary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.tertiary.default */ + --surface-color-tertiary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.tertiary default */ + --surface-color-menus-default: #ffffff; /** Default fill colour for menu items */ + --surface-color-menus-hover: #edebe9; /** Fill colour used when user hovers over a menu item */ + --surface-color-forms-default: #ffffff; /** Default fill colour for form/input fields */ + --surface-color-forms-disabled: #edebe9; /** Fill colour for inactive/disabled form/input fields */ + --surface-color-background-white: #ffffff; /** White background */ + --surface-color-background-light-gray: #faf9f8; /** Default background colour for layout */ + --surface-color-background-light-blue: #f1f8fe; /** Light blue background */ --surface-color-background-dark-blue: #053662; /** Dark blue background */ - --surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */ + --surface-color-border-default: #d8d8d8; /** Lighter border colour for UI elements */ --surface-color-border-medium: #898785; /** Default border colour for UI elements */ --surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */ - --surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */ - --surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */ - --support-surface-color-info: #F7F9FC; - --support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */ - --support-surface-color-success: #F6FFF8; /** Background colour for success messages */ - --support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */ + --surface-color-border-active: #2e5dd7; /** Used as the active stroke colour for UI elements */ + --surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 + ); /** Background overlay colour for images and modal dialogues */ + --support-surface-color-info: #f7f9fc; + --support-surface-color-danger: #f4e1e2; /** Background colour for error, failure or danger messages */ + --support-surface-color-success: #f6fff8; /** Background colour for success messages */ + --support-surface-color-warning: #fef1d8; /** Background colour for warning messages */ --support-border-color-info: #053662; /** Border stroke for general/informational messages */ - --support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */ - --support-border-color-success: #42814A; /** Border stroke for success messages */ - --support-border-color-warning: #F8BB47; /** Border stroke for warning messages */ + --support-border-color-danger: #ce3e39; /** Border stroke for error, failure or danger messages */ + --support-border-color-success: #42814a; /** Border stroke for success messages */ + --support-border-color-warning: #f8bb47; /** Border stroke for warning messages */ --icons-size-xsmall: 14px; /** Smallest icon size */ --icons-size-small: 16px; --icons-size-medium: 20px; /** Default icon size */ --icons-size-large: 24px; --icons-size-xlarge: 32px; /** Largest icon size */ - --icons-color-primary: #2D2D2D; /** Default colour for icons */ + --icons-color-primary: #2d2d2d; /** Default colour for icons */ --icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */ - --icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */ - --icons-color-link: #255A90; /** Use for hyperlinked icons */ + --icons-color-disabled: #9f9d9c; /** Use only for inactive/disabled icons */ + --icons-color-link: #255a90; /** Use for hyperlinked icons */ --icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */ - --icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */ - --icons-color-success: #42814A; /** Emphasis colour for icons in success state */ - --icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */ - --icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */ + --icons-color-danger: #ce3e39; /** Emphasis colour for icons in error, failure or danger state */ + --icons-color-success: #42814a; /** Emphasis colour for icons in success state */ + --icons-color-warning: #f8bb47; /** Emphasis colour for icons in warning state */ + --icons-color-primary-invert: #ffffff; /** Default colour for icons on dark backgrounds */ --layout-border-width-none: 0; --layout-border-width-small: 1px; --layout-border-width-medium: 2px; @@ -103,7 +121,7 @@ --layout-border-radius-medium: 4px; --layout-border-radius-large: 6px; --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */ - --typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */ + --typography-font-families-bc-sans: "BC Sans"; /** BC Sans font. Requires BC Sans package */ --typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */ --typography-line-heights-xxdense: 1.313rem; --typography-line-heights-xdense: 1.688rem; @@ -129,82 +147,82 @@ --typography-font-size-display: 3rem; --typography-letter-spacing-0: 0em; /** System token, used to generate type styles */ --typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */ - --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */ - --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */ - --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */ - --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */ - --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */ - --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */ - --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */ - --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */ - --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */ - --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */ - --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */ - --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */ - --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */ - --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */ - --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */ - --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ - --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ - --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ - --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ - --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ - --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ - --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */ - --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */ - --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */ - --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */ - --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */ - --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */ - --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */ - --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */ - --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */ - --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */ - --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */ - --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */ + --typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; /** Labels and captions */ + --typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; /** Smaller body text */ + --typography-regular-body: 400 1rem/1.688rem "BC Sans"; /** Default body text */ + --typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; /** Larger body text */ + --typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; /** Alternate (unbolded) style for Heading 6 */ + --typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; /** Alternate (unbolded) style for Heading 5 */ + --typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; /** Alternate (unbolded) style for Heading 4 */ + --typography-regular-h3: 400 1.75rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 3 */ + --typography-regular-h2: 400 2rem/3.375rem "BC Sans"; /** Alternate (unbolded) style for Heading 2 */ + --typography-regular-h1: 400 2.25rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 1 */ + --typography-regular-display: 400 3rem/AUTO "BC Sans"; /** Extra-large body text size. Do not use for headings */ + --typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; /** Labels and captions (bolded) */ + --typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; /** Default for small body text (bolded) */ + --typography-bold-body: 700 1rem/1.688rem "BC Sans"; /** Default for body text (bolded) */ + --typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (bolded) */ + --typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ + --typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ + --typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ + --typography-bold-h3: 700 1.75rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ + --typography-bold-h2: 700 2rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ + --typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ + --typography-bold-display: 700 3rem/AUTO "BC Sans"; /** Extra-large font size (bolded). Do not use for headings */ + --typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; /** Labels and captions (italic) */ + --typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; /** Small body text (italic) */ + --typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; /** Default for body text (italic) */ + --typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (italic) */ + --typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; /** Alternate (italic) style for Heading 6 */ + --typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; /** Alternate (italic) style for Heading 5 */ + --typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; /** Alternate (italic) style for Heading 4 */ + --typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 3 */ + --typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; /** Alternate (italic) style for Heading 2 */ + --typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 1 */ + --typography-italic-display: 400 italic 3rem/AUTO "BC Sans"; /** Extra-large font size (italic). Do not use for headings */ --typography-text-case-none: none; --typography-text-decoration-none: none; /** System token, used to generate type styles */ --typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */ - --typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */ + --typography-color-primary: #2d2d2d; /** Default colour for all body text and headings */ --typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */ - --typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */ - --typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */ - --typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */ - --typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */ - --typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */ - --typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */ - --theme-gold-10: #FEF8E8; /** Gold scale — lightest */ - --theme-gold-20: #FEF0D8; /** Gold scale */ - --theme-gold-30: #FDE9C4; /** Gold scale */ - --theme-gold-40: #FCE2B0; /** Gold scale */ - --theme-gold-50: #FBDA9D; /** Gold scale */ - --theme-gold-60: #FBD389; /** Gold scale */ - --theme-gold-70: #FACC75; /** Gold scale */ - --theme-gold-80: #F9C462; /** Gold scale */ - --theme-gold-90: #F8BA47; /** Gold scale */ - --theme-gold-100: #FCBA19; /** Gold scale — darkest */ - --theme-blue-10: #F1F8FE; /** Blue scale — lightest */ - --theme-blue-20: #D8EAFD; /** Blue scale */ - --theme-blue-30: #C1DDFC; /** Blue scale */ - --theme-blue-40: #A8D0FB; /** Blue scale */ - --theme-blue-50: #91C4FA; /** Blue scale */ - --theme-blue-60: #7AB8F9; /** Blue scale */ - --theme-blue-70: #5595D9; /** Blue scale */ - --theme-blue-80: #3470B1; /** Blue scale */ - --theme-blue-90: #1E5189; /** Blue scale */ + --typography-color-placeholder: #9f9d9c; /** Use for placeholder text in forms */ + --typography-color-disabled: #9f9d9c; /** Use only for text in inactive user interface elements */ + --typography-color-link: #255a90; /** Use for hyperlinks in body text and headings */ + --typography-color-danger: #ce3e39; /** Use for error, failure or danger message text */ + --typography-color-primary-invert: #ffffff; /** Default colour for text on dark backgrounds */ + --typography-color-secondary-invert: #eceae8; /** Secondary colour for text on dark backgrounds */ + --theme-gold-10: #fef8e8; /** Gold scale — lightest */ + --theme-gold-20: #fef0d8; /** Gold scale */ + --theme-gold-30: #fde9c4; /** Gold scale */ + --theme-gold-40: #fce2b0; /** Gold scale */ + --theme-gold-50: #fbda9d; /** Gold scale */ + --theme-gold-60: #fbd389; /** Gold scale */ + --theme-gold-70: #facc75; /** Gold scale */ + --theme-gold-80: #f9c462; /** Gold scale */ + --theme-gold-90: #f8ba47; /** Gold scale */ + --theme-gold-100: #fcba19; /** Gold scale — darkest */ + --theme-blue-10: #f1f8fe; /** Blue scale — lightest */ + --theme-blue-20: #d8eafd; /** Blue scale */ + --theme-blue-30: #c1ddfc; /** Blue scale */ + --theme-blue-40: #a8d0fb; /** Blue scale */ + --theme-blue-50: #91c4fa; /** Blue scale */ + --theme-blue-60: #7ab8f9; /** Blue scale */ + --theme-blue-70: #5595d9; /** Blue scale */ + --theme-blue-80: #3470b1; /** Blue scale */ + --theme-blue-90: #1e5189; /** Blue scale */ --theme-blue-100: #013366; /** Blue scale — darkest */ - --theme-gray-10: #FAF9F8; /** Greyscale — lightest */ - --theme-gray-20: #F3F2F1; /** Greyscale */ - --theme-gray-30: #ECEAE8; /** Greyscale */ - --theme-gray-40: #E0DEDC; /** Greyscale */ - --theme-gray-50: #D1CFCD; /** Greyscale */ - --theme-gray-60: #C6C5C3; /** Greyscale */ - --theme-gray-70: #9F9D9C; /** Greyscale */ - --theme-gray-80: #605E5C; /** Greyscale */ - --theme-gray-90: #3D3C3B; /** Greyscale */ + --theme-gray-10: #faf9f8; /** Greyscale — lightest */ + --theme-gray-20: #f3f2f1; /** Greyscale */ + --theme-gray-30: #eceae8; /** Greyscale */ + --theme-gray-40: #e0dedc; /** Greyscale */ + --theme-gray-50: #d1cfcd; /** Greyscale */ + --theme-gray-60: #c6c5c3; /** Greyscale */ + --theme-gray-70: #9f9d9c; /** Greyscale */ + --theme-gray-80: #605e5c; /** Greyscale */ + --theme-gray-90: #3d3c3b; /** Greyscale */ --theme-gray-100: #353433; /** Greyscale */ --theme-gray-110: #252423; /** Greyscale — darkest */ - --theme-gray-white: #FFFFFF; /** White */ + --theme-gray-white: #ffffff; /** White */ --theme-primary-blue: #013366; /** Primary Blue (Blue 100) */ - --theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */ + --theme-primary-gold: #fcba19; /** Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/build/scss-prefixed/variables.scss b/packages/design-tokens/build/scss-prefixed/variables.scss index 2e59c3f5..67b5ec6a 100644 --- a/packages/design-tokens/build/scss-prefixed/variables.scss +++ b/packages/design-tokens/build/scss-prefixed/variables.scss @@ -1,4 +1,3 @@ - /** * Do not edit directly, this file was auto-generated. */ @@ -14,69 +13,87 @@ $bcds-surface-opacity-70: 0.7; $bcds-surface-opacity-80: 0.8; $bcds-surface-opacity-90: 0.9; $bcds-surface-opacity-100: 1; -$bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements -$bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements -$bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons -$bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly +$bcds-surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements +$bcds-surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements +$bcds-surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons +$bcds-surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly $bcds-surface-color-primary-button-default: #013366; // Default fill colour for primary buttons -$bcds-surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button -$bcds-surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons -$bcds-surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state -$bcds-surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button -$bcds-surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button +$bcds-surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button +$bcds-surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons +$bcds-surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state +$bcds-surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button +$bcds-surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button $bcds-surface-color-primary-default: #013366; // Default theme colour for components and layout -$bcds-surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default -$bcds-surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default -$bcds-surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default -$bcds-surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons -$bcds-surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button -$bcds-surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons -$bcds-surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout -$bcds-surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default -$bcds-surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default -$bcds-surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default -$bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons -$bcds-surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button -$bcds-surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons -$bcds-surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout -$bcds-surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default -$bcds-surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default -$bcds-surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default -$bcds-surface-color-menus-default: #FFFFFF; // Default fill colour for menu items -$bcds-surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item -$bcds-surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields -$bcds-surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields -$bcds-surface-color-background-white: #FFFFFF; // White background -$bcds-surface-color-background-light-gray: #FAF9F8; // Default background colour for layout -$bcds-surface-color-background-light-blue: #F1F8FE; // Light blue background +$bcds-surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default +$bcds-surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default +$bcds-surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default +$bcds-surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons +$bcds-surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button +$bcds-surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons +$bcds-surface-color-secondary-default: #ffffff; // Light theme colour for components and layout +$bcds-surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default +$bcds-surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default +$bcds-surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default +$bcds-surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 +); // Default fill colour for tertiary buttons +$bcds-surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button +$bcds-surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons +$bcds-surface-color-tertiary-default: #ffffff00; // Alternative light theme colour for components and layout +$bcds-surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default +$bcds-surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default +$bcds-surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default +$bcds-surface-color-menus-default: #ffffff; // Default fill colour for menu items +$bcds-surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item +$bcds-surface-color-forms-default: #ffffff; // Default fill colour for form/input fields +$bcds-surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields +$bcds-surface-color-background-white: #ffffff; // White background +$bcds-surface-color-background-light-gray: #faf9f8; // Default background colour for layout +$bcds-surface-color-background-light-blue: #f1f8fe; // Light blue background $bcds-surface-color-background-dark-blue: #053662; // Dark blue background -$bcds-surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements +$bcds-surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements $bcds-surface-color-border-medium: #898785; // Default border colour for UI elements $bcds-surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs -$bcds-surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements -$bcds-surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues -$bcds-support-surface-color-info: #F7F9FC; -$bcds-support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages -$bcds-support-surface-color-success: #F6FFF8; // Background colour for success messages -$bcds-support-surface-color-warning: #FEF1D8; // Background colour for warning messages +$bcds-surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements +$bcds-surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 +); // Background overlay colour for images and modal dialogues +$bcds-support-surface-color-info: #f7f9fc; +$bcds-support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages +$bcds-support-surface-color-success: #f6fff8; // Background colour for success messages +$bcds-support-surface-color-warning: #fef1d8; // Background colour for warning messages $bcds-support-border-color-info: #053662; // Border stroke for general/informational messages -$bcds-support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages -$bcds-support-border-color-success: #42814A; // Border stroke for success messages -$bcds-support-border-color-warning: #F8BB47; // Border stroke for warning messages +$bcds-support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages +$bcds-support-border-color-success: #42814a; // Border stroke for success messages +$bcds-support-border-color-warning: #f8bb47; // Border stroke for warning messages $bcds-icons-size-xsmall: 14; // Smallest icon size $bcds-icons-size-small: 16; $bcds-icons-size-medium: 20; // Default icon size $bcds-icons-size-large: 24; $bcds-icons-size-xlarge: 32; // Largest icon size -$bcds-icons-color-primary: #2D2D2D; // Default colour for icons +$bcds-icons-color-primary: #2d2d2d; // Default colour for icons $bcds-icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons -$bcds-icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons -$bcds-icons-color-link: #255A90; // Use for hyperlinked icons +$bcds-icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons +$bcds-icons-color-link: #255a90; // Use for hyperlinked icons $bcds-icons-color-info: #053662; // Emphasis colour for icons in general/informational state -$bcds-icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state -$bcds-icons-color-success: #42814A; // Emphasis colour for icons in success state -$bcds-icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state -$bcds-icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds +$bcds-icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state +$bcds-icons-color-success: #42814a; // Emphasis colour for icons in success state +$bcds-icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state +$bcds-icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds $bcds-layout-border-width-none: 0; $bcds-layout-border-width-small: 1; $bcds-layout-border-width-medium: 2; @@ -103,7 +120,7 @@ $bcds-layout-border-radius-small: 2; $bcds-layout-border-radius-medium: 4; $bcds-layout-border-radius-large: 6; $bcds-layout-border-radius-circular: 9999; // Used for components with a circular radius -$bcds-typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package +$bcds-typography-font-families-bc-sans: "BC Sans"; // BC Sans font. Requires BC Sans package $bcds-typography-line-heights-xxxdense: 1.125rem; // Smallest line height $bcds-typography-line-heights-xxdense: 1.313rem; $bcds-typography-line-heights-xdense: 1.688rem; @@ -129,380 +146,380 @@ $bcds-typography-font-size-h1: 2.25rem; $bcds-typography-font-size-display: 3rem; $bcds-typography-letter-spacing-0: 0%; // System token, used to generate type styles $bcds-typography-paragraph-spacing-0: 0; // System token, used to generate type styles -$bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions -$bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text -$bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text -$bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text -$bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6 -$bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5 -$bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4 -$bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3 -$bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2 -$bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1 -$bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings -$bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded) -$bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded) -$bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded) -$bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded) -$bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6 -$bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5 -$bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4 -$bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3 -$bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2 -$bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1 -$bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings -$bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic) -$bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic) -$bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic) -$bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic) -$bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6 -$bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5 -$bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4 -$bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3 -$bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2 -$bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1 -$bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings +$bcds-typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; // Labels and captions +$bcds-typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; // Smaller body text +$bcds-typography-regular-body: 400 1rem/1.688rem "BC Sans"; // Default body text +$bcds-typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; // Larger body text +$bcds-typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; // Alternate (unbolded) style for Heading 6 +$bcds-typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; // Alternate (unbolded) style for Heading 5 +$bcds-typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; // Alternate (unbolded) style for Heading 4 +$bcds-typography-regular-h3: 400 1.75rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 3 +$bcds-typography-regular-h2: 400 2rem/3.375rem "BC Sans"; // Alternate (unbolded) style for Heading 2 +$bcds-typography-regular-h1: 400 2.25rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 1 +$bcds-typography-regular-display: 400 3rem / AUTO "BC Sans"; // Extra-large body text size. Do not use for headings +$bcds-typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; // Labels and captions (bolded) +$bcds-typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; // Default for small body text (bolded) +$bcds-typography-bold-body: 700 1rem/1.688rem "BC Sans"; // Default for body text (bolded) +$bcds-typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (bolded) +$bcds-typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +$bcds-typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +$bcds-typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +$bcds-typography-bold-h3: 700 1.75rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +$bcds-typography-bold-h2: 700 2rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +$bcds-typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +$bcds-typography-bold-display: 700 3rem / AUTO "BC Sans"; // Extra-large font size (bolded). Do not use for headings +$bcds-typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; // Labels and captions (italic) +$bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; // Small body text (italic) +$bcds-typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; // Default for body text (italic) +$bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (italic) +$bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; // Alternate (italic) style for Heading 6 +$bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; // Alternate (italic) style for Heading 5 +$bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; // Alternate (italic) style for Heading 4 +$bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 3 +$bcds-typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; // Alternate (italic) style for Heading 2 +$bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 1 +$bcds-typography-italic-display: 400 italic 3rem / AUTO "BC Sans"; // Extra-large font size (italic). Do not use for headings $bcds-typography-text-case-none: none; $bcds-typography-text-decoration-none: none; // System token, used to generate type styles $bcds-typography-paragraph-indent-0: 0px; // System token, used to generate type styles -$bcds-typography-color-primary: #2D2D2D; // Default colour for all body text and headings +$bcds-typography-color-primary: #2d2d2d; // Default colour for all body text and headings $bcds-typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text -$bcds-typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms -$bcds-typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements -$bcds-typography-color-link: #255A90; // Use for hyperlinks in body text and headings -$bcds-typography-color-danger: #CE3E39; // Use for error, failure or danger message text -$bcds-typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds -$bcds-typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds -$bcds-theme-gold-10: #FEF8E8; // Gold scale — lightest -$bcds-theme-gold-20: #FEF0D8; // Gold scale -$bcds-theme-gold-30: #FDE9C4; // Gold scale -$bcds-theme-gold-40: #FCE2B0; // Gold scale -$bcds-theme-gold-50: #FBDA9D; // Gold scale -$bcds-theme-gold-60: #FBD389; // Gold scale -$bcds-theme-gold-70: #FACC75; // Gold scale -$bcds-theme-gold-80: #F9C462; // Gold scale -$bcds-theme-gold-90: #F8BA47; // Gold scale -$bcds-theme-gold-100: #FCBA19; // Gold scale — darkest -$bcds-theme-blue-10: #F1F8FE; // Blue scale — lightest -$bcds-theme-blue-20: #D8EAFD; // Blue scale -$bcds-theme-blue-30: #C1DDFC; // Blue scale -$bcds-theme-blue-40: #A8D0FB; // Blue scale -$bcds-theme-blue-50: #91C4FA; // Blue scale -$bcds-theme-blue-60: #7AB8F9; // Blue scale -$bcds-theme-blue-70: #5595D9; // Blue scale -$bcds-theme-blue-80: #3470B1; // Blue scale -$bcds-theme-blue-90: #1E5189; // Blue scale +$bcds-typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms +$bcds-typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements +$bcds-typography-color-link: #255a90; // Use for hyperlinks in body text and headings +$bcds-typography-color-danger: #ce3e39; // Use for error, failure or danger message text +$bcds-typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds +$bcds-typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds +$bcds-theme-gold-10: #fef8e8; // Gold scale — lightest +$bcds-theme-gold-20: #fef0d8; // Gold scale +$bcds-theme-gold-30: #fde9c4; // Gold scale +$bcds-theme-gold-40: #fce2b0; // Gold scale +$bcds-theme-gold-50: #fbda9d; // Gold scale +$bcds-theme-gold-60: #fbd389; // Gold scale +$bcds-theme-gold-70: #facc75; // Gold scale +$bcds-theme-gold-80: #f9c462; // Gold scale +$bcds-theme-gold-90: #f8ba47; // Gold scale +$bcds-theme-gold-100: #fcba19; // Gold scale — darkest +$bcds-theme-blue-10: #f1f8fe; // Blue scale — lightest +$bcds-theme-blue-20: #d8eafd; // Blue scale +$bcds-theme-blue-30: #c1ddfc; // Blue scale +$bcds-theme-blue-40: #a8d0fb; // Blue scale +$bcds-theme-blue-50: #91c4fa; // Blue scale +$bcds-theme-blue-60: #7ab8f9; // Blue scale +$bcds-theme-blue-70: #5595d9; // Blue scale +$bcds-theme-blue-80: #3470b1; // Blue scale +$bcds-theme-blue-90: #1e5189; // Blue scale $bcds-theme-blue-100: #013366; // Blue scale — darkest -$bcds-theme-gray-10: #FAF9F8; // Greyscale — lightest -$bcds-theme-gray-20: #F3F2F1; // Greyscale -$bcds-theme-gray-30: #ECEAE8; // Greyscale -$bcds-theme-gray-40: #E0DEDC; // Greyscale -$bcds-theme-gray-50: #D1CFCD; // Greyscale -$bcds-theme-gray-60: #C6C5C3; // Greyscale -$bcds-theme-gray-70: #9F9D9C; // Greyscale -$bcds-theme-gray-80: #605E5C; // Greyscale -$bcds-theme-gray-90: #3D3C3B; // Greyscale +$bcds-theme-gray-10: #faf9f8; // Greyscale — lightest +$bcds-theme-gray-20: #f3f2f1; // Greyscale +$bcds-theme-gray-30: #eceae8; // Greyscale +$bcds-theme-gray-40: #e0dedc; // Greyscale +$bcds-theme-gray-50: #d1cfcd; // Greyscale +$bcds-theme-gray-60: #c6c5c3; // Greyscale +$bcds-theme-gray-70: #9f9d9c; // Greyscale +$bcds-theme-gray-80: #605e5c; // Greyscale +$bcds-theme-gray-90: #3d3c3b; // Greyscale $bcds-theme-gray-100: #353433; // Greyscale $bcds-theme-gray-110: #252423; // Greyscale — darkest -$bcds-theme-gray-white: #FFFFFF; // White +$bcds-theme-gray-white: #ffffff; // White $bcds-theme-primary-blue: #013366; // Primary Blue (Blue 100) -$bcds-theme-primary-gold: #FCBA19; // Primary Gold (Gold 100) +$bcds-theme-primary-gold: #fcba19; // Primary Gold (Gold 100) $bcds: ( - 'surface': ( - 'opacity': ( - '0': $bcds-surface-opacity-0, - '10': $bcds-surface-opacity-10, - '20': $bcds-surface-opacity-20, - '30': $bcds-surface-opacity-30, - '40': $bcds-surface-opacity-40, - '50': $bcds-surface-opacity-50, - '60': $bcds-surface-opacity-60, - '70': $bcds-surface-opacity-70, - '80': $bcds-surface-opacity-80, - '90': $bcds-surface-opacity-90, - '100': $bcds-surface-opacity-100 + "surface": ( + "opacity": ( + "0": $bcds-surface-opacity-0, + "10": $bcds-surface-opacity-10, + "20": $bcds-surface-opacity-20, + "30": $bcds-surface-opacity-30, + "40": $bcds-surface-opacity-40, + "50": $bcds-surface-opacity-50, + "60": $bcds-surface-opacity-60, + "70": $bcds-surface-opacity-70, + "80": $bcds-surface-opacity-80, + "90": $bcds-surface-opacity-90, + "100": $bcds-surface-opacity-100, ), - 'shadow': ( - 'none': $bcds-surface-shadow-none, - 'small': $bcds-surface-shadow-small, - 'medium': $bcds-surface-shadow-medium, - 'large': $bcds-surface-shadow-large + "shadow": ( + "none": $bcds-surface-shadow-none, + "small": $bcds-surface-shadow-small, + "medium": $bcds-surface-shadow-medium, + "large": $bcds-surface-shadow-large, ), - 'color': ( - 'primary': ( - 'button': ( - 'default': $bcds-surface-color-primary-button-default, - 'hover': $bcds-surface-color-primary-button-hover, - 'disabled': $bcds-surface-color-primary-button-disabled + "color": ( + "primary": ( + "button": ( + "default": $bcds-surface-color-primary-button-default, + "hover": $bcds-surface-color-primary-button-hover, + "disabled": $bcds-surface-color-primary-button-disabled, ), - 'dangerButton': ( - 'default': $bcds-surface-color-primary-danger-button-default, - 'hover': $bcds-surface-color-primary-danger-button-hover, - 'disabled': $bcds-surface-color-primary-danger-button-disabled + "dangerButton": ( + "default": $bcds-surface-color-primary-danger-button-default, + "hover": $bcds-surface-color-primary-danger-button-hover, + "disabled": $bcds-surface-color-primary-danger-button-disabled, ), - 'default': $bcds-surface-color-primary-default, - 'hover': $bcds-surface-color-primary-hover, - 'pressed': $bcds-surface-color-primary-pressed, - 'disabled': $bcds-surface-color-primary-disabled + "default": $bcds-surface-color-primary-default, + "hover": $bcds-surface-color-primary-hover, + "pressed": $bcds-surface-color-primary-pressed, + "disabled": $bcds-surface-color-primary-disabled, ), - 'secondary': ( - 'button': ( - 'default': $bcds-surface-color-secondary-button-default, - 'hover': $bcds-surface-color-secondary-button-hover, - 'disabled': $bcds-surface-color-secondary-button-disabled + "secondary": ( + "button": ( + "default": $bcds-surface-color-secondary-button-default, + "hover": $bcds-surface-color-secondary-button-hover, + "disabled": $bcds-surface-color-secondary-button-disabled, ), - 'default': $bcds-surface-color-secondary-default, - 'hover': $bcds-surface-color-secondary-hover, - 'pressed': $bcds-surface-color-secondary-pressed, - 'disabled': $bcds-surface-color-secondary-disabled + "default": $bcds-surface-color-secondary-default, + "hover": $bcds-surface-color-secondary-hover, + "pressed": $bcds-surface-color-secondary-pressed, + "disabled": $bcds-surface-color-secondary-disabled, ), - 'tertiary': ( - 'button': ( - 'default': $bcds-surface-color-tertiary-button-default, - 'hover': $bcds-surface-color-tertiary-button-hover, - 'disabled': $bcds-surface-color-tertiary-button-disabled + "tertiary": ( + "button": ( + "default": $bcds-surface-color-tertiary-button-default, + "hover": $bcds-surface-color-tertiary-button-hover, + "disabled": $bcds-surface-color-tertiary-button-disabled, ), - 'default': $bcds-surface-color-tertiary-default, - 'hover': $bcds-surface-color-tertiary-hover, - 'pressed': $bcds-surface-color-tertiary-pressed, - 'disabled': $bcds-surface-color-tertiary-disabled + "default": $bcds-surface-color-tertiary-default, + "hover": $bcds-surface-color-tertiary-hover, + "pressed": $bcds-surface-color-tertiary-pressed, + "disabled": $bcds-surface-color-tertiary-disabled, + ), + "menus": ( + "default": $bcds-surface-color-menus-default, + "hover": $bcds-surface-color-menus-hover, ), - 'menus': ( - 'default': $bcds-surface-color-menus-default, - 'hover': $bcds-surface-color-menus-hover + "forms": ( + "default": $bcds-surface-color-forms-default, + "disabled": $bcds-surface-color-forms-disabled, ), - 'forms': ( - 'default': $bcds-surface-color-forms-default, - 'disabled': $bcds-surface-color-forms-disabled + "background": ( + "white": $bcds-surface-color-background-white, + "lightGray": $bcds-surface-color-background-light-gray, + "lightBlue": $bcds-surface-color-background-light-blue, + "darkBlue": $bcds-surface-color-background-dark-blue, ), - 'background': ( - 'white': $bcds-surface-color-background-white, - 'lightGray': $bcds-surface-color-background-light-gray, - 'lightBlue': $bcds-surface-color-background-light-blue, - 'darkBlue': $bcds-surface-color-background-dark-blue + "border": ( + "default": $bcds-surface-color-border-default, + "medium": $bcds-surface-color-border-medium, + "dark": $bcds-surface-color-border-dark, + "active": $bcds-surface-color-border-active, ), - 'border': ( - 'default': $bcds-surface-color-border-default, - 'medium': $bcds-surface-color-border-medium, - 'dark': $bcds-surface-color-border-dark, - 'active': $bcds-surface-color-border-active + "overlay": ( + "default": $bcds-surface-color-overlay-default, ), - 'overlay': ( - 'default': $bcds-surface-color-overlay-default - ) - ) + ), ), - 'support': ( - 'surfaceColor': ( - 'info': $bcds-support-surface-color-info, - 'danger': $bcds-support-surface-color-danger, - 'success': $bcds-support-surface-color-success, - 'warning': $bcds-support-surface-color-warning + "support": ( + "surfaceColor": ( + "info": $bcds-support-surface-color-info, + "danger": $bcds-support-surface-color-danger, + "success": $bcds-support-surface-color-success, + "warning": $bcds-support-surface-color-warning, + ), + "borderColor": ( + "info": $bcds-support-border-color-info, + "danger": $bcds-support-border-color-danger, + "success": $bcds-support-border-color-success, + "warning": $bcds-support-border-color-warning, ), - 'borderColor': ( - 'info': $bcds-support-border-color-info, - 'danger': $bcds-support-border-color-danger, - 'success': $bcds-support-border-color-success, - 'warning': $bcds-support-border-color-warning - ) ), - 'icons': ( - 'size': ( - 'xsmall': $bcds-icons-size-xsmall, - 'small': $bcds-icons-size-small, - 'medium': $bcds-icons-size-medium, - 'large': $bcds-icons-size-large, - 'xlarge': $bcds-icons-size-xlarge + "icons": ( + "size": ( + "xsmall": $bcds-icons-size-xsmall, + "small": $bcds-icons-size-small, + "medium": $bcds-icons-size-medium, + "large": $bcds-icons-size-large, + "xlarge": $bcds-icons-size-xlarge, + ), + "color": ( + "primary": $bcds-icons-color-primary, + "secondary": $bcds-icons-color-secondary, + "disabled": $bcds-icons-color-disabled, + "link": $bcds-icons-color-link, + "info": $bcds-icons-color-info, + "danger": $bcds-icons-color-danger, + "success": $bcds-icons-color-success, + "warning": $bcds-icons-color-warning, + "primaryInvert": $bcds-icons-color-primary-invert, ), - 'color': ( - 'primary': $bcds-icons-color-primary, - 'secondary': $bcds-icons-color-secondary, - 'disabled': $bcds-icons-color-disabled, - 'link': $bcds-icons-color-link, - 'info': $bcds-icons-color-info, - 'danger': $bcds-icons-color-danger, - 'success': $bcds-icons-color-success, - 'warning': $bcds-icons-color-warning, - 'primaryInvert': $bcds-icons-color-primary-invert - ) ), - 'layout': ( - 'borderWidth': ( - 'none': $bcds-layout-border-width-none, - 'small': $bcds-layout-border-width-small, - 'medium': $bcds-layout-border-width-medium, - 'large': $bcds-layout-border-width-large + "layout": ( + "borderWidth": ( + "none": $bcds-layout-border-width-none, + "small": $bcds-layout-border-width-small, + "medium": $bcds-layout-border-width-medium, + "large": $bcds-layout-border-width-large, ), - 'padding': ( - 'none': $bcds-layout-padding-none, - 'hair': $bcds-layout-padding-hair, - 'xsmall': $bcds-layout-padding-xsmall, - 'small': $bcds-layout-padding-small, - 'medium': $bcds-layout-padding-medium, - 'large': $bcds-layout-padding-large, - 'xlarge': $bcds-layout-padding-xlarge + "padding": ( + "none": $bcds-layout-padding-none, + "hair": $bcds-layout-padding-hair, + "xsmall": $bcds-layout-padding-xsmall, + "small": $bcds-layout-padding-small, + "medium": $bcds-layout-padding-medium, + "large": $bcds-layout-padding-large, + "xlarge": $bcds-layout-padding-xlarge, ), - 'margin': ( - 'none': $bcds-layout-margin-none, - 'hair': $bcds-layout-margin-hair, - 'xsmall': $bcds-layout-margin-xsmall, - 'small': $bcds-layout-margin-small, - 'medium': $bcds-layout-margin-medium, - 'large': $bcds-layout-margin-large, - 'xlarge': $bcds-layout-margin-xlarge, - 'xxlarge': $bcds-layout-margin-xxlarge, - 'xxxlarge': $bcds-layout-margin-xxxlarge, - 'huge': $bcds-layout-margin-huge + "margin": ( + "none": $bcds-layout-margin-none, + "hair": $bcds-layout-margin-hair, + "xsmall": $bcds-layout-margin-xsmall, + "small": $bcds-layout-margin-small, + "medium": $bcds-layout-margin-medium, + "large": $bcds-layout-margin-large, + "xlarge": $bcds-layout-margin-xlarge, + "xxlarge": $bcds-layout-margin-xxlarge, + "xxxlarge": $bcds-layout-margin-xxxlarge, + "huge": $bcds-layout-margin-huge, + ), + "borderRadius": ( + "none": $bcds-layout-border-radius-none, + "small": $bcds-layout-border-radius-small, + "medium": $bcds-layout-border-radius-medium, + "large": $bcds-layout-border-radius-large, + "circular": $bcds-layout-border-radius-circular, ), - 'borderRadius': ( - 'none': $bcds-layout-border-radius-none, - 'small': $bcds-layout-border-radius-small, - 'medium': $bcds-layout-border-radius-medium, - 'large': $bcds-layout-border-radius-large, - 'circular': $bcds-layout-border-radius-circular - ) ), - 'typography': ( - 'fontFamilies': ( - 'bc-sans': $bcds-typography-font-families-bc-sans + "typography": ( + "fontFamilies": ( + "bc-sans": $bcds-typography-font-families-bc-sans, + ), + "lineHeights": ( + "xxxdense": $bcds-typography-line-heights-xxxdense, + "xxdense": $bcds-typography-line-heights-xxdense, + "xdense": $bcds-typography-line-heights-xdense, + "dense": $bcds-typography-line-heights-dense, + "regular": $bcds-typography-line-heights-regular, + "sparse": $bcds-typography-line-heights-sparse, + "xsparse": $bcds-typography-line-heights-xsparse, + "xxsparse": $bcds-typography-line-heights-xxsparse, + "auto": $bcds-typography-line-heights-auto, ), - 'lineHeights': ( - 'xxxdense': $bcds-typography-line-heights-xxxdense, - 'xxdense': $bcds-typography-line-heights-xxdense, - 'xdense': $bcds-typography-line-heights-xdense, - 'dense': $bcds-typography-line-heights-dense, - 'regular': $bcds-typography-line-heights-regular, - 'sparse': $bcds-typography-line-heights-sparse, - 'xsparse': $bcds-typography-line-heights-xsparse, - 'xxsparse': $bcds-typography-line-heights-xxsparse, - 'auto': $bcds-typography-line-heights-auto + "fontWeights": ( + "regular": $bcds-typography-font-weights-regular, + "bold": $bcds-typography-font-weights-bold, + "italic": ( + "weight": $bcds-typography-font-weights-italic-weight, + "style": $bcds-typography-font-weights-italic-style, + ), ), - 'fontWeights': ( - 'regular': $bcds-typography-font-weights-regular, - 'bold': $bcds-typography-font-weights-bold, - 'italic': ( - 'weight': $bcds-typography-font-weights-italic-weight, - 'style': $bcds-typography-font-weights-italic-style - ) + "fontSize": ( + "label": $bcds-typography-font-size-label, + "smallBody": $bcds-typography-font-size-small-body, + "body": $bcds-typography-font-size-body, + "largeBody": $bcds-typography-font-size-large-body, + "H5": $bcds-typography-font-size-h5, + "H4": $bcds-typography-font-size-h4, + "H3": $bcds-typography-font-size-h3, + "H2": $bcds-typography-font-size-h2, + "H1": $bcds-typography-font-size-h1, + "display": $bcds-typography-font-size-display, ), - 'fontSize': ( - 'label': $bcds-typography-font-size-label, - 'smallBody': $bcds-typography-font-size-small-body, - 'body': $bcds-typography-font-size-body, - 'largeBody': $bcds-typography-font-size-large-body, - 'H5': $bcds-typography-font-size-h5, - 'H4': $bcds-typography-font-size-h4, - 'H3': $bcds-typography-font-size-h3, - 'H2': $bcds-typography-font-size-h2, - 'H1': $bcds-typography-font-size-h1, - 'display': $bcds-typography-font-size-display + "letterSpacing": ( + "0": $bcds-typography-letter-spacing-0, ), - 'letterSpacing': ( - '0': $bcds-typography-letter-spacing-0 + "paragraphSpacing": ( + "0": $bcds-typography-paragraph-spacing-0, ), - 'paragraphSpacing': ( - '0': $bcds-typography-paragraph-spacing-0 + "regular": ( + "label": $bcds-typography-regular-label, + "smallBody": $bcds-typography-regular-small-body, + "body": $bcds-typography-regular-body, + "largeBody": $bcds-typography-regular-large-body, + "H6": $bcds-typography-regular-h6, + "H5": $bcds-typography-regular-h5, + "H4": $bcds-typography-regular-h4, + "H3": $bcds-typography-regular-h3, + "H2": $bcds-typography-regular-h2, + "H1": $bcds-typography-regular-h1, + "display": $bcds-typography-regular-display, ), - 'regular': ( - 'label': $bcds-typography-regular-label, - 'smallBody': $bcds-typography-regular-small-body, - 'body': $bcds-typography-regular-body, - 'largeBody': $bcds-typography-regular-large-body, - 'H6': $bcds-typography-regular-h6, - 'H5': $bcds-typography-regular-h5, - 'H4': $bcds-typography-regular-h4, - 'H3': $bcds-typography-regular-h3, - 'H2': $bcds-typography-regular-h2, - 'H1': $bcds-typography-regular-h1, - 'display': $bcds-typography-regular-display + "bold": ( + "label": $bcds-typography-bold-label, + "smallBody": $bcds-typography-bold-small-body, + "body": $bcds-typography-bold-body, + "largeBody": $bcds-typography-bold-large-body, + "H6": $bcds-typography-bold-h6, + "H5": $bcds-typography-bold-h5, + "H4": $bcds-typography-bold-h4, + "H3": $bcds-typography-bold-h3, + "H2": $bcds-typography-bold-h2, + "H1": $bcds-typography-bold-h1, + "display": $bcds-typography-bold-display, ), - 'bold': ( - 'label': $bcds-typography-bold-label, - 'smallBody': $bcds-typography-bold-small-body, - 'body': $bcds-typography-bold-body, - 'largeBody': $bcds-typography-bold-large-body, - 'H6': $bcds-typography-bold-h6, - 'H5': $bcds-typography-bold-h5, - 'H4': $bcds-typography-bold-h4, - 'H3': $bcds-typography-bold-h3, - 'H2': $bcds-typography-bold-h2, - 'H1': $bcds-typography-bold-h1, - 'display': $bcds-typography-bold-display + "italic": ( + "label": $bcds-typography-italic-label, + "smallBody": $bcds-typography-italic-small-body, + "body": $bcds-typography-italic-body, + "largeBody": $bcds-typography-italic-large-body, + "H6": $bcds-typography-italic-h6, + "H5": $bcds-typography-italic-h5, + "H4": $bcds-typography-italic-h4, + "H3": $bcds-typography-italic-h3, + "H2": $bcds-typography-italic-h2, + "H1": $bcds-typography-italic-h1, + "display": $bcds-typography-italic-display, ), - 'italic': ( - 'label': $bcds-typography-italic-label, - 'smallBody': $bcds-typography-italic-small-body, - 'body': $bcds-typography-italic-body, - 'largeBody': $bcds-typography-italic-large-body, - 'H6': $bcds-typography-italic-h6, - 'H5': $bcds-typography-italic-h5, - 'H4': $bcds-typography-italic-h4, - 'H3': $bcds-typography-italic-h3, - 'H2': $bcds-typography-italic-h2, - 'H1': $bcds-typography-italic-h1, - 'display': $bcds-typography-italic-display + "textCase": ( + "none": $bcds-typography-text-case-none, ), - 'textCase': ( - 'none': $bcds-typography-text-case-none + "textDecoration": ( + "none": $bcds-typography-text-decoration-none, ), - 'textDecoration': ( - 'none': $bcds-typography-text-decoration-none + "paragraphIndent": ( + "0": $bcds-typography-paragraph-indent-0, ), - 'paragraphIndent': ( - '0': $bcds-typography-paragraph-indent-0 + "color": ( + "primary": $bcds-typography-color-primary, + "secondary": $bcds-typography-color-secondary, + "placeholder": $bcds-typography-color-placeholder, + "disabled": $bcds-typography-color-disabled, + "link": $bcds-typography-color-link, + "danger": $bcds-typography-color-danger, + "primaryInvert": $bcds-typography-color-primary-invert, + "secondaryInvert": $bcds-typography-color-secondary-invert, ), - 'color': ( - 'primary': $bcds-typography-color-primary, - 'secondary': $bcds-typography-color-secondary, - 'placeholder': $bcds-typography-color-placeholder, - 'disabled': $bcds-typography-color-disabled, - 'link': $bcds-typography-color-link, - 'danger': $bcds-typography-color-danger, - 'primaryInvert': $bcds-typography-color-primary-invert, - 'secondaryInvert': $bcds-typography-color-secondary-invert - ) ), - 'theme': ( - 'gold': ( - '10': $bcds-theme-gold-10, - '20': $bcds-theme-gold-20, - '30': $bcds-theme-gold-30, - '40': $bcds-theme-gold-40, - '50': $bcds-theme-gold-50, - '60': $bcds-theme-gold-60, - '70': $bcds-theme-gold-70, - '80': $bcds-theme-gold-80, - '90': $bcds-theme-gold-90, - '100': $bcds-theme-gold-100 + "theme": ( + "gold": ( + "10": $bcds-theme-gold-10, + "20": $bcds-theme-gold-20, + "30": $bcds-theme-gold-30, + "40": $bcds-theme-gold-40, + "50": $bcds-theme-gold-50, + "60": $bcds-theme-gold-60, + "70": $bcds-theme-gold-70, + "80": $bcds-theme-gold-80, + "90": $bcds-theme-gold-90, + "100": $bcds-theme-gold-100, ), - 'blue': ( - '10': $bcds-theme-blue-10, - '20': $bcds-theme-blue-20, - '30': $bcds-theme-blue-30, - '40': $bcds-theme-blue-40, - '50': $bcds-theme-blue-50, - '60': $bcds-theme-blue-60, - '70': $bcds-theme-blue-70, - '80': $bcds-theme-blue-80, - '90': $bcds-theme-blue-90, - '100': $bcds-theme-blue-100 + "blue": ( + "10": $bcds-theme-blue-10, + "20": $bcds-theme-blue-20, + "30": $bcds-theme-blue-30, + "40": $bcds-theme-blue-40, + "50": $bcds-theme-blue-50, + "60": $bcds-theme-blue-60, + "70": $bcds-theme-blue-70, + "80": $bcds-theme-blue-80, + "90": $bcds-theme-blue-90, + "100": $bcds-theme-blue-100, ), - 'gray': ( - '10': $bcds-theme-gray-10, - '20': $bcds-theme-gray-20, - '30': $bcds-theme-gray-30, - '40': $bcds-theme-gray-40, - '50': $bcds-theme-gray-50, - '60': $bcds-theme-gray-60, - '70': $bcds-theme-gray-70, - '80': $bcds-theme-gray-80, - '90': $bcds-theme-gray-90, - '100': $bcds-theme-gray-100, - '110': $bcds-theme-gray-110, - 'white': $bcds-theme-gray-white + "gray": ( + "10": $bcds-theme-gray-10, + "20": $bcds-theme-gray-20, + "30": $bcds-theme-gray-30, + "40": $bcds-theme-gray-40, + "50": $bcds-theme-gray-50, + "60": $bcds-theme-gray-60, + "70": $bcds-theme-gray-70, + "80": $bcds-theme-gray-80, + "90": $bcds-theme-gray-90, + "100": $bcds-theme-gray-100, + "110": $bcds-theme-gray-110, + "white": $bcds-theme-gray-white, ), - 'primaryBlue': $bcds-theme-primary-blue, - 'primaryGold': $bcds-theme-primary-gold - ) + "primaryBlue": $bcds-theme-primary-blue, + "primaryGold": $bcds-theme-primary-gold, + ), ); diff --git a/packages/design-tokens/build/scss/variables.scss b/packages/design-tokens/build/scss/variables.scss index 8ba0931a..5cd441d0 100644 --- a/packages/design-tokens/build/scss/variables.scss +++ b/packages/design-tokens/build/scss/variables.scss @@ -1,4 +1,3 @@ - /** * Do not edit directly, this file was auto-generated. */ @@ -14,69 +13,87 @@ $surface-opacity-70: 0.7; $surface-opacity-80: 0.8; $surface-opacity-90: 0.9; $surface-opacity-100: 1; -$surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements -$surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements -$surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons -$surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly +$surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements +$surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements +$surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons +$surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly $surface-color-primary-button-default: #013366; // Default fill colour for primary buttons -$surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button -$surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons -$surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state -$surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button -$surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button +$surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button +$surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons +$surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state +$surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button +$surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button $surface-color-primary-default: #013366; // Default theme colour for components and layout -$surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default -$surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default -$surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default -$surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons -$surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button -$surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons -$surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout -$surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default -$surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default -$surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default -$surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons -$surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button -$surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons -$surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout -$surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default -$surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default -$surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default -$surface-color-menus-default: #FFFFFF; // Default fill colour for menu items -$surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item -$surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields -$surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields -$surface-color-background-white: #FFFFFF; // White background -$surface-color-background-light-gray: #FAF9F8; // Default background colour for layout -$surface-color-background-light-blue: #F1F8FE; // Light blue background +$surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default +$surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default +$surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default +$surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons +$surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button +$surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons +$surface-color-secondary-default: #ffffff; // Light theme colour for components and layout +$surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default +$surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default +$surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default +$surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 +); // Default fill colour for tertiary buttons +$surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button +$surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons +$surface-color-tertiary-default: #ffffff00; // Alternative light theme colour for components and layout +$surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default +$surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default +$surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default +$surface-color-menus-default: #ffffff; // Default fill colour for menu items +$surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item +$surface-color-forms-default: #ffffff; // Default fill colour for form/input fields +$surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields +$surface-color-background-white: #ffffff; // White background +$surface-color-background-light-gray: #faf9f8; // Default background colour for layout +$surface-color-background-light-blue: #f1f8fe; // Light blue background $surface-color-background-dark-blue: #053662; // Dark blue background -$surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements +$surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements $surface-color-border-medium: #898785; // Default border colour for UI elements $surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs -$surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements -$surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues -$support-surface-color-info: #F7F9FC; -$support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages -$support-surface-color-success: #F6FFF8; // Background colour for success messages -$support-surface-color-warning: #FEF1D8; // Background colour for warning messages +$surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements +$surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 +); // Background overlay colour for images and modal dialogues +$support-surface-color-info: #f7f9fc; +$support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages +$support-surface-color-success: #f6fff8; // Background colour for success messages +$support-surface-color-warning: #fef1d8; // Background colour for warning messages $support-border-color-info: #053662; // Border stroke for general/informational messages -$support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages -$support-border-color-success: #42814A; // Border stroke for success messages -$support-border-color-warning: #F8BB47; // Border stroke for warning messages +$support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages +$support-border-color-success: #42814a; // Border stroke for success messages +$support-border-color-warning: #f8bb47; // Border stroke for warning messages $icons-size-xsmall: 14; // Smallest icon size $icons-size-small: 16; $icons-size-medium: 20; // Default icon size $icons-size-large: 24; $icons-size-xlarge: 32; // Largest icon size -$icons-color-primary: #2D2D2D; // Default colour for icons +$icons-color-primary: #2d2d2d; // Default colour for icons $icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons -$icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons -$icons-color-link: #255A90; // Use for hyperlinked icons +$icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons +$icons-color-link: #255a90; // Use for hyperlinked icons $icons-color-info: #053662; // Emphasis colour for icons in general/informational state -$icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state -$icons-color-success: #42814A; // Emphasis colour for icons in success state -$icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state -$icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds +$icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state +$icons-color-success: #42814a; // Emphasis colour for icons in success state +$icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state +$icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds $layout-border-width-none: 0; $layout-border-width-small: 1; $layout-border-width-medium: 2; @@ -103,7 +120,7 @@ $layout-border-radius-small: 2; $layout-border-radius-medium: 4; $layout-border-radius-large: 6; $layout-border-radius-circular: 9999; // Used for components with a circular radius -$typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package +$typography-font-families-bc-sans: "BC Sans"; // BC Sans font. Requires BC Sans package $typography-line-heights-xxxdense: 1.125rem; // Smallest line height $typography-line-heights-xxdense: 1.313rem; $typography-line-heights-xdense: 1.688rem; @@ -129,380 +146,380 @@ $typography-font-size-h1: 2.25rem; $typography-font-size-display: 3rem; $typography-letter-spacing-0: 0%; // System token, used to generate type styles $typography-paragraph-spacing-0: 0; // System token, used to generate type styles -$typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions -$typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text -$typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text -$typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text -$typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6 -$typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5 -$typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4 -$typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3 -$typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2 -$typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1 -$typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings -$typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded) -$typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded) -$typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded) -$typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded) -$typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6 -$typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5 -$typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4 -$typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3 -$typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2 -$typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1 -$typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings -$typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic) -$typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic) -$typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic) -$typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic) -$typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6 -$typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5 -$typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4 -$typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3 -$typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2 -$typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1 -$typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings +$typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; // Labels and captions +$typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; // Smaller body text +$typography-regular-body: 400 1rem/1.688rem "BC Sans"; // Default body text +$typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; // Larger body text +$typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; // Alternate (unbolded) style for Heading 6 +$typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; // Alternate (unbolded) style for Heading 5 +$typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; // Alternate (unbolded) style for Heading 4 +$typography-regular-h3: 400 1.75rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 3 +$typography-regular-h2: 400 2rem/3.375rem "BC Sans"; // Alternate (unbolded) style for Heading 2 +$typography-regular-h1: 400 2.25rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 1 +$typography-regular-display: 400 3rem / AUTO "BC Sans"; // Extra-large body text size. Do not use for headings +$typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; // Labels and captions (bolded) +$typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; // Default for small body text (bolded) +$typography-bold-body: 700 1rem/1.688rem "BC Sans"; // Default for body text (bolded) +$typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (bolded) +$typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +$typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +$typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +$typography-bold-h3: 700 1.75rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +$typography-bold-h2: 700 2rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +$typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +$typography-bold-display: 700 3rem / AUTO "BC Sans"; // Extra-large font size (bolded). Do not use for headings +$typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; // Labels and captions (italic) +$typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; // Small body text (italic) +$typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; // Default for body text (italic) +$typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (italic) +$typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; // Alternate (italic) style for Heading 6 +$typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; // Alternate (italic) style for Heading 5 +$typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; // Alternate (italic) style for Heading 4 +$typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 3 +$typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; // Alternate (italic) style for Heading 2 +$typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 1 +$typography-italic-display: 400 italic 3rem / AUTO "BC Sans"; // Extra-large font size (italic). Do not use for headings $typography-text-case-none: none; $typography-text-decoration-none: none; // System token, used to generate type styles $typography-paragraph-indent-0: 0px; // System token, used to generate type styles -$typography-color-primary: #2D2D2D; // Default colour for all body text and headings +$typography-color-primary: #2d2d2d; // Default colour for all body text and headings $typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text -$typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms -$typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements -$typography-color-link: #255A90; // Use for hyperlinks in body text and headings -$typography-color-danger: #CE3E39; // Use for error, failure or danger message text -$typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds -$typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds -$theme-gold-10: #FEF8E8; // Gold scale — lightest -$theme-gold-20: #FEF0D8; // Gold scale -$theme-gold-30: #FDE9C4; // Gold scale -$theme-gold-40: #FCE2B0; // Gold scale -$theme-gold-50: #FBDA9D; // Gold scale -$theme-gold-60: #FBD389; // Gold scale -$theme-gold-70: #FACC75; // Gold scale -$theme-gold-80: #F9C462; // Gold scale -$theme-gold-90: #F8BA47; // Gold scale -$theme-gold-100: #FCBA19; // Gold scale — darkest -$theme-blue-10: #F1F8FE; // Blue scale — lightest -$theme-blue-20: #D8EAFD; // Blue scale -$theme-blue-30: #C1DDFC; // Blue scale -$theme-blue-40: #A8D0FB; // Blue scale -$theme-blue-50: #91C4FA; // Blue scale -$theme-blue-60: #7AB8F9; // Blue scale -$theme-blue-70: #5595D9; // Blue scale -$theme-blue-80: #3470B1; // Blue scale -$theme-blue-90: #1E5189; // Blue scale +$typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms +$typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements +$typography-color-link: #255a90; // Use for hyperlinks in body text and headings +$typography-color-danger: #ce3e39; // Use for error, failure or danger message text +$typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds +$typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds +$theme-gold-10: #fef8e8; // Gold scale — lightest +$theme-gold-20: #fef0d8; // Gold scale +$theme-gold-30: #fde9c4; // Gold scale +$theme-gold-40: #fce2b0; // Gold scale +$theme-gold-50: #fbda9d; // Gold scale +$theme-gold-60: #fbd389; // Gold scale +$theme-gold-70: #facc75; // Gold scale +$theme-gold-80: #f9c462; // Gold scale +$theme-gold-90: #f8ba47; // Gold scale +$theme-gold-100: #fcba19; // Gold scale — darkest +$theme-blue-10: #f1f8fe; // Blue scale — lightest +$theme-blue-20: #d8eafd; // Blue scale +$theme-blue-30: #c1ddfc; // Blue scale +$theme-blue-40: #a8d0fb; // Blue scale +$theme-blue-50: #91c4fa; // Blue scale +$theme-blue-60: #7ab8f9; // Blue scale +$theme-blue-70: #5595d9; // Blue scale +$theme-blue-80: #3470b1; // Blue scale +$theme-blue-90: #1e5189; // Blue scale $theme-blue-100: #013366; // Blue scale — darkest -$theme-gray-10: #FAF9F8; // Greyscale — lightest -$theme-gray-20: #F3F2F1; // Greyscale -$theme-gray-30: #ECEAE8; // Greyscale -$theme-gray-40: #E0DEDC; // Greyscale -$theme-gray-50: #D1CFCD; // Greyscale -$theme-gray-60: #C6C5C3; // Greyscale -$theme-gray-70: #9F9D9C; // Greyscale -$theme-gray-80: #605E5C; // Greyscale -$theme-gray-90: #3D3C3B; // Greyscale +$theme-gray-10: #faf9f8; // Greyscale — lightest +$theme-gray-20: #f3f2f1; // Greyscale +$theme-gray-30: #eceae8; // Greyscale +$theme-gray-40: #e0dedc; // Greyscale +$theme-gray-50: #d1cfcd; // Greyscale +$theme-gray-60: #c6c5c3; // Greyscale +$theme-gray-70: #9f9d9c; // Greyscale +$theme-gray-80: #605e5c; // Greyscale +$theme-gray-90: #3d3c3b; // Greyscale $theme-gray-100: #353433; // Greyscale $theme-gray-110: #252423; // Greyscale — darkest -$theme-gray-white: #FFFFFF; // White +$theme-gray-white: #ffffff; // White $theme-primary-blue: #013366; // Primary Blue (Blue 100) -$theme-primary-gold: #FCBA19; // Primary Gold (Gold 100) +$theme-primary-gold: #fcba19; // Primary Gold (Gold 100) $bcds: ( - 'surface': ( - 'opacity': ( - '0': $surface-opacity-0, - '10': $surface-opacity-10, - '20': $surface-opacity-20, - '30': $surface-opacity-30, - '40': $surface-opacity-40, - '50': $surface-opacity-50, - '60': $surface-opacity-60, - '70': $surface-opacity-70, - '80': $surface-opacity-80, - '90': $surface-opacity-90, - '100': $surface-opacity-100 + "surface": ( + "opacity": ( + "0": $surface-opacity-0, + "10": $surface-opacity-10, + "20": $surface-opacity-20, + "30": $surface-opacity-30, + "40": $surface-opacity-40, + "50": $surface-opacity-50, + "60": $surface-opacity-60, + "70": $surface-opacity-70, + "80": $surface-opacity-80, + "90": $surface-opacity-90, + "100": $surface-opacity-100, ), - 'shadow': ( - 'none': $surface-shadow-none, - 'small': $surface-shadow-small, - 'medium': $surface-shadow-medium, - 'large': $surface-shadow-large + "shadow": ( + "none": $surface-shadow-none, + "small": $surface-shadow-small, + "medium": $surface-shadow-medium, + "large": $surface-shadow-large, ), - 'color': ( - 'primary': ( - 'button': ( - 'default': $surface-color-primary-button-default, - 'hover': $surface-color-primary-button-hover, - 'disabled': $surface-color-primary-button-disabled + "color": ( + "primary": ( + "button": ( + "default": $surface-color-primary-button-default, + "hover": $surface-color-primary-button-hover, + "disabled": $surface-color-primary-button-disabled, ), - 'dangerButton': ( - 'default': $surface-color-primary-danger-button-default, - 'hover': $surface-color-primary-danger-button-hover, - 'disabled': $surface-color-primary-danger-button-disabled + "dangerButton": ( + "default": $surface-color-primary-danger-button-default, + "hover": $surface-color-primary-danger-button-hover, + "disabled": $surface-color-primary-danger-button-disabled, ), - 'default': $surface-color-primary-default, - 'hover': $surface-color-primary-hover, - 'pressed': $surface-color-primary-pressed, - 'disabled': $surface-color-primary-disabled + "default": $surface-color-primary-default, + "hover": $surface-color-primary-hover, + "pressed": $surface-color-primary-pressed, + "disabled": $surface-color-primary-disabled, ), - 'secondary': ( - 'button': ( - 'default': $surface-color-secondary-button-default, - 'hover': $surface-color-secondary-button-hover, - 'disabled': $surface-color-secondary-button-disabled + "secondary": ( + "button": ( + "default": $surface-color-secondary-button-default, + "hover": $surface-color-secondary-button-hover, + "disabled": $surface-color-secondary-button-disabled, ), - 'default': $surface-color-secondary-default, - 'hover': $surface-color-secondary-hover, - 'pressed': $surface-color-secondary-pressed, - 'disabled': $surface-color-secondary-disabled + "default": $surface-color-secondary-default, + "hover": $surface-color-secondary-hover, + "pressed": $surface-color-secondary-pressed, + "disabled": $surface-color-secondary-disabled, ), - 'tertiary': ( - 'button': ( - 'default': $surface-color-tertiary-button-default, - 'hover': $surface-color-tertiary-button-hover, - 'disabled': $surface-color-tertiary-button-disabled + "tertiary": ( + "button": ( + "default": $surface-color-tertiary-button-default, + "hover": $surface-color-tertiary-button-hover, + "disabled": $surface-color-tertiary-button-disabled, ), - 'default': $surface-color-tertiary-default, - 'hover': $surface-color-tertiary-hover, - 'pressed': $surface-color-tertiary-pressed, - 'disabled': $surface-color-tertiary-disabled + "default": $surface-color-tertiary-default, + "hover": $surface-color-tertiary-hover, + "pressed": $surface-color-tertiary-pressed, + "disabled": $surface-color-tertiary-disabled, + ), + "menus": ( + "default": $surface-color-menus-default, + "hover": $surface-color-menus-hover, ), - 'menus': ( - 'default': $surface-color-menus-default, - 'hover': $surface-color-menus-hover + "forms": ( + "default": $surface-color-forms-default, + "disabled": $surface-color-forms-disabled, ), - 'forms': ( - 'default': $surface-color-forms-default, - 'disabled': $surface-color-forms-disabled + "background": ( + "white": $surface-color-background-white, + "lightGray": $surface-color-background-light-gray, + "lightBlue": $surface-color-background-light-blue, + "darkBlue": $surface-color-background-dark-blue, ), - 'background': ( - 'white': $surface-color-background-white, - 'lightGray': $surface-color-background-light-gray, - 'lightBlue': $surface-color-background-light-blue, - 'darkBlue': $surface-color-background-dark-blue + "border": ( + "default": $surface-color-border-default, + "medium": $surface-color-border-medium, + "dark": $surface-color-border-dark, + "active": $surface-color-border-active, ), - 'border': ( - 'default': $surface-color-border-default, - 'medium': $surface-color-border-medium, - 'dark': $surface-color-border-dark, - 'active': $surface-color-border-active + "overlay": ( + "default": $surface-color-overlay-default, ), - 'overlay': ( - 'default': $surface-color-overlay-default - ) - ) + ), ), - 'support': ( - 'surfaceColor': ( - 'info': $support-surface-color-info, - 'danger': $support-surface-color-danger, - 'success': $support-surface-color-success, - 'warning': $support-surface-color-warning + "support": ( + "surfaceColor": ( + "info": $support-surface-color-info, + "danger": $support-surface-color-danger, + "success": $support-surface-color-success, + "warning": $support-surface-color-warning, + ), + "borderColor": ( + "info": $support-border-color-info, + "danger": $support-border-color-danger, + "success": $support-border-color-success, + "warning": $support-border-color-warning, ), - 'borderColor': ( - 'info': $support-border-color-info, - 'danger': $support-border-color-danger, - 'success': $support-border-color-success, - 'warning': $support-border-color-warning - ) ), - 'icons': ( - 'size': ( - 'xsmall': $icons-size-xsmall, - 'small': $icons-size-small, - 'medium': $icons-size-medium, - 'large': $icons-size-large, - 'xlarge': $icons-size-xlarge + "icons": ( + "size": ( + "xsmall": $icons-size-xsmall, + "small": $icons-size-small, + "medium": $icons-size-medium, + "large": $icons-size-large, + "xlarge": $icons-size-xlarge, + ), + "color": ( + "primary": $icons-color-primary, + "secondary": $icons-color-secondary, + "disabled": $icons-color-disabled, + "link": $icons-color-link, + "info": $icons-color-info, + "danger": $icons-color-danger, + "success": $icons-color-success, + "warning": $icons-color-warning, + "primaryInvert": $icons-color-primary-invert, ), - 'color': ( - 'primary': $icons-color-primary, - 'secondary': $icons-color-secondary, - 'disabled': $icons-color-disabled, - 'link': $icons-color-link, - 'info': $icons-color-info, - 'danger': $icons-color-danger, - 'success': $icons-color-success, - 'warning': $icons-color-warning, - 'primaryInvert': $icons-color-primary-invert - ) ), - 'layout': ( - 'borderWidth': ( - 'none': $layout-border-width-none, - 'small': $layout-border-width-small, - 'medium': $layout-border-width-medium, - 'large': $layout-border-width-large + "layout": ( + "borderWidth": ( + "none": $layout-border-width-none, + "small": $layout-border-width-small, + "medium": $layout-border-width-medium, + "large": $layout-border-width-large, ), - 'padding': ( - 'none': $layout-padding-none, - 'hair': $layout-padding-hair, - 'xsmall': $layout-padding-xsmall, - 'small': $layout-padding-small, - 'medium': $layout-padding-medium, - 'large': $layout-padding-large, - 'xlarge': $layout-padding-xlarge + "padding": ( + "none": $layout-padding-none, + "hair": $layout-padding-hair, + "xsmall": $layout-padding-xsmall, + "small": $layout-padding-small, + "medium": $layout-padding-medium, + "large": $layout-padding-large, + "xlarge": $layout-padding-xlarge, ), - 'margin': ( - 'none': $layout-margin-none, - 'hair': $layout-margin-hair, - 'xsmall': $layout-margin-xsmall, - 'small': $layout-margin-small, - 'medium': $layout-margin-medium, - 'large': $layout-margin-large, - 'xlarge': $layout-margin-xlarge, - 'xxlarge': $layout-margin-xxlarge, - 'xxxlarge': $layout-margin-xxxlarge, - 'huge': $layout-margin-huge + "margin": ( + "none": $layout-margin-none, + "hair": $layout-margin-hair, + "xsmall": $layout-margin-xsmall, + "small": $layout-margin-small, + "medium": $layout-margin-medium, + "large": $layout-margin-large, + "xlarge": $layout-margin-xlarge, + "xxlarge": $layout-margin-xxlarge, + "xxxlarge": $layout-margin-xxxlarge, + "huge": $layout-margin-huge, + ), + "borderRadius": ( + "none": $layout-border-radius-none, + "small": $layout-border-radius-small, + "medium": $layout-border-radius-medium, + "large": $layout-border-radius-large, + "circular": $layout-border-radius-circular, ), - 'borderRadius': ( - 'none': $layout-border-radius-none, - 'small': $layout-border-radius-small, - 'medium': $layout-border-radius-medium, - 'large': $layout-border-radius-large, - 'circular': $layout-border-radius-circular - ) ), - 'typography': ( - 'fontFamilies': ( - 'bc-sans': $typography-font-families-bc-sans + "typography": ( + "fontFamilies": ( + "bc-sans": $typography-font-families-bc-sans, + ), + "lineHeights": ( + "xxxdense": $typography-line-heights-xxxdense, + "xxdense": $typography-line-heights-xxdense, + "xdense": $typography-line-heights-xdense, + "dense": $typography-line-heights-dense, + "regular": $typography-line-heights-regular, + "sparse": $typography-line-heights-sparse, + "xsparse": $typography-line-heights-xsparse, + "xxsparse": $typography-line-heights-xxsparse, + "auto": $typography-line-heights-auto, ), - 'lineHeights': ( - 'xxxdense': $typography-line-heights-xxxdense, - 'xxdense': $typography-line-heights-xxdense, - 'xdense': $typography-line-heights-xdense, - 'dense': $typography-line-heights-dense, - 'regular': $typography-line-heights-regular, - 'sparse': $typography-line-heights-sparse, - 'xsparse': $typography-line-heights-xsparse, - 'xxsparse': $typography-line-heights-xxsparse, - 'auto': $typography-line-heights-auto + "fontWeights": ( + "regular": $typography-font-weights-regular, + "bold": $typography-font-weights-bold, + "italic": ( + "weight": $typography-font-weights-italic-weight, + "style": $typography-font-weights-italic-style, + ), ), - 'fontWeights': ( - 'regular': $typography-font-weights-regular, - 'bold': $typography-font-weights-bold, - 'italic': ( - 'weight': $typography-font-weights-italic-weight, - 'style': $typography-font-weights-italic-style - ) + "fontSize": ( + "label": $typography-font-size-label, + "smallBody": $typography-font-size-small-body, + "body": $typography-font-size-body, + "largeBody": $typography-font-size-large-body, + "H5": $typography-font-size-h5, + "H4": $typography-font-size-h4, + "H3": $typography-font-size-h3, + "H2": $typography-font-size-h2, + "H1": $typography-font-size-h1, + "display": $typography-font-size-display, ), - 'fontSize': ( - 'label': $typography-font-size-label, - 'smallBody': $typography-font-size-small-body, - 'body': $typography-font-size-body, - 'largeBody': $typography-font-size-large-body, - 'H5': $typography-font-size-h5, - 'H4': $typography-font-size-h4, - 'H3': $typography-font-size-h3, - 'H2': $typography-font-size-h2, - 'H1': $typography-font-size-h1, - 'display': $typography-font-size-display + "letterSpacing": ( + "0": $typography-letter-spacing-0, ), - 'letterSpacing': ( - '0': $typography-letter-spacing-0 + "paragraphSpacing": ( + "0": $typography-paragraph-spacing-0, ), - 'paragraphSpacing': ( - '0': $typography-paragraph-spacing-0 + "regular": ( + "label": $typography-regular-label, + "smallBody": $typography-regular-small-body, + "body": $typography-regular-body, + "largeBody": $typography-regular-large-body, + "H6": $typography-regular-h6, + "H5": $typography-regular-h5, + "H4": $typography-regular-h4, + "H3": $typography-regular-h3, + "H2": $typography-regular-h2, + "H1": $typography-regular-h1, + "display": $typography-regular-display, ), - 'regular': ( - 'label': $typography-regular-label, - 'smallBody': $typography-regular-small-body, - 'body': $typography-regular-body, - 'largeBody': $typography-regular-large-body, - 'H6': $typography-regular-h6, - 'H5': $typography-regular-h5, - 'H4': $typography-regular-h4, - 'H3': $typography-regular-h3, - 'H2': $typography-regular-h2, - 'H1': $typography-regular-h1, - 'display': $typography-regular-display + "bold": ( + "label": $typography-bold-label, + "smallBody": $typography-bold-small-body, + "body": $typography-bold-body, + "largeBody": $typography-bold-large-body, + "H6": $typography-bold-h6, + "H5": $typography-bold-h5, + "H4": $typography-bold-h4, + "H3": $typography-bold-h3, + "H2": $typography-bold-h2, + "H1": $typography-bold-h1, + "display": $typography-bold-display, ), - 'bold': ( - 'label': $typography-bold-label, - 'smallBody': $typography-bold-small-body, - 'body': $typography-bold-body, - 'largeBody': $typography-bold-large-body, - 'H6': $typography-bold-h6, - 'H5': $typography-bold-h5, - 'H4': $typography-bold-h4, - 'H3': $typography-bold-h3, - 'H2': $typography-bold-h2, - 'H1': $typography-bold-h1, - 'display': $typography-bold-display + "italic": ( + "label": $typography-italic-label, + "smallBody": $typography-italic-small-body, + "body": $typography-italic-body, + "largeBody": $typography-italic-large-body, + "H6": $typography-italic-h6, + "H5": $typography-italic-h5, + "H4": $typography-italic-h4, + "H3": $typography-italic-h3, + "H2": $typography-italic-h2, + "H1": $typography-italic-h1, + "display": $typography-italic-display, ), - 'italic': ( - 'label': $typography-italic-label, - 'smallBody': $typography-italic-small-body, - 'body': $typography-italic-body, - 'largeBody': $typography-italic-large-body, - 'H6': $typography-italic-h6, - 'H5': $typography-italic-h5, - 'H4': $typography-italic-h4, - 'H3': $typography-italic-h3, - 'H2': $typography-italic-h2, - 'H1': $typography-italic-h1, - 'display': $typography-italic-display + "textCase": ( + "none": $typography-text-case-none, ), - 'textCase': ( - 'none': $typography-text-case-none + "textDecoration": ( + "none": $typography-text-decoration-none, ), - 'textDecoration': ( - 'none': $typography-text-decoration-none + "paragraphIndent": ( + "0": $typography-paragraph-indent-0, ), - 'paragraphIndent': ( - '0': $typography-paragraph-indent-0 + "color": ( + "primary": $typography-color-primary, + "secondary": $typography-color-secondary, + "placeholder": $typography-color-placeholder, + "disabled": $typography-color-disabled, + "link": $typography-color-link, + "danger": $typography-color-danger, + "primaryInvert": $typography-color-primary-invert, + "secondaryInvert": $typography-color-secondary-invert, ), - 'color': ( - 'primary': $typography-color-primary, - 'secondary': $typography-color-secondary, - 'placeholder': $typography-color-placeholder, - 'disabled': $typography-color-disabled, - 'link': $typography-color-link, - 'danger': $typography-color-danger, - 'primaryInvert': $typography-color-primary-invert, - 'secondaryInvert': $typography-color-secondary-invert - ) ), - 'theme': ( - 'gold': ( - '10': $theme-gold-10, - '20': $theme-gold-20, - '30': $theme-gold-30, - '40': $theme-gold-40, - '50': $theme-gold-50, - '60': $theme-gold-60, - '70': $theme-gold-70, - '80': $theme-gold-80, - '90': $theme-gold-90, - '100': $theme-gold-100 + "theme": ( + "gold": ( + "10": $theme-gold-10, + "20": $theme-gold-20, + "30": $theme-gold-30, + "40": $theme-gold-40, + "50": $theme-gold-50, + "60": $theme-gold-60, + "70": $theme-gold-70, + "80": $theme-gold-80, + "90": $theme-gold-90, + "100": $theme-gold-100, ), - 'blue': ( - '10': $theme-blue-10, - '20': $theme-blue-20, - '30': $theme-blue-30, - '40': $theme-blue-40, - '50': $theme-blue-50, - '60': $theme-blue-60, - '70': $theme-blue-70, - '80': $theme-blue-80, - '90': $theme-blue-90, - '100': $theme-blue-100 + "blue": ( + "10": $theme-blue-10, + "20": $theme-blue-20, + "30": $theme-blue-30, + "40": $theme-blue-40, + "50": $theme-blue-50, + "60": $theme-blue-60, + "70": $theme-blue-70, + "80": $theme-blue-80, + "90": $theme-blue-90, + "100": $theme-blue-100, ), - 'gray': ( - '10': $theme-gray-10, - '20': $theme-gray-20, - '30': $theme-gray-30, - '40': $theme-gray-40, - '50': $theme-gray-50, - '60': $theme-gray-60, - '70': $theme-gray-70, - '80': $theme-gray-80, - '90': $theme-gray-90, - '100': $theme-gray-100, - '110': $theme-gray-110, - 'white': $theme-gray-white + "gray": ( + "10": $theme-gray-10, + "20": $theme-gray-20, + "30": $theme-gray-30, + "40": $theme-gray-40, + "50": $theme-gray-50, + "60": $theme-gray-60, + "70": $theme-gray-70, + "80": $theme-gray-80, + "90": $theme-gray-90, + "100": $theme-gray-100, + "110": $theme-gray-110, + "white": $theme-gray-white, ), - 'primaryBlue': $theme-primary-blue, - 'primaryGold': $theme-primary-gold - ) + "primaryBlue": $theme-primary-blue, + "primaryGold": $theme-primary-gold, + ), ); diff --git a/packages/design-tokens/dist/css-prefixed/variables.css b/packages/design-tokens/dist/css-prefixed/variables.css index 45d60c2d..94ed2d64 100644 --- a/packages/design-tokens/dist/css-prefixed/variables.css +++ b/packages/design-tokens/dist/css-prefixed/variables.css @@ -14,69 +14,87 @@ --bcds-surface-opacity-80: 0.8; --bcds-surface-opacity-90: 0.9; --bcds-surface-opacity-100: 1; - --bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ - --bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ - --bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ - --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ + --bcds-surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ + --bcds-surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ + --bcds-surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ + --bcds-surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ --bcds-surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */ - --bcds-surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */ - --bcds-surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */ - --bcds-surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */ - --bcds-surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */ - --bcds-surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */ + --bcds-surface-color-primary-button-hover: #1e5189; /** Fill colour used when user hovers over primary button */ + --bcds-surface-color-primary-button-disabled: #edebe9; /** Fill colour for inactive primary buttons */ + --bcds-surface-color-primary-danger-button-default: #ce3e39; /** Default fill colour for buttons in danger/warning state */ + --bcds-surface-color-primary-danger-button-hover: #a2312d; /** Fill colour used when user hovers over danger/warning button */ + --bcds-surface-color-primary-danger-button-disabled: #edebe9; /** Default fill colour for disabled danger/warning button */ --bcds-surface-color-primary-default: #013366; /** Default theme colour for components and layout */ - --bcds-surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */ - --bcds-surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */ - --bcds-surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */ - --bcds-surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */ - --bcds-surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */ - --bcds-surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */ - --bcds-surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */ - --bcds-surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */ - --bcds-surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */ - --bcds-surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */ - --bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */ - --bcds-surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */ - --bcds-surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */ - --bcds-surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */ - --bcds-surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */ - --bcds-surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */ - --bcds-surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */ - --bcds-surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */ - --bcds-surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */ - --bcds-surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */ - --bcds-surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */ - --bcds-surface-color-background-white: #FFFFFF; /** White background */ - --bcds-surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */ - --bcds-surface-color-background-light-blue: #F1F8FE; /** Light blue background */ + --bcds-surface-color-primary-hover: #1e5189; /** Hover variant of surface.color.primary.default */ + --bcds-surface-color-primary-pressed: #01264c; /** Selected/pressed variant of surface.color.primary.default */ + --bcds-surface-color-primary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.primary default */ + --bcds-surface-color-secondary-button-default: #ffffff; /** Fill colour for secondary buttons */ + --bcds-surface-color-secondary-button-hover: #edebe9; /** Fill colour used when user hovers over secondary button */ + --bcds-surface-color-secondary-button-disabled: #edebe9; /** Fill colour for inactive secondary buttons */ + --bcds-surface-color-secondary-default: #ffffff; /** Light theme colour for components and layout */ + --bcds-surface-color-secondary-hover: #edebe9; /** Hover variant of surface.color.secondary.default */ + --bcds-surface-color-secondary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.secondary.default */ + --bcds-surface-color-secondary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.secondary default */ + --bcds-surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 + ); /** Default fill colour for tertiary buttons */ + --bcds-surface-color-tertiary-button-hover: #eceae8; /** Fill colour used when user hovers over tertiary button */ + --bcds-surface-color-tertiary-button-disabled: #edebe9; /** Fill colour for inactive tertiary buttons */ + --bcds-surface-color-tertiary-default: #ffffff00; /** Alternative light theme colour for components and layout */ + --bcds-surface-color-tertiary-hover: #eceae8; /** Hover variant of surface.color.tertiary.default */ + --bcds-surface-color-tertiary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.tertiary.default */ + --bcds-surface-color-tertiary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.tertiary default */ + --bcds-surface-color-menus-default: #ffffff; /** Default fill colour for menu items */ + --bcds-surface-color-menus-hover: #edebe9; /** Fill colour used when user hovers over a menu item */ + --bcds-surface-color-forms-default: #ffffff; /** Default fill colour for form/input fields */ + --bcds-surface-color-forms-disabled: #edebe9; /** Fill colour for inactive/disabled form/input fields */ + --bcds-surface-color-background-white: #ffffff; /** White background */ + --bcds-surface-color-background-light-gray: #faf9f8; /** Default background colour for layout */ + --bcds-surface-color-background-light-blue: #f1f8fe; /** Light blue background */ --bcds-surface-color-background-dark-blue: #053662; /** Dark blue background */ - --bcds-surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */ + --bcds-surface-color-border-default: #d8d8d8; /** Lighter border colour for UI elements */ --bcds-surface-color-border-medium: #898785; /** Default border colour for UI elements */ --bcds-surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */ - --bcds-surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */ - --bcds-surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */ - --bcds-support-surface-color-info: #F7F9FC; - --bcds-support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */ - --bcds-support-surface-color-success: #F6FFF8; /** Background colour for success messages */ - --bcds-support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */ + --bcds-surface-color-border-active: #2e5dd7; /** Used as the active stroke colour for UI elements */ + --bcds-surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 + ); /** Background overlay colour for images and modal dialogues */ + --bcds-support-surface-color-info: #f7f9fc; + --bcds-support-surface-color-danger: #f4e1e2; /** Background colour for error, failure or danger messages */ + --bcds-support-surface-color-success: #f6fff8; /** Background colour for success messages */ + --bcds-support-surface-color-warning: #fef1d8; /** Background colour for warning messages */ --bcds-support-border-color-info: #053662; /** Border stroke for general/informational messages */ - --bcds-support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */ - --bcds-support-border-color-success: #42814A; /** Border stroke for success messages */ - --bcds-support-border-color-warning: #F8BB47; /** Border stroke for warning messages */ + --bcds-support-border-color-danger: #ce3e39; /** Border stroke for error, failure or danger messages */ + --bcds-support-border-color-success: #42814a; /** Border stroke for success messages */ + --bcds-support-border-color-warning: #f8bb47; /** Border stroke for warning messages */ --bcds-icons-size-xsmall: 14px; /** Smallest icon size */ --bcds-icons-size-small: 16px; --bcds-icons-size-medium: 20px; /** Default icon size */ --bcds-icons-size-large: 24px; --bcds-icons-size-xlarge: 32px; /** Largest icon size */ - --bcds-icons-color-primary: #2D2D2D; /** Default colour for icons */ + --bcds-icons-color-primary: #2d2d2d; /** Default colour for icons */ --bcds-icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */ - --bcds-icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */ - --bcds-icons-color-link: #255A90; /** Use for hyperlinked icons */ + --bcds-icons-color-disabled: #9f9d9c; /** Use only for inactive/disabled icons */ + --bcds-icons-color-link: #255a90; /** Use for hyperlinked icons */ --bcds-icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */ - --bcds-icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */ - --bcds-icons-color-success: #42814A; /** Emphasis colour for icons in success state */ - --bcds-icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */ - --bcds-icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */ + --bcds-icons-color-danger: #ce3e39; /** Emphasis colour for icons in error, failure or danger state */ + --bcds-icons-color-success: #42814a; /** Emphasis colour for icons in success state */ + --bcds-icons-color-warning: #f8bb47; /** Emphasis colour for icons in warning state */ + --bcds-icons-color-primary-invert: #ffffff; /** Default colour for icons on dark backgrounds */ --bcds-layout-border-width-none: 0; --bcds-layout-border-width-small: 1px; --bcds-layout-border-width-medium: 2px; @@ -103,7 +121,7 @@ --bcds-layout-border-radius-medium: 4px; --bcds-layout-border-radius-large: 6px; --bcds-layout-border-radius-circular: 9999px; /** Used for components with a circular radius */ - --bcds-typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */ + --bcds-typography-font-families-bc-sans: "BC Sans"; /** BC Sans font. Requires BC Sans package */ --bcds-typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */ --bcds-typography-line-heights-xxdense: 1.313rem; --bcds-typography-line-heights-xdense: 1.688rem; @@ -129,82 +147,82 @@ --bcds-typography-font-size-display: 3rem; --bcds-typography-letter-spacing-0: 0em; /** System token, used to generate type styles */ --bcds-typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */ - --bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */ - --bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */ - --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */ - --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */ - --bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */ - --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */ - --bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */ - --bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */ - --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */ - --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */ - --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */ - --bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */ - --bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */ - --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */ - --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */ - --bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ - --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ - --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ - --bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ - --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ - --bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ - --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */ - --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */ - --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */ - --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */ - --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */ - --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */ - --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */ - --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */ - --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */ - --bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */ - --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */ - --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */ + --bcds-typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; /** Labels and captions */ + --bcds-typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; /** Smaller body text */ + --bcds-typography-regular-body: 400 1rem/1.688rem "BC Sans"; /** Default body text */ + --bcds-typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; /** Larger body text */ + --bcds-typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; /** Alternate (unbolded) style for Heading 6 */ + --bcds-typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; /** Alternate (unbolded) style for Heading 5 */ + --bcds-typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; /** Alternate (unbolded) style for Heading 4 */ + --bcds-typography-regular-h3: 400 1.75rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 3 */ + --bcds-typography-regular-h2: 400 2rem/3.375rem "BC Sans"; /** Alternate (unbolded) style for Heading 2 */ + --bcds-typography-regular-h1: 400 2.25rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 1 */ + --bcds-typography-regular-display: 400 3rem/AUTO "BC Sans"; /** Extra-large body text size. Do not use for headings */ + --bcds-typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; /** Labels and captions (bolded) */ + --bcds-typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; /** Default for small body text (bolded) */ + --bcds-typography-bold-body: 700 1rem/1.688rem "BC Sans"; /** Default for body text (bolded) */ + --bcds-typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (bolded) */ + --bcds-typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ + --bcds-typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ + --bcds-typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ + --bcds-typography-bold-h3: 700 1.75rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ + --bcds-typography-bold-h2: 700 2rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ + --bcds-typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ + --bcds-typography-bold-display: 700 3rem/AUTO "BC Sans"; /** Extra-large font size (bolded). Do not use for headings */ + --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; /** Labels and captions (italic) */ + --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; /** Small body text (italic) */ + --bcds-typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; /** Default for body text (italic) */ + --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (italic) */ + --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; /** Alternate (italic) style for Heading 6 */ + --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; /** Alternate (italic) style for Heading 5 */ + --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; /** Alternate (italic) style for Heading 4 */ + --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 3 */ + --bcds-typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; /** Alternate (italic) style for Heading 2 */ + --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 1 */ + --bcds-typography-italic-display: 400 italic 3rem/AUTO "BC Sans"; /** Extra-large font size (italic). Do not use for headings */ --bcds-typography-text-case-none: none; --bcds-typography-text-decoration-none: none; /** System token, used to generate type styles */ --bcds-typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */ - --bcds-typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */ + --bcds-typography-color-primary: #2d2d2d; /** Default colour for all body text and headings */ --bcds-typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */ - --bcds-typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */ - --bcds-typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */ - --bcds-typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */ - --bcds-typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */ - --bcds-typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */ - --bcds-typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */ - --bcds-theme-gold-10: #FEF8E8; /** Gold scale — lightest */ - --bcds-theme-gold-20: #FEF0D8; /** Gold scale */ - --bcds-theme-gold-30: #FDE9C4; /** Gold scale */ - --bcds-theme-gold-40: #FCE2B0; /** Gold scale */ - --bcds-theme-gold-50: #FBDA9D; /** Gold scale */ - --bcds-theme-gold-60: #FBD389; /** Gold scale */ - --bcds-theme-gold-70: #FACC75; /** Gold scale */ - --bcds-theme-gold-80: #F9C462; /** Gold scale */ - --bcds-theme-gold-90: #F8BA47; /** Gold scale */ - --bcds-theme-gold-100: #FCBA19; /** Gold scale — darkest */ - --bcds-theme-blue-10: #F1F8FE; /** Blue scale — lightest */ - --bcds-theme-blue-20: #D8EAFD; /** Blue scale */ - --bcds-theme-blue-30: #C1DDFC; /** Blue scale */ - --bcds-theme-blue-40: #A8D0FB; /** Blue scale */ - --bcds-theme-blue-50: #91C4FA; /** Blue scale */ - --bcds-theme-blue-60: #7AB8F9; /** Blue scale */ - --bcds-theme-blue-70: #5595D9; /** Blue scale */ - --bcds-theme-blue-80: #3470B1; /** Blue scale */ - --bcds-theme-blue-90: #1E5189; /** Blue scale */ + --bcds-typography-color-placeholder: #9f9d9c; /** Use for placeholder text in forms */ + --bcds-typography-color-disabled: #9f9d9c; /** Use only for text in inactive user interface elements */ + --bcds-typography-color-link: #255a90; /** Use for hyperlinks in body text and headings */ + --bcds-typography-color-danger: #ce3e39; /** Use for error, failure or danger message text */ + --bcds-typography-color-primary-invert: #ffffff; /** Default colour for text on dark backgrounds */ + --bcds-typography-color-secondary-invert: #eceae8; /** Secondary colour for text on dark backgrounds */ + --bcds-theme-gold-10: #fef8e8; /** Gold scale — lightest */ + --bcds-theme-gold-20: #fef0d8; /** Gold scale */ + --bcds-theme-gold-30: #fde9c4; /** Gold scale */ + --bcds-theme-gold-40: #fce2b0; /** Gold scale */ + --bcds-theme-gold-50: #fbda9d; /** Gold scale */ + --bcds-theme-gold-60: #fbd389; /** Gold scale */ + --bcds-theme-gold-70: #facc75; /** Gold scale */ + --bcds-theme-gold-80: #f9c462; /** Gold scale */ + --bcds-theme-gold-90: #f8ba47; /** Gold scale */ + --bcds-theme-gold-100: #fcba19; /** Gold scale — darkest */ + --bcds-theme-blue-10: #f1f8fe; /** Blue scale — lightest */ + --bcds-theme-blue-20: #d8eafd; /** Blue scale */ + --bcds-theme-blue-30: #c1ddfc; /** Blue scale */ + --bcds-theme-blue-40: #a8d0fb; /** Blue scale */ + --bcds-theme-blue-50: #91c4fa; /** Blue scale */ + --bcds-theme-blue-60: #7ab8f9; /** Blue scale */ + --bcds-theme-blue-70: #5595d9; /** Blue scale */ + --bcds-theme-blue-80: #3470b1; /** Blue scale */ + --bcds-theme-blue-90: #1e5189; /** Blue scale */ --bcds-theme-blue-100: #013366; /** Blue scale — darkest */ - --bcds-theme-gray-10: #FAF9F8; /** Greyscale — lightest */ - --bcds-theme-gray-20: #F3F2F1; /** Greyscale */ - --bcds-theme-gray-30: #ECEAE8; /** Greyscale */ - --bcds-theme-gray-40: #E0DEDC; /** Greyscale */ - --bcds-theme-gray-50: #D1CFCD; /** Greyscale */ - --bcds-theme-gray-60: #C6C5C3; /** Greyscale */ - --bcds-theme-gray-70: #9F9D9C; /** Greyscale */ - --bcds-theme-gray-80: #605E5C; /** Greyscale */ - --bcds-theme-gray-90: #3D3C3B; /** Greyscale */ + --bcds-theme-gray-10: #faf9f8; /** Greyscale — lightest */ + --bcds-theme-gray-20: #f3f2f1; /** Greyscale */ + --bcds-theme-gray-30: #eceae8; /** Greyscale */ + --bcds-theme-gray-40: #e0dedc; /** Greyscale */ + --bcds-theme-gray-50: #d1cfcd; /** Greyscale */ + --bcds-theme-gray-60: #c6c5c3; /** Greyscale */ + --bcds-theme-gray-70: #9f9d9c; /** Greyscale */ + --bcds-theme-gray-80: #605e5c; /** Greyscale */ + --bcds-theme-gray-90: #3d3c3b; /** Greyscale */ --bcds-theme-gray-100: #353433; /** Greyscale */ --bcds-theme-gray-110: #252423; /** Greyscale — darkest */ - --bcds-theme-gray-white: #FFFFFF; /** White */ + --bcds-theme-gray-white: #ffffff; /** White */ --bcds-theme-primary-blue: #013366; /** Primary Blue (Blue 100) */ - --bcds-theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */ + --bcds-theme-primary-gold: #fcba19; /** Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/dist/css/variables.css b/packages/design-tokens/dist/css/variables.css index a90e295d..99c3316f 100644 --- a/packages/design-tokens/dist/css/variables.css +++ b/packages/design-tokens/dist/css/variables.css @@ -14,69 +14,87 @@ --surface-opacity-80: 0.8; --surface-opacity-90: 0.9; --surface-opacity-100: 1; - --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ - --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ - --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ - --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ + --surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */ + --surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */ + --surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */ + --surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */ --surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */ - --surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */ - --surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */ - --surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */ - --surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */ - --surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */ + --surface-color-primary-button-hover: #1e5189; /** Fill colour used when user hovers over primary button */ + --surface-color-primary-button-disabled: #edebe9; /** Fill colour for inactive primary buttons */ + --surface-color-primary-danger-button-default: #ce3e39; /** Default fill colour for buttons in danger/warning state */ + --surface-color-primary-danger-button-hover: #a2312d; /** Fill colour used when user hovers over danger/warning button */ + --surface-color-primary-danger-button-disabled: #edebe9; /** Default fill colour for disabled danger/warning button */ --surface-color-primary-default: #013366; /** Default theme colour for components and layout */ - --surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */ - --surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */ - --surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */ - --surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */ - --surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */ - --surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */ - --surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */ - --surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */ - --surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */ - --surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */ - --surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */ - --surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */ - --surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */ - --surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */ - --surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */ - --surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */ - --surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */ - --surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */ - --surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */ - --surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */ - --surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */ - --surface-color-background-white: #FFFFFF; /** White background */ - --surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */ - --surface-color-background-light-blue: #F1F8FE; /** Light blue background */ + --surface-color-primary-hover: #1e5189; /** Hover variant of surface.color.primary.default */ + --surface-color-primary-pressed: #01264c; /** Selected/pressed variant of surface.color.primary.default */ + --surface-color-primary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.primary default */ + --surface-color-secondary-button-default: #ffffff; /** Fill colour for secondary buttons */ + --surface-color-secondary-button-hover: #edebe9; /** Fill colour used when user hovers over secondary button */ + --surface-color-secondary-button-disabled: #edebe9; /** Fill colour for inactive secondary buttons */ + --surface-color-secondary-default: #ffffff; /** Light theme colour for components and layout */ + --surface-color-secondary-hover: #edebe9; /** Hover variant of surface.color.secondary.default */ + --surface-color-secondary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.secondary.default */ + --surface-color-secondary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.secondary default */ + --surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 + ); /** Default fill colour for tertiary buttons */ + --surface-color-tertiary-button-hover: #eceae8; /** Fill colour used when user hovers over tertiary button */ + --surface-color-tertiary-button-disabled: #edebe9; /** Fill colour for inactive tertiary buttons */ + --surface-color-tertiary-default: #ffffff00; /** Alternative light theme colour for components and layout */ + --surface-color-tertiary-hover: #eceae8; /** Hover variant of surface.color.tertiary.default */ + --surface-color-tertiary-pressed: #e0dedc; /** Selected/pressed variant of surface.color.tertiary.default */ + --surface-color-tertiary-disabled: #edebe9; /** Disabled/inactive variant of surface.color.tertiary default */ + --surface-color-menus-default: #ffffff; /** Default fill colour for menu items */ + --surface-color-menus-hover: #edebe9; /** Fill colour used when user hovers over a menu item */ + --surface-color-forms-default: #ffffff; /** Default fill colour for form/input fields */ + --surface-color-forms-disabled: #edebe9; /** Fill colour for inactive/disabled form/input fields */ + --surface-color-background-white: #ffffff; /** White background */ + --surface-color-background-light-gray: #faf9f8; /** Default background colour for layout */ + --surface-color-background-light-blue: #f1f8fe; /** Light blue background */ --surface-color-background-dark-blue: #053662; /** Dark blue background */ - --surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */ + --surface-color-border-default: #d8d8d8; /** Lighter border colour for UI elements */ --surface-color-border-medium: #898785; /** Default border colour for UI elements */ --surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */ - --surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */ - --surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */ - --support-surface-color-info: #F7F9FC; - --support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */ - --support-surface-color-success: #F6FFF8; /** Background colour for success messages */ - --support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */ + --surface-color-border-active: #2e5dd7; /** Used as the active stroke colour for UI elements */ + --surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 + ); /** Background overlay colour for images and modal dialogues */ + --support-surface-color-info: #f7f9fc; + --support-surface-color-danger: #f4e1e2; /** Background colour for error, failure or danger messages */ + --support-surface-color-success: #f6fff8; /** Background colour for success messages */ + --support-surface-color-warning: #fef1d8; /** Background colour for warning messages */ --support-border-color-info: #053662; /** Border stroke for general/informational messages */ - --support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */ - --support-border-color-success: #42814A; /** Border stroke for success messages */ - --support-border-color-warning: #F8BB47; /** Border stroke for warning messages */ + --support-border-color-danger: #ce3e39; /** Border stroke for error, failure or danger messages */ + --support-border-color-success: #42814a; /** Border stroke for success messages */ + --support-border-color-warning: #f8bb47; /** Border stroke for warning messages */ --icons-size-xsmall: 14px; /** Smallest icon size */ --icons-size-small: 16px; --icons-size-medium: 20px; /** Default icon size */ --icons-size-large: 24px; --icons-size-xlarge: 32px; /** Largest icon size */ - --icons-color-primary: #2D2D2D; /** Default colour for icons */ + --icons-color-primary: #2d2d2d; /** Default colour for icons */ --icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */ - --icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */ - --icons-color-link: #255A90; /** Use for hyperlinked icons */ + --icons-color-disabled: #9f9d9c; /** Use only for inactive/disabled icons */ + --icons-color-link: #255a90; /** Use for hyperlinked icons */ --icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */ - --icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */ - --icons-color-success: #42814A; /** Emphasis colour for icons in success state */ - --icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */ - --icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */ + --icons-color-danger: #ce3e39; /** Emphasis colour for icons in error, failure or danger state */ + --icons-color-success: #42814a; /** Emphasis colour for icons in success state */ + --icons-color-warning: #f8bb47; /** Emphasis colour for icons in warning state */ + --icons-color-primary-invert: #ffffff; /** Default colour for icons on dark backgrounds */ --layout-border-width-none: 0; --layout-border-width-small: 1px; --layout-border-width-medium: 2px; @@ -103,7 +121,7 @@ --layout-border-radius-medium: 4px; --layout-border-radius-large: 6px; --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */ - --typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */ + --typography-font-families-bc-sans: "BC Sans"; /** BC Sans font. Requires BC Sans package */ --typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */ --typography-line-heights-xxdense: 1.313rem; --typography-line-heights-xdense: 1.688rem; @@ -129,82 +147,82 @@ --typography-font-size-display: 3rem; --typography-letter-spacing-0: 0em; /** System token, used to generate type styles */ --typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */ - --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */ - --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */ - --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */ - --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */ - --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */ - --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */ - --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */ - --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */ - --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */ - --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */ - --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */ - --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */ - --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */ - --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */ - --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */ - --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ - --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ - --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ - --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ - --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ - --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ - --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */ - --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */ - --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */ - --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */ - --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */ - --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */ - --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */ - --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */ - --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */ - --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */ - --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */ - --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */ + --typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; /** Labels and captions */ + --typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; /** Smaller body text */ + --typography-regular-body: 400 1rem/1.688rem "BC Sans"; /** Default body text */ + --typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; /** Larger body text */ + --typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; /** Alternate (unbolded) style for Heading 6 */ + --typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; /** Alternate (unbolded) style for Heading 5 */ + --typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; /** Alternate (unbolded) style for Heading 4 */ + --typography-regular-h3: 400 1.75rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 3 */ + --typography-regular-h2: 400 2rem/3.375rem "BC Sans"; /** Alternate (unbolded) style for Heading 2 */ + --typography-regular-h1: 400 2.25rem/3rem "BC Sans"; /** Alternate (unbolded) style for Heading 1 */ + --typography-regular-display: 400 3rem/AUTO "BC Sans"; /** Extra-large body text size. Do not use for headings */ + --typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; /** Labels and captions (bolded) */ + --typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; /** Default for small body text (bolded) */ + --typography-bold-body: 700 1rem/1.688rem "BC Sans"; /** Default for body text (bolded) */ + --typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (bolded) */ + --typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */ + --typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */ + --typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */ + --typography-bold-h3: 700 1.75rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */ + --typography-bold-h2: 700 2rem/3rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */ + --typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */ + --typography-bold-display: 700 3rem/AUTO "BC Sans"; /** Extra-large font size (bolded). Do not use for headings */ + --typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; /** Labels and captions (italic) */ + --typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; /** Small body text (italic) */ + --typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; /** Default for body text (italic) */ + --typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; /** Larger text size for body text (italic) */ + --typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; /** Alternate (italic) style for Heading 6 */ + --typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; /** Alternate (italic) style for Heading 5 */ + --typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; /** Alternate (italic) style for Heading 4 */ + --typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 3 */ + --typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; /** Alternate (italic) style for Heading 2 */ + --typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; /** Alternate (italic) style for Heading 1 */ + --typography-italic-display: 400 italic 3rem/AUTO "BC Sans"; /** Extra-large font size (italic). Do not use for headings */ --typography-text-case-none: none; --typography-text-decoration-none: none; /** System token, used to generate type styles */ --typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */ - --typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */ + --typography-color-primary: #2d2d2d; /** Default colour for all body text and headings */ --typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */ - --typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */ - --typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */ - --typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */ - --typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */ - --typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */ - --typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */ - --theme-gold-10: #FEF8E8; /** Gold scale — lightest */ - --theme-gold-20: #FEF0D8; /** Gold scale */ - --theme-gold-30: #FDE9C4; /** Gold scale */ - --theme-gold-40: #FCE2B0; /** Gold scale */ - --theme-gold-50: #FBDA9D; /** Gold scale */ - --theme-gold-60: #FBD389; /** Gold scale */ - --theme-gold-70: #FACC75; /** Gold scale */ - --theme-gold-80: #F9C462; /** Gold scale */ - --theme-gold-90: #F8BA47; /** Gold scale */ - --theme-gold-100: #FCBA19; /** Gold scale — darkest */ - --theme-blue-10: #F1F8FE; /** Blue scale — lightest */ - --theme-blue-20: #D8EAFD; /** Blue scale */ - --theme-blue-30: #C1DDFC; /** Blue scale */ - --theme-blue-40: #A8D0FB; /** Blue scale */ - --theme-blue-50: #91C4FA; /** Blue scale */ - --theme-blue-60: #7AB8F9; /** Blue scale */ - --theme-blue-70: #5595D9; /** Blue scale */ - --theme-blue-80: #3470B1; /** Blue scale */ - --theme-blue-90: #1E5189; /** Blue scale */ + --typography-color-placeholder: #9f9d9c; /** Use for placeholder text in forms */ + --typography-color-disabled: #9f9d9c; /** Use only for text in inactive user interface elements */ + --typography-color-link: #255a90; /** Use for hyperlinks in body text and headings */ + --typography-color-danger: #ce3e39; /** Use for error, failure or danger message text */ + --typography-color-primary-invert: #ffffff; /** Default colour for text on dark backgrounds */ + --typography-color-secondary-invert: #eceae8; /** Secondary colour for text on dark backgrounds */ + --theme-gold-10: #fef8e8; /** Gold scale — lightest */ + --theme-gold-20: #fef0d8; /** Gold scale */ + --theme-gold-30: #fde9c4; /** Gold scale */ + --theme-gold-40: #fce2b0; /** Gold scale */ + --theme-gold-50: #fbda9d; /** Gold scale */ + --theme-gold-60: #fbd389; /** Gold scale */ + --theme-gold-70: #facc75; /** Gold scale */ + --theme-gold-80: #f9c462; /** Gold scale */ + --theme-gold-90: #f8ba47; /** Gold scale */ + --theme-gold-100: #fcba19; /** Gold scale — darkest */ + --theme-blue-10: #f1f8fe; /** Blue scale — lightest */ + --theme-blue-20: #d8eafd; /** Blue scale */ + --theme-blue-30: #c1ddfc; /** Blue scale */ + --theme-blue-40: #a8d0fb; /** Blue scale */ + --theme-blue-50: #91c4fa; /** Blue scale */ + --theme-blue-60: #7ab8f9; /** Blue scale */ + --theme-blue-70: #5595d9; /** Blue scale */ + --theme-blue-80: #3470b1; /** Blue scale */ + --theme-blue-90: #1e5189; /** Blue scale */ --theme-blue-100: #013366; /** Blue scale — darkest */ - --theme-gray-10: #FAF9F8; /** Greyscale — lightest */ - --theme-gray-20: #F3F2F1; /** Greyscale */ - --theme-gray-30: #ECEAE8; /** Greyscale */ - --theme-gray-40: #E0DEDC; /** Greyscale */ - --theme-gray-50: #D1CFCD; /** Greyscale */ - --theme-gray-60: #C6C5C3; /** Greyscale */ - --theme-gray-70: #9F9D9C; /** Greyscale */ - --theme-gray-80: #605E5C; /** Greyscale */ - --theme-gray-90: #3D3C3B; /** Greyscale */ + --theme-gray-10: #faf9f8; /** Greyscale — lightest */ + --theme-gray-20: #f3f2f1; /** Greyscale */ + --theme-gray-30: #eceae8; /** Greyscale */ + --theme-gray-40: #e0dedc; /** Greyscale */ + --theme-gray-50: #d1cfcd; /** Greyscale */ + --theme-gray-60: #c6c5c3; /** Greyscale */ + --theme-gray-70: #9f9d9c; /** Greyscale */ + --theme-gray-80: #605e5c; /** Greyscale */ + --theme-gray-90: #3d3c3b; /** Greyscale */ --theme-gray-100: #353433; /** Greyscale */ --theme-gray-110: #252423; /** Greyscale — darkest */ - --theme-gray-white: #FFFFFF; /** White */ + --theme-gray-white: #ffffff; /** White */ --theme-primary-blue: #013366; /** Primary Blue (Blue 100) */ - --theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */ + --theme-primary-gold: #fcba19; /** Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/dist/scss-prefixed/variables.scss b/packages/design-tokens/dist/scss-prefixed/variables.scss index 2e59c3f5..67b5ec6a 100644 --- a/packages/design-tokens/dist/scss-prefixed/variables.scss +++ b/packages/design-tokens/dist/scss-prefixed/variables.scss @@ -1,4 +1,3 @@ - /** * Do not edit directly, this file was auto-generated. */ @@ -14,69 +13,87 @@ $bcds-surface-opacity-70: 0.7; $bcds-surface-opacity-80: 0.8; $bcds-surface-opacity-90: 0.9; $bcds-surface-opacity-100: 1; -$bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements -$bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements -$bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons -$bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly +$bcds-surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements +$bcds-surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements +$bcds-surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons +$bcds-surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly $bcds-surface-color-primary-button-default: #013366; // Default fill colour for primary buttons -$bcds-surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button -$bcds-surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons -$bcds-surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state -$bcds-surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button -$bcds-surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button +$bcds-surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button +$bcds-surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons +$bcds-surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state +$bcds-surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button +$bcds-surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button $bcds-surface-color-primary-default: #013366; // Default theme colour for components and layout -$bcds-surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default -$bcds-surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default -$bcds-surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default -$bcds-surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons -$bcds-surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button -$bcds-surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons -$bcds-surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout -$bcds-surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default -$bcds-surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default -$bcds-surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default -$bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons -$bcds-surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button -$bcds-surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons -$bcds-surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout -$bcds-surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default -$bcds-surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default -$bcds-surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default -$bcds-surface-color-menus-default: #FFFFFF; // Default fill colour for menu items -$bcds-surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item -$bcds-surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields -$bcds-surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields -$bcds-surface-color-background-white: #FFFFFF; // White background -$bcds-surface-color-background-light-gray: #FAF9F8; // Default background colour for layout -$bcds-surface-color-background-light-blue: #F1F8FE; // Light blue background +$bcds-surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default +$bcds-surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default +$bcds-surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default +$bcds-surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons +$bcds-surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button +$bcds-surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons +$bcds-surface-color-secondary-default: #ffffff; // Light theme colour for components and layout +$bcds-surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default +$bcds-surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default +$bcds-surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default +$bcds-surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 +); // Default fill colour for tertiary buttons +$bcds-surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button +$bcds-surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons +$bcds-surface-color-tertiary-default: #ffffff00; // Alternative light theme colour for components and layout +$bcds-surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default +$bcds-surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default +$bcds-surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default +$bcds-surface-color-menus-default: #ffffff; // Default fill colour for menu items +$bcds-surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item +$bcds-surface-color-forms-default: #ffffff; // Default fill colour for form/input fields +$bcds-surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields +$bcds-surface-color-background-white: #ffffff; // White background +$bcds-surface-color-background-light-gray: #faf9f8; // Default background colour for layout +$bcds-surface-color-background-light-blue: #f1f8fe; // Light blue background $bcds-surface-color-background-dark-blue: #053662; // Dark blue background -$bcds-surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements +$bcds-surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements $bcds-surface-color-border-medium: #898785; // Default border colour for UI elements $bcds-surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs -$bcds-surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements -$bcds-surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues -$bcds-support-surface-color-info: #F7F9FC; -$bcds-support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages -$bcds-support-surface-color-success: #F6FFF8; // Background colour for success messages -$bcds-support-surface-color-warning: #FEF1D8; // Background colour for warning messages +$bcds-surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements +$bcds-surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 +); // Background overlay colour for images and modal dialogues +$bcds-support-surface-color-info: #f7f9fc; +$bcds-support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages +$bcds-support-surface-color-success: #f6fff8; // Background colour for success messages +$bcds-support-surface-color-warning: #fef1d8; // Background colour for warning messages $bcds-support-border-color-info: #053662; // Border stroke for general/informational messages -$bcds-support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages -$bcds-support-border-color-success: #42814A; // Border stroke for success messages -$bcds-support-border-color-warning: #F8BB47; // Border stroke for warning messages +$bcds-support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages +$bcds-support-border-color-success: #42814a; // Border stroke for success messages +$bcds-support-border-color-warning: #f8bb47; // Border stroke for warning messages $bcds-icons-size-xsmall: 14; // Smallest icon size $bcds-icons-size-small: 16; $bcds-icons-size-medium: 20; // Default icon size $bcds-icons-size-large: 24; $bcds-icons-size-xlarge: 32; // Largest icon size -$bcds-icons-color-primary: #2D2D2D; // Default colour for icons +$bcds-icons-color-primary: #2d2d2d; // Default colour for icons $bcds-icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons -$bcds-icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons -$bcds-icons-color-link: #255A90; // Use for hyperlinked icons +$bcds-icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons +$bcds-icons-color-link: #255a90; // Use for hyperlinked icons $bcds-icons-color-info: #053662; // Emphasis colour for icons in general/informational state -$bcds-icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state -$bcds-icons-color-success: #42814A; // Emphasis colour for icons in success state -$bcds-icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state -$bcds-icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds +$bcds-icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state +$bcds-icons-color-success: #42814a; // Emphasis colour for icons in success state +$bcds-icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state +$bcds-icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds $bcds-layout-border-width-none: 0; $bcds-layout-border-width-small: 1; $bcds-layout-border-width-medium: 2; @@ -103,7 +120,7 @@ $bcds-layout-border-radius-small: 2; $bcds-layout-border-radius-medium: 4; $bcds-layout-border-radius-large: 6; $bcds-layout-border-radius-circular: 9999; // Used for components with a circular radius -$bcds-typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package +$bcds-typography-font-families-bc-sans: "BC Sans"; // BC Sans font. Requires BC Sans package $bcds-typography-line-heights-xxxdense: 1.125rem; // Smallest line height $bcds-typography-line-heights-xxdense: 1.313rem; $bcds-typography-line-heights-xdense: 1.688rem; @@ -129,380 +146,380 @@ $bcds-typography-font-size-h1: 2.25rem; $bcds-typography-font-size-display: 3rem; $bcds-typography-letter-spacing-0: 0%; // System token, used to generate type styles $bcds-typography-paragraph-spacing-0: 0; // System token, used to generate type styles -$bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions -$bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text -$bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text -$bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text -$bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6 -$bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5 -$bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4 -$bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3 -$bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2 -$bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1 -$bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings -$bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded) -$bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded) -$bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded) -$bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded) -$bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6 -$bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5 -$bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4 -$bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3 -$bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2 -$bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1 -$bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings -$bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic) -$bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic) -$bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic) -$bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic) -$bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6 -$bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5 -$bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4 -$bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3 -$bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2 -$bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1 -$bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings +$bcds-typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; // Labels and captions +$bcds-typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; // Smaller body text +$bcds-typography-regular-body: 400 1rem/1.688rem "BC Sans"; // Default body text +$bcds-typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; // Larger body text +$bcds-typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; // Alternate (unbolded) style for Heading 6 +$bcds-typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; // Alternate (unbolded) style for Heading 5 +$bcds-typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; // Alternate (unbolded) style for Heading 4 +$bcds-typography-regular-h3: 400 1.75rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 3 +$bcds-typography-regular-h2: 400 2rem/3.375rem "BC Sans"; // Alternate (unbolded) style for Heading 2 +$bcds-typography-regular-h1: 400 2.25rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 1 +$bcds-typography-regular-display: 400 3rem / AUTO "BC Sans"; // Extra-large body text size. Do not use for headings +$bcds-typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; // Labels and captions (bolded) +$bcds-typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; // Default for small body text (bolded) +$bcds-typography-bold-body: 700 1rem/1.688rem "BC Sans"; // Default for body text (bolded) +$bcds-typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (bolded) +$bcds-typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +$bcds-typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +$bcds-typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +$bcds-typography-bold-h3: 700 1.75rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +$bcds-typography-bold-h2: 700 2rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +$bcds-typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +$bcds-typography-bold-display: 700 3rem / AUTO "BC Sans"; // Extra-large font size (bolded). Do not use for headings +$bcds-typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; // Labels and captions (italic) +$bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; // Small body text (italic) +$bcds-typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; // Default for body text (italic) +$bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (italic) +$bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; // Alternate (italic) style for Heading 6 +$bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; // Alternate (italic) style for Heading 5 +$bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; // Alternate (italic) style for Heading 4 +$bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 3 +$bcds-typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; // Alternate (italic) style for Heading 2 +$bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 1 +$bcds-typography-italic-display: 400 italic 3rem / AUTO "BC Sans"; // Extra-large font size (italic). Do not use for headings $bcds-typography-text-case-none: none; $bcds-typography-text-decoration-none: none; // System token, used to generate type styles $bcds-typography-paragraph-indent-0: 0px; // System token, used to generate type styles -$bcds-typography-color-primary: #2D2D2D; // Default colour for all body text and headings +$bcds-typography-color-primary: #2d2d2d; // Default colour for all body text and headings $bcds-typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text -$bcds-typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms -$bcds-typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements -$bcds-typography-color-link: #255A90; // Use for hyperlinks in body text and headings -$bcds-typography-color-danger: #CE3E39; // Use for error, failure or danger message text -$bcds-typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds -$bcds-typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds -$bcds-theme-gold-10: #FEF8E8; // Gold scale — lightest -$bcds-theme-gold-20: #FEF0D8; // Gold scale -$bcds-theme-gold-30: #FDE9C4; // Gold scale -$bcds-theme-gold-40: #FCE2B0; // Gold scale -$bcds-theme-gold-50: #FBDA9D; // Gold scale -$bcds-theme-gold-60: #FBD389; // Gold scale -$bcds-theme-gold-70: #FACC75; // Gold scale -$bcds-theme-gold-80: #F9C462; // Gold scale -$bcds-theme-gold-90: #F8BA47; // Gold scale -$bcds-theme-gold-100: #FCBA19; // Gold scale — darkest -$bcds-theme-blue-10: #F1F8FE; // Blue scale — lightest -$bcds-theme-blue-20: #D8EAFD; // Blue scale -$bcds-theme-blue-30: #C1DDFC; // Blue scale -$bcds-theme-blue-40: #A8D0FB; // Blue scale -$bcds-theme-blue-50: #91C4FA; // Blue scale -$bcds-theme-blue-60: #7AB8F9; // Blue scale -$bcds-theme-blue-70: #5595D9; // Blue scale -$bcds-theme-blue-80: #3470B1; // Blue scale -$bcds-theme-blue-90: #1E5189; // Blue scale +$bcds-typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms +$bcds-typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements +$bcds-typography-color-link: #255a90; // Use for hyperlinks in body text and headings +$bcds-typography-color-danger: #ce3e39; // Use for error, failure or danger message text +$bcds-typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds +$bcds-typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds +$bcds-theme-gold-10: #fef8e8; // Gold scale — lightest +$bcds-theme-gold-20: #fef0d8; // Gold scale +$bcds-theme-gold-30: #fde9c4; // Gold scale +$bcds-theme-gold-40: #fce2b0; // Gold scale +$bcds-theme-gold-50: #fbda9d; // Gold scale +$bcds-theme-gold-60: #fbd389; // Gold scale +$bcds-theme-gold-70: #facc75; // Gold scale +$bcds-theme-gold-80: #f9c462; // Gold scale +$bcds-theme-gold-90: #f8ba47; // Gold scale +$bcds-theme-gold-100: #fcba19; // Gold scale — darkest +$bcds-theme-blue-10: #f1f8fe; // Blue scale — lightest +$bcds-theme-blue-20: #d8eafd; // Blue scale +$bcds-theme-blue-30: #c1ddfc; // Blue scale +$bcds-theme-blue-40: #a8d0fb; // Blue scale +$bcds-theme-blue-50: #91c4fa; // Blue scale +$bcds-theme-blue-60: #7ab8f9; // Blue scale +$bcds-theme-blue-70: #5595d9; // Blue scale +$bcds-theme-blue-80: #3470b1; // Blue scale +$bcds-theme-blue-90: #1e5189; // Blue scale $bcds-theme-blue-100: #013366; // Blue scale — darkest -$bcds-theme-gray-10: #FAF9F8; // Greyscale — lightest -$bcds-theme-gray-20: #F3F2F1; // Greyscale -$bcds-theme-gray-30: #ECEAE8; // Greyscale -$bcds-theme-gray-40: #E0DEDC; // Greyscale -$bcds-theme-gray-50: #D1CFCD; // Greyscale -$bcds-theme-gray-60: #C6C5C3; // Greyscale -$bcds-theme-gray-70: #9F9D9C; // Greyscale -$bcds-theme-gray-80: #605E5C; // Greyscale -$bcds-theme-gray-90: #3D3C3B; // Greyscale +$bcds-theme-gray-10: #faf9f8; // Greyscale — lightest +$bcds-theme-gray-20: #f3f2f1; // Greyscale +$bcds-theme-gray-30: #eceae8; // Greyscale +$bcds-theme-gray-40: #e0dedc; // Greyscale +$bcds-theme-gray-50: #d1cfcd; // Greyscale +$bcds-theme-gray-60: #c6c5c3; // Greyscale +$bcds-theme-gray-70: #9f9d9c; // Greyscale +$bcds-theme-gray-80: #605e5c; // Greyscale +$bcds-theme-gray-90: #3d3c3b; // Greyscale $bcds-theme-gray-100: #353433; // Greyscale $bcds-theme-gray-110: #252423; // Greyscale — darkest -$bcds-theme-gray-white: #FFFFFF; // White +$bcds-theme-gray-white: #ffffff; // White $bcds-theme-primary-blue: #013366; // Primary Blue (Blue 100) -$bcds-theme-primary-gold: #FCBA19; // Primary Gold (Gold 100) +$bcds-theme-primary-gold: #fcba19; // Primary Gold (Gold 100) $bcds: ( - 'surface': ( - 'opacity': ( - '0': $bcds-surface-opacity-0, - '10': $bcds-surface-opacity-10, - '20': $bcds-surface-opacity-20, - '30': $bcds-surface-opacity-30, - '40': $bcds-surface-opacity-40, - '50': $bcds-surface-opacity-50, - '60': $bcds-surface-opacity-60, - '70': $bcds-surface-opacity-70, - '80': $bcds-surface-opacity-80, - '90': $bcds-surface-opacity-90, - '100': $bcds-surface-opacity-100 + "surface": ( + "opacity": ( + "0": $bcds-surface-opacity-0, + "10": $bcds-surface-opacity-10, + "20": $bcds-surface-opacity-20, + "30": $bcds-surface-opacity-30, + "40": $bcds-surface-opacity-40, + "50": $bcds-surface-opacity-50, + "60": $bcds-surface-opacity-60, + "70": $bcds-surface-opacity-70, + "80": $bcds-surface-opacity-80, + "90": $bcds-surface-opacity-90, + "100": $bcds-surface-opacity-100, ), - 'shadow': ( - 'none': $bcds-surface-shadow-none, - 'small': $bcds-surface-shadow-small, - 'medium': $bcds-surface-shadow-medium, - 'large': $bcds-surface-shadow-large + "shadow": ( + "none": $bcds-surface-shadow-none, + "small": $bcds-surface-shadow-small, + "medium": $bcds-surface-shadow-medium, + "large": $bcds-surface-shadow-large, ), - 'color': ( - 'primary': ( - 'button': ( - 'default': $bcds-surface-color-primary-button-default, - 'hover': $bcds-surface-color-primary-button-hover, - 'disabled': $bcds-surface-color-primary-button-disabled + "color": ( + "primary": ( + "button": ( + "default": $bcds-surface-color-primary-button-default, + "hover": $bcds-surface-color-primary-button-hover, + "disabled": $bcds-surface-color-primary-button-disabled, ), - 'dangerButton': ( - 'default': $bcds-surface-color-primary-danger-button-default, - 'hover': $bcds-surface-color-primary-danger-button-hover, - 'disabled': $bcds-surface-color-primary-danger-button-disabled + "dangerButton": ( + "default": $bcds-surface-color-primary-danger-button-default, + "hover": $bcds-surface-color-primary-danger-button-hover, + "disabled": $bcds-surface-color-primary-danger-button-disabled, ), - 'default': $bcds-surface-color-primary-default, - 'hover': $bcds-surface-color-primary-hover, - 'pressed': $bcds-surface-color-primary-pressed, - 'disabled': $bcds-surface-color-primary-disabled + "default": $bcds-surface-color-primary-default, + "hover": $bcds-surface-color-primary-hover, + "pressed": $bcds-surface-color-primary-pressed, + "disabled": $bcds-surface-color-primary-disabled, ), - 'secondary': ( - 'button': ( - 'default': $bcds-surface-color-secondary-button-default, - 'hover': $bcds-surface-color-secondary-button-hover, - 'disabled': $bcds-surface-color-secondary-button-disabled + "secondary": ( + "button": ( + "default": $bcds-surface-color-secondary-button-default, + "hover": $bcds-surface-color-secondary-button-hover, + "disabled": $bcds-surface-color-secondary-button-disabled, ), - 'default': $bcds-surface-color-secondary-default, - 'hover': $bcds-surface-color-secondary-hover, - 'pressed': $bcds-surface-color-secondary-pressed, - 'disabled': $bcds-surface-color-secondary-disabled + "default": $bcds-surface-color-secondary-default, + "hover": $bcds-surface-color-secondary-hover, + "pressed": $bcds-surface-color-secondary-pressed, + "disabled": $bcds-surface-color-secondary-disabled, ), - 'tertiary': ( - 'button': ( - 'default': $bcds-surface-color-tertiary-button-default, - 'hover': $bcds-surface-color-tertiary-button-hover, - 'disabled': $bcds-surface-color-tertiary-button-disabled + "tertiary": ( + "button": ( + "default": $bcds-surface-color-tertiary-button-default, + "hover": $bcds-surface-color-tertiary-button-hover, + "disabled": $bcds-surface-color-tertiary-button-disabled, ), - 'default': $bcds-surface-color-tertiary-default, - 'hover': $bcds-surface-color-tertiary-hover, - 'pressed': $bcds-surface-color-tertiary-pressed, - 'disabled': $bcds-surface-color-tertiary-disabled + "default": $bcds-surface-color-tertiary-default, + "hover": $bcds-surface-color-tertiary-hover, + "pressed": $bcds-surface-color-tertiary-pressed, + "disabled": $bcds-surface-color-tertiary-disabled, + ), + "menus": ( + "default": $bcds-surface-color-menus-default, + "hover": $bcds-surface-color-menus-hover, ), - 'menus': ( - 'default': $bcds-surface-color-menus-default, - 'hover': $bcds-surface-color-menus-hover + "forms": ( + "default": $bcds-surface-color-forms-default, + "disabled": $bcds-surface-color-forms-disabled, ), - 'forms': ( - 'default': $bcds-surface-color-forms-default, - 'disabled': $bcds-surface-color-forms-disabled + "background": ( + "white": $bcds-surface-color-background-white, + "lightGray": $bcds-surface-color-background-light-gray, + "lightBlue": $bcds-surface-color-background-light-blue, + "darkBlue": $bcds-surface-color-background-dark-blue, ), - 'background': ( - 'white': $bcds-surface-color-background-white, - 'lightGray': $bcds-surface-color-background-light-gray, - 'lightBlue': $bcds-surface-color-background-light-blue, - 'darkBlue': $bcds-surface-color-background-dark-blue + "border": ( + "default": $bcds-surface-color-border-default, + "medium": $bcds-surface-color-border-medium, + "dark": $bcds-surface-color-border-dark, + "active": $bcds-surface-color-border-active, ), - 'border': ( - 'default': $bcds-surface-color-border-default, - 'medium': $bcds-surface-color-border-medium, - 'dark': $bcds-surface-color-border-dark, - 'active': $bcds-surface-color-border-active + "overlay": ( + "default": $bcds-surface-color-overlay-default, ), - 'overlay': ( - 'default': $bcds-surface-color-overlay-default - ) - ) + ), ), - 'support': ( - 'surfaceColor': ( - 'info': $bcds-support-surface-color-info, - 'danger': $bcds-support-surface-color-danger, - 'success': $bcds-support-surface-color-success, - 'warning': $bcds-support-surface-color-warning + "support": ( + "surfaceColor": ( + "info": $bcds-support-surface-color-info, + "danger": $bcds-support-surface-color-danger, + "success": $bcds-support-surface-color-success, + "warning": $bcds-support-surface-color-warning, + ), + "borderColor": ( + "info": $bcds-support-border-color-info, + "danger": $bcds-support-border-color-danger, + "success": $bcds-support-border-color-success, + "warning": $bcds-support-border-color-warning, ), - 'borderColor': ( - 'info': $bcds-support-border-color-info, - 'danger': $bcds-support-border-color-danger, - 'success': $bcds-support-border-color-success, - 'warning': $bcds-support-border-color-warning - ) ), - 'icons': ( - 'size': ( - 'xsmall': $bcds-icons-size-xsmall, - 'small': $bcds-icons-size-small, - 'medium': $bcds-icons-size-medium, - 'large': $bcds-icons-size-large, - 'xlarge': $bcds-icons-size-xlarge + "icons": ( + "size": ( + "xsmall": $bcds-icons-size-xsmall, + "small": $bcds-icons-size-small, + "medium": $bcds-icons-size-medium, + "large": $bcds-icons-size-large, + "xlarge": $bcds-icons-size-xlarge, + ), + "color": ( + "primary": $bcds-icons-color-primary, + "secondary": $bcds-icons-color-secondary, + "disabled": $bcds-icons-color-disabled, + "link": $bcds-icons-color-link, + "info": $bcds-icons-color-info, + "danger": $bcds-icons-color-danger, + "success": $bcds-icons-color-success, + "warning": $bcds-icons-color-warning, + "primaryInvert": $bcds-icons-color-primary-invert, ), - 'color': ( - 'primary': $bcds-icons-color-primary, - 'secondary': $bcds-icons-color-secondary, - 'disabled': $bcds-icons-color-disabled, - 'link': $bcds-icons-color-link, - 'info': $bcds-icons-color-info, - 'danger': $bcds-icons-color-danger, - 'success': $bcds-icons-color-success, - 'warning': $bcds-icons-color-warning, - 'primaryInvert': $bcds-icons-color-primary-invert - ) ), - 'layout': ( - 'borderWidth': ( - 'none': $bcds-layout-border-width-none, - 'small': $bcds-layout-border-width-small, - 'medium': $bcds-layout-border-width-medium, - 'large': $bcds-layout-border-width-large + "layout": ( + "borderWidth": ( + "none": $bcds-layout-border-width-none, + "small": $bcds-layout-border-width-small, + "medium": $bcds-layout-border-width-medium, + "large": $bcds-layout-border-width-large, ), - 'padding': ( - 'none': $bcds-layout-padding-none, - 'hair': $bcds-layout-padding-hair, - 'xsmall': $bcds-layout-padding-xsmall, - 'small': $bcds-layout-padding-small, - 'medium': $bcds-layout-padding-medium, - 'large': $bcds-layout-padding-large, - 'xlarge': $bcds-layout-padding-xlarge + "padding": ( + "none": $bcds-layout-padding-none, + "hair": $bcds-layout-padding-hair, + "xsmall": $bcds-layout-padding-xsmall, + "small": $bcds-layout-padding-small, + "medium": $bcds-layout-padding-medium, + "large": $bcds-layout-padding-large, + "xlarge": $bcds-layout-padding-xlarge, ), - 'margin': ( - 'none': $bcds-layout-margin-none, - 'hair': $bcds-layout-margin-hair, - 'xsmall': $bcds-layout-margin-xsmall, - 'small': $bcds-layout-margin-small, - 'medium': $bcds-layout-margin-medium, - 'large': $bcds-layout-margin-large, - 'xlarge': $bcds-layout-margin-xlarge, - 'xxlarge': $bcds-layout-margin-xxlarge, - 'xxxlarge': $bcds-layout-margin-xxxlarge, - 'huge': $bcds-layout-margin-huge + "margin": ( + "none": $bcds-layout-margin-none, + "hair": $bcds-layout-margin-hair, + "xsmall": $bcds-layout-margin-xsmall, + "small": $bcds-layout-margin-small, + "medium": $bcds-layout-margin-medium, + "large": $bcds-layout-margin-large, + "xlarge": $bcds-layout-margin-xlarge, + "xxlarge": $bcds-layout-margin-xxlarge, + "xxxlarge": $bcds-layout-margin-xxxlarge, + "huge": $bcds-layout-margin-huge, + ), + "borderRadius": ( + "none": $bcds-layout-border-radius-none, + "small": $bcds-layout-border-radius-small, + "medium": $bcds-layout-border-radius-medium, + "large": $bcds-layout-border-radius-large, + "circular": $bcds-layout-border-radius-circular, ), - 'borderRadius': ( - 'none': $bcds-layout-border-radius-none, - 'small': $bcds-layout-border-radius-small, - 'medium': $bcds-layout-border-radius-medium, - 'large': $bcds-layout-border-radius-large, - 'circular': $bcds-layout-border-radius-circular - ) ), - 'typography': ( - 'fontFamilies': ( - 'bc-sans': $bcds-typography-font-families-bc-sans + "typography": ( + "fontFamilies": ( + "bc-sans": $bcds-typography-font-families-bc-sans, + ), + "lineHeights": ( + "xxxdense": $bcds-typography-line-heights-xxxdense, + "xxdense": $bcds-typography-line-heights-xxdense, + "xdense": $bcds-typography-line-heights-xdense, + "dense": $bcds-typography-line-heights-dense, + "regular": $bcds-typography-line-heights-regular, + "sparse": $bcds-typography-line-heights-sparse, + "xsparse": $bcds-typography-line-heights-xsparse, + "xxsparse": $bcds-typography-line-heights-xxsparse, + "auto": $bcds-typography-line-heights-auto, ), - 'lineHeights': ( - 'xxxdense': $bcds-typography-line-heights-xxxdense, - 'xxdense': $bcds-typography-line-heights-xxdense, - 'xdense': $bcds-typography-line-heights-xdense, - 'dense': $bcds-typography-line-heights-dense, - 'regular': $bcds-typography-line-heights-regular, - 'sparse': $bcds-typography-line-heights-sparse, - 'xsparse': $bcds-typography-line-heights-xsparse, - 'xxsparse': $bcds-typography-line-heights-xxsparse, - 'auto': $bcds-typography-line-heights-auto + "fontWeights": ( + "regular": $bcds-typography-font-weights-regular, + "bold": $bcds-typography-font-weights-bold, + "italic": ( + "weight": $bcds-typography-font-weights-italic-weight, + "style": $bcds-typography-font-weights-italic-style, + ), ), - 'fontWeights': ( - 'regular': $bcds-typography-font-weights-regular, - 'bold': $bcds-typography-font-weights-bold, - 'italic': ( - 'weight': $bcds-typography-font-weights-italic-weight, - 'style': $bcds-typography-font-weights-italic-style - ) + "fontSize": ( + "label": $bcds-typography-font-size-label, + "smallBody": $bcds-typography-font-size-small-body, + "body": $bcds-typography-font-size-body, + "largeBody": $bcds-typography-font-size-large-body, + "H5": $bcds-typography-font-size-h5, + "H4": $bcds-typography-font-size-h4, + "H3": $bcds-typography-font-size-h3, + "H2": $bcds-typography-font-size-h2, + "H1": $bcds-typography-font-size-h1, + "display": $bcds-typography-font-size-display, ), - 'fontSize': ( - 'label': $bcds-typography-font-size-label, - 'smallBody': $bcds-typography-font-size-small-body, - 'body': $bcds-typography-font-size-body, - 'largeBody': $bcds-typography-font-size-large-body, - 'H5': $bcds-typography-font-size-h5, - 'H4': $bcds-typography-font-size-h4, - 'H3': $bcds-typography-font-size-h3, - 'H2': $bcds-typography-font-size-h2, - 'H1': $bcds-typography-font-size-h1, - 'display': $bcds-typography-font-size-display + "letterSpacing": ( + "0": $bcds-typography-letter-spacing-0, ), - 'letterSpacing': ( - '0': $bcds-typography-letter-spacing-0 + "paragraphSpacing": ( + "0": $bcds-typography-paragraph-spacing-0, ), - 'paragraphSpacing': ( - '0': $bcds-typography-paragraph-spacing-0 + "regular": ( + "label": $bcds-typography-regular-label, + "smallBody": $bcds-typography-regular-small-body, + "body": $bcds-typography-regular-body, + "largeBody": $bcds-typography-regular-large-body, + "H6": $bcds-typography-regular-h6, + "H5": $bcds-typography-regular-h5, + "H4": $bcds-typography-regular-h4, + "H3": $bcds-typography-regular-h3, + "H2": $bcds-typography-regular-h2, + "H1": $bcds-typography-regular-h1, + "display": $bcds-typography-regular-display, ), - 'regular': ( - 'label': $bcds-typography-regular-label, - 'smallBody': $bcds-typography-regular-small-body, - 'body': $bcds-typography-regular-body, - 'largeBody': $bcds-typography-regular-large-body, - 'H6': $bcds-typography-regular-h6, - 'H5': $bcds-typography-regular-h5, - 'H4': $bcds-typography-regular-h4, - 'H3': $bcds-typography-regular-h3, - 'H2': $bcds-typography-regular-h2, - 'H1': $bcds-typography-regular-h1, - 'display': $bcds-typography-regular-display + "bold": ( + "label": $bcds-typography-bold-label, + "smallBody": $bcds-typography-bold-small-body, + "body": $bcds-typography-bold-body, + "largeBody": $bcds-typography-bold-large-body, + "H6": $bcds-typography-bold-h6, + "H5": $bcds-typography-bold-h5, + "H4": $bcds-typography-bold-h4, + "H3": $bcds-typography-bold-h3, + "H2": $bcds-typography-bold-h2, + "H1": $bcds-typography-bold-h1, + "display": $bcds-typography-bold-display, ), - 'bold': ( - 'label': $bcds-typography-bold-label, - 'smallBody': $bcds-typography-bold-small-body, - 'body': $bcds-typography-bold-body, - 'largeBody': $bcds-typography-bold-large-body, - 'H6': $bcds-typography-bold-h6, - 'H5': $bcds-typography-bold-h5, - 'H4': $bcds-typography-bold-h4, - 'H3': $bcds-typography-bold-h3, - 'H2': $bcds-typography-bold-h2, - 'H1': $bcds-typography-bold-h1, - 'display': $bcds-typography-bold-display + "italic": ( + "label": $bcds-typography-italic-label, + "smallBody": $bcds-typography-italic-small-body, + "body": $bcds-typography-italic-body, + "largeBody": $bcds-typography-italic-large-body, + "H6": $bcds-typography-italic-h6, + "H5": $bcds-typography-italic-h5, + "H4": $bcds-typography-italic-h4, + "H3": $bcds-typography-italic-h3, + "H2": $bcds-typography-italic-h2, + "H1": $bcds-typography-italic-h1, + "display": $bcds-typography-italic-display, ), - 'italic': ( - 'label': $bcds-typography-italic-label, - 'smallBody': $bcds-typography-italic-small-body, - 'body': $bcds-typography-italic-body, - 'largeBody': $bcds-typography-italic-large-body, - 'H6': $bcds-typography-italic-h6, - 'H5': $bcds-typography-italic-h5, - 'H4': $bcds-typography-italic-h4, - 'H3': $bcds-typography-italic-h3, - 'H2': $bcds-typography-italic-h2, - 'H1': $bcds-typography-italic-h1, - 'display': $bcds-typography-italic-display + "textCase": ( + "none": $bcds-typography-text-case-none, ), - 'textCase': ( - 'none': $bcds-typography-text-case-none + "textDecoration": ( + "none": $bcds-typography-text-decoration-none, ), - 'textDecoration': ( - 'none': $bcds-typography-text-decoration-none + "paragraphIndent": ( + "0": $bcds-typography-paragraph-indent-0, ), - 'paragraphIndent': ( - '0': $bcds-typography-paragraph-indent-0 + "color": ( + "primary": $bcds-typography-color-primary, + "secondary": $bcds-typography-color-secondary, + "placeholder": $bcds-typography-color-placeholder, + "disabled": $bcds-typography-color-disabled, + "link": $bcds-typography-color-link, + "danger": $bcds-typography-color-danger, + "primaryInvert": $bcds-typography-color-primary-invert, + "secondaryInvert": $bcds-typography-color-secondary-invert, ), - 'color': ( - 'primary': $bcds-typography-color-primary, - 'secondary': $bcds-typography-color-secondary, - 'placeholder': $bcds-typography-color-placeholder, - 'disabled': $bcds-typography-color-disabled, - 'link': $bcds-typography-color-link, - 'danger': $bcds-typography-color-danger, - 'primaryInvert': $bcds-typography-color-primary-invert, - 'secondaryInvert': $bcds-typography-color-secondary-invert - ) ), - 'theme': ( - 'gold': ( - '10': $bcds-theme-gold-10, - '20': $bcds-theme-gold-20, - '30': $bcds-theme-gold-30, - '40': $bcds-theme-gold-40, - '50': $bcds-theme-gold-50, - '60': $bcds-theme-gold-60, - '70': $bcds-theme-gold-70, - '80': $bcds-theme-gold-80, - '90': $bcds-theme-gold-90, - '100': $bcds-theme-gold-100 + "theme": ( + "gold": ( + "10": $bcds-theme-gold-10, + "20": $bcds-theme-gold-20, + "30": $bcds-theme-gold-30, + "40": $bcds-theme-gold-40, + "50": $bcds-theme-gold-50, + "60": $bcds-theme-gold-60, + "70": $bcds-theme-gold-70, + "80": $bcds-theme-gold-80, + "90": $bcds-theme-gold-90, + "100": $bcds-theme-gold-100, ), - 'blue': ( - '10': $bcds-theme-blue-10, - '20': $bcds-theme-blue-20, - '30': $bcds-theme-blue-30, - '40': $bcds-theme-blue-40, - '50': $bcds-theme-blue-50, - '60': $bcds-theme-blue-60, - '70': $bcds-theme-blue-70, - '80': $bcds-theme-blue-80, - '90': $bcds-theme-blue-90, - '100': $bcds-theme-blue-100 + "blue": ( + "10": $bcds-theme-blue-10, + "20": $bcds-theme-blue-20, + "30": $bcds-theme-blue-30, + "40": $bcds-theme-blue-40, + "50": $bcds-theme-blue-50, + "60": $bcds-theme-blue-60, + "70": $bcds-theme-blue-70, + "80": $bcds-theme-blue-80, + "90": $bcds-theme-blue-90, + "100": $bcds-theme-blue-100, ), - 'gray': ( - '10': $bcds-theme-gray-10, - '20': $bcds-theme-gray-20, - '30': $bcds-theme-gray-30, - '40': $bcds-theme-gray-40, - '50': $bcds-theme-gray-50, - '60': $bcds-theme-gray-60, - '70': $bcds-theme-gray-70, - '80': $bcds-theme-gray-80, - '90': $bcds-theme-gray-90, - '100': $bcds-theme-gray-100, - '110': $bcds-theme-gray-110, - 'white': $bcds-theme-gray-white + "gray": ( + "10": $bcds-theme-gray-10, + "20": $bcds-theme-gray-20, + "30": $bcds-theme-gray-30, + "40": $bcds-theme-gray-40, + "50": $bcds-theme-gray-50, + "60": $bcds-theme-gray-60, + "70": $bcds-theme-gray-70, + "80": $bcds-theme-gray-80, + "90": $bcds-theme-gray-90, + "100": $bcds-theme-gray-100, + "110": $bcds-theme-gray-110, + "white": $bcds-theme-gray-white, ), - 'primaryBlue': $bcds-theme-primary-blue, - 'primaryGold': $bcds-theme-primary-gold - ) + "primaryBlue": $bcds-theme-primary-blue, + "primaryGold": $bcds-theme-primary-gold, + ), ); diff --git a/packages/design-tokens/dist/scss/variables.scss b/packages/design-tokens/dist/scss/variables.scss index 8ba0931a..5cd441d0 100644 --- a/packages/design-tokens/dist/scss/variables.scss +++ b/packages/design-tokens/dist/scss/variables.scss @@ -1,4 +1,3 @@ - /** * Do not edit directly, this file was auto-generated. */ @@ -14,69 +13,87 @@ $surface-opacity-70: 0.7; $surface-opacity-80: 0.8; $surface-opacity-90: 0.9; $surface-opacity-100: 1; -$surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements -$surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements -$surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons -$surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly +$surface-shadow-none: + 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, + 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements +$surface-shadow-small: + 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, + 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements +$surface-shadow-medium: + 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, + 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons +$surface-shadow-large: + 0 4.800000190734863px 14.399999618530273px 0 #0000002e, + 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly $surface-color-primary-button-default: #013366; // Default fill colour for primary buttons -$surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button -$surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons -$surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state -$surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button -$surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button +$surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button +$surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons +$surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state +$surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button +$surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button $surface-color-primary-default: #013366; // Default theme colour for components and layout -$surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default -$surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default -$surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default -$surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons -$surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button -$surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons -$surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout -$surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default -$surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default -$surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default -$surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons -$surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button -$surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons -$surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout -$surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default -$surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default -$surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default -$surface-color-menus-default: #FFFFFF; // Default fill colour for menu items -$surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item -$surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields -$surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields -$surface-color-background-white: #FFFFFF; // White background -$surface-color-background-light-gray: #FAF9F8; // Default background colour for layout -$surface-color-background-light-blue: #F1F8FE; // Light blue background +$surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default +$surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default +$surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default +$surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons +$surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button +$surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons +$surface-color-secondary-default: #ffffff; // Light theme colour for components and layout +$surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default +$surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default +$surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default +$surface-color-tertiary-button-default: rgba( + 255, + 255, + 255, + 0 +); // Default fill colour for tertiary buttons +$surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button +$surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons +$surface-color-tertiary-default: #ffffff00; // Alternative light theme colour for components and layout +$surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default +$surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default +$surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default +$surface-color-menus-default: #ffffff; // Default fill colour for menu items +$surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item +$surface-color-forms-default: #ffffff; // Default fill colour for form/input fields +$surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields +$surface-color-background-white: #ffffff; // White background +$surface-color-background-light-gray: #faf9f8; // Default background colour for layout +$surface-color-background-light-blue: #f1f8fe; // Light blue background $surface-color-background-dark-blue: #053662; // Dark blue background -$surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements +$surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements $surface-color-border-medium: #898785; // Default border colour for UI elements $surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs -$surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements -$surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues -$support-surface-color-info: #F7F9FC; -$support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages -$support-surface-color-success: #F6FFF8; // Background colour for success messages -$support-surface-color-warning: #FEF1D8; // Background colour for warning messages +$surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements +$surface-color-overlay-default: rgba( + 0, + 0, + 0, + 0.45 +); // Background overlay colour for images and modal dialogues +$support-surface-color-info: #f7f9fc; +$support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages +$support-surface-color-success: #f6fff8; // Background colour for success messages +$support-surface-color-warning: #fef1d8; // Background colour for warning messages $support-border-color-info: #053662; // Border stroke for general/informational messages -$support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages -$support-border-color-success: #42814A; // Border stroke for success messages -$support-border-color-warning: #F8BB47; // Border stroke for warning messages +$support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages +$support-border-color-success: #42814a; // Border stroke for success messages +$support-border-color-warning: #f8bb47; // Border stroke for warning messages $icons-size-xsmall: 14; // Smallest icon size $icons-size-small: 16; $icons-size-medium: 20; // Default icon size $icons-size-large: 24; $icons-size-xlarge: 32; // Largest icon size -$icons-color-primary: #2D2D2D; // Default colour for icons +$icons-color-primary: #2d2d2d; // Default colour for icons $icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons -$icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons -$icons-color-link: #255A90; // Use for hyperlinked icons +$icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons +$icons-color-link: #255a90; // Use for hyperlinked icons $icons-color-info: #053662; // Emphasis colour for icons in general/informational state -$icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state -$icons-color-success: #42814A; // Emphasis colour for icons in success state -$icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state -$icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds +$icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state +$icons-color-success: #42814a; // Emphasis colour for icons in success state +$icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state +$icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds $layout-border-width-none: 0; $layout-border-width-small: 1; $layout-border-width-medium: 2; @@ -103,7 +120,7 @@ $layout-border-radius-small: 2; $layout-border-radius-medium: 4; $layout-border-radius-large: 6; $layout-border-radius-circular: 9999; // Used for components with a circular radius -$typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package +$typography-font-families-bc-sans: "BC Sans"; // BC Sans font. Requires BC Sans package $typography-line-heights-xxxdense: 1.125rem; // Smallest line height $typography-line-heights-xxdense: 1.313rem; $typography-line-heights-xdense: 1.688rem; @@ -129,380 +146,380 @@ $typography-font-size-h1: 2.25rem; $typography-font-size-display: 3rem; $typography-letter-spacing-0: 0%; // System token, used to generate type styles $typography-paragraph-spacing-0: 0; // System token, used to generate type styles -$typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions -$typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text -$typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text -$typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text -$typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6 -$typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5 -$typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4 -$typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3 -$typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2 -$typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1 -$typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings -$typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded) -$typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded) -$typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded) -$typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded) -$typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6 -$typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5 -$typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4 -$typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3 -$typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2 -$typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1 -$typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings -$typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic) -$typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic) -$typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic) -$typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic) -$typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6 -$typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5 -$typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4 -$typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3 -$typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2 -$typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1 -$typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings +$typography-regular-label: 400 0.75rem/1.125rem "BC Sans"; // Labels and captions +$typography-regular-small-body: 400 0.875rem/1.313rem "BC Sans"; // Smaller body text +$typography-regular-body: 400 1rem/1.688rem "BC Sans"; // Default body text +$typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans"; // Larger body text +$typography-regular-h6: 400 1.125rem/1.913rem "BC Sans"; // Alternate (unbolded) style for Heading 6 +$typography-regular-h5: 400 1.25rem/2.125rem "BC Sans"; // Alternate (unbolded) style for Heading 5 +$typography-regular-h4: 400 1.5rem/2.25rem "BC Sans"; // Alternate (unbolded) style for Heading 4 +$typography-regular-h3: 400 1.75rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 3 +$typography-regular-h2: 400 2rem/3.375rem "BC Sans"; // Alternate (unbolded) style for Heading 2 +$typography-regular-h1: 400 2.25rem/3rem "BC Sans"; // Alternate (unbolded) style for Heading 1 +$typography-regular-display: 400 3rem / AUTO "BC Sans"; // Extra-large body text size. Do not use for headings +$typography-bold-label: 700 0.75rem/1.125rem "BC Sans"; // Labels and captions (bolded) +$typography-bold-small-body: 700 0.875rem/1.313rem "BC Sans"; // Default for small body text (bolded) +$typography-bold-body: 700 1rem/1.688rem "BC Sans"; // Default for body text (bolded) +$typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (bolded) +$typography-bold-h6: 700 1.125rem/1.913rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +$typography-bold-h5: 700 1.25rem/2.125rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +$typography-bold-h4: 700 1.5rem/2.25rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +$typography-bold-h3: 700 1.75rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +$typography-bold-h2: 700 2rem/3rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +$typography-bold-h1: 700 2.25rem/3.375rem "BC Sans"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +$typography-bold-display: 700 3rem / AUTO "BC Sans"; // Extra-large font size (bolded). Do not use for headings +$typography-italic-label: 400 italic 0.75rem/1.125rem "BC Sans"; // Labels and captions (italic) +$typography-italic-small-body: 400 italic 0.875rem/1.313rem "BC Sans"; // Small body text (italic) +$typography-italic-body: 400 italic 1rem/1.688rem "BC Sans"; // Default for body text (italic) +$typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans"; // Larger text size for body text (italic) +$typography-italic-h6: 400 italic 1.125rem/1.913rem "BC Sans"; // Alternate (italic) style for Heading 6 +$typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans"; // Alternate (italic) style for Heading 5 +$typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans"; // Alternate (italic) style for Heading 4 +$typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 3 +$typography-italic-h2: 400 italic 2rem/3rem "BC Sans"; // Alternate (italic) style for Heading 2 +$typography-italic-h1: 400 italic 2.25rem/3.375rem "BC Sans"; // Alternate (italic) style for Heading 1 +$typography-italic-display: 400 italic 3rem / AUTO "BC Sans"; // Extra-large font size (italic). Do not use for headings $typography-text-case-none: none; $typography-text-decoration-none: none; // System token, used to generate type styles $typography-paragraph-indent-0: 0px; // System token, used to generate type styles -$typography-color-primary: #2D2D2D; // Default colour for all body text and headings +$typography-color-primary: #2d2d2d; // Default colour for all body text and headings $typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text -$typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms -$typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements -$typography-color-link: #255A90; // Use for hyperlinks in body text and headings -$typography-color-danger: #CE3E39; // Use for error, failure or danger message text -$typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds -$typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds -$theme-gold-10: #FEF8E8; // Gold scale — lightest -$theme-gold-20: #FEF0D8; // Gold scale -$theme-gold-30: #FDE9C4; // Gold scale -$theme-gold-40: #FCE2B0; // Gold scale -$theme-gold-50: #FBDA9D; // Gold scale -$theme-gold-60: #FBD389; // Gold scale -$theme-gold-70: #FACC75; // Gold scale -$theme-gold-80: #F9C462; // Gold scale -$theme-gold-90: #F8BA47; // Gold scale -$theme-gold-100: #FCBA19; // Gold scale — darkest -$theme-blue-10: #F1F8FE; // Blue scale — lightest -$theme-blue-20: #D8EAFD; // Blue scale -$theme-blue-30: #C1DDFC; // Blue scale -$theme-blue-40: #A8D0FB; // Blue scale -$theme-blue-50: #91C4FA; // Blue scale -$theme-blue-60: #7AB8F9; // Blue scale -$theme-blue-70: #5595D9; // Blue scale -$theme-blue-80: #3470B1; // Blue scale -$theme-blue-90: #1E5189; // Blue scale +$typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms +$typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements +$typography-color-link: #255a90; // Use for hyperlinks in body text and headings +$typography-color-danger: #ce3e39; // Use for error, failure or danger message text +$typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds +$typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds +$theme-gold-10: #fef8e8; // Gold scale — lightest +$theme-gold-20: #fef0d8; // Gold scale +$theme-gold-30: #fde9c4; // Gold scale +$theme-gold-40: #fce2b0; // Gold scale +$theme-gold-50: #fbda9d; // Gold scale +$theme-gold-60: #fbd389; // Gold scale +$theme-gold-70: #facc75; // Gold scale +$theme-gold-80: #f9c462; // Gold scale +$theme-gold-90: #f8ba47; // Gold scale +$theme-gold-100: #fcba19; // Gold scale — darkest +$theme-blue-10: #f1f8fe; // Blue scale — lightest +$theme-blue-20: #d8eafd; // Blue scale +$theme-blue-30: #c1ddfc; // Blue scale +$theme-blue-40: #a8d0fb; // Blue scale +$theme-blue-50: #91c4fa; // Blue scale +$theme-blue-60: #7ab8f9; // Blue scale +$theme-blue-70: #5595d9; // Blue scale +$theme-blue-80: #3470b1; // Blue scale +$theme-blue-90: #1e5189; // Blue scale $theme-blue-100: #013366; // Blue scale — darkest -$theme-gray-10: #FAF9F8; // Greyscale — lightest -$theme-gray-20: #F3F2F1; // Greyscale -$theme-gray-30: #ECEAE8; // Greyscale -$theme-gray-40: #E0DEDC; // Greyscale -$theme-gray-50: #D1CFCD; // Greyscale -$theme-gray-60: #C6C5C3; // Greyscale -$theme-gray-70: #9F9D9C; // Greyscale -$theme-gray-80: #605E5C; // Greyscale -$theme-gray-90: #3D3C3B; // Greyscale +$theme-gray-10: #faf9f8; // Greyscale — lightest +$theme-gray-20: #f3f2f1; // Greyscale +$theme-gray-30: #eceae8; // Greyscale +$theme-gray-40: #e0dedc; // Greyscale +$theme-gray-50: #d1cfcd; // Greyscale +$theme-gray-60: #c6c5c3; // Greyscale +$theme-gray-70: #9f9d9c; // Greyscale +$theme-gray-80: #605e5c; // Greyscale +$theme-gray-90: #3d3c3b; // Greyscale $theme-gray-100: #353433; // Greyscale $theme-gray-110: #252423; // Greyscale — darkest -$theme-gray-white: #FFFFFF; // White +$theme-gray-white: #ffffff; // White $theme-primary-blue: #013366; // Primary Blue (Blue 100) -$theme-primary-gold: #FCBA19; // Primary Gold (Gold 100) +$theme-primary-gold: #fcba19; // Primary Gold (Gold 100) $bcds: ( - 'surface': ( - 'opacity': ( - '0': $surface-opacity-0, - '10': $surface-opacity-10, - '20': $surface-opacity-20, - '30': $surface-opacity-30, - '40': $surface-opacity-40, - '50': $surface-opacity-50, - '60': $surface-opacity-60, - '70': $surface-opacity-70, - '80': $surface-opacity-80, - '90': $surface-opacity-90, - '100': $surface-opacity-100 + "surface": ( + "opacity": ( + "0": $surface-opacity-0, + "10": $surface-opacity-10, + "20": $surface-opacity-20, + "30": $surface-opacity-30, + "40": $surface-opacity-40, + "50": $surface-opacity-50, + "60": $surface-opacity-60, + "70": $surface-opacity-70, + "80": $surface-opacity-80, + "90": $surface-opacity-90, + "100": $surface-opacity-100, ), - 'shadow': ( - 'none': $surface-shadow-none, - 'small': $surface-shadow-small, - 'medium': $surface-shadow-medium, - 'large': $surface-shadow-large + "shadow": ( + "none": $surface-shadow-none, + "small": $surface-shadow-small, + "medium": $surface-shadow-medium, + "large": $surface-shadow-large, ), - 'color': ( - 'primary': ( - 'button': ( - 'default': $surface-color-primary-button-default, - 'hover': $surface-color-primary-button-hover, - 'disabled': $surface-color-primary-button-disabled + "color": ( + "primary": ( + "button": ( + "default": $surface-color-primary-button-default, + "hover": $surface-color-primary-button-hover, + "disabled": $surface-color-primary-button-disabled, ), - 'dangerButton': ( - 'default': $surface-color-primary-danger-button-default, - 'hover': $surface-color-primary-danger-button-hover, - 'disabled': $surface-color-primary-danger-button-disabled + "dangerButton": ( + "default": $surface-color-primary-danger-button-default, + "hover": $surface-color-primary-danger-button-hover, + "disabled": $surface-color-primary-danger-button-disabled, ), - 'default': $surface-color-primary-default, - 'hover': $surface-color-primary-hover, - 'pressed': $surface-color-primary-pressed, - 'disabled': $surface-color-primary-disabled + "default": $surface-color-primary-default, + "hover": $surface-color-primary-hover, + "pressed": $surface-color-primary-pressed, + "disabled": $surface-color-primary-disabled, ), - 'secondary': ( - 'button': ( - 'default': $surface-color-secondary-button-default, - 'hover': $surface-color-secondary-button-hover, - 'disabled': $surface-color-secondary-button-disabled + "secondary": ( + "button": ( + "default": $surface-color-secondary-button-default, + "hover": $surface-color-secondary-button-hover, + "disabled": $surface-color-secondary-button-disabled, ), - 'default': $surface-color-secondary-default, - 'hover': $surface-color-secondary-hover, - 'pressed': $surface-color-secondary-pressed, - 'disabled': $surface-color-secondary-disabled + "default": $surface-color-secondary-default, + "hover": $surface-color-secondary-hover, + "pressed": $surface-color-secondary-pressed, + "disabled": $surface-color-secondary-disabled, ), - 'tertiary': ( - 'button': ( - 'default': $surface-color-tertiary-button-default, - 'hover': $surface-color-tertiary-button-hover, - 'disabled': $surface-color-tertiary-button-disabled + "tertiary": ( + "button": ( + "default": $surface-color-tertiary-button-default, + "hover": $surface-color-tertiary-button-hover, + "disabled": $surface-color-tertiary-button-disabled, ), - 'default': $surface-color-tertiary-default, - 'hover': $surface-color-tertiary-hover, - 'pressed': $surface-color-tertiary-pressed, - 'disabled': $surface-color-tertiary-disabled + "default": $surface-color-tertiary-default, + "hover": $surface-color-tertiary-hover, + "pressed": $surface-color-tertiary-pressed, + "disabled": $surface-color-tertiary-disabled, + ), + "menus": ( + "default": $surface-color-menus-default, + "hover": $surface-color-menus-hover, ), - 'menus': ( - 'default': $surface-color-menus-default, - 'hover': $surface-color-menus-hover + "forms": ( + "default": $surface-color-forms-default, + "disabled": $surface-color-forms-disabled, ), - 'forms': ( - 'default': $surface-color-forms-default, - 'disabled': $surface-color-forms-disabled + "background": ( + "white": $surface-color-background-white, + "lightGray": $surface-color-background-light-gray, + "lightBlue": $surface-color-background-light-blue, + "darkBlue": $surface-color-background-dark-blue, ), - 'background': ( - 'white': $surface-color-background-white, - 'lightGray': $surface-color-background-light-gray, - 'lightBlue': $surface-color-background-light-blue, - 'darkBlue': $surface-color-background-dark-blue + "border": ( + "default": $surface-color-border-default, + "medium": $surface-color-border-medium, + "dark": $surface-color-border-dark, + "active": $surface-color-border-active, ), - 'border': ( - 'default': $surface-color-border-default, - 'medium': $surface-color-border-medium, - 'dark': $surface-color-border-dark, - 'active': $surface-color-border-active + "overlay": ( + "default": $surface-color-overlay-default, ), - 'overlay': ( - 'default': $surface-color-overlay-default - ) - ) + ), ), - 'support': ( - 'surfaceColor': ( - 'info': $support-surface-color-info, - 'danger': $support-surface-color-danger, - 'success': $support-surface-color-success, - 'warning': $support-surface-color-warning + "support": ( + "surfaceColor": ( + "info": $support-surface-color-info, + "danger": $support-surface-color-danger, + "success": $support-surface-color-success, + "warning": $support-surface-color-warning, + ), + "borderColor": ( + "info": $support-border-color-info, + "danger": $support-border-color-danger, + "success": $support-border-color-success, + "warning": $support-border-color-warning, ), - 'borderColor': ( - 'info': $support-border-color-info, - 'danger': $support-border-color-danger, - 'success': $support-border-color-success, - 'warning': $support-border-color-warning - ) ), - 'icons': ( - 'size': ( - 'xsmall': $icons-size-xsmall, - 'small': $icons-size-small, - 'medium': $icons-size-medium, - 'large': $icons-size-large, - 'xlarge': $icons-size-xlarge + "icons": ( + "size": ( + "xsmall": $icons-size-xsmall, + "small": $icons-size-small, + "medium": $icons-size-medium, + "large": $icons-size-large, + "xlarge": $icons-size-xlarge, + ), + "color": ( + "primary": $icons-color-primary, + "secondary": $icons-color-secondary, + "disabled": $icons-color-disabled, + "link": $icons-color-link, + "info": $icons-color-info, + "danger": $icons-color-danger, + "success": $icons-color-success, + "warning": $icons-color-warning, + "primaryInvert": $icons-color-primary-invert, ), - 'color': ( - 'primary': $icons-color-primary, - 'secondary': $icons-color-secondary, - 'disabled': $icons-color-disabled, - 'link': $icons-color-link, - 'info': $icons-color-info, - 'danger': $icons-color-danger, - 'success': $icons-color-success, - 'warning': $icons-color-warning, - 'primaryInvert': $icons-color-primary-invert - ) ), - 'layout': ( - 'borderWidth': ( - 'none': $layout-border-width-none, - 'small': $layout-border-width-small, - 'medium': $layout-border-width-medium, - 'large': $layout-border-width-large + "layout": ( + "borderWidth": ( + "none": $layout-border-width-none, + "small": $layout-border-width-small, + "medium": $layout-border-width-medium, + "large": $layout-border-width-large, ), - 'padding': ( - 'none': $layout-padding-none, - 'hair': $layout-padding-hair, - 'xsmall': $layout-padding-xsmall, - 'small': $layout-padding-small, - 'medium': $layout-padding-medium, - 'large': $layout-padding-large, - 'xlarge': $layout-padding-xlarge + "padding": ( + "none": $layout-padding-none, + "hair": $layout-padding-hair, + "xsmall": $layout-padding-xsmall, + "small": $layout-padding-small, + "medium": $layout-padding-medium, + "large": $layout-padding-large, + "xlarge": $layout-padding-xlarge, ), - 'margin': ( - 'none': $layout-margin-none, - 'hair': $layout-margin-hair, - 'xsmall': $layout-margin-xsmall, - 'small': $layout-margin-small, - 'medium': $layout-margin-medium, - 'large': $layout-margin-large, - 'xlarge': $layout-margin-xlarge, - 'xxlarge': $layout-margin-xxlarge, - 'xxxlarge': $layout-margin-xxxlarge, - 'huge': $layout-margin-huge + "margin": ( + "none": $layout-margin-none, + "hair": $layout-margin-hair, + "xsmall": $layout-margin-xsmall, + "small": $layout-margin-small, + "medium": $layout-margin-medium, + "large": $layout-margin-large, + "xlarge": $layout-margin-xlarge, + "xxlarge": $layout-margin-xxlarge, + "xxxlarge": $layout-margin-xxxlarge, + "huge": $layout-margin-huge, + ), + "borderRadius": ( + "none": $layout-border-radius-none, + "small": $layout-border-radius-small, + "medium": $layout-border-radius-medium, + "large": $layout-border-radius-large, + "circular": $layout-border-radius-circular, ), - 'borderRadius': ( - 'none': $layout-border-radius-none, - 'small': $layout-border-radius-small, - 'medium': $layout-border-radius-medium, - 'large': $layout-border-radius-large, - 'circular': $layout-border-radius-circular - ) ), - 'typography': ( - 'fontFamilies': ( - 'bc-sans': $typography-font-families-bc-sans + "typography": ( + "fontFamilies": ( + "bc-sans": $typography-font-families-bc-sans, + ), + "lineHeights": ( + "xxxdense": $typography-line-heights-xxxdense, + "xxdense": $typography-line-heights-xxdense, + "xdense": $typography-line-heights-xdense, + "dense": $typography-line-heights-dense, + "regular": $typography-line-heights-regular, + "sparse": $typography-line-heights-sparse, + "xsparse": $typography-line-heights-xsparse, + "xxsparse": $typography-line-heights-xxsparse, + "auto": $typography-line-heights-auto, ), - 'lineHeights': ( - 'xxxdense': $typography-line-heights-xxxdense, - 'xxdense': $typography-line-heights-xxdense, - 'xdense': $typography-line-heights-xdense, - 'dense': $typography-line-heights-dense, - 'regular': $typography-line-heights-regular, - 'sparse': $typography-line-heights-sparse, - 'xsparse': $typography-line-heights-xsparse, - 'xxsparse': $typography-line-heights-xxsparse, - 'auto': $typography-line-heights-auto + "fontWeights": ( + "regular": $typography-font-weights-regular, + "bold": $typography-font-weights-bold, + "italic": ( + "weight": $typography-font-weights-italic-weight, + "style": $typography-font-weights-italic-style, + ), ), - 'fontWeights': ( - 'regular': $typography-font-weights-regular, - 'bold': $typography-font-weights-bold, - 'italic': ( - 'weight': $typography-font-weights-italic-weight, - 'style': $typography-font-weights-italic-style - ) + "fontSize": ( + "label": $typography-font-size-label, + "smallBody": $typography-font-size-small-body, + "body": $typography-font-size-body, + "largeBody": $typography-font-size-large-body, + "H5": $typography-font-size-h5, + "H4": $typography-font-size-h4, + "H3": $typography-font-size-h3, + "H2": $typography-font-size-h2, + "H1": $typography-font-size-h1, + "display": $typography-font-size-display, ), - 'fontSize': ( - 'label': $typography-font-size-label, - 'smallBody': $typography-font-size-small-body, - 'body': $typography-font-size-body, - 'largeBody': $typography-font-size-large-body, - 'H5': $typography-font-size-h5, - 'H4': $typography-font-size-h4, - 'H3': $typography-font-size-h3, - 'H2': $typography-font-size-h2, - 'H1': $typography-font-size-h1, - 'display': $typography-font-size-display + "letterSpacing": ( + "0": $typography-letter-spacing-0, ), - 'letterSpacing': ( - '0': $typography-letter-spacing-0 + "paragraphSpacing": ( + "0": $typography-paragraph-spacing-0, ), - 'paragraphSpacing': ( - '0': $typography-paragraph-spacing-0 + "regular": ( + "label": $typography-regular-label, + "smallBody": $typography-regular-small-body, + "body": $typography-regular-body, + "largeBody": $typography-regular-large-body, + "H6": $typography-regular-h6, + "H5": $typography-regular-h5, + "H4": $typography-regular-h4, + "H3": $typography-regular-h3, + "H2": $typography-regular-h2, + "H1": $typography-regular-h1, + "display": $typography-regular-display, ), - 'regular': ( - 'label': $typography-regular-label, - 'smallBody': $typography-regular-small-body, - 'body': $typography-regular-body, - 'largeBody': $typography-regular-large-body, - 'H6': $typography-regular-h6, - 'H5': $typography-regular-h5, - 'H4': $typography-regular-h4, - 'H3': $typography-regular-h3, - 'H2': $typography-regular-h2, - 'H1': $typography-regular-h1, - 'display': $typography-regular-display + "bold": ( + "label": $typography-bold-label, + "smallBody": $typography-bold-small-body, + "body": $typography-bold-body, + "largeBody": $typography-bold-large-body, + "H6": $typography-bold-h6, + "H5": $typography-bold-h5, + "H4": $typography-bold-h4, + "H3": $typography-bold-h3, + "H2": $typography-bold-h2, + "H1": $typography-bold-h1, + "display": $typography-bold-display, ), - 'bold': ( - 'label': $typography-bold-label, - 'smallBody': $typography-bold-small-body, - 'body': $typography-bold-body, - 'largeBody': $typography-bold-large-body, - 'H6': $typography-bold-h6, - 'H5': $typography-bold-h5, - 'H4': $typography-bold-h4, - 'H3': $typography-bold-h3, - 'H2': $typography-bold-h2, - 'H1': $typography-bold-h1, - 'display': $typography-bold-display + "italic": ( + "label": $typography-italic-label, + "smallBody": $typography-italic-small-body, + "body": $typography-italic-body, + "largeBody": $typography-italic-large-body, + "H6": $typography-italic-h6, + "H5": $typography-italic-h5, + "H4": $typography-italic-h4, + "H3": $typography-italic-h3, + "H2": $typography-italic-h2, + "H1": $typography-italic-h1, + "display": $typography-italic-display, ), - 'italic': ( - 'label': $typography-italic-label, - 'smallBody': $typography-italic-small-body, - 'body': $typography-italic-body, - 'largeBody': $typography-italic-large-body, - 'H6': $typography-italic-h6, - 'H5': $typography-italic-h5, - 'H4': $typography-italic-h4, - 'H3': $typography-italic-h3, - 'H2': $typography-italic-h2, - 'H1': $typography-italic-h1, - 'display': $typography-italic-display + "textCase": ( + "none": $typography-text-case-none, ), - 'textCase': ( - 'none': $typography-text-case-none + "textDecoration": ( + "none": $typography-text-decoration-none, ), - 'textDecoration': ( - 'none': $typography-text-decoration-none + "paragraphIndent": ( + "0": $typography-paragraph-indent-0, ), - 'paragraphIndent': ( - '0': $typography-paragraph-indent-0 + "color": ( + "primary": $typography-color-primary, + "secondary": $typography-color-secondary, + "placeholder": $typography-color-placeholder, + "disabled": $typography-color-disabled, + "link": $typography-color-link, + "danger": $typography-color-danger, + "primaryInvert": $typography-color-primary-invert, + "secondaryInvert": $typography-color-secondary-invert, ), - 'color': ( - 'primary': $typography-color-primary, - 'secondary': $typography-color-secondary, - 'placeholder': $typography-color-placeholder, - 'disabled': $typography-color-disabled, - 'link': $typography-color-link, - 'danger': $typography-color-danger, - 'primaryInvert': $typography-color-primary-invert, - 'secondaryInvert': $typography-color-secondary-invert - ) ), - 'theme': ( - 'gold': ( - '10': $theme-gold-10, - '20': $theme-gold-20, - '30': $theme-gold-30, - '40': $theme-gold-40, - '50': $theme-gold-50, - '60': $theme-gold-60, - '70': $theme-gold-70, - '80': $theme-gold-80, - '90': $theme-gold-90, - '100': $theme-gold-100 + "theme": ( + "gold": ( + "10": $theme-gold-10, + "20": $theme-gold-20, + "30": $theme-gold-30, + "40": $theme-gold-40, + "50": $theme-gold-50, + "60": $theme-gold-60, + "70": $theme-gold-70, + "80": $theme-gold-80, + "90": $theme-gold-90, + "100": $theme-gold-100, ), - 'blue': ( - '10': $theme-blue-10, - '20': $theme-blue-20, - '30': $theme-blue-30, - '40': $theme-blue-40, - '50': $theme-blue-50, - '60': $theme-blue-60, - '70': $theme-blue-70, - '80': $theme-blue-80, - '90': $theme-blue-90, - '100': $theme-blue-100 + "blue": ( + "10": $theme-blue-10, + "20": $theme-blue-20, + "30": $theme-blue-30, + "40": $theme-blue-40, + "50": $theme-blue-50, + "60": $theme-blue-60, + "70": $theme-blue-70, + "80": $theme-blue-80, + "90": $theme-blue-90, + "100": $theme-blue-100, ), - 'gray': ( - '10': $theme-gray-10, - '20': $theme-gray-20, - '30': $theme-gray-30, - '40': $theme-gray-40, - '50': $theme-gray-50, - '60': $theme-gray-60, - '70': $theme-gray-70, - '80': $theme-gray-80, - '90': $theme-gray-90, - '100': $theme-gray-100, - '110': $theme-gray-110, - 'white': $theme-gray-white + "gray": ( + "10": $theme-gray-10, + "20": $theme-gray-20, + "30": $theme-gray-30, + "40": $theme-gray-40, + "50": $theme-gray-50, + "60": $theme-gray-60, + "70": $theme-gray-70, + "80": $theme-gray-80, + "90": $theme-gray-90, + "100": $theme-gray-100, + "110": $theme-gray-110, + "white": $theme-gray-white, ), - 'primaryBlue': $theme-primary-blue, - 'primaryGold': $theme-primary-gold - ) + "primaryBlue": $theme-primary-blue, + "primaryGold": $theme-primary-gold, + ), ); diff --git a/packages/design-tokens/package-lock.json b/packages/design-tokens/package-lock.json index 3eb884b5..aab41b2b 100644 --- a/packages/design-tokens/package-lock.json +++ b/packages/design-tokens/package-lock.json @@ -11,6 +11,9 @@ "dependencies": { "@tokens-studio/sd-transforms": "2.0.3", "style-dictionary": "5.2.0" + }, + "devDependencies": { + "prettier": "3.8.4" } }, "node_modules/@bundled-es-modules/deepmerge": { @@ -1479,9 +1482,9 @@ "license": "MIT" }, "node_modules/prettier": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", - "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", + "version": "3.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.4.tgz", + "integrity": "sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==", "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 2b6a03f7..dfa306c2 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -11,7 +11,9 @@ "build": "./run-build.sh", "prepare-npm-package": "./run-prepare-npm-package.sh", "publish-npm-package": "./run-publish-npm-package.sh", - "test": "node --test build-output.test.js" + "test": "node --test build-output.test.js", + "format:check": "npx prettier . --check", + "format": "npx prettier . --write" }, "type": "module", "keywords": [ @@ -30,5 +32,8 @@ "dependencies": { "@tokens-studio/sd-transforms": "2.0.3", "style-dictionary": "5.2.0" + }, + "devDependencies": { + "prettier": "3.8.4" } } diff --git a/packages/design-tokens/prettier.config.js b/packages/design-tokens/prettier.config.js new file mode 100644 index 00000000..e84f945b --- /dev/null +++ b/packages/design-tokens/prettier.config.js @@ -0,0 +1,21 @@ +// prettier.config.js + +/** + * @see https://prettier.io/docs/configuration + * @type {import("prettier").Config} + */ +const config = { + // https://prettier.io/docs/options#trailing-commas + trailingComma: "es5", + + // https://prettier.io/docs/options#tab-width + tabWidth: 2, + + // https://prettier.io/docs/options#semicolons + semi: true, + + // https://prettier.io/docs/options#quotes + singleQuote: false, +}; + +export default config;