@bcgov/design-tokens 3.0.1 → 3.1.0-pr466

package/cjs-prefixed/index.d.ts

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

package/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",
@@ -101,7 +114,6 @@ module.exports = {
   "bcdsTypographyLineHeightsAuto": "AUTO",
   "bcdsTypographyFontWeightsRegular": 400,
   "bcdsTypographyFontWeightsBold": 700,
-  "bcdsTypographyFontWeightsItalic": "Italic", // DEPRECATED - will be removed in next major version.
   "bcdsTypographyFontWeightsItalicWeight": 400,
   "bcdsTypographyFontWeightsItalicStyle": "italic",
   "bcdsTypographyFontSizeLabel": "0.75rem",