@bcgov/design-tokens 3.0.1 → 3.1.0-pr466

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/index.d.ts +169 -5
  2. package/cjs/index.js +13 -1
  3. package/cjs-prefixed/index.d.ts +169 -5
  4. package/cjs-prefixed/index.js +13 -1
  5. package/css/variables.css +156 -144
  6. package/css-prefixed/variables.css +156 -144
  7. package/js/index.d.ts +169 -5
  8. package/js/index.js +156 -144
  9. package/js-prefixed/index.d.ts +169 -5
  10. package/js-prefixed/index.js +156 -144
  11. package/package.json +1 -1
package/js/index.js CHANGED
@@ -13,96 +13,108 @@ export const surfaceOpacity70 = 0.7;
13
13
  export const surfaceOpacity80 = 0.8;
14
14
  export const surfaceOpacity90 = 0.9;
15
15
  export const surfaceOpacity100 = 1;
16
- export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
17
- 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
18
- export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips
19
- export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs
20
- export const surfaceColorPrimaryButtonDefault = "#013366";
21
- export const surfaceColorPrimaryButtonHover = "#1E5189";
22
- export const surfaceColorPrimaryButtonDisabled = "#EDEBE9";
23
- export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39";
24
- export const surfaceColorPrimaryDangerButtonHover = "#A2312D";
25
- export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9";
26
- export const surfaceColorSecondaryButtonDefault = "#FFFFFF";
27
- export const surfaceColorSecondaryButtonHover = "#EDEBE9";
28
- export const surfaceColorSecondaryButtonDisabled = "#EDEBE9";
29
- export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)";
30
- export const surfaceColorTertiaryButtonHover = "#ECEAE8";
31
- export const surfaceColorTertiaryButtonDisabled = "#EDEBE9";
32
- export const surfaceColorMenusDefault = "#FFFFFF";
33
- export const surfaceColorMenusHover = "#EDEBE9";
34
- export const surfaceColorFormsDefault = "#FFFFFF";
35
- export const surfaceColorFormsDisabled = "#EDEBE9";
36
- export const surfaceColorBackgroundWhite = "#FFFFFF";
37
- export const surfaceColorBackgroundLightGray = "#FAF9F8";
38
- export const surfaceColorBackgroundLightBlue = "#F1F8FE";
39
- export const surfaceColorBackgroundDarkBlue = "#053662";
40
- export const surfaceColorBorderDefault = "#D8D8D8";
41
- export const surfaceColorBorderMedium = "#898785";
42
- export const surfaceColorBorderDark = "#353433";
43
- export const surfaceColorBorderActive = "#2E5DD7";
44
- export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)";
16
+ 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
17
+ export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements
18
+ 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
19
+ export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly
20
+ export const surfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons
21
+ export const surfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button
22
+ export const surfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons
23
+ export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state
24
+ export const surfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button
25
+ export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button
26
+ export const surfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout
27
+ export const surfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default
28
+ export const surfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default
29
+ export const surfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default
30
+ export const surfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons
31
+ export const surfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button
32
+ export const surfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons
33
+ export const surfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout
34
+ export const surfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default
35
+ export const surfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default
36
+ export const surfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default
37
+ export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons
38
+ export const surfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button
39
+ export const surfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons
40
+ export const surfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout
41
+ export const surfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default
42
+ export const surfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default
43
+ export const surfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default
44
+ export const surfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items
45
+ export const surfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item
46
+ export const surfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields
47
+ export const surfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields
48
+ export const surfaceColorBackgroundWhite = "#FFFFFF"; // White background
49
+ export const surfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout
50
+ export const surfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background
51
+ export const surfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background
52
+ export const surfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements
53
+ export const surfaceColorBorderMedium = "#898785"; // Default border colour for UI elements
54
+ export const surfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs
55
+ export const surfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements
56
+ export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues
45
57
  export const supportSurfaceColorInfo = "#F7F9FC";
