diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 2e112bb4..d26f0609 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog +## 3.1.0 + +### Added + +- Comments added to tokens to document intended usage +- `layout.padding.hair` added to match `layout.margin.hair` +- New color tokens added: + - `surface.color.primary.default` + - `surface.color.primary.hover` + - `surface.color.primary.pressed` + - `surface.color.primary.disabled` + - `surface.color.secondary.default` + - `surface.color.secondary.hover` + - `surface.color.secondary.pressed` + - `surface.color.secondary.disabled` + - `surface.color.tertiary.default` + - `surface.color.tertiary.hover` + - `surface.color.tertiary.pressed` + - `surface.color.tertiary.disabled` + ## 3.0.1 ### Changed diff --git a/packages/design-tokens/build/cjs-prefixed/index.d.ts b/packages/design-tokens/build/cjs-prefixed/index.d.ts index fb10e09e..8c17e3fa 100644 --- a/packages/design-tokens/build/cjs-prefixed/index.d.ts +++ b/packages/design-tokens/build/cjs-prefixed/index.d.ts @@ -13,99 +13,186 @@ export const bcdsSurfaceOpacity70 : number; export const bcdsSurfaceOpacity80 : number; export const bcdsSurfaceOpacity90 : number; export const bcdsSurfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const bcdsSurfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const bcdsSurfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const bcdsSurfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const bcdsSurfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const bcdsSurfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const bcdsSurfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const bcdsSurfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const bcdsSurfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const bcdsSurfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const bcdsSurfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const bcdsSurfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const bcdsSurfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const bcdsSurfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const bcdsSurfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const bcdsSurfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const bcdsSurfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const bcdsSurfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const bcdsSurfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const bcdsSurfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const bcdsSurfaceColorFormsDisabled : string; +/** White background */ export const bcdsSurfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const bcdsSurfaceColorBackgroundLightGray : string; +/** Light blue background */ export const bcdsSurfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const bcdsSurfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const bcdsSurfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const bcdsSurfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const bcdsSurfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const bcdsSurfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const bcdsSurfaceColorOverlayDefault : string; export const bcdsSupportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const bcdsSupportSurfaceColorDanger : string; +/** Background colour for success messages */ export const bcdsSupportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const bcdsSupportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const bcdsSupportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const bcdsSupportBorderColorDanger : string; +/** Border stroke for success messages */ export const bcdsSupportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const bcdsSupportBorderColorWarning : string; +/** Smallest icon size */ export const bcdsIconsSizeXsmall : string; export const bcdsIconsSizeSmall : string; +/** Default icon size */ export const bcdsIconsSizeMedium : string; export const bcdsIconsSizeLarge : string; +/** Largest icon size */ export const bcdsIconsSizeXlarge : string; +/** Default colour for icons */ export const bcdsIconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const bcdsIconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const bcdsIconsColorDisabled : string; +/** Use for hyperlinked icons */ export const bcdsIconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const bcdsIconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const bcdsIconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const bcdsIconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const bcdsIconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const bcdsIconsColorPrimaryInvert : string; export const bcdsLayoutBorderWidthNone : string; export const bcdsLayoutBorderWidthSmall : string; export const bcdsLayoutBorderWidthMedium : string; export const bcdsLayoutBorderWidthLarge : string; +/** No padding */ export const bcdsLayoutPaddingNone : string; +/** Smallest padding value for layout */ +export const bcdsLayoutPaddingHair : string; export const bcdsLayoutPaddingXsmall : string; export const bcdsLayoutPaddingSmall : string; +/** Default padding value for layout */ export const bcdsLayoutPaddingMedium : string; export const bcdsLayoutPaddingLarge : string; +/** Largest padding value for layout */ export const bcdsLayoutPaddingXlarge : string; +/** No margin */ export const bcdsLayoutMarginNone : string; +/** Smallest margin value for layout */ export const bcdsLayoutMarginHair : string; export const bcdsLayoutMarginXsmall : string; +/** Default margin value for layout */ export const bcdsLayoutMarginSmall : string; export const bcdsLayoutMarginMedium : string; export const bcdsLayoutMarginLarge : string; export const bcdsLayoutMarginXlarge : string; export const bcdsLayoutMarginXxlarge : string; export const bcdsLayoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const bcdsLayoutMarginHuge : string; export const bcdsLayoutBorderRadiusNone : string; export const bcdsLayoutBorderRadiusSmall : string; export const bcdsLayoutBorderRadiusMedium : string; export const bcdsLayoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const bcdsTypographyFontFamiliesBcSans : string; +/** Smallest line height */ export const bcdsTypographyLineHeightsXxxdense : string; export const bcdsTypographyLineHeightsXxdense : string; export const bcdsTypographyLineHeightsXdense : string; export const bcdsTypographyLineHeightsDense : string; +/** Default line height */ export const bcdsTypographyLineHeightsRegular : string; export const bcdsTypographyLineHeightsSparse : string; export const bcdsTypographyLineHeightsXsparse : string; +/** Largest line height */ export const bcdsTypographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const bcdsTypographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const bcdsTypographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicStyle : string; export const bcdsTypographyFontSizeLabel : string; export const bcdsTypographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const bcdsTypographyFontSizeH3 : string; export const bcdsTypographyFontSizeH2 : string; export const bcdsTypographyFontSizeH1 : string; export const bcdsTypographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const bcdsTypographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphSpacing0 : string; +/** Labels and captions */ export const bcdsTypographyRegularLabel : string; +/** Smaller body text */ export const bcdsTypographyRegularSmallBody : string; +/** Default body text */ export const bcdsTypographyRegularBody : string; +/** Larger body text */ export const bcdsTypographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const bcdsTypographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const bcdsTypographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const bcdsTypographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const bcdsTypographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const bcdsTypographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const bcdsTypographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const bcdsTypographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const bcdsTypographyBoldLabel : string; +/** Default for small body text (bolded) */ export const bcdsTypographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const bcdsTypographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const bcdsTypographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const bcdsTypographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const bcdsTypographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const bcdsTypographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const bcdsTypographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const bcdsTypographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const bcdsTypographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const bcdsTypographyBoldDisplay : string; +/** Labels and captions (italic) */ export const bcdsTypographyItalicLabel : string; +/** Small body text (italic) */ export const bcdsTypographyItalicSmallBody : string; +/** Default for body text (italic) */ export const bcdsTypographyItalicBody : string; +/** Larger text size for body text (italic) */ export const bcdsTypographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const bcdsTypographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const bcdsTypographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const bcdsTypographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const bcdsTypographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const bcdsTypographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const bcdsTypographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const bcdsTypographyItalicDisplay : string; export const bcdsTypographyTextCaseNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const bcdsTypographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const bcdsTypographyColorSecondary : string; +/** Use for placeholder text in forms */ export const bcdsTypographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const bcdsTypographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const bcdsTypographyColorLink : string; +/** Use for error, failure or danger message text */ export const bcdsTypographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const bcdsTypographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const bcdsTypographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const bcdsThemeGold10 : string; +/** Gold scale */ export const bcdsThemeGold20 : string; +/** Gold scale */ export const bcdsThemeGold30 : string; +/** Gold scale */ export const bcdsThemeGold40 : string; +/** Gold scale */ export const bcdsThemeGold50 : string; +/** Gold scale */ export const bcdsThemeGold60 : string; +/** Gold scale */ export const bcdsThemeGold70 : string; +/** Gold scale */ export const bcdsThemeGold80 : string; +/** Gold scale */ export const bcdsThemeGold90 : string; +/** Gold scale — darkest */ export const bcdsThemeGold100 : string; +/** Blue scale — lightest */ export const bcdsThemeBlue10 : string; +/** Blue scale */ export const bcdsThemeBlue20 : string; +/** Blue scale */ export const bcdsThemeBlue30 : string; +/** Blue scale */ export const bcdsThemeBlue40 : string; +/** Blue scale */ export const bcdsThemeBlue50 : string; +/** Blue scale */ export const bcdsThemeBlue60 : string; +/** Blue scale */ export const bcdsThemeBlue70 : string; +/** Blue scale */ export const bcdsThemeBlue80 : string; +/** Blue scale */ export const bcdsThemeBlue90 : string; +/** Blue scale — darkest */ export const bcdsThemeBlue100 : string; +/** Greyscale — lightest */ export const bcdsThemeGray10 : string; +/** Greyscale */ export const bcdsThemeGray20 : string; +/** Greyscale */ export const bcdsThemeGray30 : string; +/** Greyscale */ export const bcdsThemeGray40 : string; +/** Greyscale */ export const bcdsThemeGray50 : string; +/** Greyscale */ export const bcdsThemeGray60 : string; +/** Greyscale */ export const bcdsThemeGray70 : string; +/** Greyscale */ export const bcdsThemeGray80 : string; +/** Greyscale */ export const bcdsThemeGray90 : string; +/** Greyscale */ export const bcdsThemeGray100 : string; +/** Greyscale — darkest */ export const bcdsThemeGray110 : string; +/** White */ export const bcdsThemeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const bcdsThemePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const bcdsThemePrimaryGold : string; diff --git a/packages/design-tokens/build/cjs-prefixed/index.js b/packages/design-tokens/build/cjs-prefixed/index.js index 2069b695..7db75f0b 100644 --- a/packages/design-tokens/build/cjs-prefixed/index.js +++ b/packages/design-tokens/build/cjs-prefixed/index.js @@ -24,12 +24,24 @@ module.exports = { "bcdsSurfaceColorPrimaryDangerButtonDefault": "#CE3E39", "bcdsSurfaceColorPrimaryDangerButtonHover": "#A2312D", "bcdsSurfaceColorPrimaryDangerButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorPrimaryDefault": "#013366", + "bcdsSurfaceColorPrimaryHover": "#1E5189", + "bcdsSurfaceColorPrimaryPressed": "#01264C", + "bcdsSurfaceColorPrimaryDisabled": "#EDEBE9", "bcdsSurfaceColorSecondaryButtonDefault": "#FFFFFF", "bcdsSurfaceColorSecondaryButtonHover": "#EDEBE9", "bcdsSurfaceColorSecondaryButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorSecondaryDefault": "#FFFFFF", + "bcdsSurfaceColorSecondaryHover": "#EDEBE9", + "bcdsSurfaceColorSecondaryPressed": "#E0DEDC", + "bcdsSurfaceColorSecondaryDisabled": "#EDEBE9", "bcdsSurfaceColorTertiaryButtonDefault": "rgba(255,255,255,0)", "bcdsSurfaceColorTertiaryButtonHover": "#ECEAE8", "bcdsSurfaceColorTertiaryButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorTertiaryDefault": "#FFFFFF", + "bcdsSurfaceColorTertiaryHover": "#ECEAE8", + "bcdsSurfaceColorTertiaryPressed": "#E0DEDC", + "bcdsSurfaceColorTertiaryDisabled": "#EDEBE9", "bcdsSurfaceColorMenusDefault": "#FFFFFF", "bcdsSurfaceColorMenusHover": "#EDEBE9", "bcdsSurfaceColorFormsDefault": "#FFFFFF", @@ -70,6 +82,7 @@ module.exports = { "bcdsLayoutBorderWidthMedium": "2px", "bcdsLayoutBorderWidthLarge": "4px", "bcdsLayoutPaddingNone": "0", + "bcdsLayoutPaddingHair": "0.125rem", "bcdsLayoutPaddingXsmall": "0.25rem", "bcdsLayoutPaddingSmall": "0.5rem", "bcdsLayoutPaddingMedium": "1rem", diff --git a/packages/design-tokens/build/cjs/index.d.ts b/packages/design-tokens/build/cjs/index.d.ts index 1701a205..71e5317d 100644 --- a/packages/design-tokens/build/cjs/index.d.ts +++ b/packages/design-tokens/build/cjs/index.d.ts @@ -13,99 +13,186 @@ export const surfaceOpacity70 : number; export const surfaceOpacity80 : number; export const surfaceOpacity90 : number; export const surfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const surfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const surfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const surfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const surfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const surfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const surfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const surfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const surfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const surfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const surfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const surfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const surfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const surfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const surfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const surfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const surfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const surfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const surfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const surfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const surfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const surfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const surfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const surfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const surfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const surfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const surfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const surfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const surfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const surfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const surfaceColorFormsDisabled : string; +/** White background */ export const surfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const surfaceColorBackgroundLightGray : string; +/** Light blue background */ export const surfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const surfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const surfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const surfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const surfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const surfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const surfaceColorOverlayDefault : string; export const supportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const supportSurfaceColorDanger : string; +/** Background colour for success messages */ export const supportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const supportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const supportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const supportBorderColorDanger : string; +/** Border stroke for success messages */ export const supportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const supportBorderColorWarning : string; +/** Smallest icon size */ export const iconsSizeXsmall : string; export const iconsSizeSmall : string; +/** Default icon size */ export const iconsSizeMedium : string; export const iconsSizeLarge : string; +/** Largest icon size */ export const iconsSizeXlarge : string; +/** Default colour for icons */ export const iconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const iconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const iconsColorDisabled : string; +/** Use for hyperlinked icons */ export const iconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const iconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const iconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const iconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const iconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const iconsColorPrimaryInvert : string; export const layoutBorderWidthNone : string; export const layoutBorderWidthSmall : string; export const layoutBorderWidthMedium : string; export const layoutBorderWidthLarge : string; +/** No padding */ export const layoutPaddingNone : string; +/** Smallest padding value for layout */ +export const layoutPaddingHair : string; export const layoutPaddingXsmall : string; export const layoutPaddingSmall : string; +/** Default padding value for layout */ export const layoutPaddingMedium : string; export const layoutPaddingLarge : string; +/** Largest padding value for layout */ export const layoutPaddingXlarge : string; +/** No margin */ export const layoutMarginNone : string; +/** Smallest margin value for layout */ export const layoutMarginHair : string; export const layoutMarginXsmall : string; +/** Default margin value for layout */ export const layoutMarginSmall : string; export const layoutMarginMedium : string; export const layoutMarginLarge : string; export const layoutMarginXlarge : string; export const layoutMarginXxlarge : string; export const layoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const layoutMarginHuge : string; export const layoutBorderRadiusNone : string; export const layoutBorderRadiusSmall : string; export const layoutBorderRadiusMedium : string; export const layoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const typographyFontFamiliesBcSans : string; +/** Smallest line height */ export const typographyLineHeightsXxxdense : string; export const typographyLineHeightsXxdense : string; export const typographyLineHeightsXdense : string; export const typographyLineHeightsDense : string; +/** Default line height */ export const typographyLineHeightsRegular : string; export const typographyLineHeightsSparse : string; export const typographyLineHeightsXsparse : string; +/** Largest line height */ export const typographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const typographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const typographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const typographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const typographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicStyle : string; export const typographyFontSizeLabel : string; export const typographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const typographyFontSizeH3 : string; export const typographyFontSizeH2 : string; export const typographyFontSizeH1 : string; export const typographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const typographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const typographyParagraphSpacing0 : string; +/** Labels and captions */ export const typographyRegularLabel : string; +/** Smaller body text */ export const typographyRegularSmallBody : string; +/** Default body text */ export const typographyRegularBody : string; +/** Larger body text */ export const typographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const typographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const typographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const typographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const typographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const typographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const typographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const typographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const typographyBoldLabel : string; +/** Default for small body text (bolded) */ export const typographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const typographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const typographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const typographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const typographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const typographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const typographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const typographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const typographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const typographyBoldDisplay : string; +/** Labels and captions (italic) */ export const typographyItalicLabel : string; +/** Small body text (italic) */ export const typographyItalicSmallBody : string; +/** Default for body text (italic) */ export const typographyItalicBody : string; +/** Larger text size for body text (italic) */ export const typographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const typographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const typographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const typographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const typographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const typographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const typographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const typographyItalicDisplay : string; export const typographyTextCaseNone : string; +/** System token, used to generate type styles */ export const typographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const typographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const typographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const typographyColorSecondary : string; +/** Use for placeholder text in forms */ export const typographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const typographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const typographyColorLink : string; +/** Use for error, failure or danger message text */ export const typographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const typographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const typographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const themeGold10 : string; +/** Gold scale */ export const themeGold20 : string; +/** Gold scale */ export const themeGold30 : string; +/** Gold scale */ export const themeGold40 : string; +/** Gold scale */ export const themeGold50 : string; +/** Gold scale */ export const themeGold60 : string; +/** Gold scale */ export const themeGold70 : string; +/** Gold scale */ export const themeGold80 : string; +/** Gold scale */ export const themeGold90 : string; +/** Gold scale — darkest */ export const themeGold100 : string; +/** Blue scale — lightest */ export const themeBlue10 : string; +/** Blue scale */ export const themeBlue20 : string; +/** Blue scale */ export const themeBlue30 : string; +/** Blue scale */ export const themeBlue40 : string; +/** Blue scale */ export const themeBlue50 : string; +/** Blue scale */ export const themeBlue60 : string; +/** Blue scale */ export const themeBlue70 : string; +/** Blue scale */ export const themeBlue80 : string; +/** Blue scale */ export const themeBlue90 : string; +/** Blue scale — darkest */ export const themeBlue100 : string; +/** Greyscale — lightest */ export const themeGray10 : string; +/** Greyscale */ export const themeGray20 : string; +/** Greyscale */ export const themeGray30 : string; +/** Greyscale */ export const themeGray40 : string; +/** Greyscale */ export const themeGray50 : string; +/** Greyscale */ export const themeGray60 : string; +/** Greyscale */ export const themeGray70 : string; +/** Greyscale */ export const themeGray80 : string; +/** Greyscale */ export const themeGray90 : string; +/** Greyscale */ export const themeGray100 : string; +/** Greyscale — darkest */ export const themeGray110 : string; +/** White */ export const themeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const themePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const themePrimaryGold : string; diff --git a/packages/design-tokens/build/cjs/index.js b/packages/design-tokens/build/cjs/index.js index 93c05f04..80e54046 100644 --- a/packages/design-tokens/build/cjs/index.js +++ b/packages/design-tokens/build/cjs/index.js @@ -24,12 +24,24 @@ module.exports = { "surfaceColorPrimaryDangerButtonDefault": "#CE3E39", "surfaceColorPrimaryDangerButtonHover": "#A2312D", "surfaceColorPrimaryDangerButtonDisabled": "#EDEBE9", + "surfaceColorPrimaryDefault": "#013366", + "surfaceColorPrimaryHover": "#1E5189", + "surfaceColorPrimaryPressed": "#01264C", + "surfaceColorPrimaryDisabled": "#EDEBE9", "surfaceColorSecondaryButtonDefault": "#FFFFFF", "surfaceColorSecondaryButtonHover": "#EDEBE9", "surfaceColorSecondaryButtonDisabled": "#EDEBE9", + "surfaceColorSecondaryDefault": "#FFFFFF", + "surfaceColorSecondaryHover": "#EDEBE9", + "surfaceColorSecondaryPressed": "#E0DEDC", + "surfaceColorSecondaryDisabled": "#EDEBE9", "surfaceColorTertiaryButtonDefault": "rgba(255,255,255,0)", "surfaceColorTertiaryButtonHover": "#ECEAE8", "surfaceColorTertiaryButtonDisabled": "#EDEBE9", + "surfaceColorTertiaryDefault": "#FFFFFF", + "surfaceColorTertiaryHover": "#ECEAE8", + "surfaceColorTertiaryPressed": "#E0DEDC", + "surfaceColorTertiaryDisabled": "#EDEBE9", "surfaceColorMenusDefault": "#FFFFFF", "surfaceColorMenusHover": "#EDEBE9", "surfaceColorFormsDefault": "#FFFFFF", @@ -70,6 +82,7 @@ module.exports = { "layoutBorderWidthMedium": "2px", "layoutBorderWidthLarge": "4px", "layoutPaddingNone": "0", + "layoutPaddingHair": "0.125rem", "layoutPaddingXsmall": "0.25rem", "layoutPaddingSmall": "0.5rem", "layoutPaddingMedium": "1rem", diff --git a/packages/design-tokens/build/css-prefixed/variables.css b/packages/design-tokens/build/css-prefixed/variables.css index 148917fb..9f4cb0c8 100644 --- a/packages/design-tokens/build/css-prefixed/variables.css +++ b/packages/design-tokens/build/css-prefixed/variables.css @@ -14,96 +14,109 @@ --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; - --bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */ - --bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */ - --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */ - --bcds-surface-color-primary-button-default: #013366; - --bcds-surface-color-primary-button-hover: #1E5189; - --bcds-surface-color-primary-button-disabled: #EDEBE9; - --bcds-surface-color-primary-danger-button-default: #CE3E39; - --bcds-surface-color-primary-danger-button-hover: #A2312D; - --bcds-surface-color-primary-danger-button-disabled: #EDEBE9; - --bcds-surface-color-secondary-button-default: #FFFFFF; - --bcds-surface-color-secondary-button-hover: #EDEBE9; - --bcds-surface-color-secondary-button-disabled: #EDEBE9; - --bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); - --bcds-surface-color-tertiary-button-hover: #ECEAE8; - --bcds-surface-color-tertiary-button-disabled: #EDEBE9; - --bcds-surface-color-menus-default: #FFFFFF; - --bcds-surface-color-menus-hover: #EDEBE9; - --bcds-surface-color-forms-default: #FFFFFF; - --bcds-surface-color-forms-disabled: #EDEBE9; - --bcds-surface-color-background-white: #FFFFFF; - --bcds-surface-color-background-light-gray: #FAF9F8; - --bcds-surface-color-background-light-blue: #F1F8FE; - --bcds-surface-color-background-dark-blue: #053662; - --bcds-surface-color-border-default: #D8D8D8; - --bcds-surface-color-border-medium: #898785; - --bcds-surface-color-border-dark: #353433; - --bcds-surface-color-border-active: #2E5DD7; - --bcds-surface-color-overlay-default: rgba(0,0,0,0.45); + --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-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: #FFFFFF; /* 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-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; - --bcds-support-surface-color-success: #F6FFF8; - --bcds-support-surface-color-warning: #FEF1D8; - --bcds-support-border-color-info: #053662; - --bcds-support-border-color-danger: #CE3E39; - --bcds-support-border-color-success: #42814A; - --bcds-support-border-color-warning: #F8BB47; - --bcds-icons-size-xsmall: 14px; + --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-icons-size-xsmall: 14px; /* Smallest icon size */ --bcds-icons-size-small: 16px; - --bcds-icons-size-medium: 20px; + --bcds-icons-size-medium: 20px; /* Default icon size */ --bcds-icons-size-large: 24px; - --bcds-icons-size-xlarge: 32px; - --bcds-icons-color-primary: #2D2D2D; - --bcds-icons-color-secondary: #474543; - --bcds-icons-color-disabled: #9F9D9C; - --bcds-icons-color-link: #255A90; - --bcds-icons-color-info: #053662; - --bcds-icons-color-danger: #CE3E39; - --bcds-icons-color-success: #42814A; - --bcds-icons-color-warning: #F8BB47; - --bcds-icons-color-primary-invert: #FFFFFF; + --bcds-icons-size-xlarge: 32px; /* Largest icon size */ + --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-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-layout-border-width-none: 0; --bcds-layout-border-width-small: 1px; --bcds-layout-border-width-medium: 2px; --bcds-layout-border-width-large: 4px; - --bcds-layout-padding-none: 0; + --bcds-layout-padding-none: 0; /* No padding */ + --bcds-layout-padding-hair: 0.125rem; /* Smallest padding value for layout */ --bcds-layout-padding-xsmall: 0.25rem; --bcds-layout-padding-small: 0.5rem; - --bcds-layout-padding-medium: 1rem; + --bcds-layout-padding-medium: 1rem; /* Default padding value for layout */ --bcds-layout-padding-large: 1.5rem; - --bcds-layout-padding-xlarge: 2rem; - --bcds-layout-margin-none: 0rem; - --bcds-layout-margin-hair: 0.125rem; + --bcds-layout-padding-xlarge: 2rem; /* Largest padding value for layout */ + --bcds-layout-margin-none: 0rem; /* No margin */ + --bcds-layout-margin-hair: 0.125rem; /* Smallest margin value for layout */ --bcds-layout-margin-xsmall: 0.25rem; - --bcds-layout-margin-small: 0.5rem; + --bcds-layout-margin-small: 0.5rem; /* Default margin value for layout */ --bcds-layout-margin-medium: 1rem; --bcds-layout-margin-large: 1.5rem; --bcds-layout-margin-xlarge: 2rem; --bcds-layout-margin-xxlarge: 2.5rem; --bcds-layout-margin-xxxlarge: 3rem; - --bcds-layout-margin-huge: 3.5rem; + --bcds-layout-margin-huge: 3.5rem; /* Largest margin value for layout */ --bcds-layout-border-radius-none: 0; --bcds-layout-border-radius-small: 2px; --bcds-layout-border-radius-medium: 4px; --bcds-layout-border-radius-large: 6px; - --bcds-typography-font-families-bc-sans: 'BC Sans'; - --bcds-typography-line-heights-xxxdense: 1.125rem; + --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; --bcds-typography-line-heights-dense: 1.913rem; - --bcds-typography-line-heights-regular: 2.125rem; + --bcds-typography-line-heights-regular: 2.125rem; /* Default line height */ --bcds-typography-line-heights-sparse: 2.25rem; --bcds-typography-line-heights-xsparse: 3rem; - --bcds-typography-line-heights-xxsparse: 3.375rem; - --bcds-typography-line-heights-auto: AUTO; - --bcds-typography-font-weights-regular: 400; - --bcds-typography-font-weights-bold: 700; + --bcds-typography-line-heights-xxsparse: 3.375rem; /* Largest line height */ + --bcds-typography-line-heights-auto: AUTO; /* System token, used to generate type styles */ + --bcds-typography-font-weights-regular: 400; /* System token, used to generate text styles */ + --bcds-typography-font-weights-bold: 700; /* System token, used to generate text styles */ --bcds-typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */ - --bcds-typography-font-weights-italic-weight: 400; - --bcds-typography-font-weights-italic-style: italic; + --bcds-typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */ + --bcds-typography-font-weights-italic-style: italic; /* System token, used to generate text styles */ --bcds-typography-font-size-label: 0.75rem; --bcds-typography-font-size-small-body: 0.875rem; --bcds-typography-font-size-body: 1rem; @@ -114,84 +127,84 @@ --bcds-typography-font-size-h2: 2rem; --bcds-typography-font-size-h1: 2.25rem; --bcds-typography-font-size-display: 3rem; - --bcds-typography-letter-spacing-0: 0em; - --bcds-typography-paragraph-spacing-0: 0; - --bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; - --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; - --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; - --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; - --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; - --bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; - --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; - --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; - --bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; - --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; - --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; - --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; - --bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; - --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; - --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; + --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-text-case-none: none; - --bcds-typography-text-decoration-none: none; - --bcds-typography-paragraph-indent-0: 0px; - --bcds-typography-color-primary: #2D2D2D; - --bcds-typography-color-secondary: #474543; - --bcds-typography-color-placeholder: #9F9D9C; - --bcds-typography-color-disabled: #9F9D9C; - --bcds-typography-color-link: #255A90; - --bcds-typography-color-danger: #CE3E39; - --bcds-typography-color-primary-invert: #FFFFFF; - --bcds-typography-color-secondary-invert: #ECEAE8; - --bcds-theme-gold-10: #FEF8E8; - --bcds-theme-gold-20: #FEF0D8; - --bcds-theme-gold-30: #FDE9C4; - --bcds-theme-gold-40: #FCE2B0; - --bcds-theme-gold-50: #FBDA9D; - --bcds-theme-gold-60: #FBD389; - --bcds-theme-gold-70: #FACC75; - --bcds-theme-gold-80: #F9C462; - --bcds-theme-gold-90: #F8BA47; - --bcds-theme-gold-100: #FCBA19; - --bcds-theme-blue-10: #F1F8FE; - --bcds-theme-blue-20: #D8EAFD; - --bcds-theme-blue-30: #C1DDFC; - --bcds-theme-blue-40: #A8D0FB; - --bcds-theme-blue-50: #91C4FA; - --bcds-theme-blue-60: #7AB8F9; - --bcds-theme-blue-70: #5595D9; - --bcds-theme-blue-80: #3470B1; - --bcds-theme-blue-90: #1E5189; - --bcds-theme-blue-100: #013366; - --bcds-theme-gray-10: #FAF9F8; - --bcds-theme-gray-20: #F3F2F1; - --bcds-theme-gray-30: #ECEAE8; - --bcds-theme-gray-40: #E0DEDC; - --bcds-theme-gray-50: #D1CFCD; - --bcds-theme-gray-60: #C6C5C3; - --bcds-theme-gray-70: #9F9D9C; - --bcds-theme-gray-80: #605E5C; - --bcds-theme-gray-90: #3D3C3B; - --bcds-theme-gray-100: #353433; - --bcds-theme-gray-110: #252423; - --bcds-theme-gray-white: #FFFFFF; - --bcds-theme-primary-blue: #013366; - --bcds-theme-primary-gold: #FCBA19; + --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-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-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-100: #353433; /* Greyscale */ + --bcds-theme-gray-110: #252423; /* Greyscale — darkest */ + --bcds-theme-gray-white: #FFFFFF; /* White */ + --bcds-theme-primary-blue: #013366; /* Primary Blue (Blue 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 8890aa15..36b76492 100644 --- a/packages/design-tokens/build/css/variables.css +++ b/packages/design-tokens/build/css/variables.css @@ -14,96 +14,109 @@ --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; - --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */ - --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */ - --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */ - --surface-color-primary-button-default: #013366; - --surface-color-primary-button-hover: #1E5189; - --surface-color-primary-button-disabled: #EDEBE9; - --surface-color-primary-danger-button-default: #CE3E39; - --surface-color-primary-danger-button-hover: #A2312D; - --surface-color-primary-danger-button-disabled: #EDEBE9; - --surface-color-secondary-button-default: #FFFFFF; - --surface-color-secondary-button-hover: #EDEBE9; - --surface-color-secondary-button-disabled: #EDEBE9; - --surface-color-tertiary-button-default: rgba(255,255,255,0); - --surface-color-tertiary-button-hover: #ECEAE8; - --surface-color-tertiary-button-disabled: #EDEBE9; - --surface-color-menus-default: #FFFFFF; - --surface-color-menus-hover: #EDEBE9; - --surface-color-forms-default: #FFFFFF; - --surface-color-forms-disabled: #EDEBE9; - --surface-color-background-white: #FFFFFF; - --surface-color-background-light-gray: #FAF9F8; - --surface-color-background-light-blue: #F1F8FE; - --surface-color-background-dark-blue: #053662; - --surface-color-border-default: #D8D8D8; - --surface-color-border-medium: #898785; - --surface-color-border-dark: #353433; - --surface-color-border-active: #2E5DD7; - --surface-color-overlay-default: rgba(0,0,0,0.45); + --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-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: #FFFFFF; /* 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-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; - --support-surface-color-success: #F6FFF8; - --support-surface-color-warning: #FEF1D8; - --support-border-color-info: #053662; - --support-border-color-danger: #CE3E39; - --support-border-color-success: #42814A; - --support-border-color-warning: #F8BB47; - --icons-size-xsmall: 14px; + --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 */ + --icons-size-xsmall: 14px; /* Smallest icon size */ --icons-size-small: 16px; - --icons-size-medium: 20px; + --icons-size-medium: 20px; /* Default icon size */ --icons-size-large: 24px; - --icons-size-xlarge: 32px; - --icons-color-primary: #2D2D2D; - --icons-color-secondary: #474543; - --icons-color-disabled: #9F9D9C; - --icons-color-link: #255A90; - --icons-color-info: #053662; - --icons-color-danger: #CE3E39; - --icons-color-success: #42814A; - --icons-color-warning: #F8BB47; - --icons-color-primary-invert: #FFFFFF; + --icons-size-xlarge: 32px; /* Largest icon size */ + --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-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 */ --layout-border-width-none: 0; --layout-border-width-small: 1px; --layout-border-width-medium: 2px; --layout-border-width-large: 4px; - --layout-padding-none: 0; + --layout-padding-none: 0; /* No padding */ + --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */ --layout-padding-xsmall: 0.25rem; --layout-padding-small: 0.5rem; - --layout-padding-medium: 1rem; + --layout-padding-medium: 1rem; /* Default padding value for layout */ --layout-padding-large: 1.5rem; - --layout-padding-xlarge: 2rem; - --layout-margin-none: 0rem; - --layout-margin-hair: 0.125rem; + --layout-padding-xlarge: 2rem; /* Largest padding value for layout */ + --layout-margin-none: 0rem; /* No margin */ + --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */ --layout-margin-xsmall: 0.25rem; - --layout-margin-small: 0.5rem; + --layout-margin-small: 0.5rem; /* Default margin value for layout */ --layout-margin-medium: 1rem; --layout-margin-large: 1.5rem; --layout-margin-xlarge: 2rem; --layout-margin-xxlarge: 2.5rem; --layout-margin-xxxlarge: 3rem; - --layout-margin-huge: 3.5rem; + --layout-margin-huge: 3.5rem; /* Largest margin value for layout */ --layout-border-radius-none: 0; --layout-border-radius-small: 2px; --layout-border-radius-medium: 4px; --layout-border-radius-large: 6px; - --typography-font-families-bc-sans: 'BC Sans'; - --typography-line-heights-xxxdense: 1.125rem; + --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; --typography-line-heights-dense: 1.913rem; - --typography-line-heights-regular: 2.125rem; + --typography-line-heights-regular: 2.125rem; /* Default line height */ --typography-line-heights-sparse: 2.25rem; --typography-line-heights-xsparse: 3rem; - --typography-line-heights-xxsparse: 3.375rem; - --typography-line-heights-auto: AUTO; - --typography-font-weights-regular: 400; - --typography-font-weights-bold: 700; + --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */ + --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */ + --typography-font-weights-regular: 400; /* System token, used to generate text styles */ + --typography-font-weights-bold: 700; /* System token, used to generate text styles */ --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */ - --typography-font-weights-italic-weight: 400; - --typography-font-weights-italic-style: italic; + --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */ + --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */ --typography-font-size-label: 0.75rem; --typography-font-size-small-body: 0.875rem; --typography-font-size-body: 1rem; @@ -114,84 +127,84 @@ --typography-font-size-h2: 2rem; --typography-font-size-h1: 2.25rem; --typography-font-size-display: 3rem; - --typography-letter-spacing-0: 0em; - --typography-paragraph-spacing-0: 0; - --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; - --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; - --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; - --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; - --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; - --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; - --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; - --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; - --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; - --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; - --typography-regular-display: 400 3rem/AUTO 'BC Sans'; - --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; - --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; - --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; - --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; - --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; - --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; - --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; - --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; - --typography-bold-h2: 700 2rem/3rem 'BC Sans'; - --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; - --typography-bold-display: 700 3rem/AUTO 'BC Sans'; - --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; - --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; - --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; - --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; - --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; - --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; - --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; - --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; - --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; - --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; - --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; + --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-text-case-none: none; - --typography-text-decoration-none: none; - --typography-paragraph-indent-0: 0px; - --typography-color-primary: #2D2D2D; - --typography-color-secondary: #474543; - --typography-color-placeholder: #9F9D9C; - --typography-color-disabled: #9F9D9C; - --typography-color-link: #255A90; - --typography-color-danger: #CE3E39; - --typography-color-primary-invert: #FFFFFF; - --typography-color-secondary-invert: #ECEAE8; - --theme-gold-10: #FEF8E8; - --theme-gold-20: #FEF0D8; - --theme-gold-30: #FDE9C4; - --theme-gold-40: #FCE2B0; - --theme-gold-50: #FBDA9D; - --theme-gold-60: #FBD389; - --theme-gold-70: #FACC75; - --theme-gold-80: #F9C462; - --theme-gold-90: #F8BA47; - --theme-gold-100: #FCBA19; - --theme-blue-10: #F1F8FE; - --theme-blue-20: #D8EAFD; - --theme-blue-30: #C1DDFC; - --theme-blue-40: #A8D0FB; - --theme-blue-50: #91C4FA; - --theme-blue-60: #7AB8F9; - --theme-blue-70: #5595D9; - --theme-blue-80: #3470B1; - --theme-blue-90: #1E5189; - --theme-blue-100: #013366; - --theme-gray-10: #FAF9F8; - --theme-gray-20: #F3F2F1; - --theme-gray-30: #ECEAE8; - --theme-gray-40: #E0DEDC; - --theme-gray-50: #D1CFCD; - --theme-gray-60: #C6C5C3; - --theme-gray-70: #9F9D9C; - --theme-gray-80: #605E5C; - --theme-gray-90: #3D3C3B; - --theme-gray-100: #353433; - --theme-gray-110: #252423; - --theme-gray-white: #FFFFFF; - --theme-primary-blue: #013366; - --theme-primary-gold: #FCBA19; + --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-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 */ + --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-100: #353433; /* Greyscale */ + --theme-gray-110: #252423; /* Greyscale — darkest */ + --theme-gray-white: #FFFFFF; /* White */ + --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */ + --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/build/js-prefixed/index.d.ts b/packages/design-tokens/build/js-prefixed/index.d.ts index fb10e09e..8c17e3fa 100644 --- a/packages/design-tokens/build/js-prefixed/index.d.ts +++ b/packages/design-tokens/build/js-prefixed/index.d.ts @@ -13,99 +13,186 @@ export const bcdsSurfaceOpacity70 : number; export const bcdsSurfaceOpacity80 : number; export const bcdsSurfaceOpacity90 : number; export const bcdsSurfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const bcdsSurfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const bcdsSurfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const bcdsSurfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const bcdsSurfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const bcdsSurfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const bcdsSurfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const bcdsSurfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const bcdsSurfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const bcdsSurfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const bcdsSurfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const bcdsSurfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const bcdsSurfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const bcdsSurfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const bcdsSurfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const bcdsSurfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const bcdsSurfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const bcdsSurfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const bcdsSurfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const bcdsSurfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const bcdsSurfaceColorFormsDisabled : string; +/** White background */ export const bcdsSurfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const bcdsSurfaceColorBackgroundLightGray : string; +/** Light blue background */ export const bcdsSurfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const bcdsSurfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const bcdsSurfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const bcdsSurfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const bcdsSurfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const bcdsSurfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const bcdsSurfaceColorOverlayDefault : string; export const bcdsSupportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const bcdsSupportSurfaceColorDanger : string; +/** Background colour for success messages */ export const bcdsSupportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const bcdsSupportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const bcdsSupportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const bcdsSupportBorderColorDanger : string; +/** Border stroke for success messages */ export const bcdsSupportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const bcdsSupportBorderColorWarning : string; +/** Smallest icon size */ export const bcdsIconsSizeXsmall : string; export const bcdsIconsSizeSmall : string; +/** Default icon size */ export const bcdsIconsSizeMedium : string; export const bcdsIconsSizeLarge : string; +/** Largest icon size */ export const bcdsIconsSizeXlarge : string; +/** Default colour for icons */ export const bcdsIconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const bcdsIconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const bcdsIconsColorDisabled : string; +/** Use for hyperlinked icons */ export const bcdsIconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const bcdsIconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const bcdsIconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const bcdsIconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const bcdsIconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const bcdsIconsColorPrimaryInvert : string; export const bcdsLayoutBorderWidthNone : string; export const bcdsLayoutBorderWidthSmall : string; export const bcdsLayoutBorderWidthMedium : string; export const bcdsLayoutBorderWidthLarge : string; +/** No padding */ export const bcdsLayoutPaddingNone : string; +/** Smallest padding value for layout */ +export const bcdsLayoutPaddingHair : string; export const bcdsLayoutPaddingXsmall : string; export const bcdsLayoutPaddingSmall : string; +/** Default padding value for layout */ export const bcdsLayoutPaddingMedium : string; export const bcdsLayoutPaddingLarge : string; +/** Largest padding value for layout */ export const bcdsLayoutPaddingXlarge : string; +/** No margin */ export const bcdsLayoutMarginNone : string; +/** Smallest margin value for layout */ export const bcdsLayoutMarginHair : string; export const bcdsLayoutMarginXsmall : string; +/** Default margin value for layout */ export const bcdsLayoutMarginSmall : string; export const bcdsLayoutMarginMedium : string; export const bcdsLayoutMarginLarge : string; export const bcdsLayoutMarginXlarge : string; export const bcdsLayoutMarginXxlarge : string; export const bcdsLayoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const bcdsLayoutMarginHuge : string; export const bcdsLayoutBorderRadiusNone : string; export const bcdsLayoutBorderRadiusSmall : string; export const bcdsLayoutBorderRadiusMedium : string; export const bcdsLayoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const bcdsTypographyFontFamiliesBcSans : string; +/** Smallest line height */ export const bcdsTypographyLineHeightsXxxdense : string; export const bcdsTypographyLineHeightsXxdense : string; export const bcdsTypographyLineHeightsXdense : string; export const bcdsTypographyLineHeightsDense : string; +/** Default line height */ export const bcdsTypographyLineHeightsRegular : string; export const bcdsTypographyLineHeightsSparse : string; export const bcdsTypographyLineHeightsXsparse : string; +/** Largest line height */ export const bcdsTypographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const bcdsTypographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const bcdsTypographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicStyle : string; export const bcdsTypographyFontSizeLabel : string; export const bcdsTypographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const bcdsTypographyFontSizeH3 : string; export const bcdsTypographyFontSizeH2 : string; export const bcdsTypographyFontSizeH1 : string; export const bcdsTypographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const bcdsTypographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphSpacing0 : string; +/** Labels and captions */ export const bcdsTypographyRegularLabel : string; +/** Smaller body text */ export const bcdsTypographyRegularSmallBody : string; +/** Default body text */ export const bcdsTypographyRegularBody : string; +/** Larger body text */ export const bcdsTypographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const bcdsTypographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const bcdsTypographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const bcdsTypographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const bcdsTypographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const bcdsTypographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const bcdsTypographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const bcdsTypographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const bcdsTypographyBoldLabel : string; +/** Default for small body text (bolded) */ export const bcdsTypographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const bcdsTypographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const bcdsTypographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const bcdsTypographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const bcdsTypographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const bcdsTypographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const bcdsTypographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const bcdsTypographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const bcdsTypographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const bcdsTypographyBoldDisplay : string; +/** Labels and captions (italic) */ export const bcdsTypographyItalicLabel : string; +/** Small body text (italic) */ export const bcdsTypographyItalicSmallBody : string; +/** Default for body text (italic) */ export const bcdsTypographyItalicBody : string; +/** Larger text size for body text (italic) */ export const bcdsTypographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const bcdsTypographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const bcdsTypographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const bcdsTypographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const bcdsTypographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const bcdsTypographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const bcdsTypographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const bcdsTypographyItalicDisplay : string; export const bcdsTypographyTextCaseNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const bcdsTypographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const bcdsTypographyColorSecondary : string; +/** Use for placeholder text in forms */ export const bcdsTypographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const bcdsTypographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const bcdsTypographyColorLink : string; +/** Use for error, failure or danger message text */ export const bcdsTypographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const bcdsTypographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const bcdsTypographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const bcdsThemeGold10 : string; +/** Gold scale */ export const bcdsThemeGold20 : string; +/** Gold scale */ export const bcdsThemeGold30 : string; +/** Gold scale */ export const bcdsThemeGold40 : string; +/** Gold scale */ export const bcdsThemeGold50 : string; +/** Gold scale */ export const bcdsThemeGold60 : string; +/** Gold scale */ export const bcdsThemeGold70 : string; +/** Gold scale */ export const bcdsThemeGold80 : string; +/** Gold scale */ export const bcdsThemeGold90 : string; +/** Gold scale — darkest */ export const bcdsThemeGold100 : string; +/** Blue scale — lightest */ export const bcdsThemeBlue10 : string; +/** Blue scale */ export const bcdsThemeBlue20 : string; +/** Blue scale */ export const bcdsThemeBlue30 : string; +/** Blue scale */ export const bcdsThemeBlue40 : string; +/** Blue scale */ export const bcdsThemeBlue50 : string; +/** Blue scale */ export const bcdsThemeBlue60 : string; +/** Blue scale */ export const bcdsThemeBlue70 : string; +/** Blue scale */ export const bcdsThemeBlue80 : string; +/** Blue scale */ export const bcdsThemeBlue90 : string; +/** Blue scale — darkest */ export const bcdsThemeBlue100 : string; +/** Greyscale — lightest */ export const bcdsThemeGray10 : string; +/** Greyscale */ export const bcdsThemeGray20 : string; +/** Greyscale */ export const bcdsThemeGray30 : string; +/** Greyscale */ export const bcdsThemeGray40 : string; +/** Greyscale */ export const bcdsThemeGray50 : string; +/** Greyscale */ export const bcdsThemeGray60 : string; +/** Greyscale */ export const bcdsThemeGray70 : string; +/** Greyscale */ export const bcdsThemeGray80 : string; +/** Greyscale */ export const bcdsThemeGray90 : string; +/** Greyscale */ export const bcdsThemeGray100 : string; +/** Greyscale — darkest */ export const bcdsThemeGray110 : string; +/** White */ export const bcdsThemeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const bcdsThemePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const bcdsThemePrimaryGold : string; diff --git a/packages/design-tokens/build/js-prefixed/index.js b/packages/design-tokens/build/js-prefixed/index.js index 6741d289..565d22b6 100644 --- a/packages/design-tokens/build/js-prefixed/index.js +++ b/packages/design-tokens/build/js-prefixed/index.js @@ -13,96 +13,109 @@ export const bcdsSurfaceOpacity70 = 0.7; export const bcdsSurfaceOpacity80 = 0.8; export const bcdsSurfaceOpacity90 = 0.9; export const bcdsSurfaceOpacity100 = 1; -export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; -export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards -export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips -export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs -export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; -export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189"; -export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39"; -export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D"; -export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF"; -export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9"; -export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; -export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8"; -export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorMenusDefault = "#FFFFFF"; -export const bcdsSurfaceColorMenusHover = "#EDEBE9"; -export const bcdsSurfaceColorFormsDefault = "#FFFFFF"; -export const bcdsSurfaceColorFormsDisabled = "#EDEBE9"; -export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF"; -export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8"; -export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE"; -export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; -export const bcdsSurfaceColorBorderDefault = "#D8D8D8"; -export const bcdsSurfaceColorBorderMedium = "#898785"; -export const bcdsSurfaceColorBorderDark = "#353433"; -export const bcdsSurfaceColorBorderActive = "#2E5DD7"; -export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; +export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; // Default shadow for most content and UI elements +export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements +export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Standard shadow for UI elements like cards and buttons +export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly +export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons +export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button +export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons +export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state +export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button +export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button +export const bcdsSurfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout +export const bcdsSurfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default +export const bcdsSurfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default +export const bcdsSurfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default +export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons +export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button +export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons +export const bcdsSurfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout +export const bcdsSurfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default +export const bcdsSurfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default +export const bcdsSurfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default +export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons +export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button +export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons +export const bcdsSurfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout +export const bcdsSurfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default +export const bcdsSurfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default +export const bcdsSurfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default +export const bcdsSurfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items +export const bcdsSurfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item +export const bcdsSurfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields +export const bcdsSurfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields +export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF"; // White background +export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout +export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background +export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background +export const bcdsSurfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements +export const bcdsSurfaceColorBorderMedium = "#898785"; // Default border colour for UI elements +export const bcdsSurfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs +export const bcdsSurfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements +export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues export const bcdsSupportSurfaceColorInfo = "#F7F9FC"; -export const bcdsSupportSurfaceColorDanger = "#F4E1E2"; -export const bcdsSupportSurfaceColorSuccess = "#F6FFF8"; -export const bcdsSupportSurfaceColorWarning = "#FEF1D8"; -export const bcdsSupportBorderColorInfo = "#053662"; -export const bcdsSupportBorderColorDanger = "#CE3E39"; -export const bcdsSupportBorderColorSuccess = "#42814A"; -export const bcdsSupportBorderColorWarning = "#F8BB47"; -export const bcdsIconsSizeXsmall = "14px"; +export const bcdsSupportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages +export const bcdsSupportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages +export const bcdsSupportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages +export const bcdsSupportBorderColorInfo = "#053662"; // Border stroke for general/informational messages +export const bcdsSupportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages +export const bcdsSupportBorderColorSuccess = "#42814A"; // Border stroke for success messages +export const bcdsSupportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages +export const bcdsIconsSizeXsmall = "14px"; // Smallest icon size export const bcdsIconsSizeSmall = "16px"; -export const bcdsIconsSizeMedium = "20px"; +export const bcdsIconsSizeMedium = "20px"; // Default icon size export const bcdsIconsSizeLarge = "24px"; -export const bcdsIconsSizeXlarge = "32px"; -export const bcdsIconsColorPrimary = "#2D2D2D"; -export const bcdsIconsColorSecondary = "#474543"; -export const bcdsIconsColorDisabled = "#9F9D9C"; -export const bcdsIconsColorLink = "#255A90"; -export const bcdsIconsColorInfo = "#053662"; -export const bcdsIconsColorDanger = "#CE3E39"; -export const bcdsIconsColorSuccess = "#42814A"; -export const bcdsIconsColorWarning = "#F8BB47"; -export const bcdsIconsColorPrimaryInvert = "#FFFFFF"; +export const bcdsIconsSizeXlarge = "32px"; // Largest icon size +export const bcdsIconsColorPrimary = "#2D2D2D"; // Default colour for icons +export const bcdsIconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons +export const bcdsIconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons +export const bcdsIconsColorLink = "#255A90"; // Use for hyperlinked icons +export const bcdsIconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state +export const bcdsIconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state +export const bcdsIconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state +export const bcdsIconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state +export const bcdsIconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds export const bcdsLayoutBorderWidthNone = "0"; export const bcdsLayoutBorderWidthSmall = "1px"; export const bcdsLayoutBorderWidthMedium = "2px"; export const bcdsLayoutBorderWidthLarge = "4px"; -export const bcdsLayoutPaddingNone = "0"; +export const bcdsLayoutPaddingNone = "0"; // No padding +export const bcdsLayoutPaddingHair = "0.125rem"; // Smallest padding value for layout export const bcdsLayoutPaddingXsmall = "0.25rem"; export const bcdsLayoutPaddingSmall = "0.5rem"; -export const bcdsLayoutPaddingMedium = "1rem"; +export const bcdsLayoutPaddingMedium = "1rem"; // Default padding value for layout export const bcdsLayoutPaddingLarge = "1.5rem"; -export const bcdsLayoutPaddingXlarge = "2rem"; -export const bcdsLayoutMarginNone = "0rem"; -export const bcdsLayoutMarginHair = "0.125rem"; +export const bcdsLayoutPaddingXlarge = "2rem"; // Largest padding value for layout +export const bcdsLayoutMarginNone = "0rem"; // No margin +export const bcdsLayoutMarginHair = "0.125rem"; // Smallest margin value for layout export const bcdsLayoutMarginXsmall = "0.25rem"; -export const bcdsLayoutMarginSmall = "0.5rem"; +export const bcdsLayoutMarginSmall = "0.5rem"; // Default margin value for layout export const bcdsLayoutMarginMedium = "1rem"; export const bcdsLayoutMarginLarge = "1.5rem"; export const bcdsLayoutMarginXlarge = "2rem"; export const bcdsLayoutMarginXxlarge = "2.5rem"; export const bcdsLayoutMarginXxxlarge = "3rem"; -export const bcdsLayoutMarginHuge = "3.5rem"; +export const bcdsLayoutMarginHuge = "3.5rem"; // Largest margin value for layout export const bcdsLayoutBorderRadiusNone = "0"; export const bcdsLayoutBorderRadiusSmall = "2px"; export const bcdsLayoutBorderRadiusMedium = "4px"; export const bcdsLayoutBorderRadiusLarge = "6px"; -export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'"; -export const bcdsTypographyLineHeightsXxxdense = "1.125rem"; +export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package +export const bcdsTypographyLineHeightsXxxdense = "1.125rem"; // Smallest line height export const bcdsTypographyLineHeightsXxdense = "1.313rem"; export const bcdsTypographyLineHeightsXdense = "1.688rem"; export const bcdsTypographyLineHeightsDense = "1.913rem"; -export const bcdsTypographyLineHeightsRegular = "2.125rem"; +export const bcdsTypographyLineHeightsRegular = "2.125rem"; // Default line height export const bcdsTypographyLineHeightsSparse = "2.25rem"; export const bcdsTypographyLineHeightsXsparse = "3rem"; -export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; -export const bcdsTypographyLineHeightsAuto = "AUTO"; -export const bcdsTypographyFontWeightsRegular = 400; -export const bcdsTypographyFontWeightsBold = 700; +export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; // Largest line height +export const bcdsTypographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles +export const bcdsTypographyFontWeightsRegular = 400; // System token, used to generate text styles +export const bcdsTypographyFontWeightsBold = 700; // System token, used to generate text styles export const bcdsTypographyFontWeightsItalic = "Italic"; // DEPRECATED - will be removed in next major version. -export const bcdsTypographyFontWeightsItalicWeight = 400; -export const bcdsTypographyFontWeightsItalicStyle = "italic"; +export const bcdsTypographyFontWeightsItalicWeight = 400; // System token, used to generate text styles +export const bcdsTypographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles export const bcdsTypographyFontSizeLabel = "0.75rem"; export const bcdsTypographyFontSizeSmallBody = "0.875rem"; export const bcdsTypographyFontSizeBody = "1rem"; @@ -113,83 +126,83 @@ export const bcdsTypographyFontSizeH3 = "1.75rem"; export const bcdsTypographyFontSizeH2 = "2rem"; export const bcdsTypographyFontSizeH1 = "2.25rem"; export const bcdsTypographyFontSizeDisplay = "3rem"; -export const bcdsTypographyLetterSpacing0 = "0em"; -export const bcdsTypographyParagraphSpacing0 = "0"; -export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; -export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; -export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; -export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; -export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; -export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; -export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; -export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; -export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; -export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; -export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; -export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; +export const bcdsTypographyLetterSpacing0 = "0em"; // System token, used to generate type styles +export const bcdsTypographyParagraphSpacing0 = "0"; // System token, used to generate type styles +export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions +export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text +export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text +export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text +export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6 +export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5 +export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4 +export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3 +export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2 +export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1 +export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings +export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded) +export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded) +export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded) +export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded) +export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings +export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic) +export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic) +export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic) +export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic) +export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6 +export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5 +export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4 +export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3 +export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2 +export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1 +export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings export const bcdsTypographyTextCaseNone = "none"; -export const bcdsTypographyTextDecorationNone = "none"; -export const bcdsTypographyParagraphIndent0 = "0px"; -export const bcdsTypographyColorPrimary = "#2D2D2D"; -export const bcdsTypographyColorSecondary = "#474543"; -export const bcdsTypographyColorPlaceholder = "#9F9D9C"; -export const bcdsTypographyColorDisabled = "#9F9D9C"; -export const bcdsTypographyColorLink = "#255A90"; -export const bcdsTypographyColorDanger = "#CE3E39"; -export const bcdsTypographyColorPrimaryInvert = "#FFFFFF"; -export const bcdsTypographyColorSecondaryInvert = "#ECEAE8"; -export const bcdsThemeGold10 = "#FEF8E8"; -export const bcdsThemeGold20 = "#FEF0D8"; -export const bcdsThemeGold30 = "#FDE9C4"; -export const bcdsThemeGold40 = "#FCE2B0"; -export const bcdsThemeGold50 = "#FBDA9D"; -export const bcdsThemeGold60 = "#FBD389"; -export const bcdsThemeGold70 = "#FACC75"; -export const bcdsThemeGold80 = "#F9C462"; -export const bcdsThemeGold90 = "#F8BA47"; -export const bcdsThemeGold100 = "#FCBA19"; -export const bcdsThemeBlue10 = "#F1F8FE"; -export const bcdsThemeBlue20 = "#D8EAFD"; -export const bcdsThemeBlue30 = "#C1DDFC"; -export const bcdsThemeBlue40 = "#A8D0FB"; -export const bcdsThemeBlue50 = "#91C4FA"; -export const bcdsThemeBlue60 = "#7AB8F9"; -export const bcdsThemeBlue70 = "#5595D9"; -export const bcdsThemeBlue80 = "#3470B1"; -export const bcdsThemeBlue90 = "#1E5189"; -export const bcdsThemeBlue100 = "#013366"; -export const bcdsThemeGray10 = "#FAF9F8"; -export const bcdsThemeGray20 = "#F3F2F1"; -export const bcdsThemeGray30 = "#ECEAE8"; -export const bcdsThemeGray40 = "#E0DEDC"; -export const bcdsThemeGray50 = "#D1CFCD"; -export const bcdsThemeGray60 = "#C6C5C3"; -export const bcdsThemeGray70 = "#9F9D9C"; -export const bcdsThemeGray80 = "#605E5C"; -export const bcdsThemeGray90 = "#3D3C3B"; -export const bcdsThemeGray100 = "#353433"; -export const bcdsThemeGray110 = "#252423"; -export const bcdsThemeGrayWhite = "#FFFFFF"; -export const bcdsThemePrimaryBlue = "#013366"; -export const bcdsThemePrimaryGold = "#FCBA19"; +export const bcdsTypographyTextDecorationNone = "none"; // System token, used to generate type styles +export const bcdsTypographyParagraphIndent0 = "0px"; // System token, used to generate type styles +export const bcdsTypographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings +export const bcdsTypographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text +export const bcdsTypographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms +export const bcdsTypographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements +export const bcdsTypographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings +export const bcdsTypographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text +export const bcdsTypographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds +export const bcdsTypographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds +export const bcdsThemeGold10 = "#FEF8E8"; // Gold scale — lightest +export const bcdsThemeGold20 = "#FEF0D8"; // Gold scale +export const bcdsThemeGold30 = "#FDE9C4"; // Gold scale +export const bcdsThemeGold40 = "#FCE2B0"; // Gold scale +export const bcdsThemeGold50 = "#FBDA9D"; // Gold scale +export const bcdsThemeGold60 = "#FBD389"; // Gold scale +export const bcdsThemeGold70 = "#FACC75"; // Gold scale +export const bcdsThemeGold80 = "#F9C462"; // Gold scale +export const bcdsThemeGold90 = "#F8BA47"; // Gold scale +export const bcdsThemeGold100 = "#FCBA19"; // Gold scale — darkest +export const bcdsThemeBlue10 = "#F1F8FE"; // Blue scale — lightest +export const bcdsThemeBlue20 = "#D8EAFD"; // Blue scale +export const bcdsThemeBlue30 = "#C1DDFC"; // Blue scale +export const bcdsThemeBlue40 = "#A8D0FB"; // Blue scale +export const bcdsThemeBlue50 = "#91C4FA"; // Blue scale +export const bcdsThemeBlue60 = "#7AB8F9"; // Blue scale +export const bcdsThemeBlue70 = "#5595D9"; // Blue scale +export const bcdsThemeBlue80 = "#3470B1"; // Blue scale +export const bcdsThemeBlue90 = "#1E5189"; // Blue scale +export const bcdsThemeBlue100 = "#013366"; // Blue scale — darkest +export const bcdsThemeGray10 = "#FAF9F8"; // Greyscale — lightest +export const bcdsThemeGray20 = "#F3F2F1"; // Greyscale +export const bcdsThemeGray30 = "#ECEAE8"; // Greyscale +export const bcdsThemeGray40 = "#E0DEDC"; // Greyscale +export const bcdsThemeGray50 = "#D1CFCD"; // Greyscale +export const bcdsThemeGray60 = "#C6C5C3"; // Greyscale +export const bcdsThemeGray70 = "#9F9D9C"; // Greyscale +export const bcdsThemeGray80 = "#605E5C"; // Greyscale +export const bcdsThemeGray90 = "#3D3C3B"; // Greyscale +export const bcdsThemeGray100 = "#353433"; // Greyscale +export const bcdsThemeGray110 = "#252423"; // Greyscale — darkest +export const bcdsThemeGrayWhite = "#FFFFFF"; // White +export const bcdsThemePrimaryBlue = "#013366"; // Primary Blue (Blue 100) +export const bcdsThemePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100) diff --git a/packages/design-tokens/build/js/index.d.ts b/packages/design-tokens/build/js/index.d.ts index 1701a205..71e5317d 100644 --- a/packages/design-tokens/build/js/index.d.ts +++ b/packages/design-tokens/build/js/index.d.ts @@ -13,99 +13,186 @@ export const surfaceOpacity70 : number; export const surfaceOpacity80 : number; export const surfaceOpacity90 : number; export const surfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const surfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const surfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const surfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const surfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const surfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const surfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const surfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const surfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const surfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const surfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const surfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const surfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const surfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const surfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const surfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const surfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const surfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const surfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const surfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const surfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const surfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const surfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const surfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const surfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const surfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const surfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const surfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const surfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const surfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const surfaceColorFormsDisabled : string; +/** White background */ export const surfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const surfaceColorBackgroundLightGray : string; +/** Light blue background */ export const surfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const surfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const surfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const surfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const surfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const surfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const surfaceColorOverlayDefault : string; export const supportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const supportSurfaceColorDanger : string; +/** Background colour for success messages */ export const supportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const supportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const supportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const supportBorderColorDanger : string; +/** Border stroke for success messages */ export const supportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const supportBorderColorWarning : string; +/** Smallest icon size */ export const iconsSizeXsmall : string; export const iconsSizeSmall : string; +/** Default icon size */ export const iconsSizeMedium : string; export const iconsSizeLarge : string; +/** Largest icon size */ export const iconsSizeXlarge : string; +/** Default colour for icons */ export const iconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const iconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const iconsColorDisabled : string; +/** Use for hyperlinked icons */ export const iconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const iconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const iconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const iconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const iconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const iconsColorPrimaryInvert : string; export const layoutBorderWidthNone : string; export const layoutBorderWidthSmall : string; export const layoutBorderWidthMedium : string; export const layoutBorderWidthLarge : string; +/** No padding */ export const layoutPaddingNone : string; +/** Smallest padding value for layout */ +export const layoutPaddingHair : string; export const layoutPaddingXsmall : string; export const layoutPaddingSmall : string; +/** Default padding value for layout */ export const layoutPaddingMedium : string; export const layoutPaddingLarge : string; +/** Largest padding value for layout */ export const layoutPaddingXlarge : string; +/** No margin */ export const layoutMarginNone : string; +/** Smallest margin value for layout */ export const layoutMarginHair : string; export const layoutMarginXsmall : string; +/** Default margin value for layout */ export const layoutMarginSmall : string; export const layoutMarginMedium : string; export const layoutMarginLarge : string; export const layoutMarginXlarge : string; export const layoutMarginXxlarge : string; export const layoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const layoutMarginHuge : string; export const layoutBorderRadiusNone : string; export const layoutBorderRadiusSmall : string; export const layoutBorderRadiusMedium : string; export const layoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const typographyFontFamiliesBcSans : string; +/** Smallest line height */ export const typographyLineHeightsXxxdense : string; export const typographyLineHeightsXxdense : string; export const typographyLineHeightsXdense : string; export const typographyLineHeightsDense : string; +/** Default line height */ export const typographyLineHeightsRegular : string; export const typographyLineHeightsSparse : string; export const typographyLineHeightsXsparse : string; +/** Largest line height */ export const typographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const typographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const typographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const typographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const typographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicStyle : string; export const typographyFontSizeLabel : string; export const typographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const typographyFontSizeH3 : string; export const typographyFontSizeH2 : string; export const typographyFontSizeH1 : string; export const typographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const typographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const typographyParagraphSpacing0 : string; +/** Labels and captions */ export const typographyRegularLabel : string; +/** Smaller body text */ export const typographyRegularSmallBody : string; +/** Default body text */ export const typographyRegularBody : string; +/** Larger body text */ export const typographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const typographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const typographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const typographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const typographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const typographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const typographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const typographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const typographyBoldLabel : string; +/** Default for small body text (bolded) */ export const typographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const typographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const typographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const typographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const typographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const typographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const typographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const typographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const typographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const typographyBoldDisplay : string; +/** Labels and captions (italic) */ export const typographyItalicLabel : string; +/** Small body text (italic) */ export const typographyItalicSmallBody : string; +/** Default for body text (italic) */ export const typographyItalicBody : string; +/** Larger text size for body text (italic) */ export const typographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const typographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const typographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const typographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const typographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const typographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const typographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const typographyItalicDisplay : string; export const typographyTextCaseNone : string; +/** System token, used to generate type styles */ export const typographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const typographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const typographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const typographyColorSecondary : string; +/** Use for placeholder text in forms */ export const typographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const typographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const typographyColorLink : string; +/** Use for error, failure or danger message text */ export const typographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const typographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const typographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const themeGold10 : string; +/** Gold scale */ export const themeGold20 : string; +/** Gold scale */ export const themeGold30 : string; +/** Gold scale */ export const themeGold40 : string; +/** Gold scale */ export const themeGold50 : string; +/** Gold scale */ export const themeGold60 : string; +/** Gold scale */ export const themeGold70 : string; +/** Gold scale */ export const themeGold80 : string; +/** Gold scale */ export const themeGold90 : string; +/** Gold scale — darkest */ export const themeGold100 : string; +/** Blue scale — lightest */ export const themeBlue10 : string; +/** Blue scale */ export const themeBlue20 : string; +/** Blue scale */ export const themeBlue30 : string; +/** Blue scale */ export const themeBlue40 : string; +/** Blue scale */ export const themeBlue50 : string; +/** Blue scale */ export const themeBlue60 : string; +/** Blue scale */ export const themeBlue70 : string; +/** Blue scale */ export const themeBlue80 : string; +/** Blue scale */ export const themeBlue90 : string; +/** Blue scale — darkest */ export const themeBlue100 : string; +/** Greyscale — lightest */ export const themeGray10 : string; +/** Greyscale */ export const themeGray20 : string; +/** Greyscale */ export const themeGray30 : string; +/** Greyscale */ export const themeGray40 : string; +/** Greyscale */ export const themeGray50 : string; +/** Greyscale */ export const themeGray60 : string; +/** Greyscale */ export const themeGray70 : string; +/** Greyscale */ export const themeGray80 : string; +/** Greyscale */ export const themeGray90 : string; +/** Greyscale */ export const themeGray100 : string; +/** Greyscale — darkest */ export const themeGray110 : string; +/** White */ export const themeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const themePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const themePrimaryGold : string; diff --git a/packages/design-tokens/build/js/index.js b/packages/design-tokens/build/js/index.js index 8d17bdb4..58ace5b6 100644 --- a/packages/design-tokens/build/js/index.js +++ b/packages/design-tokens/build/js/index.js @@ -13,96 +13,109 @@ export const surfaceOpacity70 = 0.7; export const surfaceOpacity80 = 0.8; export const surfaceOpacity90 = 0.9; export const surfaceOpacity100 = 1; -export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; -export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards -export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips -export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs -export const surfaceColorPrimaryButtonDefault = "#013366"; -export const surfaceColorPrimaryButtonHover = "#1E5189"; -export const surfaceColorPrimaryButtonDisabled = "#EDEBE9"; -export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39"; -export const surfaceColorPrimaryDangerButtonHover = "#A2312D"; -export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; -export const surfaceColorSecondaryButtonDefault = "#FFFFFF"; -export const surfaceColorSecondaryButtonHover = "#EDEBE9"; -export const surfaceColorSecondaryButtonDisabled = "#EDEBE9"; -export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; -export const surfaceColorTertiaryButtonHover = "#ECEAE8"; -export const surfaceColorTertiaryButtonDisabled = "#EDEBE9"; -export const surfaceColorMenusDefault = "#FFFFFF"; -export const surfaceColorMenusHover = "#EDEBE9"; -export const surfaceColorFormsDefault = "#FFFFFF"; -export const surfaceColorFormsDisabled = "#EDEBE9"; -export const surfaceColorBackgroundWhite = "#FFFFFF"; -export const surfaceColorBackgroundLightGray = "#FAF9F8"; -export const surfaceColorBackgroundLightBlue = "#F1F8FE"; -export const surfaceColorBackgroundDarkBlue = "#053662"; -export const surfaceColorBorderDefault = "#D8D8D8"; -export const surfaceColorBorderMedium = "#898785"; -export const surfaceColorBorderDark = "#353433"; -export const surfaceColorBorderActive = "#2E5DD7"; -export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; +export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; // Default shadow for most content and UI elements +export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements +export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Standard shadow for UI elements like cards and buttons +export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly +export const surfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons +export const surfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button +export const surfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons +export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state +export const surfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button +export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button +export const surfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout +export const surfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default +export const surfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default +export const surfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default +export const surfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons +export const surfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button +export const surfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons +export const surfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout +export const surfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default +export const surfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default +export const surfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default +export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons +export const surfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button +export const surfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons +export const surfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout +export const surfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default +export const surfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default +export const surfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default +export const surfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items +export const surfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item +export const surfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields +export const surfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields +export const surfaceColorBackgroundWhite = "#FFFFFF"; // White background +export const surfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout +export const surfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background +export const surfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background +export const surfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements +export const surfaceColorBorderMedium = "#898785"; // Default border colour for UI elements +export const surfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs +export const surfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements +export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues export const supportSurfaceColorInfo = "#F7F9FC"; -export const supportSurfaceColorDanger = "#F4E1E2"; -export const supportSurfaceColorSuccess = "#F6FFF8"; -export const supportSurfaceColorWarning = "#FEF1D8"; -export const supportBorderColorInfo = "#053662"; -export const supportBorderColorDanger = "#CE3E39"; -export const supportBorderColorSuccess = "#42814A"; -export const supportBorderColorWarning = "#F8BB47"; -export const iconsSizeXsmall = "14px"; +export const supportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages +export const supportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages +export const supportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages +export const supportBorderColorInfo = "#053662"; // Border stroke for general/informational messages +export const supportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages +export const supportBorderColorSuccess = "#42814A"; // Border stroke for success messages +export const supportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages +export const iconsSizeXsmall = "14px"; // Smallest icon size export const iconsSizeSmall = "16px"; -export const iconsSizeMedium = "20px"; +export const iconsSizeMedium = "20px"; // Default icon size export const iconsSizeLarge = "24px"; -export const iconsSizeXlarge = "32px"; -export const iconsColorPrimary = "#2D2D2D"; -export const iconsColorSecondary = "#474543"; -export const iconsColorDisabled = "#9F9D9C"; -export const iconsColorLink = "#255A90"; -export const iconsColorInfo = "#053662"; -export const iconsColorDanger = "#CE3E39"; -export const iconsColorSuccess = "#42814A"; -export const iconsColorWarning = "#F8BB47"; -export const iconsColorPrimaryInvert = "#FFFFFF"; +export const iconsSizeXlarge = "32px"; // Largest icon size +export const iconsColorPrimary = "#2D2D2D"; // Default colour for icons +export const iconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons +export const iconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons +export const iconsColorLink = "#255A90"; // Use for hyperlinked icons +export const iconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state +export const iconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state +export const iconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state +export const iconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state +export const iconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds export const layoutBorderWidthNone = "0"; export const layoutBorderWidthSmall = "1px"; export const layoutBorderWidthMedium = "2px"; export const layoutBorderWidthLarge = "4px"; -export const layoutPaddingNone = "0"; +export const layoutPaddingNone = "0"; // No padding +export const layoutPaddingHair = "0.125rem"; // Smallest padding value for layout export const layoutPaddingXsmall = "0.25rem"; export const layoutPaddingSmall = "0.5rem"; -export const layoutPaddingMedium = "1rem"; +export const layoutPaddingMedium = "1rem"; // Default padding value for layout export const layoutPaddingLarge = "1.5rem"; -export const layoutPaddingXlarge = "2rem"; -export const layoutMarginNone = "0rem"; -export const layoutMarginHair = "0.125rem"; +export const layoutPaddingXlarge = "2rem"; // Largest padding value for layout +export const layoutMarginNone = "0rem"; // No margin +export const layoutMarginHair = "0.125rem"; // Smallest margin value for layout export const layoutMarginXsmall = "0.25rem"; -export const layoutMarginSmall = "0.5rem"; +export const layoutMarginSmall = "0.5rem"; // Default margin value for layout export const layoutMarginMedium = "1rem"; export const layoutMarginLarge = "1.5rem"; export const layoutMarginXlarge = "2rem"; export const layoutMarginXxlarge = "2.5rem"; export const layoutMarginXxxlarge = "3rem"; -export const layoutMarginHuge = "3.5rem"; +export const layoutMarginHuge = "3.5rem"; // Largest margin value for layout export const layoutBorderRadiusNone = "0"; export const layoutBorderRadiusSmall = "2px"; export const layoutBorderRadiusMedium = "4px"; export const layoutBorderRadiusLarge = "6px"; -export const typographyFontFamiliesBcSans = "'BC Sans'"; -export const typographyLineHeightsXxxdense = "1.125rem"; +export const typographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package +export const typographyLineHeightsXxxdense = "1.125rem"; // Smallest line height export const typographyLineHeightsXxdense = "1.313rem"; export const typographyLineHeightsXdense = "1.688rem"; export const typographyLineHeightsDense = "1.913rem"; -export const typographyLineHeightsRegular = "2.125rem"; +export const typographyLineHeightsRegular = "2.125rem"; // Default line height export const typographyLineHeightsSparse = "2.25rem"; export const typographyLineHeightsXsparse = "3rem"; -export const typographyLineHeightsXxsparse = "3.375rem"; -export const typographyLineHeightsAuto = "AUTO"; -export const typographyFontWeightsRegular = 400; -export const typographyFontWeightsBold = 700; +export const typographyLineHeightsXxsparse = "3.375rem"; // Largest line height +export const typographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles +export const typographyFontWeightsRegular = 400; // System token, used to generate text styles +export const typographyFontWeightsBold = 700; // System token, used to generate text styles export const typographyFontWeightsItalic = "Italic"; // DEPRECATED - will be removed in next major version. -export const typographyFontWeightsItalicWeight = 400; -export const typographyFontWeightsItalicStyle = "italic"; +export const typographyFontWeightsItalicWeight = 400; // System token, used to generate text styles +export const typographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles export const typographyFontSizeLabel = "0.75rem"; export const typographyFontSizeSmallBody = "0.875rem"; export const typographyFontSizeBody = "1rem"; @@ -113,83 +126,83 @@ export const typographyFontSizeH3 = "1.75rem"; export const typographyFontSizeH2 = "2rem"; export const typographyFontSizeH1 = "2.25rem"; export const typographyFontSizeDisplay = "3rem"; -export const typographyLetterSpacing0 = "0em"; -export const typographyParagraphSpacing0 = "0"; -export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; -export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; -export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; -export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; -export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; -export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; -export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; -export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; -export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; -export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; -export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; -export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; -export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; -export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; -export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; -export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; -export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; -export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; -export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; -export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; -export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; -export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; -export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; -export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; -export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; -export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; -export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; -export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; -export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; -export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; -export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; +export const typographyLetterSpacing0 = "0em"; // System token, used to generate type styles +export const typographyParagraphSpacing0 = "0"; // System token, used to generate type styles +export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions +export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text +export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text +export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text +export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6 +export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5 +export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4 +export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3 +export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2 +export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1 +export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings +export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded) +export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded) +export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded) +export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded) +export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings +export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic) +export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic) +export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic) +export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic) +export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6 +export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5 +export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4 +export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3 +export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2 +export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1 +export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings export const typographyTextCaseNone = "none"; -export const typographyTextDecorationNone = "none"; -export const typographyParagraphIndent0 = "0px"; -export const typographyColorPrimary = "#2D2D2D"; -export const typographyColorSecondary = "#474543"; -export const typographyColorPlaceholder = "#9F9D9C"; -export const typographyColorDisabled = "#9F9D9C"; -export const typographyColorLink = "#255A90"; -export const typographyColorDanger = "#CE3E39"; -export const typographyColorPrimaryInvert = "#FFFFFF"; -export const typographyColorSecondaryInvert = "#ECEAE8"; -export const themeGold10 = "#FEF8E8"; -export const themeGold20 = "#FEF0D8"; -export const themeGold30 = "#FDE9C4"; -export const themeGold40 = "#FCE2B0"; -export const themeGold50 = "#FBDA9D"; -export const themeGold60 = "#FBD389"; -export const themeGold70 = "#FACC75"; -export const themeGold80 = "#F9C462"; -export const themeGold90 = "#F8BA47"; -export const themeGold100 = "#FCBA19"; -export const themeBlue10 = "#F1F8FE"; -export const themeBlue20 = "#D8EAFD"; -export const themeBlue30 = "#C1DDFC"; -export const themeBlue40 = "#A8D0FB"; -export const themeBlue50 = "#91C4FA"; -export const themeBlue60 = "#7AB8F9"; -export const themeBlue70 = "#5595D9"; -export const themeBlue80 = "#3470B1"; -export const themeBlue90 = "#1E5189"; -export const themeBlue100 = "#013366"; -export const themeGray10 = "#FAF9F8"; -export const themeGray20 = "#F3F2F1"; -export const themeGray30 = "#ECEAE8"; -export const themeGray40 = "#E0DEDC"; -export const themeGray50 = "#D1CFCD"; -export const themeGray60 = "#C6C5C3"; -export const themeGray70 = "#9F9D9C"; -export const themeGray80 = "#605E5C"; -export const themeGray90 = "#3D3C3B"; -export const themeGray100 = "#353433"; -export const themeGray110 = "#252423"; -export const themeGrayWhite = "#FFFFFF"; -export const themePrimaryBlue = "#013366"; -export const themePrimaryGold = "#FCBA19"; +export const typographyTextDecorationNone = "none"; // System token, used to generate type styles +export const typographyParagraphIndent0 = "0px"; // System token, used to generate type styles +export const typographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings +export const typographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text +export const typographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms +export const typographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements +export const typographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings +export const typographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text +export const typographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds +export const typographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds +export const themeGold10 = "#FEF8E8"; // Gold scale — lightest +export const themeGold20 = "#FEF0D8"; // Gold scale +export const themeGold30 = "#FDE9C4"; // Gold scale +export const themeGold40 = "#FCE2B0"; // Gold scale +export const themeGold50 = "#FBDA9D"; // Gold scale +export const themeGold60 = "#FBD389"; // Gold scale +export const themeGold70 = "#FACC75"; // Gold scale +export const themeGold80 = "#F9C462"; // Gold scale +export const themeGold90 = "#F8BA47"; // Gold scale +export const themeGold100 = "#FCBA19"; // Gold scale — darkest +export const themeBlue10 = "#F1F8FE"; // Blue scale — lightest +export const themeBlue20 = "#D8EAFD"; // Blue scale +export const themeBlue30 = "#C1DDFC"; // Blue scale +export const themeBlue40 = "#A8D0FB"; // Blue scale +export const themeBlue50 = "#91C4FA"; // Blue scale +export const themeBlue60 = "#7AB8F9"; // Blue scale +export const themeBlue70 = "#5595D9"; // Blue scale +export const themeBlue80 = "#3470B1"; // Blue scale +export const themeBlue90 = "#1E5189"; // Blue scale +export const themeBlue100 = "#013366"; // Blue scale — darkest +export const themeGray10 = "#FAF9F8"; // Greyscale — lightest +export const themeGray20 = "#F3F2F1"; // Greyscale +export const themeGray30 = "#ECEAE8"; // Greyscale +export const themeGray40 = "#E0DEDC"; // Greyscale +export const themeGray50 = "#D1CFCD"; // Greyscale +export const themeGray60 = "#C6C5C3"; // Greyscale +export const themeGray70 = "#9F9D9C"; // Greyscale +export const themeGray80 = "#605E5C"; // Greyscale +export const themeGray90 = "#3D3C3B"; // Greyscale +export const themeGray100 = "#353433"; // Greyscale +export const themeGray110 = "#252423"; // Greyscale — darkest +export const themeGrayWhite = "#FFFFFF"; // White +export const themePrimaryBlue = "#013366"; // Primary Blue (Blue 100) +export const themePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100) diff --git a/packages/design-tokens/dist/cjs-prefixed/index.d.ts b/packages/design-tokens/dist/cjs-prefixed/index.d.ts index fb10e09e..8c17e3fa 100644 --- a/packages/design-tokens/dist/cjs-prefixed/index.d.ts +++ b/packages/design-tokens/dist/cjs-prefixed/index.d.ts @@ -13,99 +13,186 @@ export const bcdsSurfaceOpacity70 : number; export const bcdsSurfaceOpacity80 : number; export const bcdsSurfaceOpacity90 : number; export const bcdsSurfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const bcdsSurfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const bcdsSurfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const bcdsSurfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const bcdsSurfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const bcdsSurfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const bcdsSurfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const bcdsSurfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const bcdsSurfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const bcdsSurfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const bcdsSurfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const bcdsSurfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const bcdsSurfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const bcdsSurfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const bcdsSurfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const bcdsSurfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const bcdsSurfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const bcdsSurfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const bcdsSurfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const bcdsSurfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const bcdsSurfaceColorFormsDisabled : string; +/** White background */ export const bcdsSurfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const bcdsSurfaceColorBackgroundLightGray : string; +/** Light blue background */ export const bcdsSurfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const bcdsSurfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const bcdsSurfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const bcdsSurfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const bcdsSurfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const bcdsSurfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const bcdsSurfaceColorOverlayDefault : string; export const bcdsSupportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const bcdsSupportSurfaceColorDanger : string; +/** Background colour for success messages */ export const bcdsSupportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const bcdsSupportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const bcdsSupportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const bcdsSupportBorderColorDanger : string; +/** Border stroke for success messages */ export const bcdsSupportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const bcdsSupportBorderColorWarning : string; +/** Smallest icon size */ export const bcdsIconsSizeXsmall : string; export const bcdsIconsSizeSmall : string; +/** Default icon size */ export const bcdsIconsSizeMedium : string; export const bcdsIconsSizeLarge : string; +/** Largest icon size */ export const bcdsIconsSizeXlarge : string; +/** Default colour for icons */ export const bcdsIconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const bcdsIconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const bcdsIconsColorDisabled : string; +/** Use for hyperlinked icons */ export const bcdsIconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const bcdsIconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const bcdsIconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const bcdsIconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const bcdsIconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const bcdsIconsColorPrimaryInvert : string; export const bcdsLayoutBorderWidthNone : string; export const bcdsLayoutBorderWidthSmall : string; export const bcdsLayoutBorderWidthMedium : string; export const bcdsLayoutBorderWidthLarge : string; +/** No padding */ export const bcdsLayoutPaddingNone : string; +/** Smallest padding value for layout */ +export const bcdsLayoutPaddingHair : string; export const bcdsLayoutPaddingXsmall : string; export const bcdsLayoutPaddingSmall : string; +/** Default padding value for layout */ export const bcdsLayoutPaddingMedium : string; export const bcdsLayoutPaddingLarge : string; +/** Largest padding value for layout */ export const bcdsLayoutPaddingXlarge : string; +/** No margin */ export const bcdsLayoutMarginNone : string; +/** Smallest margin value for layout */ export const bcdsLayoutMarginHair : string; export const bcdsLayoutMarginXsmall : string; +/** Default margin value for layout */ export const bcdsLayoutMarginSmall : string; export const bcdsLayoutMarginMedium : string; export const bcdsLayoutMarginLarge : string; export const bcdsLayoutMarginXlarge : string; export const bcdsLayoutMarginXxlarge : string; export const bcdsLayoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const bcdsLayoutMarginHuge : string; export const bcdsLayoutBorderRadiusNone : string; export const bcdsLayoutBorderRadiusSmall : string; export const bcdsLayoutBorderRadiusMedium : string; export const bcdsLayoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const bcdsTypographyFontFamiliesBcSans : string; +/** Smallest line height */ export const bcdsTypographyLineHeightsXxxdense : string; export const bcdsTypographyLineHeightsXxdense : string; export const bcdsTypographyLineHeightsXdense : string; export const bcdsTypographyLineHeightsDense : string; +/** Default line height */ export const bcdsTypographyLineHeightsRegular : string; export const bcdsTypographyLineHeightsSparse : string; export const bcdsTypographyLineHeightsXsparse : string; +/** Largest line height */ export const bcdsTypographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const bcdsTypographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const bcdsTypographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicStyle : string; export const bcdsTypographyFontSizeLabel : string; export const bcdsTypographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const bcdsTypographyFontSizeH3 : string; export const bcdsTypographyFontSizeH2 : string; export const bcdsTypographyFontSizeH1 : string; export const bcdsTypographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const bcdsTypographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphSpacing0 : string; +/** Labels and captions */ export const bcdsTypographyRegularLabel : string; +/** Smaller body text */ export const bcdsTypographyRegularSmallBody : string; +/** Default body text */ export const bcdsTypographyRegularBody : string; +/** Larger body text */ export const bcdsTypographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const bcdsTypographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const bcdsTypographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const bcdsTypographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const bcdsTypographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const bcdsTypographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const bcdsTypographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const bcdsTypographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const bcdsTypographyBoldLabel : string; +/** Default for small body text (bolded) */ export const bcdsTypographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const bcdsTypographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const bcdsTypographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const bcdsTypographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const bcdsTypographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const bcdsTypographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const bcdsTypographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const bcdsTypographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const bcdsTypographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const bcdsTypographyBoldDisplay : string; +/** Labels and captions (italic) */ export const bcdsTypographyItalicLabel : string; +/** Small body text (italic) */ export const bcdsTypographyItalicSmallBody : string; +/** Default for body text (italic) */ export const bcdsTypographyItalicBody : string; +/** Larger text size for body text (italic) */ export const bcdsTypographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const bcdsTypographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const bcdsTypographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const bcdsTypographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const bcdsTypographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const bcdsTypographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const bcdsTypographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const bcdsTypographyItalicDisplay : string; export const bcdsTypographyTextCaseNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const bcdsTypographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const bcdsTypographyColorSecondary : string; +/** Use for placeholder text in forms */ export const bcdsTypographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const bcdsTypographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const bcdsTypographyColorLink : string; +/** Use for error, failure or danger message text */ export const bcdsTypographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const bcdsTypographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const bcdsTypographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const bcdsThemeGold10 : string; +/** Gold scale */ export const bcdsThemeGold20 : string; +/** Gold scale */ export const bcdsThemeGold30 : string; +/** Gold scale */ export const bcdsThemeGold40 : string; +/** Gold scale */ export const bcdsThemeGold50 : string; +/** Gold scale */ export const bcdsThemeGold60 : string; +/** Gold scale */ export const bcdsThemeGold70 : string; +/** Gold scale */ export const bcdsThemeGold80 : string; +/** Gold scale */ export const bcdsThemeGold90 : string; +/** Gold scale — darkest */ export const bcdsThemeGold100 : string; +/** Blue scale — lightest */ export const bcdsThemeBlue10 : string; +/** Blue scale */ export const bcdsThemeBlue20 : string; +/** Blue scale */ export const bcdsThemeBlue30 : string; +/** Blue scale */ export const bcdsThemeBlue40 : string; +/** Blue scale */ export const bcdsThemeBlue50 : string; +/** Blue scale */ export const bcdsThemeBlue60 : string; +/** Blue scale */ export const bcdsThemeBlue70 : string; +/** Blue scale */ export const bcdsThemeBlue80 : string; +/** Blue scale */ export const bcdsThemeBlue90 : string; +/** Blue scale — darkest */ export const bcdsThemeBlue100 : string; +/** Greyscale — lightest */ export const bcdsThemeGray10 : string; +/** Greyscale */ export const bcdsThemeGray20 : string; +/** Greyscale */ export const bcdsThemeGray30 : string; +/** Greyscale */ export const bcdsThemeGray40 : string; +/** Greyscale */ export const bcdsThemeGray50 : string; +/** Greyscale */ export const bcdsThemeGray60 : string; +/** Greyscale */ export const bcdsThemeGray70 : string; +/** Greyscale */ export const bcdsThemeGray80 : string; +/** Greyscale */ export const bcdsThemeGray90 : string; +/** Greyscale */ export const bcdsThemeGray100 : string; +/** Greyscale — darkest */ export const bcdsThemeGray110 : string; +/** White */ export const bcdsThemeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const bcdsThemePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const bcdsThemePrimaryGold : string; diff --git a/packages/design-tokens/dist/cjs-prefixed/index.js b/packages/design-tokens/dist/cjs-prefixed/index.js index 2069b695..7db75f0b 100644 --- a/packages/design-tokens/dist/cjs-prefixed/index.js +++ b/packages/design-tokens/dist/cjs-prefixed/index.js @@ -24,12 +24,24 @@ module.exports = { "bcdsSurfaceColorPrimaryDangerButtonDefault": "#CE3E39", "bcdsSurfaceColorPrimaryDangerButtonHover": "#A2312D", "bcdsSurfaceColorPrimaryDangerButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorPrimaryDefault": "#013366", + "bcdsSurfaceColorPrimaryHover": "#1E5189", + "bcdsSurfaceColorPrimaryPressed": "#01264C", + "bcdsSurfaceColorPrimaryDisabled": "#EDEBE9", "bcdsSurfaceColorSecondaryButtonDefault": "#FFFFFF", "bcdsSurfaceColorSecondaryButtonHover": "#EDEBE9", "bcdsSurfaceColorSecondaryButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorSecondaryDefault": "#FFFFFF", + "bcdsSurfaceColorSecondaryHover": "#EDEBE9", + "bcdsSurfaceColorSecondaryPressed": "#E0DEDC", + "bcdsSurfaceColorSecondaryDisabled": "#EDEBE9", "bcdsSurfaceColorTertiaryButtonDefault": "rgba(255,255,255,0)", "bcdsSurfaceColorTertiaryButtonHover": "#ECEAE8", "bcdsSurfaceColorTertiaryButtonDisabled": "#EDEBE9", + "bcdsSurfaceColorTertiaryDefault": "#FFFFFF", + "bcdsSurfaceColorTertiaryHover": "#ECEAE8", + "bcdsSurfaceColorTertiaryPressed": "#E0DEDC", + "bcdsSurfaceColorTertiaryDisabled": "#EDEBE9", "bcdsSurfaceColorMenusDefault": "#FFFFFF", "bcdsSurfaceColorMenusHover": "#EDEBE9", "bcdsSurfaceColorFormsDefault": "#FFFFFF", @@ -70,6 +82,7 @@ module.exports = { "bcdsLayoutBorderWidthMedium": "2px", "bcdsLayoutBorderWidthLarge": "4px", "bcdsLayoutPaddingNone": "0", + "bcdsLayoutPaddingHair": "0.125rem", "bcdsLayoutPaddingXsmall": "0.25rem", "bcdsLayoutPaddingSmall": "0.5rem", "bcdsLayoutPaddingMedium": "1rem", diff --git a/packages/design-tokens/dist/cjs/index.d.ts b/packages/design-tokens/dist/cjs/index.d.ts index 1701a205..71e5317d 100644 --- a/packages/design-tokens/dist/cjs/index.d.ts +++ b/packages/design-tokens/dist/cjs/index.d.ts @@ -13,99 +13,186 @@ export const surfaceOpacity70 : number; export const surfaceOpacity80 : number; export const surfaceOpacity90 : number; export const surfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const surfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const surfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const surfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const surfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const surfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const surfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const surfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const surfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const surfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const surfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const surfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const surfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const surfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const surfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const surfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const surfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const surfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const surfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const surfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const surfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const surfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const surfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const surfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const surfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const surfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const surfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const surfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const surfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const surfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const surfaceColorFormsDisabled : string; +/** White background */ export const surfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const surfaceColorBackgroundLightGray : string; +/** Light blue background */ export const surfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const surfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const surfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const surfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const surfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const surfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const surfaceColorOverlayDefault : string; export const supportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const supportSurfaceColorDanger : string; +/** Background colour for success messages */ export const supportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const supportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const supportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const supportBorderColorDanger : string; +/** Border stroke for success messages */ export const supportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const supportBorderColorWarning : string; +/** Smallest icon size */ export const iconsSizeXsmall : string; export const iconsSizeSmall : string; +/** Default icon size */ export const iconsSizeMedium : string; export const iconsSizeLarge : string; +/** Largest icon size */ export const iconsSizeXlarge : string; +/** Default colour for icons */ export const iconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const iconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const iconsColorDisabled : string; +/** Use for hyperlinked icons */ export const iconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const iconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const iconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const iconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const iconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const iconsColorPrimaryInvert : string; export const layoutBorderWidthNone : string; export const layoutBorderWidthSmall : string; export const layoutBorderWidthMedium : string; export const layoutBorderWidthLarge : string; +/** No padding */ export const layoutPaddingNone : string; +/** Smallest padding value for layout */ +export const layoutPaddingHair : string; export const layoutPaddingXsmall : string; export const layoutPaddingSmall : string; +/** Default padding value for layout */ export const layoutPaddingMedium : string; export const layoutPaddingLarge : string; +/** Largest padding value for layout */ export const layoutPaddingXlarge : string; +/** No margin */ export const layoutMarginNone : string; +/** Smallest margin value for layout */ export const layoutMarginHair : string; export const layoutMarginXsmall : string; +/** Default margin value for layout */ export const layoutMarginSmall : string; export const layoutMarginMedium : string; export const layoutMarginLarge : string; export const layoutMarginXlarge : string; export const layoutMarginXxlarge : string; export const layoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const layoutMarginHuge : string; export const layoutBorderRadiusNone : string; export const layoutBorderRadiusSmall : string; export const layoutBorderRadiusMedium : string; export const layoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const typographyFontFamiliesBcSans : string; +/** Smallest line height */ export const typographyLineHeightsXxxdense : string; export const typographyLineHeightsXxdense : string; export const typographyLineHeightsXdense : string; export const typographyLineHeightsDense : string; +/** Default line height */ export const typographyLineHeightsRegular : string; export const typographyLineHeightsSparse : string; export const typographyLineHeightsXsparse : string; +/** Largest line height */ export const typographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const typographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const typographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const typographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const typographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicStyle : string; export const typographyFontSizeLabel : string; export const typographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const typographyFontSizeH3 : string; export const typographyFontSizeH2 : string; export const typographyFontSizeH1 : string; export const typographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const typographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const typographyParagraphSpacing0 : string; +/** Labels and captions */ export const typographyRegularLabel : string; +/** Smaller body text */ export const typographyRegularSmallBody : string; +/** Default body text */ export const typographyRegularBody : string; +/** Larger body text */ export const typographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const typographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const typographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const typographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const typographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const typographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const typographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const typographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const typographyBoldLabel : string; +/** Default for small body text (bolded) */ export const typographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const typographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const typographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const typographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const typographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const typographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const typographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const typographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const typographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const typographyBoldDisplay : string; +/** Labels and captions (italic) */ export const typographyItalicLabel : string; +/** Small body text (italic) */ export const typographyItalicSmallBody : string; +/** Default for body text (italic) */ export const typographyItalicBody : string; +/** Larger text size for body text (italic) */ export const typographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const typographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const typographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const typographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const typographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const typographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const typographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const typographyItalicDisplay : string; export const typographyTextCaseNone : string; +/** System token, used to generate type styles */ export const typographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const typographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const typographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const typographyColorSecondary : string; +/** Use for placeholder text in forms */ export const typographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const typographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const typographyColorLink : string; +/** Use for error, failure or danger message text */ export const typographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const typographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const typographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const themeGold10 : string; +/** Gold scale */ export const themeGold20 : string; +/** Gold scale */ export const themeGold30 : string; +/** Gold scale */ export const themeGold40 : string; +/** Gold scale */ export const themeGold50 : string; +/** Gold scale */ export const themeGold60 : string; +/** Gold scale */ export const themeGold70 : string; +/** Gold scale */ export const themeGold80 : string; +/** Gold scale */ export const themeGold90 : string; +/** Gold scale — darkest */ export const themeGold100 : string; +/** Blue scale — lightest */ export const themeBlue10 : string; +/** Blue scale */ export const themeBlue20 : string; +/** Blue scale */ export const themeBlue30 : string; +/** Blue scale */ export const themeBlue40 : string; +/** Blue scale */ export const themeBlue50 : string; +/** Blue scale */ export const themeBlue60 : string; +/** Blue scale */ export const themeBlue70 : string; +/** Blue scale */ export const themeBlue80 : string; +/** Blue scale */ export const themeBlue90 : string; +/** Blue scale — darkest */ export const themeBlue100 : string; +/** Greyscale — lightest */ export const themeGray10 : string; +/** Greyscale */ export const themeGray20 : string; +/** Greyscale */ export const themeGray30 : string; +/** Greyscale */ export const themeGray40 : string; +/** Greyscale */ export const themeGray50 : string; +/** Greyscale */ export const themeGray60 : string; +/** Greyscale */ export const themeGray70 : string; +/** Greyscale */ export const themeGray80 : string; +/** Greyscale */ export const themeGray90 : string; +/** Greyscale */ export const themeGray100 : string; +/** Greyscale — darkest */ export const themeGray110 : string; +/** White */ export const themeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const themePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const themePrimaryGold : string; diff --git a/packages/design-tokens/dist/cjs/index.js b/packages/design-tokens/dist/cjs/index.js index 93c05f04..80e54046 100644 --- a/packages/design-tokens/dist/cjs/index.js +++ b/packages/design-tokens/dist/cjs/index.js @@ -24,12 +24,24 @@ module.exports = { "surfaceColorPrimaryDangerButtonDefault": "#CE3E39", "surfaceColorPrimaryDangerButtonHover": "#A2312D", "surfaceColorPrimaryDangerButtonDisabled": "#EDEBE9", + "surfaceColorPrimaryDefault": "#013366", + "surfaceColorPrimaryHover": "#1E5189", + "surfaceColorPrimaryPressed": "#01264C", + "surfaceColorPrimaryDisabled": "#EDEBE9", "surfaceColorSecondaryButtonDefault": "#FFFFFF", "surfaceColorSecondaryButtonHover": "#EDEBE9", "surfaceColorSecondaryButtonDisabled": "#EDEBE9", + "surfaceColorSecondaryDefault": "#FFFFFF", + "surfaceColorSecondaryHover": "#EDEBE9", + "surfaceColorSecondaryPressed": "#E0DEDC", + "surfaceColorSecondaryDisabled": "#EDEBE9", "surfaceColorTertiaryButtonDefault": "rgba(255,255,255,0)", "surfaceColorTertiaryButtonHover": "#ECEAE8", "surfaceColorTertiaryButtonDisabled": "#EDEBE9", + "surfaceColorTertiaryDefault": "#FFFFFF", + "surfaceColorTertiaryHover": "#ECEAE8", + "surfaceColorTertiaryPressed": "#E0DEDC", + "surfaceColorTertiaryDisabled": "#EDEBE9", "surfaceColorMenusDefault": "#FFFFFF", "surfaceColorMenusHover": "#EDEBE9", "surfaceColorFormsDefault": "#FFFFFF", @@ -70,6 +82,7 @@ module.exports = { "layoutBorderWidthMedium": "2px", "layoutBorderWidthLarge": "4px", "layoutPaddingNone": "0", + "layoutPaddingHair": "0.125rem", "layoutPaddingXsmall": "0.25rem", "layoutPaddingSmall": "0.5rem", "layoutPaddingMedium": "1rem", diff --git a/packages/design-tokens/dist/css-prefixed/variables.css b/packages/design-tokens/dist/css-prefixed/variables.css index 148917fb..9f4cb0c8 100644 --- a/packages/design-tokens/dist/css-prefixed/variables.css +++ b/packages/design-tokens/dist/css-prefixed/variables.css @@ -14,96 +14,109 @@ --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; - --bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */ - --bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */ - --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */ - --bcds-surface-color-primary-button-default: #013366; - --bcds-surface-color-primary-button-hover: #1E5189; - --bcds-surface-color-primary-button-disabled: #EDEBE9; - --bcds-surface-color-primary-danger-button-default: #CE3E39; - --bcds-surface-color-primary-danger-button-hover: #A2312D; - --bcds-surface-color-primary-danger-button-disabled: #EDEBE9; - --bcds-surface-color-secondary-button-default: #FFFFFF; - --bcds-surface-color-secondary-button-hover: #EDEBE9; - --bcds-surface-color-secondary-button-disabled: #EDEBE9; - --bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); - --bcds-surface-color-tertiary-button-hover: #ECEAE8; - --bcds-surface-color-tertiary-button-disabled: #EDEBE9; - --bcds-surface-color-menus-default: #FFFFFF; - --bcds-surface-color-menus-hover: #EDEBE9; - --bcds-surface-color-forms-default: #FFFFFF; - --bcds-surface-color-forms-disabled: #EDEBE9; - --bcds-surface-color-background-white: #FFFFFF; - --bcds-surface-color-background-light-gray: #FAF9F8; - --bcds-surface-color-background-light-blue: #F1F8FE; - --bcds-surface-color-background-dark-blue: #053662; - --bcds-surface-color-border-default: #D8D8D8; - --bcds-surface-color-border-medium: #898785; - --bcds-surface-color-border-dark: #353433; - --bcds-surface-color-border-active: #2E5DD7; - --bcds-surface-color-overlay-default: rgba(0,0,0,0.45); + --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-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: #FFFFFF; /* 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-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; - --bcds-support-surface-color-success: #F6FFF8; - --bcds-support-surface-color-warning: #FEF1D8; - --bcds-support-border-color-info: #053662; - --bcds-support-border-color-danger: #CE3E39; - --bcds-support-border-color-success: #42814A; - --bcds-support-border-color-warning: #F8BB47; - --bcds-icons-size-xsmall: 14px; + --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-icons-size-xsmall: 14px; /* Smallest icon size */ --bcds-icons-size-small: 16px; - --bcds-icons-size-medium: 20px; + --bcds-icons-size-medium: 20px; /* Default icon size */ --bcds-icons-size-large: 24px; - --bcds-icons-size-xlarge: 32px; - --bcds-icons-color-primary: #2D2D2D; - --bcds-icons-color-secondary: #474543; - --bcds-icons-color-disabled: #9F9D9C; - --bcds-icons-color-link: #255A90; - --bcds-icons-color-info: #053662; - --bcds-icons-color-danger: #CE3E39; - --bcds-icons-color-success: #42814A; - --bcds-icons-color-warning: #F8BB47; - --bcds-icons-color-primary-invert: #FFFFFF; + --bcds-icons-size-xlarge: 32px; /* Largest icon size */ + --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-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-layout-border-width-none: 0; --bcds-layout-border-width-small: 1px; --bcds-layout-border-width-medium: 2px; --bcds-layout-border-width-large: 4px; - --bcds-layout-padding-none: 0; + --bcds-layout-padding-none: 0; /* No padding */ + --bcds-layout-padding-hair: 0.125rem; /* Smallest padding value for layout */ --bcds-layout-padding-xsmall: 0.25rem; --bcds-layout-padding-small: 0.5rem; - --bcds-layout-padding-medium: 1rem; + --bcds-layout-padding-medium: 1rem; /* Default padding value for layout */ --bcds-layout-padding-large: 1.5rem; - --bcds-layout-padding-xlarge: 2rem; - --bcds-layout-margin-none: 0rem; - --bcds-layout-margin-hair: 0.125rem; + --bcds-layout-padding-xlarge: 2rem; /* Largest padding value for layout */ + --bcds-layout-margin-none: 0rem; /* No margin */ + --bcds-layout-margin-hair: 0.125rem; /* Smallest margin value for layout */ --bcds-layout-margin-xsmall: 0.25rem; - --bcds-layout-margin-small: 0.5rem; + --bcds-layout-margin-small: 0.5rem; /* Default margin value for layout */ --bcds-layout-margin-medium: 1rem; --bcds-layout-margin-large: 1.5rem; --bcds-layout-margin-xlarge: 2rem; --bcds-layout-margin-xxlarge: 2.5rem; --bcds-layout-margin-xxxlarge: 3rem; - --bcds-layout-margin-huge: 3.5rem; + --bcds-layout-margin-huge: 3.5rem; /* Largest margin value for layout */ --bcds-layout-border-radius-none: 0; --bcds-layout-border-radius-small: 2px; --bcds-layout-border-radius-medium: 4px; --bcds-layout-border-radius-large: 6px; - --bcds-typography-font-families-bc-sans: 'BC Sans'; - --bcds-typography-line-heights-xxxdense: 1.125rem; + --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; --bcds-typography-line-heights-dense: 1.913rem; - --bcds-typography-line-heights-regular: 2.125rem; + --bcds-typography-line-heights-regular: 2.125rem; /* Default line height */ --bcds-typography-line-heights-sparse: 2.25rem; --bcds-typography-line-heights-xsparse: 3rem; - --bcds-typography-line-heights-xxsparse: 3.375rem; - --bcds-typography-line-heights-auto: AUTO; - --bcds-typography-font-weights-regular: 400; - --bcds-typography-font-weights-bold: 700; + --bcds-typography-line-heights-xxsparse: 3.375rem; /* Largest line height */ + --bcds-typography-line-heights-auto: AUTO; /* System token, used to generate type styles */ + --bcds-typography-font-weights-regular: 400; /* System token, used to generate text styles */ + --bcds-typography-font-weights-bold: 700; /* System token, used to generate text styles */ --bcds-typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */ - --bcds-typography-font-weights-italic-weight: 400; - --bcds-typography-font-weights-italic-style: italic; + --bcds-typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */ + --bcds-typography-font-weights-italic-style: italic; /* System token, used to generate text styles */ --bcds-typography-font-size-label: 0.75rem; --bcds-typography-font-size-small-body: 0.875rem; --bcds-typography-font-size-body: 1rem; @@ -114,84 +127,84 @@ --bcds-typography-font-size-h2: 2rem; --bcds-typography-font-size-h1: 2.25rem; --bcds-typography-font-size-display: 3rem; - --bcds-typography-letter-spacing-0: 0em; - --bcds-typography-paragraph-spacing-0: 0; - --bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans'; - --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; - --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; - --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; - --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; - --bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; - --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; - --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; - --bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; - --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; - --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; - --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; - --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; - --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; - --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; - --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; - --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; - --bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; - --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; - --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; + --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-text-case-none: none; - --bcds-typography-text-decoration-none: none; - --bcds-typography-paragraph-indent-0: 0px; - --bcds-typography-color-primary: #2D2D2D; - --bcds-typography-color-secondary: #474543; - --bcds-typography-color-placeholder: #9F9D9C; - --bcds-typography-color-disabled: #9F9D9C; - --bcds-typography-color-link: #255A90; - --bcds-typography-color-danger: #CE3E39; - --bcds-typography-color-primary-invert: #FFFFFF; - --bcds-typography-color-secondary-invert: #ECEAE8; - --bcds-theme-gold-10: #FEF8E8; - --bcds-theme-gold-20: #FEF0D8; - --bcds-theme-gold-30: #FDE9C4; - --bcds-theme-gold-40: #FCE2B0; - --bcds-theme-gold-50: #FBDA9D; - --bcds-theme-gold-60: #FBD389; - --bcds-theme-gold-70: #FACC75; - --bcds-theme-gold-80: #F9C462; - --bcds-theme-gold-90: #F8BA47; - --bcds-theme-gold-100: #FCBA19; - --bcds-theme-blue-10: #F1F8FE; - --bcds-theme-blue-20: #D8EAFD; - --bcds-theme-blue-30: #C1DDFC; - --bcds-theme-blue-40: #A8D0FB; - --bcds-theme-blue-50: #91C4FA; - --bcds-theme-blue-60: #7AB8F9; - --bcds-theme-blue-70: #5595D9; - --bcds-theme-blue-80: #3470B1; - --bcds-theme-blue-90: #1E5189; - --bcds-theme-blue-100: #013366; - --bcds-theme-gray-10: #FAF9F8; - --bcds-theme-gray-20: #F3F2F1; - --bcds-theme-gray-30: #ECEAE8; - --bcds-theme-gray-40: #E0DEDC; - --bcds-theme-gray-50: #D1CFCD; - --bcds-theme-gray-60: #C6C5C3; - --bcds-theme-gray-70: #9F9D9C; - --bcds-theme-gray-80: #605E5C; - --bcds-theme-gray-90: #3D3C3B; - --bcds-theme-gray-100: #353433; - --bcds-theme-gray-110: #252423; - --bcds-theme-gray-white: #FFFFFF; - --bcds-theme-primary-blue: #013366; - --bcds-theme-primary-gold: #FCBA19; + --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-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-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-100: #353433; /* Greyscale */ + --bcds-theme-gray-110: #252423; /* Greyscale — darkest */ + --bcds-theme-gray-white: #FFFFFF; /* White */ + --bcds-theme-primary-blue: #013366; /* Primary Blue (Blue 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 8890aa15..36b76492 100644 --- a/packages/design-tokens/dist/css/variables.css +++ b/packages/design-tokens/dist/css/variables.css @@ -14,96 +14,109 @@ --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; - --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */ - --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */ - --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */ - --surface-color-primary-button-default: #013366; - --surface-color-primary-button-hover: #1E5189; - --surface-color-primary-button-disabled: #EDEBE9; - --surface-color-primary-danger-button-default: #CE3E39; - --surface-color-primary-danger-button-hover: #A2312D; - --surface-color-primary-danger-button-disabled: #EDEBE9; - --surface-color-secondary-button-default: #FFFFFF; - --surface-color-secondary-button-hover: #EDEBE9; - --surface-color-secondary-button-disabled: #EDEBE9; - --surface-color-tertiary-button-default: rgba(255,255,255,0); - --surface-color-tertiary-button-hover: #ECEAE8; - --surface-color-tertiary-button-disabled: #EDEBE9; - --surface-color-menus-default: #FFFFFF; - --surface-color-menus-hover: #EDEBE9; - --surface-color-forms-default: #FFFFFF; - --surface-color-forms-disabled: #EDEBE9; - --surface-color-background-white: #FFFFFF; - --surface-color-background-light-gray: #FAF9F8; - --surface-color-background-light-blue: #F1F8FE; - --surface-color-background-dark-blue: #053662; - --surface-color-border-default: #D8D8D8; - --surface-color-border-medium: #898785; - --surface-color-border-dark: #353433; - --surface-color-border-active: #2E5DD7; - --surface-color-overlay-default: rgba(0,0,0,0.45); + --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-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: #FFFFFF; /* 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-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; - --support-surface-color-success: #F6FFF8; - --support-surface-color-warning: #FEF1D8; - --support-border-color-info: #053662; - --support-border-color-danger: #CE3E39; - --support-border-color-success: #42814A; - --support-border-color-warning: #F8BB47; - --icons-size-xsmall: 14px; + --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 */ + --icons-size-xsmall: 14px; /* Smallest icon size */ --icons-size-small: 16px; - --icons-size-medium: 20px; + --icons-size-medium: 20px; /* Default icon size */ --icons-size-large: 24px; - --icons-size-xlarge: 32px; - --icons-color-primary: #2D2D2D; - --icons-color-secondary: #474543; - --icons-color-disabled: #9F9D9C; - --icons-color-link: #255A90; - --icons-color-info: #053662; - --icons-color-danger: #CE3E39; - --icons-color-success: #42814A; - --icons-color-warning: #F8BB47; - --icons-color-primary-invert: #FFFFFF; + --icons-size-xlarge: 32px; /* Largest icon size */ + --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-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 */ --layout-border-width-none: 0; --layout-border-width-small: 1px; --layout-border-width-medium: 2px; --layout-border-width-large: 4px; - --layout-padding-none: 0; + --layout-padding-none: 0; /* No padding */ + --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */ --layout-padding-xsmall: 0.25rem; --layout-padding-small: 0.5rem; - --layout-padding-medium: 1rem; + --layout-padding-medium: 1rem; /* Default padding value for layout */ --layout-padding-large: 1.5rem; - --layout-padding-xlarge: 2rem; - --layout-margin-none: 0rem; - --layout-margin-hair: 0.125rem; + --layout-padding-xlarge: 2rem; /* Largest padding value for layout */ + --layout-margin-none: 0rem; /* No margin */ + --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */ --layout-margin-xsmall: 0.25rem; - --layout-margin-small: 0.5rem; + --layout-margin-small: 0.5rem; /* Default margin value for layout */ --layout-margin-medium: 1rem; --layout-margin-large: 1.5rem; --layout-margin-xlarge: 2rem; --layout-margin-xxlarge: 2.5rem; --layout-margin-xxxlarge: 3rem; - --layout-margin-huge: 3.5rem; + --layout-margin-huge: 3.5rem; /* Largest margin value for layout */ --layout-border-radius-none: 0; --layout-border-radius-small: 2px; --layout-border-radius-medium: 4px; --layout-border-radius-large: 6px; - --typography-font-families-bc-sans: 'BC Sans'; - --typography-line-heights-xxxdense: 1.125rem; + --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; --typography-line-heights-dense: 1.913rem; - --typography-line-heights-regular: 2.125rem; + --typography-line-heights-regular: 2.125rem; /* Default line height */ --typography-line-heights-sparse: 2.25rem; --typography-line-heights-xsparse: 3rem; - --typography-line-heights-xxsparse: 3.375rem; - --typography-line-heights-auto: AUTO; - --typography-font-weights-regular: 400; - --typography-font-weights-bold: 700; + --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */ + --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */ + --typography-font-weights-regular: 400; /* System token, used to generate text styles */ + --typography-font-weights-bold: 700; /* System token, used to generate text styles */ --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */ - --typography-font-weights-italic-weight: 400; - --typography-font-weights-italic-style: italic; + --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */ + --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */ --typography-font-size-label: 0.75rem; --typography-font-size-small-body: 0.875rem; --typography-font-size-body: 1rem; @@ -114,84 +127,84 @@ --typography-font-size-h2: 2rem; --typography-font-size-h1: 2.25rem; --typography-font-size-display: 3rem; - --typography-letter-spacing-0: 0em; - --typography-paragraph-spacing-0: 0; - --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; - --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; - --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; - --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; - --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; - --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; - --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; - --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; - --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; - --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; - --typography-regular-display: 400 3rem/AUTO 'BC Sans'; - --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; - --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; - --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; - --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; - --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; - --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; - --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; - --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; - --typography-bold-h2: 700 2rem/3rem 'BC Sans'; - --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; - --typography-bold-display: 700 3rem/AUTO 'BC Sans'; - --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; - --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; - --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; - --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; - --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; - --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; - --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; - --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; - --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; - --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; - --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; + --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-text-case-none: none; - --typography-text-decoration-none: none; - --typography-paragraph-indent-0: 0px; - --typography-color-primary: #2D2D2D; - --typography-color-secondary: #474543; - --typography-color-placeholder: #9F9D9C; - --typography-color-disabled: #9F9D9C; - --typography-color-link: #255A90; - --typography-color-danger: #CE3E39; - --typography-color-primary-invert: #FFFFFF; - --typography-color-secondary-invert: #ECEAE8; - --theme-gold-10: #FEF8E8; - --theme-gold-20: #FEF0D8; - --theme-gold-30: #FDE9C4; - --theme-gold-40: #FCE2B0; - --theme-gold-50: #FBDA9D; - --theme-gold-60: #FBD389; - --theme-gold-70: #FACC75; - --theme-gold-80: #F9C462; - --theme-gold-90: #F8BA47; - --theme-gold-100: #FCBA19; - --theme-blue-10: #F1F8FE; - --theme-blue-20: #D8EAFD; - --theme-blue-30: #C1DDFC; - --theme-blue-40: #A8D0FB; - --theme-blue-50: #91C4FA; - --theme-blue-60: #7AB8F9; - --theme-blue-70: #5595D9; - --theme-blue-80: #3470B1; - --theme-blue-90: #1E5189; - --theme-blue-100: #013366; - --theme-gray-10: #FAF9F8; - --theme-gray-20: #F3F2F1; - --theme-gray-30: #ECEAE8; - --theme-gray-40: #E0DEDC; - --theme-gray-50: #D1CFCD; - --theme-gray-60: #C6C5C3; - --theme-gray-70: #9F9D9C; - --theme-gray-80: #605E5C; - --theme-gray-90: #3D3C3B; - --theme-gray-100: #353433; - --theme-gray-110: #252423; - --theme-gray-white: #FFFFFF; - --theme-primary-blue: #013366; - --theme-primary-gold: #FCBA19; + --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-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 */ + --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-100: #353433; /* Greyscale */ + --theme-gray-110: #252423; /* Greyscale — darkest */ + --theme-gray-white: #FFFFFF; /* White */ + --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */ + --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */ } diff --git a/packages/design-tokens/dist/js-prefixed/index.d.ts b/packages/design-tokens/dist/js-prefixed/index.d.ts index fb10e09e..8c17e3fa 100644 --- a/packages/design-tokens/dist/js-prefixed/index.d.ts +++ b/packages/design-tokens/dist/js-prefixed/index.d.ts @@ -13,99 +13,186 @@ export const bcdsSurfaceOpacity70 : number; export const bcdsSurfaceOpacity80 : number; export const bcdsSurfaceOpacity90 : number; export const bcdsSurfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const bcdsSurfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const bcdsSurfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const bcdsSurfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const bcdsSurfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const bcdsSurfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const bcdsSurfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const bcdsSurfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const bcdsSurfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const bcdsSurfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const bcdsSurfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const bcdsSurfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const bcdsSurfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const bcdsSurfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const bcdsSurfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const bcdsSurfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const bcdsSurfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const bcdsSurfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const bcdsSurfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const bcdsSurfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const bcdsSurfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const bcdsSurfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const bcdsSurfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const bcdsSurfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const bcdsSurfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const bcdsSurfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const bcdsSurfaceColorFormsDisabled : string; +/** White background */ export const bcdsSurfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const bcdsSurfaceColorBackgroundLightGray : string; +/** Light blue background */ export const bcdsSurfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const bcdsSurfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const bcdsSurfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const bcdsSurfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const bcdsSurfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const bcdsSurfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const bcdsSurfaceColorOverlayDefault : string; export const bcdsSupportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const bcdsSupportSurfaceColorDanger : string; +/** Background colour for success messages */ export const bcdsSupportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const bcdsSupportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const bcdsSupportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const bcdsSupportBorderColorDanger : string; +/** Border stroke for success messages */ export const bcdsSupportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const bcdsSupportBorderColorWarning : string; +/** Smallest icon size */ export const bcdsIconsSizeXsmall : string; export const bcdsIconsSizeSmall : string; +/** Default icon size */ export const bcdsIconsSizeMedium : string; export const bcdsIconsSizeLarge : string; +/** Largest icon size */ export const bcdsIconsSizeXlarge : string; +/** Default colour for icons */ export const bcdsIconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const bcdsIconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const bcdsIconsColorDisabled : string; +/** Use for hyperlinked icons */ export const bcdsIconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const bcdsIconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const bcdsIconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const bcdsIconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const bcdsIconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const bcdsIconsColorPrimaryInvert : string; export const bcdsLayoutBorderWidthNone : string; export const bcdsLayoutBorderWidthSmall : string; export const bcdsLayoutBorderWidthMedium : string; export const bcdsLayoutBorderWidthLarge : string; +/** No padding */ export const bcdsLayoutPaddingNone : string; +/** Smallest padding value for layout */ +export const bcdsLayoutPaddingHair : string; export const bcdsLayoutPaddingXsmall : string; export const bcdsLayoutPaddingSmall : string; +/** Default padding value for layout */ export const bcdsLayoutPaddingMedium : string; export const bcdsLayoutPaddingLarge : string; +/** Largest padding value for layout */ export const bcdsLayoutPaddingXlarge : string; +/** No margin */ export const bcdsLayoutMarginNone : string; +/** Smallest margin value for layout */ export const bcdsLayoutMarginHair : string; export const bcdsLayoutMarginXsmall : string; +/** Default margin value for layout */ export const bcdsLayoutMarginSmall : string; export const bcdsLayoutMarginMedium : string; export const bcdsLayoutMarginLarge : string; export const bcdsLayoutMarginXlarge : string; export const bcdsLayoutMarginXxlarge : string; export const bcdsLayoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const bcdsLayoutMarginHuge : string; export const bcdsLayoutBorderRadiusNone : string; export const bcdsLayoutBorderRadiusSmall : string; export const bcdsLayoutBorderRadiusMedium : string; export const bcdsLayoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const bcdsTypographyFontFamiliesBcSans : string; +/** Smallest line height */ export const bcdsTypographyLineHeightsXxxdense : string; export const bcdsTypographyLineHeightsXxdense : string; export const bcdsTypographyLineHeightsXdense : string; export const bcdsTypographyLineHeightsDense : string; +/** Default line height */ export const bcdsTypographyLineHeightsRegular : string; export const bcdsTypographyLineHeightsSparse : string; export const bcdsTypographyLineHeightsXsparse : string; +/** Largest line height */ export const bcdsTypographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const bcdsTypographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const bcdsTypographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const bcdsTypographyFontWeightsItalicStyle : string; export const bcdsTypographyFontSizeLabel : string; export const bcdsTypographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const bcdsTypographyFontSizeH3 : string; export const bcdsTypographyFontSizeH2 : string; export const bcdsTypographyFontSizeH1 : string; export const bcdsTypographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const bcdsTypographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphSpacing0 : string; +/** Labels and captions */ export const bcdsTypographyRegularLabel : string; +/** Smaller body text */ export const bcdsTypographyRegularSmallBody : string; +/** Default body text */ export const bcdsTypographyRegularBody : string; +/** Larger body text */ export const bcdsTypographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const bcdsTypographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const bcdsTypographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const bcdsTypographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const bcdsTypographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const bcdsTypographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const bcdsTypographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const bcdsTypographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const bcdsTypographyBoldLabel : string; +/** Default for small body text (bolded) */ export const bcdsTypographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const bcdsTypographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const bcdsTypographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const bcdsTypographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const bcdsTypographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const bcdsTypographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const bcdsTypographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const bcdsTypographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const bcdsTypographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const bcdsTypographyBoldDisplay : string; +/** Labels and captions (italic) */ export const bcdsTypographyItalicLabel : string; +/** Small body text (italic) */ export const bcdsTypographyItalicSmallBody : string; +/** Default for body text (italic) */ export const bcdsTypographyItalicBody : string; +/** Larger text size for body text (italic) */ export const bcdsTypographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const bcdsTypographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const bcdsTypographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const bcdsTypographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const bcdsTypographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const bcdsTypographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const bcdsTypographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const bcdsTypographyItalicDisplay : string; export const bcdsTypographyTextCaseNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const bcdsTypographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const bcdsTypographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const bcdsTypographyColorSecondary : string; +/** Use for placeholder text in forms */ export const bcdsTypographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const bcdsTypographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const bcdsTypographyColorLink : string; +/** Use for error, failure or danger message text */ export const bcdsTypographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const bcdsTypographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const bcdsTypographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const bcdsThemeGold10 : string; +/** Gold scale */ export const bcdsThemeGold20 : string; +/** Gold scale */ export const bcdsThemeGold30 : string; +/** Gold scale */ export const bcdsThemeGold40 : string; +/** Gold scale */ export const bcdsThemeGold50 : string; +/** Gold scale */ export const bcdsThemeGold60 : string; +/** Gold scale */ export const bcdsThemeGold70 : string; +/** Gold scale */ export const bcdsThemeGold80 : string; +/** Gold scale */ export const bcdsThemeGold90 : string; +/** Gold scale — darkest */ export const bcdsThemeGold100 : string; +/** Blue scale — lightest */ export const bcdsThemeBlue10 : string; +/** Blue scale */ export const bcdsThemeBlue20 : string; +/** Blue scale */ export const bcdsThemeBlue30 : string; +/** Blue scale */ export const bcdsThemeBlue40 : string; +/** Blue scale */ export const bcdsThemeBlue50 : string; +/** Blue scale */ export const bcdsThemeBlue60 : string; +/** Blue scale */ export const bcdsThemeBlue70 : string; +/** Blue scale */ export const bcdsThemeBlue80 : string; +/** Blue scale */ export const bcdsThemeBlue90 : string; +/** Blue scale — darkest */ export const bcdsThemeBlue100 : string; +/** Greyscale — lightest */ export const bcdsThemeGray10 : string; +/** Greyscale */ export const bcdsThemeGray20 : string; +/** Greyscale */ export const bcdsThemeGray30 : string; +/** Greyscale */ export const bcdsThemeGray40 : string; +/** Greyscale */ export const bcdsThemeGray50 : string; +/** Greyscale */ export const bcdsThemeGray60 : string; +/** Greyscale */ export const bcdsThemeGray70 : string; +/** Greyscale */ export const bcdsThemeGray80 : string; +/** Greyscale */ export const bcdsThemeGray90 : string; +/** Greyscale */ export const bcdsThemeGray100 : string; +/** Greyscale — darkest */ export const bcdsThemeGray110 : string; +/** White */ export const bcdsThemeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const bcdsThemePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const bcdsThemePrimaryGold : string; diff --git a/packages/design-tokens/dist/js-prefixed/index.js b/packages/design-tokens/dist/js-prefixed/index.js index 6741d289..565d22b6 100644 --- a/packages/design-tokens/dist/js-prefixed/index.js +++ b/packages/design-tokens/dist/js-prefixed/index.js @@ -13,96 +13,109 @@ export const bcdsSurfaceOpacity70 = 0.7; export const bcdsSurfaceOpacity80 = 0.8; export const bcdsSurfaceOpacity90 = 0.9; export const bcdsSurfaceOpacity100 = 1; -export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; -export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards -export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips -export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs -export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; -export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189"; -export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39"; -export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D"; -export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF"; -export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9"; -export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; -export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8"; -export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9"; -export const bcdsSurfaceColorMenusDefault = "#FFFFFF"; -export const bcdsSurfaceColorMenusHover = "#EDEBE9"; -export const bcdsSurfaceColorFormsDefault = "#FFFFFF"; -export const bcdsSurfaceColorFormsDisabled = "#EDEBE9"; -export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF"; -export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8"; -export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE"; -export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; -export const bcdsSurfaceColorBorderDefault = "#D8D8D8"; -export const bcdsSurfaceColorBorderMedium = "#898785"; -export const bcdsSurfaceColorBorderDark = "#353433"; -export const bcdsSurfaceColorBorderActive = "#2E5DD7"; -export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; +export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; // Default shadow for most content and UI elements +export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements +export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Standard shadow for UI elements like cards and buttons +export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly +export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons +export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button +export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons +export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state +export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button +export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button +export const bcdsSurfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout +export const bcdsSurfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default +export const bcdsSurfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default +export const bcdsSurfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default +export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons +export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button +export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons +export const bcdsSurfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout +export const bcdsSurfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default +export const bcdsSurfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default +export const bcdsSurfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default +export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons +export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button +export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons +export const bcdsSurfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout +export const bcdsSurfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default +export const bcdsSurfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default +export const bcdsSurfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default +export const bcdsSurfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items +export const bcdsSurfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item +export const bcdsSurfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields +export const bcdsSurfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields +export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF"; // White background +export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout +export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background +export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background +export const bcdsSurfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements +export const bcdsSurfaceColorBorderMedium = "#898785"; // Default border colour for UI elements +export const bcdsSurfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs +export const bcdsSurfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements +export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues export const bcdsSupportSurfaceColorInfo = "#F7F9FC"; -export const bcdsSupportSurfaceColorDanger = "#F4E1E2"; -export const bcdsSupportSurfaceColorSuccess = "#F6FFF8"; -export const bcdsSupportSurfaceColorWarning = "#FEF1D8"; -export const bcdsSupportBorderColorInfo = "#053662"; -export const bcdsSupportBorderColorDanger = "#CE3E39"; -export const bcdsSupportBorderColorSuccess = "#42814A"; -export const bcdsSupportBorderColorWarning = "#F8BB47"; -export const bcdsIconsSizeXsmall = "14px"; +export const bcdsSupportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages +export const bcdsSupportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages +export const bcdsSupportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages +export const bcdsSupportBorderColorInfo = "#053662"; // Border stroke for general/informational messages +export const bcdsSupportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages +export const bcdsSupportBorderColorSuccess = "#42814A"; // Border stroke for success messages +export const bcdsSupportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages +export const bcdsIconsSizeXsmall = "14px"; // Smallest icon size export const bcdsIconsSizeSmall = "16px"; -export const bcdsIconsSizeMedium = "20px"; +export const bcdsIconsSizeMedium = "20px"; // Default icon size export const bcdsIconsSizeLarge = "24px"; -export const bcdsIconsSizeXlarge = "32px"; -export const bcdsIconsColorPrimary = "#2D2D2D"; -export const bcdsIconsColorSecondary = "#474543"; -export const bcdsIconsColorDisabled = "#9F9D9C"; -export const bcdsIconsColorLink = "#255A90"; -export const bcdsIconsColorInfo = "#053662"; -export const bcdsIconsColorDanger = "#CE3E39"; -export const bcdsIconsColorSuccess = "#42814A"; -export const bcdsIconsColorWarning = "#F8BB47"; -export const bcdsIconsColorPrimaryInvert = "#FFFFFF"; +export const bcdsIconsSizeXlarge = "32px"; // Largest icon size +export const bcdsIconsColorPrimary = "#2D2D2D"; // Default colour for icons +export const bcdsIconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons +export const bcdsIconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons +export const bcdsIconsColorLink = "#255A90"; // Use for hyperlinked icons +export const bcdsIconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state +export const bcdsIconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state +export const bcdsIconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state +export const bcdsIconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state +export const bcdsIconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds export const bcdsLayoutBorderWidthNone = "0"; export const bcdsLayoutBorderWidthSmall = "1px"; export const bcdsLayoutBorderWidthMedium = "2px"; export const bcdsLayoutBorderWidthLarge = "4px"; -export const bcdsLayoutPaddingNone = "0"; +export const bcdsLayoutPaddingNone = "0"; // No padding +export const bcdsLayoutPaddingHair = "0.125rem"; // Smallest padding value for layout export const bcdsLayoutPaddingXsmall = "0.25rem"; export const bcdsLayoutPaddingSmall = "0.5rem"; -export const bcdsLayoutPaddingMedium = "1rem"; +export const bcdsLayoutPaddingMedium = "1rem"; // Default padding value for layout export const bcdsLayoutPaddingLarge = "1.5rem"; -export const bcdsLayoutPaddingXlarge = "2rem"; -export const bcdsLayoutMarginNone = "0rem"; -export const bcdsLayoutMarginHair = "0.125rem"; +export const bcdsLayoutPaddingXlarge = "2rem"; // Largest padding value for layout +export const bcdsLayoutMarginNone = "0rem"; // No margin +export const bcdsLayoutMarginHair = "0.125rem"; // Smallest margin value for layout export const bcdsLayoutMarginXsmall = "0.25rem"; -export const bcdsLayoutMarginSmall = "0.5rem"; +export const bcdsLayoutMarginSmall = "0.5rem"; // Default margin value for layout export const bcdsLayoutMarginMedium = "1rem"; export const bcdsLayoutMarginLarge = "1.5rem"; export const bcdsLayoutMarginXlarge = "2rem"; export const bcdsLayoutMarginXxlarge = "2.5rem"; export const bcdsLayoutMarginXxxlarge = "3rem"; -export const bcdsLayoutMarginHuge = "3.5rem"; +export const bcdsLayoutMarginHuge = "3.5rem"; // Largest margin value for layout export const bcdsLayoutBorderRadiusNone = "0"; export const bcdsLayoutBorderRadiusSmall = "2px"; export const bcdsLayoutBorderRadiusMedium = "4px"; export const bcdsLayoutBorderRadiusLarge = "6px"; -export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'"; -export const bcdsTypographyLineHeightsXxxdense = "1.125rem"; +export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package +export const bcdsTypographyLineHeightsXxxdense = "1.125rem"; // Smallest line height export const bcdsTypographyLineHeightsXxdense = "1.313rem"; export const bcdsTypographyLineHeightsXdense = "1.688rem"; export const bcdsTypographyLineHeightsDense = "1.913rem"; -export const bcdsTypographyLineHeightsRegular = "2.125rem"; +export const bcdsTypographyLineHeightsRegular = "2.125rem"; // Default line height export const bcdsTypographyLineHeightsSparse = "2.25rem"; export const bcdsTypographyLineHeightsXsparse = "3rem"; -export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; -export const bcdsTypographyLineHeightsAuto = "AUTO"; -export const bcdsTypographyFontWeightsRegular = 400; -export const bcdsTypographyFontWeightsBold = 700; +export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; // Largest line height +export const bcdsTypographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles +export const bcdsTypographyFontWeightsRegular = 400; // System token, used to generate text styles +export const bcdsTypographyFontWeightsBold = 700; // System token, used to generate text styles export const bcdsTypographyFontWeightsItalic = "Italic"; // DEPRECATED - will be removed in next major version. -export const bcdsTypographyFontWeightsItalicWeight = 400; -export const bcdsTypographyFontWeightsItalicStyle = "italic"; +export const bcdsTypographyFontWeightsItalicWeight = 400; // System token, used to generate text styles +export const bcdsTypographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles export const bcdsTypographyFontSizeLabel = "0.75rem"; export const bcdsTypographyFontSizeSmallBody = "0.875rem"; export const bcdsTypographyFontSizeBody = "1rem"; @@ -113,83 +126,83 @@ export const bcdsTypographyFontSizeH3 = "1.75rem"; export const bcdsTypographyFontSizeH2 = "2rem"; export const bcdsTypographyFontSizeH1 = "2.25rem"; export const bcdsTypographyFontSizeDisplay = "3rem"; -export const bcdsTypographyLetterSpacing0 = "0em"; -export const bcdsTypographyParagraphSpacing0 = "0"; -export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; -export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; -export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; -export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; -export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; -export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; -export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; -export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; -export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; -export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; -export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; -export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; -export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; -export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; -export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; -export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; -export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; +export const bcdsTypographyLetterSpacing0 = "0em"; // System token, used to generate type styles +export const bcdsTypographyParagraphSpacing0 = "0"; // System token, used to generate type styles +export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions +export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text +export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text +export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text +export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6 +export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5 +export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4 +export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3 +export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2 +export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1 +export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings +export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded) +export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded) +export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded) +export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded) +export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings +export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic) +export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic) +export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic) +export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic) +export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6 +export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5 +export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4 +export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3 +export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2 +export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1 +export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings export const bcdsTypographyTextCaseNone = "none"; -export const bcdsTypographyTextDecorationNone = "none"; -export const bcdsTypographyParagraphIndent0 = "0px"; -export const bcdsTypographyColorPrimary = "#2D2D2D"; -export const bcdsTypographyColorSecondary = "#474543"; -export const bcdsTypographyColorPlaceholder = "#9F9D9C"; -export const bcdsTypographyColorDisabled = "#9F9D9C"; -export const bcdsTypographyColorLink = "#255A90"; -export const bcdsTypographyColorDanger = "#CE3E39"; -export const bcdsTypographyColorPrimaryInvert = "#FFFFFF"; -export const bcdsTypographyColorSecondaryInvert = "#ECEAE8"; -export const bcdsThemeGold10 = "#FEF8E8"; -export const bcdsThemeGold20 = "#FEF0D8"; -export const bcdsThemeGold30 = "#FDE9C4"; -export const bcdsThemeGold40 = "#FCE2B0"; -export const bcdsThemeGold50 = "#FBDA9D"; -export const bcdsThemeGold60 = "#FBD389"; -export const bcdsThemeGold70 = "#FACC75"; -export const bcdsThemeGold80 = "#F9C462"; -export const bcdsThemeGold90 = "#F8BA47"; -export const bcdsThemeGold100 = "#FCBA19"; -export const bcdsThemeBlue10 = "#F1F8FE"; -export const bcdsThemeBlue20 = "#D8EAFD"; -export const bcdsThemeBlue30 = "#C1DDFC"; -export const bcdsThemeBlue40 = "#A8D0FB"; -export const bcdsThemeBlue50 = "#91C4FA"; -export const bcdsThemeBlue60 = "#7AB8F9"; -export const bcdsThemeBlue70 = "#5595D9"; -export const bcdsThemeBlue80 = "#3470B1"; -export const bcdsThemeBlue90 = "#1E5189"; -export const bcdsThemeBlue100 = "#013366"; -export const bcdsThemeGray10 = "#FAF9F8"; -export const bcdsThemeGray20 = "#F3F2F1"; -export const bcdsThemeGray30 = "#ECEAE8"; -export const bcdsThemeGray40 = "#E0DEDC"; -export const bcdsThemeGray50 = "#D1CFCD"; -export const bcdsThemeGray60 = "#C6C5C3"; -export const bcdsThemeGray70 = "#9F9D9C"; -export const bcdsThemeGray80 = "#605E5C"; -export const bcdsThemeGray90 = "#3D3C3B"; -export const bcdsThemeGray100 = "#353433"; -export const bcdsThemeGray110 = "#252423"; -export const bcdsThemeGrayWhite = "#FFFFFF"; -export const bcdsThemePrimaryBlue = "#013366"; -export const bcdsThemePrimaryGold = "#FCBA19"; +export const bcdsTypographyTextDecorationNone = "none"; // System token, used to generate type styles +export const bcdsTypographyParagraphIndent0 = "0px"; // System token, used to generate type styles +export const bcdsTypographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings +export const bcdsTypographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text +export const bcdsTypographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms +export const bcdsTypographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements +export const bcdsTypographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings +export const bcdsTypographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text +export const bcdsTypographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds +export const bcdsTypographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds +export const bcdsThemeGold10 = "#FEF8E8"; // Gold scale — lightest +export const bcdsThemeGold20 = "#FEF0D8"; // Gold scale +export const bcdsThemeGold30 = "#FDE9C4"; // Gold scale +export const bcdsThemeGold40 = "#FCE2B0"; // Gold scale +export const bcdsThemeGold50 = "#FBDA9D"; // Gold scale +export const bcdsThemeGold60 = "#FBD389"; // Gold scale +export const bcdsThemeGold70 = "#FACC75"; // Gold scale +export const bcdsThemeGold80 = "#F9C462"; // Gold scale +export const bcdsThemeGold90 = "#F8BA47"; // Gold scale +export const bcdsThemeGold100 = "#FCBA19"; // Gold scale — darkest +export const bcdsThemeBlue10 = "#F1F8FE"; // Blue scale — lightest +export const bcdsThemeBlue20 = "#D8EAFD"; // Blue scale +export const bcdsThemeBlue30 = "#C1DDFC"; // Blue scale +export const bcdsThemeBlue40 = "#A8D0FB"; // Blue scale +export const bcdsThemeBlue50 = "#91C4FA"; // Blue scale +export const bcdsThemeBlue60 = "#7AB8F9"; // Blue scale +export const bcdsThemeBlue70 = "#5595D9"; // Blue scale +export const bcdsThemeBlue80 = "#3470B1"; // Blue scale +export const bcdsThemeBlue90 = "#1E5189"; // Blue scale +export const bcdsThemeBlue100 = "#013366"; // Blue scale — darkest +export const bcdsThemeGray10 = "#FAF9F8"; // Greyscale — lightest +export const bcdsThemeGray20 = "#F3F2F1"; // Greyscale +export const bcdsThemeGray30 = "#ECEAE8"; // Greyscale +export const bcdsThemeGray40 = "#E0DEDC"; // Greyscale +export const bcdsThemeGray50 = "#D1CFCD"; // Greyscale +export const bcdsThemeGray60 = "#C6C5C3"; // Greyscale +export const bcdsThemeGray70 = "#9F9D9C"; // Greyscale +export const bcdsThemeGray80 = "#605E5C"; // Greyscale +export const bcdsThemeGray90 = "#3D3C3B"; // Greyscale +export const bcdsThemeGray100 = "#353433"; // Greyscale +export const bcdsThemeGray110 = "#252423"; // Greyscale — darkest +export const bcdsThemeGrayWhite = "#FFFFFF"; // White +export const bcdsThemePrimaryBlue = "#013366"; // Primary Blue (Blue 100) +export const bcdsThemePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100) diff --git a/packages/design-tokens/dist/js/index.d.ts b/packages/design-tokens/dist/js/index.d.ts index 1701a205..71e5317d 100644 --- a/packages/design-tokens/dist/js/index.d.ts +++ b/packages/design-tokens/dist/js/index.d.ts @@ -13,99 +13,186 @@ export const surfaceOpacity70 : number; export const surfaceOpacity80 : number; export const surfaceOpacity90 : number; export const surfaceOpacity100 : number; +/** Default shadow for most content and UI elements */ export const surfaceShadowNone : string; -/** Primarily used as a hover effect for cards */ +/** Reduced shadow for secondary UI elements */ export const surfaceShadowSmall : string; -/** Primarily used for dropdown menus and tooltips */ +/** Standard shadow for UI elements like cards and buttons */ export const surfaceShadowMedium : string; -/** Primarily used for dialogs */ +/** Larger shadow for emphasis. Use sparingly */ export const surfaceShadowLarge : string; +/** Default fill colour for primary buttons */ export const surfaceColorPrimaryButtonDefault : string; +/** Fill colour used when user hovers over primary button */ export const surfaceColorPrimaryButtonHover : string; +/** Fill colour for inactive primary buttons */ export const surfaceColorPrimaryButtonDisabled : string; +/** Default fill colour for buttons in danger/warning state */ export const surfaceColorPrimaryDangerButtonDefault : string; +/** Fill colour used when user hovers over danger/warning button */ export const surfaceColorPrimaryDangerButtonHover : string; +/** Default fill colour for disabled danger/warning button */ export const surfaceColorPrimaryDangerButtonDisabled : string; +/** Default theme colour for components and layout */ +export const surfaceColorPrimaryDefault : string; +/** Hover variant of surface.color.primary.default */ +export const surfaceColorPrimaryHover : string; +/** Selected/pressed variant of surface.color.primary.default */ +export const surfaceColorPrimaryPressed : string; +/** Disabled/inactive variant of surface.color.primary default */ +export const surfaceColorPrimaryDisabled : string; +/** Fill colour for secondary buttons */ export const surfaceColorSecondaryButtonDefault : string; +/** Fill colour used when user hovers over secondary button */ export const surfaceColorSecondaryButtonHover : string; +/** Fill colour for inactive secondary buttons */ export const surfaceColorSecondaryButtonDisabled : string; +/** Light theme colour for components and layout */ +export const surfaceColorSecondaryDefault : string; +/** Hover variant of surface.color.secondary.default */ +export const surfaceColorSecondaryHover : string; +/** Selected/pressed variant of surface.color.secondary.default */ +export const surfaceColorSecondaryPressed : string; +/** Disabled/inactive variant of surface.color.secondary default */ +export const surfaceColorSecondaryDisabled : string; +/** Default fill colour for tertiary buttons */ export const surfaceColorTertiaryButtonDefault : string; +/** Fill colour used when user hovers over tertiary button */ export const surfaceColorTertiaryButtonHover : string; +/** Fill colour for inactive tertiary buttons */ export const surfaceColorTertiaryButtonDisabled : string; +/** Alternative light theme colour for components and layout */ +export const surfaceColorTertiaryDefault : string; +/** Hover variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryHover : string; +/** Selected/pressed variant of surface.color.tertiary.default */ +export const surfaceColorTertiaryPressed : string; +/** Disabled/inactive variant of surface.color.tertiary default */ +export const surfaceColorTertiaryDisabled : string; +/** Default fill colour for menu items */ export const surfaceColorMenusDefault : string; +/** Fill colour used when user hovers over a menu item */ export const surfaceColorMenusHover : string; +/** Default fill colour for form/input fields */ export const surfaceColorFormsDefault : string; +/** Fill colour for inactive/disabled form/input fields */ export const surfaceColorFormsDisabled : string; +/** White background */ export const surfaceColorBackgroundWhite : string; +/** Default background colour for layout */ export const surfaceColorBackgroundLightGray : string; +/** Light blue background */ export const surfaceColorBackgroundLightBlue : string; +/** Dark blue background */ export const surfaceColorBackgroundDarkBlue : string; +/** Lighter border colour for UI elements */ export const surfaceColorBorderDefault : string; +/** Default border colour for UI elements */ export const surfaceColorBorderMedium : string; +/** Used as a hover colour for form fields and inputs */ export const surfaceColorBorderDark : string; +/** Used as the active stroke colour for UI elements */ export const surfaceColorBorderActive : string; +/** Background overlay colour for images and modal dialogues */ export const surfaceColorOverlayDefault : string; export const supportSurfaceColorInfo : string; +/** Background colour for error, failure or danger messages */ export const supportSurfaceColorDanger : string; +/** Background colour for success messages */ export const supportSurfaceColorSuccess : string; +/** Background colour for warning messages */ export const supportSurfaceColorWarning : string; +/** Border stroke for general/informational messages */ export const supportBorderColorInfo : string; +/** Border stroke for error, failure or danger messages */ export const supportBorderColorDanger : string; +/** Border stroke for success messages */ export const supportBorderColorSuccess : string; +/** Border stroke for warning messages */ export const supportBorderColorWarning : string; +/** Smallest icon size */ export const iconsSizeXsmall : string; export const iconsSizeSmall : string; +/** Default icon size */ export const iconsSizeMedium : string; export const iconsSizeLarge : string; +/** Largest icon size */ export const iconsSizeXlarge : string; +/** Default colour for icons */ export const iconsColorPrimary : string; +/** Alternative colour for secondary/miscellaneous icons */ export const iconsColorSecondary : string; +/** Use only for inactive/disabled icons */ export const iconsColorDisabled : string; +/** Use for hyperlinked icons */ export const iconsColorLink : string; +/** Emphasis colour for icons in general/informational state */ export const iconsColorInfo : string; +/** Emphasis colour for icons in error, failure or danger state */ export const iconsColorDanger : string; +/** Emphasis colour for icons in success state */ export const iconsColorSuccess : string; +/** Emphasis colour for icons in warning state */ export const iconsColorWarning : string; +/** Default colour for icons on dark backgrounds */ export const iconsColorPrimaryInvert : string; export const layoutBorderWidthNone : string; export const layoutBorderWidthSmall : string; export const layoutBorderWidthMedium : string; export const layoutBorderWidthLarge : string; +/** No padding */ export const layoutPaddingNone : string; +/** Smallest padding value for layout */ +export const layoutPaddingHair : string; export const layoutPaddingXsmall : string; export const layoutPaddingSmall : string; +/** Default padding value for layout */ export const layoutPaddingMedium : string; export const layoutPaddingLarge : string; +/** Largest padding value for layout */ export const layoutPaddingXlarge : string; +/** No margin */ export const layoutMarginNone : string; +/** Smallest margin value for layout */ export const layoutMarginHair : string; export const layoutMarginXsmall : string; +/** Default margin value for layout */ export const layoutMarginSmall : string; export const layoutMarginMedium : string; export const layoutMarginLarge : string; export const layoutMarginXlarge : string; export const layoutMarginXxlarge : string; export const layoutMarginXxxlarge : string; +/** Largest margin value for layout */ export const layoutMarginHuge : string; export const layoutBorderRadiusNone : string; export const layoutBorderRadiusSmall : string; export const layoutBorderRadiusMedium : string; export const layoutBorderRadiusLarge : string; +/** BC Sans font. Requires BC Sans package */ export const typographyFontFamiliesBcSans : string; +/** Smallest line height */ export const typographyLineHeightsXxxdense : string; export const typographyLineHeightsXxdense : string; export const typographyLineHeightsXdense : string; export const typographyLineHeightsDense : string; +/** Default line height */ export const typographyLineHeightsRegular : string; export const typographyLineHeightsSparse : string; export const typographyLineHeightsXsparse : string; +/** Largest line height */ export const typographyLineHeightsXxsparse : string; +/** System token, used to generate type styles */ export const typographyLineHeightsAuto : string; +/** System token, used to generate text styles */ export const typographyFontWeightsRegular : number; +/** System token, used to generate text styles */ export const typographyFontWeightsBold : number; /** DEPRECATED - will be removed in next major version. */ export const typographyFontWeightsItalic : string; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicWeight : number; +/** System token, used to generate text styles */ export const typographyFontWeightsItalicStyle : string; export const typographyFontSizeLabel : string; export const typographyFontSizeSmallBody : string; @@ -117,83 +204,162 @@ export const typographyFontSizeH3 : string; export const typographyFontSizeH2 : string; export const typographyFontSizeH1 : string; export const typographyFontSizeDisplay : string; +/** System token, used to generate type styles */ export const typographyLetterSpacing0 : string; +/** System token, used to generate type styles */ export const typographyParagraphSpacing0 : string; +/** Labels and captions */ export const typographyRegularLabel : string; +/** Smaller body text */ export const typographyRegularSmallBody : string; +/** Default body text */ export const typographyRegularBody : string; +/** Larger body text */ export const typographyRegularLargeBody : string; +/** Alternate (unbolded) style for Heading 6 */ export const typographyRegularH6 : string; +/** Alternate (unbolded) style for Heading 5 */ export const typographyRegularH5 : string; +/** Alternate (unbolded) style for Heading 4 */ export const typographyRegularH4 : string; +/** Alternate (unbolded) style for Heading 3 */ export const typographyRegularH3 : string; +/** Alternate (unbolded) style for Heading 2 */ export const typographyRegularH2 : string; +/** Alternate (unbolded) style for Heading 1 */ export const typographyRegularH1 : string; +/** Extra-large body text size. Do not use for headings */ export const typographyRegularDisplay : string; +/** Labels and captions (bolded) */ export const typographyBoldLabel : string; +/** Default for small body text (bolded) */ export const typographyBoldSmallBody : string; +/** Default for body text (bolded) */ export const typographyBoldBody : string; +/** Larger text size for body text (bolded) */ export const typographyBoldLargeBody : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H6 */ export const typographyBoldH6 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H5 */ export const typographyBoldH5 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H4 */ export const typographyBoldH4 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H3 */ export const typographyBoldH3 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H2 */ export const typographyBoldH2 : string; +/** Default style for Heading 6. Includes all sizing/spacing values for H1 */ export const typographyBoldH1 : string; +/** Extra-large font size (bolded). Do not use for headings */ export const typographyBoldDisplay : string; +/** Labels and captions (italic) */ export const typographyItalicLabel : string; +/** Small body text (italic) */ export const typographyItalicSmallBody : string; +/** Default for body text (italic) */ export const typographyItalicBody : string; +/** Larger text size for body text (italic) */ export const typographyItalicLargeBody : string; +/** Alternate (italic) style for Heading 6 */ export const typographyItalicH6 : string; +/** Alternate (italic) style for Heading 5 */ export const typographyItalicH5 : string; +/** Alternate (italic) style for Heading 4 */ export const typographyItalicH4 : string; +/** Alternate (italic) style for Heading 3 */ export const typographyItalicH3 : string; +/** Alternate (italic) style for Heading 2 */ export const typographyItalicH2 : string; +/** Alternate (italic) style for Heading 1 */ export const typographyItalicH1 : string; +/** Extra-large font size (italic). Do not use for headings */ export const typographyItalicDisplay : string; export const typographyTextCaseNone : string; +/** System token, used to generate type styles */ export const typographyTextDecorationNone : string; +/** System token, used to generate type styles */ export const typographyParagraphIndent0 : string; +/** Default colour for all body text and headings */ export const typographyColorPrimary : string; +/** Alternative colour for secondary/miscellaneous text */ export const typographyColorSecondary : string; +/** Use for placeholder text in forms */ export const typographyColorPlaceholder : string; +/** Use only for text in inactive user interface elements */ export const typographyColorDisabled : string; +/** Use for hyperlinks in body text and headings */ export const typographyColorLink : string; +/** Use for error, failure or danger message text */ export const typographyColorDanger : string; +/** Default colour for text on dark backgrounds */ export const typographyColorPrimaryInvert : string; +/** Secondary colour for text on dark backgrounds */ export const typographyColorSecondaryInvert : string; +/** Gold scale — lightest */ export const themeGold10 : string; +/** Gold scale */ export const themeGold20 : string; +/** Gold scale */ export const themeGold30 : string; +/** Gold scale */ export const themeGold40 : string; +/** Gold scale */ export const themeGold50 : string; +/** Gold scale */ export const themeGold60 : string; +/** Gold scale */ export const themeGold70 : string; +/** Gold scale */ export const themeGold80 : string; +/** Gold scale */ export const themeGold90 : string; +/** Gold scale — darkest */ export const themeGold100 : string; +/** Blue scale — lightest */ export const themeBlue10 : string; +/** Blue scale */ export const themeBlue20 : string; +/** Blue scale */ export const themeBlue30 : string; +/** Blue scale */ export const themeBlue40 : string; +/** Blue scale */ export const themeBlue50 : string; +/** Blue scale */ export const themeBlue60 : string; +/** Blue scale */ export const themeBlue70 : string; +/** Blue scale */ export const themeBlue80 : string; +/** Blue scale */ export const themeBlue90 : string; +/** Blue scale — darkest */ export const themeBlue100 : string; +/** Greyscale — lightest */ export const themeGray10 : string; +/** Greyscale */ export const themeGray20 : string; +/** Greyscale */ export const themeGray30 : string; +/** Greyscale */ export const themeGray40 : string; +/** Greyscale */ export const themeGray50 : string; +/** Greyscale */ export const themeGray60 : string; +/** Greyscale */ export const themeGray70 : string; +/** Greyscale */ export const themeGray80 : string; +/** Greyscale */ export const themeGray90 : string; +/** Greyscale */ export const themeGray100 : string; +/** Greyscale — darkest */ export const themeGray110 : string; +/** White */ export const themeGrayWhite : string; +/** Primary Blue (Blue 100) */ export const themePrimaryBlue : string; +/** Primary Gold (Gold 100) */ export const themePrimaryGold : string; diff --git a/packages/design-tokens/dist/js/index.js b/packages/design-tokens/dist/js/index.js index 8d17bdb4..58ace5b6 100644 --- a/packages/design-tokens/dist/js/index.js +++ b/packages/design-tokens/dist/js/index.js @@ -13,96 +13,109 @@ export const surfaceOpacity70 = 0.7; export const surfaceOpacity80 = 0.8; export const surfaceOpacity90 = 0.9; export const surfaceOpacity100 = 1; -export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; -export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards -export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips -export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs -export const surfaceColorPrimaryButtonDefault = "#013366"; -export const surfaceColorPrimaryButtonHover = "#1E5189"; -export const surfaceColorPrimaryButtonDisabled = "#EDEBE9"; -export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39"; -export const surfaceColorPrimaryDangerButtonHover = "#A2312D"; -export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; -export const surfaceColorSecondaryButtonDefault = "#FFFFFF"; -export const surfaceColorSecondaryButtonHover = "#EDEBE9"; -export const surfaceColorSecondaryButtonDisabled = "#EDEBE9"; -export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; -export const surfaceColorTertiaryButtonHover = "#ECEAE8"; -export const surfaceColorTertiaryButtonDisabled = "#EDEBE9"; -export const surfaceColorMenusDefault = "#FFFFFF"; -export const surfaceColorMenusHover = "#EDEBE9"; -export const surfaceColorFormsDefault = "#FFFFFF"; -export const surfaceColorFormsDisabled = "#EDEBE9"; -export const surfaceColorBackgroundWhite = "#FFFFFF"; -export const surfaceColorBackgroundLightGray = "#FAF9F8"; -export const surfaceColorBackgroundLightBlue = "#F1F8FE"; -export const surfaceColorBackgroundDarkBlue = "#053662"; -export const surfaceColorBorderDefault = "#D8D8D8"; -export const surfaceColorBorderMedium = "#898785"; -export const surfaceColorBorderDark = "#353433"; -export const surfaceColorBorderActive = "#2E5DD7"; -export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; +export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; // Default shadow for most content and UI elements +export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements +export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Standard shadow for UI elements like cards and buttons +export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly +export const surfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons +export const surfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button +export const surfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons +export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state +export const surfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button +export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button +export const surfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout +export const surfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default +export const surfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default +export const surfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default +export const surfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons +export const surfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button +export const surfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons +export const surfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout +export const surfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default +export const surfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default +export const surfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default +export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons +export const surfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button +export const surfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons +export const surfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout +export const surfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default +export const surfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default +export const surfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default +export const surfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items +export const surfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item +export const surfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields +export const surfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields +export const surfaceColorBackgroundWhite = "#FFFFFF"; // White background +export const surfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout +export const surfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background +export const surfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background +export const surfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements +export const surfaceColorBorderMedium = "#898785"; // Default border colour for UI elements +export const surfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs +export const surfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements +export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues export const supportSurfaceColorInfo = "#F7F9FC"; -export const supportSurfaceColorDanger = "#F4E1E2"; -export const supportSurfaceColorSuccess = "#F6FFF8"; -export const supportSurfaceColorWarning = "#FEF1D8"; -export const supportBorderColorInfo = "#053662"; -export const supportBorderColorDanger = "#CE3E39"; -export const supportBorderColorSuccess = "#42814A"; -export const supportBorderColorWarning = "#F8BB47"; -export const iconsSizeXsmall = "14px"; +export const supportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages +export const supportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages +export const supportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages +export const supportBorderColorInfo = "#053662"; // Border stroke for general/informational messages +export const supportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages +export const supportBorderColorSuccess = "#42814A"; // Border stroke for success messages +export const supportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages +export const iconsSizeXsmall = "14px"; // Smallest icon size export const iconsSizeSmall = "16px"; -export const iconsSizeMedium = "20px"; +export const iconsSizeMedium = "20px"; // Default icon size export const iconsSizeLarge = "24px"; -export const iconsSizeXlarge = "32px"; -export const iconsColorPrimary = "#2D2D2D"; -export const iconsColorSecondary = "#474543"; -export const iconsColorDisabled = "#9F9D9C"; -export const iconsColorLink = "#255A90"; -export const iconsColorInfo = "#053662"; -export const iconsColorDanger = "#CE3E39"; -export const iconsColorSuccess = "#42814A"; -export const iconsColorWarning = "#F8BB47"; -export const iconsColorPrimaryInvert = "#FFFFFF"; +export const iconsSizeXlarge = "32px"; // Largest icon size +export const iconsColorPrimary = "#2D2D2D"; // Default colour for icons +export const iconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons +export const iconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons +export const iconsColorLink = "#255A90"; // Use for hyperlinked icons +export const iconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state +export const iconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state +export const iconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state +export const iconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state +export const iconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds export const layoutBorderWidthNone = "0"; export const layoutBorderWidthSmall = "1px"; export const layoutBorderWidthMedium = "2px"; export const layoutBorderWidthLarge = "4px"; -export const layoutPaddingNone = "0"; +export const layoutPaddingNone = "0"; // No padding +export const layoutPaddingHair = "0.125rem"; // Smallest padding value for layout export const layoutPaddingXsmall = "0.25rem"; export const layoutPaddingSmall = "0.5rem"; -export const layoutPaddingMedium = "1rem"; +export const layoutPaddingMedium = "1rem"; // Default padding value for layout export const layoutPaddingLarge = "1.5rem"; -export const layoutPaddingXlarge = "2rem"; -export const layoutMarginNone = "0rem"; -export const layoutMarginHair = "0.125rem"; +export const layoutPaddingXlarge = "2rem"; // Largest padding value for layout +export const layoutMarginNone = "0rem"; // No margin +export const layoutMarginHair = "0.125rem"; // Smallest margin value for layout export const layoutMarginXsmall = "0.25rem"; -export const layoutMarginSmall = "0.5rem"; +export const layoutMarginSmall = "0.5rem"; // Default margin value for layout export const layoutMarginMedium = "1rem"; export const layoutMarginLarge = "1.5rem"; export const layoutMarginXlarge = "2rem"; export const layoutMarginXxlarge = "2.5rem"; export const layoutMarginXxxlarge = "3rem"; -export const layoutMarginHuge = "3.5rem"; +export const layoutMarginHuge = "3.5rem"; // Largest margin value for layout export const layoutBorderRadiusNone = "0"; export const layoutBorderRadiusSmall = "2px"; export const layoutBorderRadiusMedium = "4px"; export const layoutBorderRadiusLarge = "6px"; -export const typographyFontFamiliesBcSans = "'BC Sans'"; -export const typographyLineHeightsXxxdense = "1.125rem"; +export const typographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package +export const typographyLineHeightsXxxdense = "1.125rem"; // Smallest line height export const typographyLineHeightsXxdense = "1.313rem"; export const typographyLineHeightsXdense = "1.688rem"; export const typographyLineHeightsDense = "1.913rem"; -export const typographyLineHeightsRegular = "2.125rem"; +export const typographyLineHeightsRegular = "2.125rem"; // Default line height export const typographyLineHeightsSparse = "2.25rem"; export const typographyLineHeightsXsparse = "3rem"; -export const typographyLineHeightsXxsparse = "3.375rem"; -export const typographyLineHeightsAuto = "AUTO"; -export const typographyFontWeightsRegular = 400; -export const typographyFontWeightsBold = 700; +export const typographyLineHeightsXxsparse = "3.375rem"; // Largest line height +export const typographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles +export const typographyFontWeightsRegular = 400; // System token, used to generate text styles +export const typographyFontWeightsBold = 700; // System token, used to generate text styles export const typographyFontWeightsItalic = "Italic"; // DEPRECATED - will be removed in next major version. -export const typographyFontWeightsItalicWeight = 400; -export const typographyFontWeightsItalicStyle = "italic"; +export const typographyFontWeightsItalicWeight = 400; // System token, used to generate text styles +export const typographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles export const typographyFontSizeLabel = "0.75rem"; export const typographyFontSizeSmallBody = "0.875rem"; export const typographyFontSizeBody = "1rem"; @@ -113,83 +126,83 @@ export const typographyFontSizeH3 = "1.75rem"; export const typographyFontSizeH2 = "2rem"; export const typographyFontSizeH1 = "2.25rem"; export const typographyFontSizeDisplay = "3rem"; -export const typographyLetterSpacing0 = "0em"; -export const typographyParagraphSpacing0 = "0"; -export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; -export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; -export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; -export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; -export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; -export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; -export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; -export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; -export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; -export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; -export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; -export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; -export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; -export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; -export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; -export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; -export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; -export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; -export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; -export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; -export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; -export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; -export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; -export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; -export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; -export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; -export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; -export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; -export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; -export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; -export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; -export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; +export const typographyLetterSpacing0 = "0em"; // System token, used to generate type styles +export const typographyParagraphSpacing0 = "0"; // System token, used to generate type styles +export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions +export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text +export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text +export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text +export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6 +export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5 +export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4 +export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3 +export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2 +export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1 +export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings +export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded) +export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded) +export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded) +export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded) +export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6 +export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5 +export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4 +export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3 +export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2 +export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1 +export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings +export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic) +export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic) +export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic) +export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic) +export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6 +export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5 +export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4 +export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3 +export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2 +export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1 +export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings export const typographyTextCaseNone = "none"; -export const typographyTextDecorationNone = "none"; -export const typographyParagraphIndent0 = "0px"; -export const typographyColorPrimary = "#2D2D2D"; -export const typographyColorSecondary = "#474543"; -export const typographyColorPlaceholder = "#9F9D9C"; -export const typographyColorDisabled = "#9F9D9C"; -export const typographyColorLink = "#255A90"; -export const typographyColorDanger = "#CE3E39"; -export const typographyColorPrimaryInvert = "#FFFFFF"; -export const typographyColorSecondaryInvert = "#ECEAE8"; -export const themeGold10 = "#FEF8E8"; -export const themeGold20 = "#FEF0D8"; -export const themeGold30 = "#FDE9C4"; -export const themeGold40 = "#FCE2B0"; -export const themeGold50 = "#FBDA9D"; -export const themeGold60 = "#FBD389"; -export const themeGold70 = "#FACC75"; -export const themeGold80 = "#F9C462"; -export const themeGold90 = "#F8BA47"; -export const themeGold100 = "#FCBA19"; -export const themeBlue10 = "#F1F8FE"; -export const themeBlue20 = "#D8EAFD"; -export const themeBlue30 = "#C1DDFC"; -export const themeBlue40 = "#A8D0FB"; -export const themeBlue50 = "#91C4FA"; -export const themeBlue60 = "#7AB8F9"; -export const themeBlue70 = "#5595D9"; -export const themeBlue80 = "#3470B1"; -export const themeBlue90 = "#1E5189"; -export const themeBlue100 = "#013366"; -export const themeGray10 = "#FAF9F8"; -export const themeGray20 = "#F3F2F1"; -export const themeGray30 = "#ECEAE8"; -export const themeGray40 = "#E0DEDC"; -export const themeGray50 = "#D1CFCD"; -export const themeGray60 = "#C6C5C3"; -export const themeGray70 = "#9F9D9C"; -export const themeGray80 = "#605E5C"; -export const themeGray90 = "#3D3C3B"; -export const themeGray100 = "#353433"; -export const themeGray110 = "#252423"; -export const themeGrayWhite = "#FFFFFF"; -export const themePrimaryBlue = "#013366"; -export const themePrimaryGold = "#FCBA19"; +export const typographyTextDecorationNone = "none"; // System token, used to generate type styles +export const typographyParagraphIndent0 = "0px"; // System token, used to generate type styles +export const typographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings +export const typographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text +export const typographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms +export const typographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements +export const typographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings +export const typographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text +export const typographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds +export const typographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds +export const themeGold10 = "#FEF8E8"; // Gold scale — lightest +export const themeGold20 = "#FEF0D8"; // Gold scale +export const themeGold30 = "#FDE9C4"; // Gold scale +export const themeGold40 = "#FCE2B0"; // Gold scale +export const themeGold50 = "#FBDA9D"; // Gold scale +export const themeGold60 = "#FBD389"; // Gold scale +export const themeGold70 = "#FACC75"; // Gold scale +export const themeGold80 = "#F9C462"; // Gold scale +export const themeGold90 = "#F8BA47"; // Gold scale +export const themeGold100 = "#FCBA19"; // Gold scale — darkest +export const themeBlue10 = "#F1F8FE"; // Blue scale — lightest +export const themeBlue20 = "#D8EAFD"; // Blue scale +export const themeBlue30 = "#C1DDFC"; // Blue scale +export const themeBlue40 = "#A8D0FB"; // Blue scale +export const themeBlue50 = "#91C4FA"; // Blue scale +export const themeBlue60 = "#7AB8F9"; // Blue scale +export const themeBlue70 = "#5595D9"; // Blue scale +export const themeBlue80 = "#3470B1"; // Blue scale +export const themeBlue90 = "#1E5189"; // Blue scale +export const themeBlue100 = "#013366"; // Blue scale — darkest +export const themeGray10 = "#FAF9F8"; // Greyscale — lightest +export const themeGray20 = "#F3F2F1"; // Greyscale +export const themeGray30 = "#ECEAE8"; // Greyscale +export const themeGray40 = "#E0DEDC"; // Greyscale +export const themeGray50 = "#D1CFCD"; // Greyscale +export const themeGray60 = "#C6C5C3"; // Greyscale +export const themeGray70 = "#9F9D9C"; // Greyscale +export const themeGray80 = "#605E5C"; // Greyscale +export const themeGray90 = "#3D3C3B"; // Greyscale +export const themeGray100 = "#353433"; // Greyscale +export const themeGray110 = "#252423"; // Greyscale — darkest +export const themeGrayWhite = "#FFFFFF"; // White +export const themePrimaryBlue = "#013366"; // Primary Blue (Blue 100) +export const themePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100) diff --git a/packages/design-tokens/dist/package.json b/packages/design-tokens/dist/package.json index f6bba046..b2593741 100644 --- a/packages/design-tokens/dist/package.json +++ b/packages/design-tokens/dist/package.json @@ -1,6 +1,6 @@ { "name": "@bcgov/design-tokens", - "version": "3.0.1", + "version": "3.1.0", "description": "Design tokens for B.C. Design System", "repository": { "type": "git", diff --git a/packages/design-tokens/input/tokens.json b/packages/design-tokens/input/tokens.json index 1bf433b6..9ff8d984 100644 --- a/packages/design-tokens/input/tokens.json +++ b/packages/design-tokens/input/tokens.json @@ -66,7 +66,8 @@ "spread": "0" } ], - "type": "boxShadow" + "type": "boxShadow", + "description": "Default shadow for most content and UI elements" }, "small": { "value": [ @@ -88,7 +89,7 @@ } ], "type": "boxShadow", - "description": "Primarily used as a hover effect for cards" + "description": "Reduced shadow for secondary UI elements" }, "medium": { "value": [ @@ -110,7 +111,7 @@ } ], "type": "boxShadow", - "description": "Primarily used for dropdown menus and tooltips" + "description": "Standard shadow for UI elements like cards and buttons" }, "large": { "value": [ @@ -132,7 +133,7 @@ } ], "type": "boxShadow", - "description": "Primarily used for dialogs" + "description": "Larger shadow for emphasis. Use sparingly" } }, "color": { @@ -140,124 +141,209 @@ "button": { "default": { "value": "#013366", - "type": "color" + "type": "color", + "description": "Default fill colour for primary buttons" }, "hover": { "value": "#1E5189", - "type": "color" + "type": "color", + "description": "Fill colour used when user hovers over primary button" }, "disabled": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour for inactive primary buttons" } }, "dangerButton": { "default": { "value": "#CE3E39", - "type": "color" + "type": "color", + "description": "Default fill colour for buttons in danger/warning state" }, "hover": { "value": "#A2312D", - "type": "color" + "type": "color", + "description": "Fill colour used when user hovers over danger/warning button" }, "disabled": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Default fill colour for disabled danger/warning button" } + }, + "default": { + "value": "#013366", + "type": "color", + "description": "Default theme colour for components and layout" + }, + "hover": { + "value": "#1E5189", + "type": "color", + "description": "Hover variant of surface.color.primary.default" + }, + "pressed": { + "value": "#01264C", + "type": "color", + "description": "Selected/pressed variant of surface.color.primary.default" + }, + "disabled": { + "value": "#EDEBE9", + "type": "color", + "description": "Disabled/inactive variant of surface.color.primary default" } }, "secondary": { "button": { "default": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "Fill colour for secondary buttons" }, "hover": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour used when user hovers over secondary button" }, "disabled": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour for inactive secondary buttons" } + }, + "default": { + "value": "#FFFFFF", + "type": "color", + "description": "Light theme colour for components and layout" + }, + "hover": { + "value": "#EDEBE9", + "type": "color", + "description": "Hover variant of surface.color.secondary.default" + }, + "pressed": { + "value": "#E0DEDC", + "type": "color", + "description": "Selected/pressed variant of surface.color.secondary.default" + }, + "disabled": { + "value": "#EDEBE9", + "type": "color", + "description": "Disabled/inactive variant of surface.color.secondary default" } }, "tertiary": { "button": { "default": { "value": "rgba(255,255,255,0)", - "type": "color" + "type": "color", + "description": "Default fill colour for tertiary buttons" }, "hover": { "value": "#ECEAE8", - "type": "color" + "type": "color", + "description": "Fill colour used when user hovers over tertiary button" }, "disabled": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour for inactive tertiary buttons" } + }, + "default": { + "value": "#FFFFFF", + "type": "color", + "description": "Alternative light theme colour for components and layout" + }, + "hover": { + "value": "#ECEAE8", + "type": "color", + "description": "Hover variant of surface.color.tertiary.default" + }, + "pressed": { + "value": "#E0DEDC", + "type": "color", + "description": "Selected/pressed variant of surface.color.tertiary.default" + }, + "disabled": { + "value": "#EDEBE9", + "type": "color", + "description": "Disabled/inactive variant of surface.color.tertiary default" } }, "menus": { "default": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "Default fill colour for menu items" }, "hover": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour used when user hovers over a menu item" } }, "forms": { "default": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "Default fill colour for form/input fields" }, "disabled": { "value": "#EDEBE9", - "type": "color" + "type": "color", + "description": "Fill colour for inactive/disabled form/input fields" } }, "background": { "white": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "White background" }, "lightGray": { "value": "#FAF9F8", - "type": "color" + "type": "color", + "description": "Default background colour for layout" }, "lightBlue": { "value": "#F1F8FE", - "type": "color" + "type": "color", + "description": "Light blue background" }, "darkBlue": { "value": "#053662", - "type": "color" + "type": "color", + "description": "Dark blue background" } }, "border": { "default": { "value": "#D8D8D8", - "type": "color" + "type": "color", + "description": "Lighter border colour for UI elements" }, "medium": { "value": "#898785", - "type": "color" + "type": "color", + "description": "Default border colour for UI elements" }, "dark": { "value": "#353433", - "type": "color" + "type": "color", + "description": "Used as a hover colour for form fields and inputs" }, "active": { "value": "#2E5DD7", - "type": "color" + "type": "color", + "description": "Used as the active stroke colour for UI elements" } }, "overlay": { "default": { "value": "rgba(0,0,0,0.45)", - "type": "color" + "type": "color", + "description": "Background overlay colour for images and modal dialogues" } } } @@ -270,33 +356,40 @@ }, "danger": { "value": "#F4E1E2", - "type": "color" + "type": "color", + "description": "Background colour for error, failure or danger messages" }, "success": { "value": "#F6FFF8", - "type": "color" + "type": "color", + "description": "Background colour for success messages" }, "warning": { "value": "#FEF1D8", - "type": "color" + "type": "color", + "description": "Background colour for warning messages" } }, "borderColor": { "info": { "value": "#053662", - "type": "color" + "type": "color", + "description": "Border stroke for general/informational messages" }, "danger": { "value": "#CE3E39", - "type": "color" + "type": "color", + "description": "Border stroke for error, failure or danger messages" }, "success": { "value": "#42814A", - "type": "color" + "type": "color", + "description": "Border stroke for success messages" }, "warning": { "value": "#F8BB47", - "type": "color" + "type": "color", + "description": "Border stroke for warning messages" } } }, @@ -304,7 +397,8 @@ "size": { "xsmall": { "value": "14", - "type": "sizing" + "type": "sizing", + "description": "Smallest icon size" }, "small": { "value": "16", @@ -312,7 +406,8 @@ }, "medium": { "value": "20", - "type": "sizing" + "type": "sizing", + "description": "Default icon size" }, "large": { "value": "24", @@ -320,45 +415,55 @@ }, "xlarge": { "value": "32", - "type": "sizing" + "type": "sizing", + "description": "Largest icon size" } }, "color": { "primary": { "value": "#2D2D2D", - "type": "color" + "type": "color", + "description": "Default colour for icons" }, "secondary": { "value": "#474543", - "type": "color" + "type": "color", + "description": "Alternative colour for secondary/miscellaneous icons" }, "disabled": { "value": "#9F9D9C", - "type": "color" + "type": "color", + "description": "Use only for inactive/disabled icons" }, "link": { "value": "#255A90", - "type": "color" + "type": "color", + "description": "Use for hyperlinked icons" }, "info": { "value": "#053662", - "type": "color" + "type": "color", + "description": "Emphasis colour for icons in general/informational state" }, "danger": { "value": "#CE3E39", - "type": "color" + "type": "color", + "description": "Emphasis colour for icons in error, failure or danger state" }, "success": { "value": "#42814A", - "type": "color" + "type": "color", + "description": "Emphasis colour for icons in success state" }, "warning": { "value": "#F8BB47", - "type": "color" + "type": "color", + "description": "Emphasis colour for icons in warning state" }, "primaryInvert": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "Default colour for icons on dark backgrounds" } } }, @@ -384,7 +489,13 @@ "padding": { "none": { "value": "0", - "type": "spacing" + "type": "spacing", + "description": "No padding" + }, + "hair": { + "value": "0.125rem", + "type": "spacing", + "description": "Smallest padding value for layout" }, "xsmall": { "value": "0.25rem", @@ -396,7 +507,8 @@ }, "medium": { "value": "1rem", - "type": "spacing" + "type": "spacing", + "description": "Default padding value for layout" }, "large": { "value": "1.5rem", @@ -404,17 +516,20 @@ }, "xlarge": { "value": "2rem", - "type": "spacing" + "type": "spacing", + "description": "Largest padding value for layout" } }, "margin": { "none": { "value": "0rem", - "type": "spacing" + "type": "spacing", + "description": "No margin" }, "hair": { "value": "0.125rem", - "type": "spacing" + "type": "spacing", + "description": "Smallest margin value for layout" }, "xsmall": { "value": "0.25rem", @@ -422,7 +537,8 @@ }, "small": { "value": "0.5rem", - "type": "spacing" + "type": "spacing", + "description": "Default margin value for layout" }, "medium": { "value": "1rem", @@ -446,7 +562,8 @@ }, "huge": { "value": "3.5rem", - "type": "spacing" + "type": "spacing", + "description": "Largest margin value for layout" } }, "borderRadius": { @@ -472,13 +589,15 @@ "fontFamilies": { "bc-sans": { "value": "BC Sans", - "type": "fontFamilies" + "type": "fontFamilies", + "description": "BC Sans font. Requires BC Sans package" } }, "lineHeights": { "xxxdense": { "value": "1.125rem", - "type": "lineHeights" + "type": "lineHeights", + "description": "Smallest line height" }, "xxdense": { "value": "1.313rem", @@ -494,7 +613,8 @@ }, "regular": { "value": "2.125rem", - "type": "lineHeights" + "type": "lineHeights", + "description": "Default line height" }, "sparse": { "value": "2.25rem", @@ -506,25 +626,30 @@ }, "xxsparse": { "value": "3.375rem", - "type": "lineHeights" + "type": "lineHeights", + "description": "Largest line height" }, "auto": { "value": "AUTO", - "type": "lineHeights" + "type": "lineHeights", + "description": "System token, used to generate type styles" } }, "fontWeights": { "regular": { "value": "Regular", - "type": "fontWeights" + "type": "fontWeights", + "description": "System token, used to generate text styles" }, "bold": { "value": "Bold", - "type": "fontWeights" + "type": "fontWeights", + "description": "System token, used to generate text styles" }, "italic": { "value": "Italic", - "type": "fontWeights" + "type": "fontWeights", + "description": "System token, used to generate text styles" } }, "fontSize": { @@ -572,13 +697,15 @@ "letterSpacing": { "0": { "value": "0%", - "type": "letterSpacing" + "type": "letterSpacing", + "description": "System token, used to generate type styles" } }, "paragraphSpacing": { "0": { "value": "0", - "type": "paragraphSpacing" + "type": "paragraphSpacing", + "description": "System token, used to generate type styles" } }, "regular": { @@ -594,7 +721,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Labels and captions" }, "smallBody": { "value": { @@ -608,7 +736,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Smaller body text" }, "body": { "value": { @@ -622,7 +751,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default body text" }, "largeBody": { "value": { @@ -636,7 +766,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Larger body text" }, "H6": { "value": { @@ -650,7 +781,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 6" }, "H5": { "value": { @@ -664,7 +796,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 5" }, "H4": { "value": { @@ -678,7 +811,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 4" }, "H3": { "value": { @@ -692,7 +826,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 3" }, "H2": { "value": { @@ -706,7 +841,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 2" }, "H1": { "value": { @@ -720,7 +856,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (unbolded) style for Heading 1" }, "display": { "value": { @@ -734,7 +871,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Extra-large body text size. Do not use for headings" } }, "bold": { @@ -750,7 +888,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Labels and captions (bolded)" }, "smallBody": { "value": { @@ -764,7 +903,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default for small body text (bolded)" }, "body": { "value": { @@ -778,7 +918,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default for body text (bolded)" }, "largeBody": { "value": { @@ -792,7 +933,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Larger text size for body text (bolded)" }, "H6": { "value": { @@ -806,7 +948,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H6" }, "H5": { "value": { @@ -820,7 +963,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H5" }, "H4": { "value": { @@ -834,7 +978,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H4" }, "H3": { "value": { @@ -848,7 +993,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H3" }, "H2": { "value": { @@ -862,7 +1008,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H2" }, "H1": { "value": { @@ -876,7 +1023,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default style for Heading 6. Includes all sizing/spacing values for H1" }, "display": { "value": { @@ -890,7 +1038,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Extra-large font size (bolded). Do not use for headings" } }, "italic": { @@ -906,7 +1055,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Labels and captions (italic)" }, "smallBody": { "value": { @@ -920,7 +1070,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Small body text (italic)" }, "body": { "value": { @@ -934,7 +1085,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Default for body text (italic)" }, "largeBody": { "value": { @@ -948,7 +1100,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Larger text size for body text (italic)" }, "H6": { "value": { @@ -962,7 +1115,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 6" }, "H5": { "value": { @@ -976,7 +1130,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 5" }, "H4": { "value": { @@ -990,7 +1145,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 4" }, "H3": { "value": { @@ -1004,7 +1160,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 3" }, "H2": { "value": { @@ -1018,7 +1175,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 2" }, "H1": { "value": { @@ -1032,7 +1190,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Alternate (italic) style for Heading 1" }, "display": { "value": { @@ -1046,7 +1205,8 @@ "textCase": "{typography.textCase.none}", "textDecoration": "{typography.textDecoration.none}" }, - "type": "typography" + "type": "typography", + "description": "Extra-large font size (italic). Do not use for headings" } }, "textCase": { @@ -1058,47 +1218,57 @@ "textDecoration": { "none": { "value": "none", - "type": "textDecoration" + "type": "textDecoration", + "description": "System token, used to generate type styles" } }, "paragraphIndent": { "0": { "value": "0px", - "type": "dimension" + "type": "dimension", + "description": "System token, used to generate type styles" } }, "color": { "primary": { "value": "#2D2D2D", - "type": "color" + "type": "color", + "description": "Default colour for all body text and headings" }, "secondary": { "value": "#474543", - "type": "color" + "type": "color", + "description": "Alternative colour for secondary/miscellaneous text" }, "placeholder": { "value": "#9F9D9C", - "type": "color" + "type": "color", + "description": "Use for placeholder text in forms" }, "disabled": { "value": "#9F9D9C", - "type": "color" + "type": "color", + "description": "Use only for text in inactive user interface elements" }, "link": { "value": "#255A90", - "type": "color" + "type": "color", + "description": "Use for hyperlinks in body text and headings" }, "danger": { "value": "#CE3E39", - "type": "color" + "type": "color", + "description": "Use for error, failure or danger message text" }, "primaryInvert": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "Default colour for text on dark backgrounds" }, "secondaryInvert": { "value": "#ECEAE8", - "type": "color" + "type": "color", + "description": "Secondary colour for text on dark backgrounds" } } }, @@ -1106,144 +1276,178 @@ "gold": { "10": { "value": "#FEF8E8", - "type": "color" + "type": "color", + "description": "Gold scale — lightest" }, "20": { "value": "#FEF0D8", - "type": "color" + "type": "color", + "description": "Gold scale" }, "30": { "value": "#FDE9C4", - "type": "color" + "type": "color", + "description": "Gold scale" }, "40": { "value": "#FCE2B0", - "type": "color" + "type": "color", + "description": "Gold scale" }, "50": { "value": "#FBDA9D", - "type": "color" + "type": "color", + "description": "Gold scale" }, "60": { "value": "#FBD389", - "type": "color" + "type": "color", + "description": "Gold scale" }, "70": { "value": "#FACC75", - "type": "color" + "type": "color", + "description": "Gold scale" }, "80": { "value": "#F9C462", - "type": "color" + "type": "color", + "description": "Gold scale" }, "90": { "value": "#F8BA47", - "type": "color" + "type": "color", + "description": "Gold scale" }, "100": { "value": "#FCBA19", - "type": "color" + "type": "color", + "description": "Gold scale — darkest" } }, "blue": { "10": { "value": "#F1F8FE", - "type": "color" + "type": "color", + "description": "Blue scale — lightest" }, "20": { "value": "#D8EAFD", - "type": "color" + "type": "color", + "description": "Blue scale" }, "30": { "value": "#C1DDFC", - "type": "color" + "type": "color", + "description": "Blue scale" }, "40": { "value": "#A8D0FB", - "type": "color" + "type": "color", + "description": "Blue scale" }, "50": { "value": "#91C4FA", - "type": "color" + "type": "color", + "description": "Blue scale" }, "60": { "value": "#7AB8F9", - "type": "color" + "type": "color", + "description": "Blue scale" }, "70": { "value": "#5595D9", - "type": "color" + "type": "color", + "description": "Blue scale" }, "80": { "value": "#3470B1", - "type": "color" + "type": "color", + "description": "Blue scale" }, "90": { "value": "#1E5189", - "type": "color" + "type": "color", + "description": "Blue scale" }, "100": { "value": "#013366", - "type": "color" + "type": "color", + "description": "Blue scale — darkest" } }, "gray": { "10": { "value": "#FAF9F8", - "type": "color" + "type": "color", + "description": "Greyscale — lightest" }, "20": { "value": "#F3F2F1", - "type": "color" + "type": "color", + "description": "Greyscale" }, "30": { "value": "#ECEAE8", - "type": "color" + "type": "color", + "description": "Greyscale" }, "40": { "value": "#E0DEDC", - "type": "color" + "type": "color", + "description": "Greyscale" }, "50": { "value": "#D1CFCD", - "type": "color" + "type": "color", + "description": "Greyscale" }, "60": { "value": "#C6C5C3", - "type": "color" + "type": "color", + "description": "Greyscale" }, "70": { "value": "#9F9D9C", - "type": "color" + "type": "color", + "description": "Greyscale" }, "80": { "value": "#605E5C", - "type": "color" + "type": "color", + "description": "Greyscale" }, "90": { "value": "#3D3C3B", - "type": "color" + "type": "color", + "description": "Greyscale" }, "100": { "value": "#353433", - "type": "color" + "type": "color", + "description": "Greyscale" }, "110": { "value": "#252423", - "type": "color" + "type": "color", + "description": "Greyscale — darkest" }, "white": { "value": "#FFFFFF", - "type": "color" + "type": "color", + "description": "White" } }, "primaryBlue": { "value": "#013366", - "type": "color" + "type": "color", + "description": "Primary Blue (Blue 100)" }, "primaryGold": { "value": "#FCBA19", - "type": "color" + "type": "color", + "description": "Primary Gold (Gold 100)" } }, "$themes": [ diff --git a/packages/design-tokens/package-lock.json b/packages/design-tokens/package-lock.json index 2e94a4f9..3a1e09d6 100644 --- a/packages/design-tokens/package-lock.json +++ b/packages/design-tokens/package-lock.json @@ -1,12 +1,12 @@ { "name": "design-tokens", - "version": "3.0.1", + "version": "3.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "design-tokens", - "version": "3.0.1", + "version": "3.1.0", "license": "Apache-2.0", "dependencies": { "@tokens-studio/sd-transforms": "1.2.3", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 850e1930..94e211b7 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "design-tokens", - "version": "3.0.1", + "version": "3.1.0", "description": "Transformation pipeline for design tokens for B.C. Design System", "scripts": { "build": "./run-build.sh",