@bcgov/design-tokens 4.0.0 → 5.0.0
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.
- package/cjs/index.js +97 -97
- package/cjs-prefixed/index.js +97 -97
- package/css/variables.css +97 -97
- package/css-prefixed/variables.css +97 -97
- package/js/index.js +97 -97
- package/js-prefixed/index.js +97 -97
- package/package.json +1 -1
- package/scss/variables.scss +110 -110
- package/scss-prefixed/variables.scss +110 -110
package/js/index.js
CHANGED
|
@@ -22,64 +22,64 @@ export const surfaceShadowMedium =
|
|
|
22
22
|
export const surfaceShadowLarge =
|
|
23
23
|
"0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly
|
|
24
24
|
export const surfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons
|
|
25
|
-
export const surfaceColorPrimaryButtonHover = "#
|
|
26
|
-
export const surfaceColorPrimaryButtonDisabled = "#
|
|
27
|
-
export const surfaceColorPrimaryDangerButtonDefault = "#
|
|
28
|
-
export const surfaceColorPrimaryDangerButtonHover = "#
|
|
29
|
-
export const surfaceColorPrimaryDangerButtonDisabled = "#
|
|
25
|
+
export const surfaceColorPrimaryButtonHover = "#1e5189"; // Fill colour used when user hovers over primary button
|
|
26
|
+
export const surfaceColorPrimaryButtonDisabled = "#edebe9"; // Fill colour for inactive primary buttons
|
|
27
|
+
export const surfaceColorPrimaryDangerButtonDefault = "#ce3e39"; // Default fill colour for buttons in danger/warning state
|
|
28
|
+
export const surfaceColorPrimaryDangerButtonHover = "#a2312d"; // Fill colour used when user hovers over danger/warning button
|
|
29
|
+
export const surfaceColorPrimaryDangerButtonDisabled = "#edebe9"; // Default fill colour for disabled danger/warning button
|
|
30
30
|
export const surfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout
|
|
31
|
-
export const surfaceColorPrimaryHover = "#
|
|
32
|
-
export const surfaceColorPrimaryPressed = "#
|
|
33
|
-
export const surfaceColorPrimaryDisabled = "#
|
|
34
|
-
export const surfaceColorSecondaryButtonDefault = "#
|
|
35
|
-
export const surfaceColorSecondaryButtonHover = "#
|
|
36
|
-
export const surfaceColorSecondaryButtonDisabled = "#
|
|
37
|
-
export const surfaceColorSecondaryDefault = "#
|
|
38
|
-
export const surfaceColorSecondaryHover = "#
|
|
39
|
-
export const surfaceColorSecondaryPressed = "#
|
|
40
|
-
export const surfaceColorSecondaryDisabled = "#
|
|
41
|
-
export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons
|
|
42
|
-
export const surfaceColorTertiaryButtonHover = "#
|
|
43
|
-
export const surfaceColorTertiaryButtonDisabled = "#
|
|
44
|
-
export const surfaceColorTertiaryDefault = "
|
|
45
|
-
export const surfaceColorTertiaryHover = "#
|
|
46
|
-
export const surfaceColorTertiaryPressed = "#
|
|
47
|
-
export const surfaceColorTertiaryDisabled = "#
|
|
48
|
-
export const surfaceColorMenusDefault = "#
|
|
49
|
-
export const surfaceColorMenusHover = "#
|
|
50
|
-
export const surfaceColorFormsDefault = "#
|
|
51
|
-
export const surfaceColorFormsDisabled = "#
|
|
52
|
-
export const surfaceColorBackgroundWhite = "#
|
|
53
|
-
export const surfaceColorBackgroundLightGray = "#
|
|
54
|
-
export const surfaceColorBackgroundLightBlue = "#
|
|
31
|
+
export const surfaceColorPrimaryHover = "#1e5189"; // Hover variant of surface.color.primary.default
|
|
32
|
+
export const surfaceColorPrimaryPressed = "#01264c"; // Selected/pressed variant of surface.color.primary.default
|
|
33
|
+
export const surfaceColorPrimaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.primary default
|
|
34
|
+
export const surfaceColorSecondaryButtonDefault = "#ffffff"; // Fill colour for secondary buttons
|
|
35
|
+
export const surfaceColorSecondaryButtonHover = "#edebe9"; // Fill colour used when user hovers over secondary button
|
|
36
|
+
export const surfaceColorSecondaryButtonDisabled = "#edebe9"; // Fill colour for inactive secondary buttons
|
|
37
|
+
export const surfaceColorSecondaryDefault = "#ffffff"; // Light theme colour for components and layout
|
|
38
|
+
export const surfaceColorSecondaryHover = "#edebe9"; // Hover variant of surface.color.secondary.default
|
|
39
|
+
export const surfaceColorSecondaryPressed = "#e0dedc"; // Selected/pressed variant of surface.color.secondary.default
|
|
40
|
+
export const surfaceColorSecondaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.secondary default
|
|
41
|
+
export const surfaceColorTertiaryButtonDefault = "rgba(255, 255, 255, 0)"; // Default fill colour for tertiary buttons
|
|
42
|
+
export const surfaceColorTertiaryButtonHover = "#eceae8"; // Fill colour used when user hovers over tertiary button
|
|
43
|
+
export const surfaceColorTertiaryButtonDisabled = "#edebe9"; // Fill colour for inactive tertiary buttons
|
|
44
|
+
export const surfaceColorTertiaryDefault = "rgba(255, 255, 255, 0)"; // Alternative light theme colour for components and layout
|
|
45
|
+
export const surfaceColorTertiaryHover = "#eceae8"; // Hover variant of surface.color.tertiary.default
|
|
46
|
+
export const surfaceColorTertiaryPressed = "#e0dedc"; // Selected/pressed variant of surface.color.tertiary.default
|
|
47
|
+
export const surfaceColorTertiaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.tertiary default
|
|
48
|
+
export const surfaceColorMenusDefault = "#ffffff"; // Default fill colour for menu items
|
|
49
|
+
export const surfaceColorMenusHover = "#edebe9"; // Fill colour used when user hovers over a menu item
|
|
50
|
+
export const surfaceColorFormsDefault = "#ffffff"; // Default fill colour for form/input fields
|
|
51
|
+
export const surfaceColorFormsDisabled = "#edebe9"; // Fill colour for inactive/disabled form/input fields
|
|
52
|
+
export const surfaceColorBackgroundWhite = "#ffffff"; // White background
|
|
53
|
+
export const surfaceColorBackgroundLightGray = "#faf9f8"; // Default background colour for layout
|
|
54
|
+
export const surfaceColorBackgroundLightBlue = "#f1f8fe"; // Light blue background
|
|
55
55
|
export const surfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background
|
|
56
|
-
export const surfaceColorBorderDefault = "#
|
|
56
|
+
export const surfaceColorBorderDefault = "#d8d8d8"; // Lighter border colour for UI elements
|
|
57
57
|
export const surfaceColorBorderMedium = "#898785"; // Default border colour for UI elements
|
|
58
58
|
export const surfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs
|
|
59
|
-
export const surfaceColorBorderActive = "#
|
|
60
|
-
export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues
|
|
61
|
-
export const supportSurfaceColorInfo = "#
|
|
62
|
-
export const supportSurfaceColorDanger = "#
|
|
63
|
-
export const supportSurfaceColorSuccess = "#
|
|
64
|
-
export const supportSurfaceColorWarning = "#
|
|
59
|
+
export const surfaceColorBorderActive = "#2e5dd7"; // Used as the active stroke colour for UI elements
|
|
60
|
+
export const surfaceColorOverlayDefault = "rgba(0, 0, 0, 0.45)"; // Background overlay colour for images and modal dialogues
|
|
61
|
+
export const supportSurfaceColorInfo = "#f7f9fc";
|
|
62
|
+
export const supportSurfaceColorDanger = "#f4e1e2"; // Background colour for error, failure or danger messages
|
|
63
|
+
export const supportSurfaceColorSuccess = "#f6fff8"; // Background colour for success messages
|
|
64
|
+
export const supportSurfaceColorWarning = "#fef1d8"; // Background colour for warning messages
|
|
65
65
|
export const supportBorderColorInfo = "#053662"; // Border stroke for general/informational messages
|
|
66
|
-
export const supportBorderColorDanger = "#
|
|
67
|
-
export const supportBorderColorSuccess = "#
|
|
68
|
-
export const supportBorderColorWarning = "#
|
|
66
|
+
export const supportBorderColorDanger = "#ce3e39"; // Border stroke for error, failure or danger messages
|
|
67
|
+
export const supportBorderColorSuccess = "#42814a"; // Border stroke for success messages
|
|
68
|
+
export const supportBorderColorWarning = "#f8bb47"; // Border stroke for warning messages
|
|
69
69
|
export const iconsSizeXsmall = "14px"; // Smallest icon size
|
|
70
70
|
export const iconsSizeSmall = "16px";
|
|
71
71
|
export const iconsSizeMedium = "20px"; // Default icon size
|
|
72
72
|
export const iconsSizeLarge = "24px";
|
|
73
73
|
export const iconsSizeXlarge = "32px"; // Largest icon size
|
|
74
|
-
export const iconsColorPrimary = "#
|
|
74
|
+
export const iconsColorPrimary = "#2d2d2d"; // Default colour for icons
|
|
75
75
|
export const iconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons
|
|
76
|
-
export const iconsColorDisabled = "#
|
|
77
|
-
export const iconsColorLink = "#
|
|
76
|
+
export const iconsColorDisabled = "#9f9d9c"; // Use only for inactive/disabled icons
|
|
77
|
+
export const iconsColorLink = "#255a90"; // Use for hyperlinked icons
|
|
78
78
|
export const iconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state
|
|
79
|
-
export const iconsColorDanger = "#
|
|
80
|
-
export const iconsColorSuccess = "#
|
|
81
|
-
export const iconsColorWarning = "#
|
|
82
|
-
export const iconsColorPrimaryInvert = "#
|
|
79
|
+
export const iconsColorDanger = "#ce3e39"; // Emphasis colour for icons in error, failure or danger state
|
|
80
|
+
export const iconsColorSuccess = "#42814a"; // Emphasis colour for icons in success state
|
|
81
|
+
export const iconsColorWarning = "#f8bb47"; // Emphasis colour for icons in warning state
|
|
82
|
+
export const iconsColorPrimaryInvert = "#ffffff"; // Default colour for icons on dark backgrounds
|
|
83
83
|
export const layoutBorderWidthNone = "0";
|
|
84
84
|
export const layoutBorderWidthSmall = "1px";
|
|
85
85
|
export const layoutBorderWidthMedium = "2px";
|
|
@@ -115,7 +115,7 @@ export const typographyLineHeightsRegular = "2.125rem"; // Default line height
|
|
|
115
115
|
export const typographyLineHeightsSparse = "2.25rem";
|
|
116
116
|
export const typographyLineHeightsXsparse = "3rem";
|
|
117
117
|
export const typographyLineHeightsXxsparse = "3.375rem"; // Largest line height
|
|
118
|
-
export const typographyLineHeightsAuto = "
|
|
118
|
+
export const typographyLineHeightsAuto = "normal"; // System token, used to generate type styles
|
|
119
119
|
export const typographyFontWeightsRegular = 400; // System token, used to generate text styles
|
|
120
120
|
export const typographyFontWeightsBold = 700; // System token, used to generate text styles
|
|
121
121
|
export const typographyFontWeightsItalicWeight = 400; // System token, used to generate text styles
|
|
@@ -142,7 +142,7 @@ export const typographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate
|
|
|
142
142
|
export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3
|
|
143
143
|
export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2
|
|
144
144
|
export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1
|
|
145
|
-
export const typographyRegularDisplay = "400 3rem
|
|
145
|
+
export const typographyRegularDisplay = "400 3rem 'BC Sans'"; // Extra-large body text size. Do not use for headings
|
|
146
146
|
export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded)
|
|
147
147
|
export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded)
|
|
148
148
|
export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded)
|
|
@@ -153,62 +153,62 @@ export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style
|
|
|
153
153
|
export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3
|
|
154
154
|
export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2
|
|
155
155
|
export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1
|
|
156
|
-
export const typographyBoldDisplay = "700 3rem
|
|
157
|
-
export const typographyItalicLabel = "400
|
|
156
|
+
export const typographyBoldDisplay = "700 3rem 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings
|
|
157
|
+
export const typographyItalicLabel = "italic 400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic)
|
|
158
158
|
export const typographyItalicSmallBody =
|
|
159
|
-
"400
|
|
160
|
-
export const typographyItalicBody = "400
|
|
159
|
+
"italic 400 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic)
|
|
160
|
+
export const typographyItalicBody = "italic 400 1rem/1.688rem 'BC Sans'"; // Default for body text (italic)
|
|
161
161
|
export const typographyItalicLargeBody =
|
|
162
|
-
"400
|
|
163
|
-
export const typographyItalicH6 = "400
|
|
164
|
-
export const typographyItalicH5 = "400
|
|
165
|
-
export const typographyItalicH4 = "400
|
|
166
|
-
export const typographyItalicH3 = "400
|
|
167
|
-
export const typographyItalicH2 = "400
|
|
168
|
-
export const typographyItalicH1 = "400
|
|
169
|
-
export const typographyItalicDisplay = "400
|
|
162
|
+
"italic 400 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic)
|
|
163
|
+
export const typographyItalicH6 = "italic 400 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6
|
|
164
|
+
export const typographyItalicH5 = "italic 400 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5
|
|
165
|
+
export const typographyItalicH4 = "italic 400 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4
|
|
166
|
+
export const typographyItalicH3 = "italic 400 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3
|
|
167
|
+
export const typographyItalicH2 = "italic 400 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2
|
|
168
|
+
export const typographyItalicH1 = "italic 400 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1
|
|
169
|
+
export const typographyItalicDisplay = "italic 400 3rem 'BC Sans'"; // Extra-large font size (italic). Do not use for headings
|
|
170
170
|
export const typographyTextCaseNone = "none";
|
|
171
171
|
export const typographyTextDecorationNone = "none"; // System token, used to generate type styles
|
|
172
172
|
export const typographyParagraphIndent0 = "0px"; // System token, used to generate type styles
|
|
173
|
-
export const typographyColorPrimary = "#
|
|
173
|
+
export const typographyColorPrimary = "#2d2d2d"; // Default colour for all body text and headings
|
|
174
174
|
export const typographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text
|
|
175
|
-
export const typographyColorPlaceholder = "#
|
|
176
|
-
export const typographyColorDisabled = "#
|
|
177
|
-
export const typographyColorLink = "#
|
|
178
|
-
export const typographyColorDanger = "#
|
|
179
|
-
export const typographyColorPrimaryInvert = "#
|
|
180
|
-
export const typographyColorSecondaryInvert = "#
|
|
181
|
-
export const themeGold10 = "#
|
|
182
|
-
export const themeGold20 = "#
|
|
183
|
-
export const themeGold30 = "#
|
|
184
|
-
export const themeGold40 = "#
|
|
185
|
-
export const themeGold50 = "#
|
|
186
|
-
export const themeGold60 = "#
|
|
187
|
-
export const themeGold70 = "#
|
|
188
|
-
export const themeGold80 = "#
|
|
189
|
-
export const themeGold90 = "#
|
|
190
|
-
export const themeGold100 = "#
|
|
191
|
-
export const themeBlue10 = "#
|
|
192
|
-
export const themeBlue20 = "#
|
|
193
|
-
export const themeBlue30 = "#
|
|
194
|
-
export const themeBlue40 = "#
|
|
195
|
-
export const themeBlue50 = "#
|
|
196
|
-
export const themeBlue60 = "#
|
|
197
|
-
export const themeBlue70 = "#
|
|
198
|
-
export const themeBlue80 = "#
|
|
199
|
-
export const themeBlue90 = "#
|
|
175
|
+
export const typographyColorPlaceholder = "#9f9d9c"; // Use for placeholder text in forms
|
|
176
|
+
export const typographyColorDisabled = "#9f9d9c"; // Use only for text in inactive user interface elements
|
|
177
|
+
export const typographyColorLink = "#255a90"; // Use for hyperlinks in body text and headings
|
|
178
|
+
export const typographyColorDanger = "#ce3e39"; // Use for error, failure or danger message text
|
|
179
|
+
export const typographyColorPrimaryInvert = "#ffffff"; // Default colour for text on dark backgrounds
|
|
180
|
+
export const typographyColorSecondaryInvert = "#eceae8"; // Secondary colour for text on dark backgrounds
|
|
181
|
+
export const themeGold10 = "#fef8e8"; // Gold scale — lightest
|
|
182
|
+
export const themeGold20 = "#fef0d8"; // Gold scale
|
|
183
|
+
export const themeGold30 = "#fde9c4"; // Gold scale
|
|
184
|
+
export const themeGold40 = "#fce2b0"; // Gold scale
|
|
185
|
+
export const themeGold50 = "#fbda9d"; // Gold scale
|
|
186
|
+
export const themeGold60 = "#fbd389"; // Gold scale
|
|
187
|
+
export const themeGold70 = "#facc75"; // Gold scale
|
|
188
|
+
export const themeGold80 = "#f9c462"; // Gold scale
|
|
189
|
+
export const themeGold90 = "#f8ba47"; // Gold scale
|
|
190
|
+
export const themeGold100 = "#fcba19"; // Gold scale — darkest
|
|
191
|
+
export const themeBlue10 = "#f1f8fe"; // Blue scale — lightest
|
|
192
|
+
export const themeBlue20 = "#d8eafd"; // Blue scale
|
|
193
|
+
export const themeBlue30 = "#c1ddfc"; // Blue scale
|
|
194
|
+
export const themeBlue40 = "#a8d0fb"; // Blue scale
|
|
195
|
+
export const themeBlue50 = "#91c4fa"; // Blue scale
|
|
196
|
+
export const themeBlue60 = "#7ab8f9"; // Blue scale
|
|
197
|
+
export const themeBlue70 = "#5595d9"; // Blue scale
|
|
198
|
+
export const themeBlue80 = "#3470b1"; // Blue scale
|
|
199
|
+
export const themeBlue90 = "#1e5189"; // Blue scale
|
|
200
200
|
export const themeBlue100 = "#013366"; // Blue scale — darkest
|
|
201
|
-
export const themeGray10 = "#
|
|
202
|
-
export const themeGray20 = "#
|
|
203
|
-
export const themeGray30 = "#
|
|
204
|
-
export const themeGray40 = "#
|
|
205
|
-
export const themeGray50 = "#
|
|
206
|
-
export const themeGray60 = "#
|
|
207
|
-
export const themeGray70 = "#
|
|
208
|
-
export const themeGray80 = "#
|
|
209
|
-
export const themeGray90 = "#
|
|
201
|
+
export const themeGray10 = "#faf9f8"; // Greyscale — lightest
|
|
202
|
+
export const themeGray20 = "#f3f2f1"; // Greyscale
|
|
203
|
+
export const themeGray30 = "#eceae8"; // Greyscale
|
|
204
|
+
export const themeGray40 = "#e0dedc"; // Greyscale
|
|
205
|
+
export const themeGray50 = "#d1cfcd"; // Greyscale
|
|
206
|
+
export const themeGray60 = "#c6c5c3"; // Greyscale
|
|
207
|
+
export const themeGray70 = "#9f9d9c"; // Greyscale
|
|
208
|
+
export const themeGray80 = "#605e5c"; // Greyscale
|
|
209
|
+
export const themeGray90 = "#3d3c3b"; // Greyscale
|
|
210
210
|
export const themeGray100 = "#353433"; // Greyscale
|
|
211
211
|
export const themeGray110 = "#252423"; // Greyscale — darkest
|
|
212
|
-
export const themeGrayWhite = "#
|
|
212
|
+
export const themeGrayWhite = "#ffffff"; // White
|
|
213
213
|
export const themePrimaryBlue = "#013366"; // Primary Blue (Blue 100)
|
|
214
|
-
export const themePrimaryGold = "#
|
|
214
|
+
export const themePrimaryGold = "#fcba19"; // Primary Gold (Gold 100)
|
package/js-prefixed/index.js
CHANGED
|
@@ -22,64 +22,64 @@ export const bcdsSurfaceShadowMedium =
|
|
|
22
22
|
export const bcdsSurfaceShadowLarge =
|
|
23
23
|
"0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly
|
|
24
24
|
export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons
|
|
25
|
-
export const bcdsSurfaceColorPrimaryButtonHover = "#
|
|
26
|
-
export const bcdsSurfaceColorPrimaryButtonDisabled = "#
|
|
27
|
-
export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#
|
|
28
|
-
export const bcdsSurfaceColorPrimaryDangerButtonHover = "#
|
|
29
|
-
export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#
|
|
25
|
+
export const bcdsSurfaceColorPrimaryButtonHover = "#1e5189"; // Fill colour used when user hovers over primary button
|
|
26
|
+
export const bcdsSurfaceColorPrimaryButtonDisabled = "#edebe9"; // Fill colour for inactive primary buttons
|
|
27
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#ce3e39"; // Default fill colour for buttons in danger/warning state
|
|
28
|
+
export const bcdsSurfaceColorPrimaryDangerButtonHover = "#a2312d"; // Fill colour used when user hovers over danger/warning button
|
|
29
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#edebe9"; // Default fill colour for disabled danger/warning button
|
|
30
30
|
export const bcdsSurfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout
|
|
31
|
-
export const bcdsSurfaceColorPrimaryHover = "#
|
|
32
|
-
export const bcdsSurfaceColorPrimaryPressed = "#
|
|
33
|
-
export const bcdsSurfaceColorPrimaryDisabled = "#
|
|
34
|
-
export const bcdsSurfaceColorSecondaryButtonDefault = "#
|
|
35
|
-
export const bcdsSurfaceColorSecondaryButtonHover = "#
|
|
36
|
-
export const bcdsSurfaceColorSecondaryButtonDisabled = "#
|
|
37
|
-
export const bcdsSurfaceColorSecondaryDefault = "#
|
|
38
|
-
export const bcdsSurfaceColorSecondaryHover = "#
|
|
39
|
-
export const bcdsSurfaceColorSecondaryPressed = "#
|
|
40
|
-
export const bcdsSurfaceColorSecondaryDisabled = "#
|
|
41
|
-
export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons
|
|
42
|
-
export const bcdsSurfaceColorTertiaryButtonHover = "#
|
|
43
|
-
export const bcdsSurfaceColorTertiaryButtonDisabled = "#
|
|
44
|
-
export const bcdsSurfaceColorTertiaryDefault = "
|
|
45
|
-
export const bcdsSurfaceColorTertiaryHover = "#
|
|
46
|
-
export const bcdsSurfaceColorTertiaryPressed = "#
|
|
47
|
-
export const bcdsSurfaceColorTertiaryDisabled = "#
|
|
48
|
-
export const bcdsSurfaceColorMenusDefault = "#
|
|
49
|
-
export const bcdsSurfaceColorMenusHover = "#
|
|
50
|
-
export const bcdsSurfaceColorFormsDefault = "#
|
|
51
|
-
export const bcdsSurfaceColorFormsDisabled = "#
|
|
52
|
-
export const bcdsSurfaceColorBackgroundWhite = "#
|
|
53
|
-
export const bcdsSurfaceColorBackgroundLightGray = "#
|
|
54
|
-
export const bcdsSurfaceColorBackgroundLightBlue = "#
|
|
31
|
+
export const bcdsSurfaceColorPrimaryHover = "#1e5189"; // Hover variant of surface.color.primary.default
|
|
32
|
+
export const bcdsSurfaceColorPrimaryPressed = "#01264c"; // Selected/pressed variant of surface.color.primary.default
|
|
33
|
+
export const bcdsSurfaceColorPrimaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.primary default
|
|
34
|
+
export const bcdsSurfaceColorSecondaryButtonDefault = "#ffffff"; // Fill colour for secondary buttons
|
|
35
|
+
export const bcdsSurfaceColorSecondaryButtonHover = "#edebe9"; // Fill colour used when user hovers over secondary button
|
|
36
|
+
export const bcdsSurfaceColorSecondaryButtonDisabled = "#edebe9"; // Fill colour for inactive secondary buttons
|
|
37
|
+
export const bcdsSurfaceColorSecondaryDefault = "#ffffff"; // Light theme colour for components and layout
|
|
38
|
+
export const bcdsSurfaceColorSecondaryHover = "#edebe9"; // Hover variant of surface.color.secondary.default
|
|
39
|
+
export const bcdsSurfaceColorSecondaryPressed = "#e0dedc"; // Selected/pressed variant of surface.color.secondary.default
|
|
40
|
+
export const bcdsSurfaceColorSecondaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.secondary default
|
|
41
|
+
export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255, 255, 255, 0)"; // Default fill colour for tertiary buttons
|
|
42
|
+
export const bcdsSurfaceColorTertiaryButtonHover = "#eceae8"; // Fill colour used when user hovers over tertiary button
|
|
43
|
+
export const bcdsSurfaceColorTertiaryButtonDisabled = "#edebe9"; // Fill colour for inactive tertiary buttons
|
|
44
|
+
export const bcdsSurfaceColorTertiaryDefault = "rgba(255, 255, 255, 0)"; // Alternative light theme colour for components and layout
|
|
45
|
+
export const bcdsSurfaceColorTertiaryHover = "#eceae8"; // Hover variant of surface.color.tertiary.default
|
|
46
|
+
export const bcdsSurfaceColorTertiaryPressed = "#e0dedc"; // Selected/pressed variant of surface.color.tertiary.default
|
|
47
|
+
export const bcdsSurfaceColorTertiaryDisabled = "#edebe9"; // Disabled/inactive variant of surface.color.tertiary default
|
|
48
|
+
export const bcdsSurfaceColorMenusDefault = "#ffffff"; // Default fill colour for menu items
|
|
49
|
+
export const bcdsSurfaceColorMenusHover = "#edebe9"; // Fill colour used when user hovers over a menu item
|
|
50
|
+
export const bcdsSurfaceColorFormsDefault = "#ffffff"; // Default fill colour for form/input fields
|
|
51
|
+
export const bcdsSurfaceColorFormsDisabled = "#edebe9"; // Fill colour for inactive/disabled form/input fields
|
|
52
|
+
export const bcdsSurfaceColorBackgroundWhite = "#ffffff"; // White background
|
|
53
|
+
export const bcdsSurfaceColorBackgroundLightGray = "#faf9f8"; // Default background colour for layout
|
|
54
|
+
export const bcdsSurfaceColorBackgroundLightBlue = "#f1f8fe"; // Light blue background
|
|
55
55
|
export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background
|
|
56
|
-
export const bcdsSurfaceColorBorderDefault = "#
|
|
56
|
+
export const bcdsSurfaceColorBorderDefault = "#d8d8d8"; // Lighter border colour for UI elements
|
|
57
57
|
export const bcdsSurfaceColorBorderMedium = "#898785"; // Default border colour for UI elements
|
|
58
58
|
export const bcdsSurfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs
|
|
59
|
-
export const bcdsSurfaceColorBorderActive = "#
|
|
60
|
-
export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues
|
|
61
|
-
export const bcdsSupportSurfaceColorInfo = "#
|
|
62
|
-
export const bcdsSupportSurfaceColorDanger = "#
|
|
63
|
-
export const bcdsSupportSurfaceColorSuccess = "#
|
|
64
|
-
export const bcdsSupportSurfaceColorWarning = "#
|
|
59
|
+
export const bcdsSurfaceColorBorderActive = "#2e5dd7"; // Used as the active stroke colour for UI elements
|
|
60
|
+
export const bcdsSurfaceColorOverlayDefault = "rgba(0, 0, 0, 0.45)"; // Background overlay colour for images and modal dialogues
|
|
61
|
+
export const bcdsSupportSurfaceColorInfo = "#f7f9fc";
|
|
62
|
+
export const bcdsSupportSurfaceColorDanger = "#f4e1e2"; // Background colour for error, failure or danger messages
|
|
63
|
+
export const bcdsSupportSurfaceColorSuccess = "#f6fff8"; // Background colour for success messages
|
|
64
|
+
export const bcdsSupportSurfaceColorWarning = "#fef1d8"; // Background colour for warning messages
|
|
65
65
|
export const bcdsSupportBorderColorInfo = "#053662"; // Border stroke for general/informational messages
|
|
66
|
-
export const bcdsSupportBorderColorDanger = "#
|
|
67
|
-
export const bcdsSupportBorderColorSuccess = "#
|
|
68
|
-
export const bcdsSupportBorderColorWarning = "#
|
|
66
|
+
export const bcdsSupportBorderColorDanger = "#ce3e39"; // Border stroke for error, failure or danger messages
|
|
67
|
+
export const bcdsSupportBorderColorSuccess = "#42814a"; // Border stroke for success messages
|
|
68
|
+
export const bcdsSupportBorderColorWarning = "#f8bb47"; // Border stroke for warning messages
|
|
69
69
|
export const bcdsIconsSizeXsmall = "14px"; // Smallest icon size
|
|
70
70
|
export const bcdsIconsSizeSmall = "16px";
|
|
71
71
|
export const bcdsIconsSizeMedium = "20px"; // Default icon size
|
|
72
72
|
export const bcdsIconsSizeLarge = "24px";
|
|
73
73
|
export const bcdsIconsSizeXlarge = "32px"; // Largest icon size
|
|
74
|
-
export const bcdsIconsColorPrimary = "#
|
|
74
|
+
export const bcdsIconsColorPrimary = "#2d2d2d"; // Default colour for icons
|
|
75
75
|
export const bcdsIconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons
|
|
76
|
-
export const bcdsIconsColorDisabled = "#
|
|
77
|
-
export const bcdsIconsColorLink = "#
|
|
76
|
+
export const bcdsIconsColorDisabled = "#9f9d9c"; // Use only for inactive/disabled icons
|
|
77
|
+
export const bcdsIconsColorLink = "#255a90"; // Use for hyperlinked icons
|
|
78
78
|
export const bcdsIconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state
|
|
79
|
-
export const bcdsIconsColorDanger = "#
|
|
80
|
-
export const bcdsIconsColorSuccess = "#
|
|
81
|
-
export const bcdsIconsColorWarning = "#
|
|
82
|
-
export const bcdsIconsColorPrimaryInvert = "#
|
|
79
|
+
export const bcdsIconsColorDanger = "#ce3e39"; // Emphasis colour for icons in error, failure or danger state
|
|
80
|
+
export const bcdsIconsColorSuccess = "#42814a"; // Emphasis colour for icons in success state
|
|
81
|
+
export const bcdsIconsColorWarning = "#f8bb47"; // Emphasis colour for icons in warning state
|
|
82
|
+
export const bcdsIconsColorPrimaryInvert = "#ffffff"; // Default colour for icons on dark backgrounds
|
|
83
83
|
export const bcdsLayoutBorderWidthNone = "0";
|
|
84
84
|
export const bcdsLayoutBorderWidthSmall = "1px";
|
|
85
85
|
export const bcdsLayoutBorderWidthMedium = "2px";
|
|
@@ -115,7 +115,7 @@ export const bcdsTypographyLineHeightsRegular = "2.125rem"; // Default line heig
|
|
|
115
115
|
export const bcdsTypographyLineHeightsSparse = "2.25rem";
|
|
116
116
|
export const bcdsTypographyLineHeightsXsparse = "3rem";
|
|
117
117
|
export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; // Largest line height
|
|
118
|
-
export const bcdsTypographyLineHeightsAuto = "
|
|
118
|
+
export const bcdsTypographyLineHeightsAuto = "normal"; // System token, used to generate type styles
|
|
119
119
|
export const bcdsTypographyFontWeightsRegular = 400; // System token, used to generate text styles
|
|
120
120
|
export const bcdsTypographyFontWeightsBold = 700; // System token, used to generate text styles
|
|
121
121
|
export const bcdsTypographyFontWeightsItalicWeight = 400; // System token, used to generate text styles
|
|
@@ -142,7 +142,7 @@ export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Altern
|
|
|
142
142
|
export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3
|
|
143
143
|
export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2
|
|
144
144
|
export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1
|
|
145
|
-
export const bcdsTypographyRegularDisplay = "400 3rem
|
|
145
|
+
export const bcdsTypographyRegularDisplay = "400 3rem 'BC Sans'"; // Extra-large body text size. Do not use for headings
|
|
146
146
|
export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded)
|
|
147
147
|
export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded)
|
|
148
148
|
export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded)
|
|
@@ -153,63 +153,63 @@ export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default s
|
|
|
153
153
|
export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3
|
|
154
154
|
export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2
|
|
155
155
|
export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1
|
|
156
|
-
export const bcdsTypographyBoldDisplay = "700 3rem
|
|
156
|
+
export const bcdsTypographyBoldDisplay = "700 3rem 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings
|
|
157
157
|
export const bcdsTypographyItalicLabel =
|
|
158
|
-
"400
|
|
158
|
+
"italic 400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic)
|
|
159
159
|
export const bcdsTypographyItalicSmallBody =
|
|
160
|
-
"400
|
|
161
|
-
export const bcdsTypographyItalicBody = "400
|
|
160
|
+
"italic 400 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic)
|
|
161
|
+
export const bcdsTypographyItalicBody = "italic 400 1rem/1.688rem 'BC Sans'"; // Default for body text (italic)
|
|
162
162
|
export const bcdsTypographyItalicLargeBody =
|
|
163
|
-
"400
|
|
164
|
-
export const bcdsTypographyItalicH6 = "400
|
|
165
|
-
export const bcdsTypographyItalicH5 = "400
|
|
166
|
-
export const bcdsTypographyItalicH4 = "400
|
|
167
|
-
export const bcdsTypographyItalicH3 = "400
|
|
168
|
-
export const bcdsTypographyItalicH2 = "400
|
|
169
|
-
export const bcdsTypographyItalicH1 = "400
|
|
170
|
-
export const bcdsTypographyItalicDisplay = "400
|
|
163
|
+
"italic 400 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic)
|
|
164
|
+
export const bcdsTypographyItalicH6 = "italic 400 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6
|
|
165
|
+
export const bcdsTypographyItalicH5 = "italic 400 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5
|
|
166
|
+
export const bcdsTypographyItalicH4 = "italic 400 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4
|
|
167
|
+
export const bcdsTypographyItalicH3 = "italic 400 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3
|
|
168
|
+
export const bcdsTypographyItalicH2 = "italic 400 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2
|
|
169
|
+
export const bcdsTypographyItalicH1 = "italic 400 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1
|
|
170
|
+
export const bcdsTypographyItalicDisplay = "italic 400 3rem 'BC Sans'"; // Extra-large font size (italic). Do not use for headings
|
|
171
171
|
export const bcdsTypographyTextCaseNone = "none";
|
|
172
172
|
export const bcdsTypographyTextDecorationNone = "none"; // System token, used to generate type styles
|
|
173
173
|
export const bcdsTypographyParagraphIndent0 = "0px"; // System token, used to generate type styles
|
|
174
|
-
export const bcdsTypographyColorPrimary = "#
|
|
174
|
+
export const bcdsTypographyColorPrimary = "#2d2d2d"; // Default colour for all body text and headings
|
|
175
175
|
export const bcdsTypographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text
|
|
176
|
-
export const bcdsTypographyColorPlaceholder = "#
|
|
177
|
-
export const bcdsTypographyColorDisabled = "#
|
|
178
|
-
export const bcdsTypographyColorLink = "#
|
|
179
|
-
export const bcdsTypographyColorDanger = "#
|
|
180
|
-
export const bcdsTypographyColorPrimaryInvert = "#
|
|
181
|
-
export const bcdsTypographyColorSecondaryInvert = "#
|
|
182
|
-
export const bcdsThemeGold10 = "#
|
|
183
|
-
export const bcdsThemeGold20 = "#
|
|
184
|
-
export const bcdsThemeGold30 = "#
|
|
185
|
-
export const bcdsThemeGold40 = "#
|
|
186
|
-
export const bcdsThemeGold50 = "#
|
|
187
|
-
export const bcdsThemeGold60 = "#
|
|
188
|
-
export const bcdsThemeGold70 = "#
|
|
189
|
-
export const bcdsThemeGold80 = "#
|
|
190
|
-
export const bcdsThemeGold90 = "#
|
|
191
|
-
export const bcdsThemeGold100 = "#
|
|
192
|
-
export const bcdsThemeBlue10 = "#
|
|
193
|
-
export const bcdsThemeBlue20 = "#
|
|
194
|
-
export const bcdsThemeBlue30 = "#
|
|
195
|
-
export const bcdsThemeBlue40 = "#
|
|
196
|
-
export const bcdsThemeBlue50 = "#
|
|
197
|
-
export const bcdsThemeBlue60 = "#
|
|
198
|
-
export const bcdsThemeBlue70 = "#
|
|
199
|
-
export const bcdsThemeBlue80 = "#
|
|
200
|
-
export const bcdsThemeBlue90 = "#
|
|
176
|
+
export const bcdsTypographyColorPlaceholder = "#9f9d9c"; // Use for placeholder text in forms
|
|
177
|
+
export const bcdsTypographyColorDisabled = "#9f9d9c"; // Use only for text in inactive user interface elements
|
|
178
|
+
export const bcdsTypographyColorLink = "#255a90"; // Use for hyperlinks in body text and headings
|
|
179
|
+
export const bcdsTypographyColorDanger = "#ce3e39"; // Use for error, failure or danger message text
|
|
180
|
+
export const bcdsTypographyColorPrimaryInvert = "#ffffff"; // Default colour for text on dark backgrounds
|
|
181
|
+
export const bcdsTypographyColorSecondaryInvert = "#eceae8"; // Secondary colour for text on dark backgrounds
|
|
182
|
+
export const bcdsThemeGold10 = "#fef8e8"; // Gold scale — lightest
|
|
183
|
+
export const bcdsThemeGold20 = "#fef0d8"; // Gold scale
|
|
184
|
+
export const bcdsThemeGold30 = "#fde9c4"; // Gold scale
|
|
185
|
+
export const bcdsThemeGold40 = "#fce2b0"; // Gold scale
|
|
186
|
+
export const bcdsThemeGold50 = "#fbda9d"; // Gold scale
|
|
187
|
+
export const bcdsThemeGold60 = "#fbd389"; // Gold scale
|
|
188
|
+
export const bcdsThemeGold70 = "#facc75"; // Gold scale
|
|
189
|
+
export const bcdsThemeGold80 = "#f9c462"; // Gold scale
|
|
190
|
+
export const bcdsThemeGold90 = "#f8ba47"; // Gold scale
|
|
191
|
+
export const bcdsThemeGold100 = "#fcba19"; // Gold scale — darkest
|
|
192
|
+
export const bcdsThemeBlue10 = "#f1f8fe"; // Blue scale — lightest
|
|
193
|
+
export const bcdsThemeBlue20 = "#d8eafd"; // Blue scale
|
|
194
|
+
export const bcdsThemeBlue30 = "#c1ddfc"; // Blue scale
|
|
195
|
+
export const bcdsThemeBlue40 = "#a8d0fb"; // Blue scale
|
|
196
|
+
export const bcdsThemeBlue50 = "#91c4fa"; // Blue scale
|
|
197
|
+
export const bcdsThemeBlue60 = "#7ab8f9"; // Blue scale
|
|
198
|
+
export const bcdsThemeBlue70 = "#5595d9"; // Blue scale
|
|
199
|
+
export const bcdsThemeBlue80 = "#3470b1"; // Blue scale
|
|
200
|
+
export const bcdsThemeBlue90 = "#1e5189"; // Blue scale
|
|
201
201
|
export const bcdsThemeBlue100 = "#013366"; // Blue scale — darkest
|
|
202
|
-
export const bcdsThemeGray10 = "#
|
|
203
|
-
export const bcdsThemeGray20 = "#
|
|
204
|
-
export const bcdsThemeGray30 = "#
|
|
205
|
-
export const bcdsThemeGray40 = "#
|
|
206
|
-
export const bcdsThemeGray50 = "#
|
|
207
|
-
export const bcdsThemeGray60 = "#
|
|
208
|
-
export const bcdsThemeGray70 = "#
|
|
209
|
-
export const bcdsThemeGray80 = "#
|
|
210
|
-
export const bcdsThemeGray90 = "#
|
|
202
|
+
export const bcdsThemeGray10 = "#faf9f8"; // Greyscale — lightest
|
|
203
|
+
export const bcdsThemeGray20 = "#f3f2f1"; // Greyscale
|
|
204
|
+
export const bcdsThemeGray30 = "#eceae8"; // Greyscale
|
|
205
|
+
export const bcdsThemeGray40 = "#e0dedc"; // Greyscale
|
|
206
|
+
export const bcdsThemeGray50 = "#d1cfcd"; // Greyscale
|
|
207
|
+
export const bcdsThemeGray60 = "#c6c5c3"; // Greyscale
|
|
208
|
+
export const bcdsThemeGray70 = "#9f9d9c"; // Greyscale
|
|
209
|
+
export const bcdsThemeGray80 = "#605e5c"; // Greyscale
|
|
210
|
+
export const bcdsThemeGray90 = "#3d3c3b"; // Greyscale
|
|
211
211
|
export const bcdsThemeGray100 = "#353433"; // Greyscale
|
|
212
212
|
export const bcdsThemeGray110 = "#252423"; // Greyscale — darkest
|
|
213
|
-
export const bcdsThemeGrayWhite = "#
|
|
213
|
+
export const bcdsThemeGrayWhite = "#ffffff"; // White
|
|
214
214
|
export const bcdsThemePrimaryBlue = "#013366"; // Primary Blue (Blue 100)
|
|
215
|
-
export const bcdsThemePrimaryGold = "#
|
|
215
|
+
export const bcdsThemePrimaryGold = "#fcba19"; // Primary Gold (Gold 100)
|