46
- export const supportSurfaceColorDanger = "#F4E1E2";
47
- export const supportSurfaceColorSuccess = "#F6FFF8";
48
- export const supportSurfaceColorWarning = "#FEF1D8";
49
- export const supportBorderColorInfo = "#053662";
50
- export const supportBorderColorDanger = "#CE3E39";
51
- export const supportBorderColorSuccess = "#42814A";
52
- export const supportBorderColorWarning = "#F8BB47";
53
- export const iconsSizeXsmall = "14px";
58
+ export const supportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages
59
+ export const supportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages
60
+ export const supportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages
61
+ export const supportBorderColorInfo = "#053662"; // Border stroke for general/informational messages
62
+ export const supportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages
63
+ export const supportBorderColorSuccess = "#42814A"; // Border stroke for success messages
64
+ export const supportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages
65
+ export const iconsSizeXsmall = "14px"; // Smallest icon size
54
66
  export const iconsSizeSmall = "16px";
55
- export const iconsSizeMedium = "20px";
67
+ export const iconsSizeMedium = "20px"; // Default icon size
56
68
  export const iconsSizeLarge = "24px";
57
- export const iconsSizeXlarge = "32px";
58
- export const iconsColorPrimary = "#2D2D2D";
59
- export const iconsColorSecondary = "#474543";
60
- export const iconsColorDisabled = "#9F9D9C";
61
- export const iconsColorLink = "#255A90";
62
- export const iconsColorInfo = "#053662";
63
- export const iconsColorDanger = "#CE3E39";
64
- export const iconsColorSuccess = "#42814A";
65
- export const iconsColorWarning = "#F8BB47";
66
- export const iconsColorPrimaryInvert = "#FFFFFF";
69
+ export const iconsSizeXlarge = "32px"; // Largest icon size
70
+ export const iconsColorPrimary = "#2D2D2D"; // Default colour for icons
71
+ export const iconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons
72
+ export const iconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons
73
+ export const iconsColorLink = "#255A90"; // Use for hyperlinked icons
74
+ export const iconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state
75
+ export const iconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state
76
+ export const iconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state
77
+ export const iconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state
78
+ export const iconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds
67
79
  export const layoutBorderWidthNone = "0";
68
80
  export const layoutBorderWidthSmall = "1px";
69
81
  export const layoutBorderWidthMedium = "2px";
70
82
  export const layoutBorderWidthLarge = "4px";
71
- export const layoutPaddingNone = "0";
83
+ export const layoutPaddingNone = "0"; // No padding
84
+ export const layoutPaddingHair = "0.125rem"; // Smallest padding value for layout
72
85
  export const layoutPaddingXsmall = "0.25rem";
73
86
  export const layoutPaddingSmall = "0.5rem";
74
- export const layoutPaddingMedium = "1rem";
87
+ export const layoutPaddingMedium = "1rem"; // Default padding value for layout
75
88
  export const layoutPaddingLarge = "1.5rem";
76
- export const layoutPaddingXlarge = "2rem";
77
- export const layoutMarginNone = "0rem";
78
- export const layoutMarginHair = "0.125rem";
89
+ export const layoutPaddingXlarge = "2rem"; // Largest padding value for layout
90
+ export const layoutMarginNone = "0rem"; // No margin
91
+ export const layoutMarginHair = "0.125rem"; // Smallest margin value for layout
79
92
  export const layoutMarginXsmall = "0.25rem";
80
- export const layoutMarginSmall = "0.5rem";
93
+ export const layoutMarginSmall = "0.5rem"; // Default margin value for layout
81
94
  export const layoutMarginMedium = "1rem";
82
95
  export const layoutMarginLarge = "1.5rem";
83
96
  export const layoutMarginXlarge = "2rem";
84
97
  export const layoutMarginXxlarge = "2.5rem";
85
98
  export const layoutMarginXxxlarge = "3rem";
86
- export const layoutMarginHuge = "3.5rem";
99
+ export const layoutMarginHuge = "3.5rem"; // Largest margin value for layout
87
100
  export const layoutBorderRadiusNone = "0";
88
101
  export const layoutBorderRadiusSmall = "2px";
89
102
  export const layoutBorderRadiusMedium = "4px";
90
103
  export const layoutBorderRadiusLarge = "6px";
91
- export const typographyFontFamiliesBcSans = "'BC Sans'";
92
- export const typographyLineHeightsXxxdense = "1.125rem";
104
+ export const typographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package
105
+ export const typographyLineHeightsXxxdense = "1.125rem"; // Smallest line height
93
106
  export const typographyLineHeightsXxdense = "1.313rem";
94
107
  export const typographyLineHeightsXdense = "1.688rem";
95
108
  export const typographyLineHeightsDense = "1.913rem";
