@bcgov/design-tokens 3.0.1 → 3.1.0-rc1

package/cjs/index.d.ts

@@ -13,99 +13,184 @@ 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 +202,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;

package/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",
@@ -101,7 +114,6 @@ module.exports = {
   "typographyLineHeightsAuto": "AUTO",
   "typographyFontWeightsRegular": 400,
   "typographyFontWeightsBold": 700,
-  "typographyFontWeightsItalic": "Italic", // DEPRECATED - will be removed in next major version.
   "typographyFontWeightsItalicWeight": 400,
   "typographyFontWeightsItalicStyle": "italic",
   "typographyFontSizeLabel": "0.75rem",