96
- export const typographyLineHeightsRegular = "2.125rem";
109
+ export const typographyLineHeightsRegular = "2.125rem"; // Default line height
97
110
  export const typographyLineHeightsSparse = "2.25rem";
98
111
  export const typographyLineHeightsXsparse = "3rem";
99
- export const typographyLineHeightsXxsparse = "3.375rem";
100
- export const typographyLineHeightsAuto = "AUTO";
101
- export const typographyFontWeightsRegular = 400;
102
- export const typographyFontWeightsBold = 700;
103
- export const typographyFontWeightsItalic = "Italic"; // DEPRECATED - will be removed in next major version.
104
- export const typographyFontWeightsItalicWeight = 400;
105
- export const typographyFontWeightsItalicStyle = "italic";
112
+ export const typographyLineHeightsXxsparse = "3.375rem"; // Largest line height
113
+ export const typographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles
114
+ export const typographyFontWeightsRegular = 400; // System token, used to generate text styles
115
+ export const typographyFontWeightsBold = 700; // System token, used to generate text styles
116
+ export const typographyFontWeightsItalicWeight = 400; // System token, used to generate text styles
117
+ export const typographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles
106
118
  export const typographyFontSizeLabel = "0.75rem";
107
119
  export const typographyFontSizeSmallBody = "0.875rem";
108
120
  export const typographyFontSizeBody = "1rem";
@@ -113,83 +125,83 @@ export const typographyFontSizeH3 = "1.75rem";
113
125
  export const typographyFontSizeH2 = "2rem";
114
126
  export const typographyFontSizeH1 = "2.25rem";
115
127
  export const typographyFontSizeDisplay = "3rem";
116
- export const typographyLetterSpacing0 = "0em";
117
- export const typographyParagraphSpacing0 = "0";
118
- export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'";
119
- export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'";
120
- export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'";
121
- export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
122
- export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'";
123
- export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
124
- export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'";
125
- export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'";
126
- export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'";
127
- export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'";
128
- export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'";
129
- export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'";
130
- export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'";
131
- export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'";
132
- export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
133
- export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'";
134
- export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
135
- export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
136
- export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'";
137
- export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'";
138
- export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'";
139
- export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'";
140
- export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'";
141
- export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'";
142
- export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
143
- export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
144
- export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'";
145
- export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
146
- export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
147
- export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
148
- export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'";
149
- export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'";
150
- export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
128
+ export const typographyLetterSpacing0 = "0em"; // System token, used to generate type styles
129
+ export const typographyParagraphSpacing0 = "0"; // System token, used to generate type styles
130
+ export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions
131
+ export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text
132
+ export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text
133
+ export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text
134
+ export const typographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6
135
+ export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5
136
+ export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4
137
+ export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3
138
+ export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2
139
+ export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1
140
+ export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings
141
+ export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded)
142
+ export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded)
143
+ export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded)
144
+ export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded)
145
+ export const typographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6
146
+ export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5
147
+ export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4
148
+ export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3
149
+ export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2
150
+ export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1
151
+ export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings
152
+ export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic)
153
+ export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic)
154
+ export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic)
155
+ export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic)
156
+ export const typographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6
157
+ export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5
158
+ export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4
159
+ export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3
160
+ export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2
161
+ export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1
162
+ export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings
151
163
  export const typographyTextCaseNone = "none";
152
- export const typographyTextDecorationNone = "none";
153
- export const typographyParagraphIndent0 = "0px";
154
- export const typographyColorPrimary = "#2D2D2D";
155
- export const typographyColorSecondary = "#474543";
156
- export const typographyColorPlaceholder = "#9F9D9C";
157
- export const typographyColorDisabled = "#9F9D9C";
158
- export const typographyColorLink = "#255A90";
159
- export const typographyColorDanger = "#CE3E39";
160
- export const typographyColorPrimaryInvert = "#FFFFFF";
161
- export const typographyColorSecondaryInvert = "#ECEAE8";
162
- export const themeGold10 = "#FEF8E8";
163
- export const themeGold20 = "#FEF0D8";
164
- export const themeGold30 = "#FDE9C4";
165
- export const themeGold40 = "#FCE2B0";
166
- export const themeGold50 = "#FBDA9D";
167
- export const themeGold60 = "#FBD389";
168
- export const themeGold70 = "#FACC75";
169
- export const themeGold80 = "#F9C462";
170
- export const themeGold90 = "#F8BA47";
171
- export const themeGold100 = "#FCBA19";
172
- export const themeBlue10 = "#F1F8FE";
173
- export const themeBlue20 = "#D8EAFD";
174
- export const themeBlue30 = "#C1DDFC";
175
- export const themeBlue40 = "#A8D0FB";
176
- export const themeBlue50 = "#91C4FA";
177
- export const themeBlue60 = "#7AB8F9";
178
- export const themeBlue70 = "#5595D9";
179
- export const themeBlue80 = "#3470B1";
180
- export const themeBlue90 = "#1E5189";
181
- export const themeBlue100 = "#013366";
182
- export const themeGray10 = "#FAF9F8";
183
- export const themeGray20 = "#F3F2F1";
184
- export const themeGray30 = "#ECEAE8";
185
- export const themeGray40 = "#E0DEDC";
186
- export const themeGray50 = "#D1CFCD";
187
- export const themeGray60 = "#C6C5C3";
188
- export const themeGray70 = "#9F9D9C";
189
- export const themeGray80 = "#605E5C";
190
- export const themeGray90 = "#3D3C3B";
191
- export const themeGray100 = "#353433";
192
- export const themeGray110 = "#252423";
193
- export const themeGrayWhite = "#FFFFFF";
194
- export const themePrimaryBlue = "#013366";
195
- export const themePrimaryGold = "#FCBA19";
164
+ export const typographyTextDecorationNone = "none"; // System token, used to generate type styles
165
+ export const typographyParagraphIndent0 = "0px"; // System token, used to generate type styles
166
+ export const typographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings
167
+ export const typographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text
168
+ export const typographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms
169
+ export const typographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements
170
+ export const typographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings
171
+ export const typographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text
172
+ export const typographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds
173
+ export const typographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds
174
+ export const themeGold10 = "#FEF8E8"; // Gold scale — lightest
175
+ export const themeGold20 = "#FEF0D8"; // Gold scale
176
+ export const themeGold30 = "#FDE9C4"; // Gold scale
177
+ export const themeGold40 = "#FCE2B0"; // Gold scale
178
+ export const themeGold50 = "#FBDA9D"; // Gold scale
179
+ export const themeGold60 = "#FBD389"; // Gold scale
180
+ export const themeGold70 = "#FACC75"; // Gold scale
181
+ export const themeGold80 = "#F9C462"; // Gold scale
182
+ export const themeGold90 = "#F8BA47"; // Gold scale
183
+ export const themeGold100 = "#FCBA19"; // Gold scale — darkest
184
+ export const themeBlue10 = "#F1F8FE"; // Blue scale — lightest
185
+ export const themeBlue20 = "#D8EAFD"; // Blue scale
186
+ export const themeBlue30 = "#C1DDFC"; // Blue scale
187
+ export const themeBlue40 = "#A8D0FB"; // Blue scale
188
+ export const themeBlue50 = "#91C4FA"; // Blue scale
189
+ export const themeBlue60 = "#7AB8F9"; // Blue scale
190
+ export const themeBlue70 = "#5595D9"; // Blue scale
191
+ export const themeBlue80 = "#3470B1"; // Blue scale
192
+ export const themeBlue90 = "#1E5189"; // Blue scale
193
+ export const themeBlue100 = "#013366"; // Blue scale — darkest
194
+ export const themeGray10 = "#FAF9F8"; // Greyscale — lightest
195
+ export const themeGray20 = "#F3F2F1"; // Greyscale
196
+ export const themeGray30 = "#ECEAE8"; // Greyscale
197
+ export const themeGray40 = "#E0DEDC"; // Greyscale
198
+ export const themeGray50 = "#D1CFCD"; // Greyscale
199
+ export const themeGray60 = "#C6C5C3"; // Greyscale
200
+ export const themeGray70 = "#9F9D9C"; // Greyscale
201
+ export const themeGray80 = "#605E5C"; // Greyscale
202
+ export const themeGray90 = "#3D3C3B"; // Greyscale
203
+ export const themeGray100 = "#353433"; // Greyscale
204
+ export const themeGray110 = "#252423"; // Greyscale — darkest
205
+ export const themeGrayWhite = "#FFFFFF"; // White
206
+ export const themePrimaryBlue = "#013366"; // Primary Blue (Blue 100)
207
+ export const themePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100)