@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.
- package/cjs/index.d.ts +169 -5
- package/cjs/index.js +13 -1
- package/cjs-prefixed/index.d.ts +169 -5
- package/cjs-prefixed/index.js +13 -1
- package/css/variables.css +156 -144
- package/css-prefixed/variables.css +156 -144
- package/js/index.d.ts +169 -5
- package/js/index.js +156 -144
- package/js-prefixed/index.d.ts +169 -5
- package/js-prefixed/index.js +156 -144
- package/package.json +1 -1
package/js-prefixed/index.js
CHANGED
|
@@ -13,96 +13,108 @@ export const bcdsSurfaceOpacity70 = 0.7;
|
|
|
13
13
|
export const bcdsSurfaceOpacity80 = 0.8;
|
|
14
14
|
export const bcdsSurfaceOpacity90 = 0.9;
|
|
15
15
|
export const bcdsSurfaceOpacity100 = 1;
|
|
16
|
-
export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
|
|
17
|
-
export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; //
|
|
18
|
-
export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; //
|
|
19
|
-
export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; //
|
|
20
|
-
export const bcdsSurfaceColorPrimaryButtonDefault = "#013366";
|
|
21
|
-
export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189";
|
|
22
|
-
export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9";
|
|
23
|
-
export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39";
|
|
24
|
-
export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D";
|
|
25
|
-
export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9";
|
|
26
|
-
export const
|
|
27
|
-
export const
|
|
28
|
-
export const
|
|
29
|
-
export const
|
|
30
|
-
export const
|
|
31
|
-
export const
|
|
32
|
-
export const
|
|
33
|
-
export const
|
|
34
|
-
export const
|
|
35
|
-
export const
|
|
36
|
-
export const
|
|
37
|
-
export const
|
|
38
|
-
export const
|
|
39
|
-
export const
|
|
40
|
-
export const
|
|
41
|
-
export const
|
|
42
|
-
export const
|
|
43
|
-
export const
|
|
44
|
-
export const
|
|
16
|
+
export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021"; // Default shadow for most content and UI elements
|
|
17
|
+
export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Reduced shadow for secondary UI elements
|
|
18
|
+
export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Standard shadow for UI elements like cards and buttons
|
|
19
|
+
export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Larger shadow for emphasis. Use sparingly
|
|
20
|
+
export const bcdsSurfaceColorPrimaryButtonDefault = "#013366"; // Default fill colour for primary buttons
|
|
21
|
+
export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189"; // Fill colour used when user hovers over primary button
|
|
22
|
+
export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive primary buttons
|
|
23
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39"; // Default fill colour for buttons in danger/warning state
|
|
24
|
+
export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D"; // Fill colour used when user hovers over danger/warning button
|
|
25
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9"; // Default fill colour for disabled danger/warning button
|
|
26
|
+
export const bcdsSurfaceColorPrimaryDefault = "#013366"; // Default theme colour for components and layout
|
|
27
|
+
export const bcdsSurfaceColorPrimaryHover = "#1E5189"; // Hover variant of surface.color.primary.default
|
|
28
|
+
export const bcdsSurfaceColorPrimaryPressed = "#01264C"; // Selected/pressed variant of surface.color.primary.default
|
|
29
|
+
export const bcdsSurfaceColorPrimaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.primary default
|
|
30
|
+
export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF"; // Fill colour for secondary buttons
|
|
31
|
+
export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9"; // Fill colour used when user hovers over secondary button
|
|
32
|
+
export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive secondary buttons
|
|
33
|
+
export const bcdsSurfaceColorSecondaryDefault = "#FFFFFF"; // Light theme colour for components and layout
|
|
34
|
+
export const bcdsSurfaceColorSecondaryHover = "#EDEBE9"; // Hover variant of surface.color.secondary.default
|
|
35
|
+
export const bcdsSurfaceColorSecondaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.secondary.default
|
|
36
|
+
export const bcdsSurfaceColorSecondaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.secondary default
|
|
37
|
+
export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)"; // Default fill colour for tertiary buttons
|
|
38
|
+
export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8"; // Fill colour used when user hovers over tertiary button
|
|
39
|
+
export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9"; // Fill colour for inactive tertiary buttons
|
|
40
|
+
export const bcdsSurfaceColorTertiaryDefault = "#FFFFFF"; // Alternative light theme colour for components and layout
|
|
41
|
+
export const bcdsSurfaceColorTertiaryHover = "#ECEAE8"; // Hover variant of surface.color.tertiary.default
|
|
42
|
+
export const bcdsSurfaceColorTertiaryPressed = "#E0DEDC"; // Selected/pressed variant of surface.color.tertiary.default
|
|
43
|
+
export const bcdsSurfaceColorTertiaryDisabled = "#EDEBE9"; // Disabled/inactive variant of surface.color.tertiary default
|
|
44
|
+
export const bcdsSurfaceColorMenusDefault = "#FFFFFF"; // Default fill colour for menu items
|
|
45
|
+
export const bcdsSurfaceColorMenusHover = "#EDEBE9"; // Fill colour used when user hovers over a menu item
|
|
46
|
+
export const bcdsSurfaceColorFormsDefault = "#FFFFFF"; // Default fill colour for form/input fields
|
|
47
|
+
export const bcdsSurfaceColorFormsDisabled = "#EDEBE9"; // Fill colour for inactive/disabled form/input fields
|
|
48
|
+
export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF"; // White background
|
|
49
|
+
export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8"; // Default background colour for layout
|
|
50
|
+
export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE"; // Light blue background
|
|
51
|
+
export const bcdsSurfaceColorBackgroundDarkBlue = "#053662"; // Dark blue background
|
|
52
|
+
export const bcdsSurfaceColorBorderDefault = "#D8D8D8"; // Lighter border colour for UI elements
|
|
53
|
+
export const bcdsSurfaceColorBorderMedium = "#898785"; // Default border colour for UI elements
|
|
54
|
+
export const bcdsSurfaceColorBorderDark = "#353433"; // Used as a hover colour for form fields and inputs
|
|
55
|
+
export const bcdsSurfaceColorBorderActive = "#2E5DD7"; // Used as the active stroke colour for UI elements
|
|
56
|
+
export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)"; // Background overlay colour for images and modal dialogues
|
|
45
57
|
export const bcdsSupportSurfaceColorInfo = "#F7F9FC";
|
|
46
|
-
export const bcdsSupportSurfaceColorDanger = "#F4E1E2";
|
|
47
|
-
export const bcdsSupportSurfaceColorSuccess = "#F6FFF8";
|
|
48
|
-
export const bcdsSupportSurfaceColorWarning = "#FEF1D8";
|
|
49
|
-
export const bcdsSupportBorderColorInfo = "#053662";
|
|
50
|
-
export const bcdsSupportBorderColorDanger = "#CE3E39";
|
|
51
|
-
export const bcdsSupportBorderColorSuccess = "#42814A";
|
|
52
|
-
export const bcdsSupportBorderColorWarning = "#F8BB47";
|
|
53
|
-
export const bcdsIconsSizeXsmall = "14px";
|
|
58
|
+
export const bcdsSupportSurfaceColorDanger = "#F4E1E2"; // Background colour for error, failure or danger messages
|
|
59
|
+
export const bcdsSupportSurfaceColorSuccess = "#F6FFF8"; // Background colour for success messages
|
|
60
|
+
export const bcdsSupportSurfaceColorWarning = "#FEF1D8"; // Background colour for warning messages
|
|
61
|
+
export const bcdsSupportBorderColorInfo = "#053662"; // Border stroke for general/informational messages
|
|
62
|
+
export const bcdsSupportBorderColorDanger = "#CE3E39"; // Border stroke for error, failure or danger messages
|
|
63
|
+
export const bcdsSupportBorderColorSuccess = "#42814A"; // Border stroke for success messages
|
|
64
|
+
export const bcdsSupportBorderColorWarning = "#F8BB47"; // Border stroke for warning messages
|
|
65
|
+
export const bcdsIconsSizeXsmall = "14px"; // Smallest icon size
|
|
54
66
|
export const bcdsIconsSizeSmall = "16px";
|
|
55
|
-
export const bcdsIconsSizeMedium = "20px";
|
|
67
|
+
export const bcdsIconsSizeMedium = "20px"; // Default icon size
|
|
56
68
|
export const bcdsIconsSizeLarge = "24px";
|
|
57
|
-
export const bcdsIconsSizeXlarge = "32px";
|
|
58
|
-
export const bcdsIconsColorPrimary = "#2D2D2D";
|
|
59
|
-
export const bcdsIconsColorSecondary = "#474543";
|
|
60
|
-
export const bcdsIconsColorDisabled = "#9F9D9C";
|
|
61
|
-
export const bcdsIconsColorLink = "#255A90";
|
|
62
|
-
export const bcdsIconsColorInfo = "#053662";
|
|
63
|
-
export const bcdsIconsColorDanger = "#CE3E39";
|
|
64
|
-
export const bcdsIconsColorSuccess = "#42814A";
|
|
65
|
-
export const bcdsIconsColorWarning = "#F8BB47";
|
|
66
|
-
export const bcdsIconsColorPrimaryInvert = "#FFFFFF";
|
|
69
|
+
export const bcdsIconsSizeXlarge = "32px"; // Largest icon size
|
|
70
|
+
export const bcdsIconsColorPrimary = "#2D2D2D"; // Default colour for icons
|
|
71
|
+
export const bcdsIconsColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous icons
|
|
72
|
+
export const bcdsIconsColorDisabled = "#9F9D9C"; // Use only for inactive/disabled icons
|
|
73
|
+
export const bcdsIconsColorLink = "#255A90"; // Use for hyperlinked icons
|
|
74
|
+
export const bcdsIconsColorInfo = "#053662"; // Emphasis colour for icons in general/informational state
|
|
75
|
+
export const bcdsIconsColorDanger = "#CE3E39"; // Emphasis colour for icons in error, failure or danger state
|
|
76
|
+
export const bcdsIconsColorSuccess = "#42814A"; // Emphasis colour for icons in success state
|
|
77
|
+
export const bcdsIconsColorWarning = "#F8BB47"; // Emphasis colour for icons in warning state
|
|
78
|
+
export const bcdsIconsColorPrimaryInvert = "#FFFFFF"; // Default colour for icons on dark backgrounds
|
|
67
79
|
export const bcdsLayoutBorderWidthNone = "0";
|
|
68
80
|
export const bcdsLayoutBorderWidthSmall = "1px";
|
|
69
81
|
export const bcdsLayoutBorderWidthMedium = "2px";
|
|
70
82
|
export const bcdsLayoutBorderWidthLarge = "4px";
|
|
71
|
-
export const bcdsLayoutPaddingNone = "0";
|
|
83
|
+
export const bcdsLayoutPaddingNone = "0"; // No padding
|
|
84
|
+
export const bcdsLayoutPaddingHair = "0.125rem"; // Smallest padding value for layout
|
|
72
85
|
export const bcdsLayoutPaddingXsmall = "0.25rem";
|
|
73
86
|
export const bcdsLayoutPaddingSmall = "0.5rem";
|
|
74
|
-
export const bcdsLayoutPaddingMedium = "1rem";
|
|
87
|
+
export const bcdsLayoutPaddingMedium = "1rem"; // Default padding value for layout
|
|
75
88
|
export const bcdsLayoutPaddingLarge = "1.5rem";
|
|
76
|
-
export const bcdsLayoutPaddingXlarge = "2rem";
|
|
77
|
-
export const bcdsLayoutMarginNone = "0rem";
|
|
78
|
-
export const bcdsLayoutMarginHair = "0.125rem";
|
|
89
|
+
export const bcdsLayoutPaddingXlarge = "2rem"; // Largest padding value for layout
|
|
90
|
+
export const bcdsLayoutMarginNone = "0rem"; // No margin
|
|
91
|
+
export const bcdsLayoutMarginHair = "0.125rem"; // Smallest margin value for layout
|
|
79
92
|
export const bcdsLayoutMarginXsmall = "0.25rem";
|
|
80
|
-
export const bcdsLayoutMarginSmall = "0.5rem";
|
|
93
|
+
export const bcdsLayoutMarginSmall = "0.5rem"; // Default margin value for layout
|
|
81
94
|
export const bcdsLayoutMarginMedium = "1rem";
|
|
82
95
|
export const bcdsLayoutMarginLarge = "1.5rem";
|
|
83
96
|
export const bcdsLayoutMarginXlarge = "2rem";
|
|
84
97
|
export const bcdsLayoutMarginXxlarge = "2.5rem";
|
|
85
98
|
export const bcdsLayoutMarginXxxlarge = "3rem";
|
|
86
|
-
export const bcdsLayoutMarginHuge = "3.5rem";
|
|
99
|
+
export const bcdsLayoutMarginHuge = "3.5rem"; // Largest margin value for layout
|
|
87
100
|
export const bcdsLayoutBorderRadiusNone = "0";
|
|
88
101
|
export const bcdsLayoutBorderRadiusSmall = "2px";
|
|
89
102
|
export const bcdsLayoutBorderRadiusMedium = "4px";
|
|
90
103
|
export const bcdsLayoutBorderRadiusLarge = "6px";
|
|
91
|
-
export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'";
|
|
92
|
-
export const bcdsTypographyLineHeightsXxxdense = "1.125rem";
|
|
104
|
+
export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'"; // BC Sans font. Requires BC Sans package
|
|
105
|
+
export const bcdsTypographyLineHeightsXxxdense = "1.125rem"; // Smallest line height
|
|
93
106
|
export const bcdsTypographyLineHeightsXxdense = "1.313rem";
|
|
94
107
|
export const bcdsTypographyLineHeightsXdense = "1.688rem";
|
|
95
108
|
export const bcdsTypographyLineHeightsDense = "1.913rem";
|
|
96
|
-
export const bcdsTypographyLineHeightsRegular = "2.125rem";
|
|
109
|
+
export const bcdsTypographyLineHeightsRegular = "2.125rem"; // Default line height
|
|
97
110
|
export const bcdsTypographyLineHeightsSparse = "2.25rem";
|
|
98
111
|
export const bcdsTypographyLineHeightsXsparse = "3rem";
|
|
99
|
-
export const bcdsTypographyLineHeightsXxsparse = "3.375rem";
|
|
100
|
-
export const bcdsTypographyLineHeightsAuto = "AUTO";
|
|
101
|
-
export const bcdsTypographyFontWeightsRegular = 400;
|
|
102
|
-
export const bcdsTypographyFontWeightsBold = 700;
|
|
103
|
-
export const
|
|
104
|
-
export const
|
|
105
|
-
export const bcdsTypographyFontWeightsItalicStyle = "italic";
|
|
112
|
+
export const bcdsTypographyLineHeightsXxsparse = "3.375rem"; // Largest line height
|
|
113
|
+
export const bcdsTypographyLineHeightsAuto = "AUTO"; // System token, used to generate type styles
|
|
114
|
+
export const bcdsTypographyFontWeightsRegular = 400; // System token, used to generate text styles
|
|
115
|
+
export const bcdsTypographyFontWeightsBold = 700; // System token, used to generate text styles
|
|
116
|
+
export const bcdsTypographyFontWeightsItalicWeight = 400; // System token, used to generate text styles
|
|
117
|
+
export const bcdsTypographyFontWeightsItalicStyle = "italic"; // System token, used to generate text styles
|
|
106
118
|
export const bcdsTypographyFontSizeLabel = "0.75rem";
|
|
107
119
|
export const bcdsTypographyFontSizeSmallBody = "0.875rem";
|
|
108
120
|
export const bcdsTypographyFontSizeBody = "1rem";
|
|
@@ -113,83 +125,83 @@ export const bcdsTypographyFontSizeH3 = "1.75rem";
|
|
|
113
125
|
export const bcdsTypographyFontSizeH2 = "2rem";
|
|
114
126
|
export const bcdsTypographyFontSizeH1 = "2.25rem";
|
|
115
127
|
export const bcdsTypographyFontSizeDisplay = "3rem";
|
|
116
|
-
export const bcdsTypographyLetterSpacing0 = "0em";
|
|
117
|
-
export const bcdsTypographyParagraphSpacing0 = "0";
|
|
118
|
-
export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'";
|
|
119
|
-
export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'";
|
|
120
|
-
export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'";
|
|
121
|
-
export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
|
|
122
|
-
export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'";
|
|
123
|
-
export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
|
|
124
|
-
export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'";
|
|
125
|
-
export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'";
|
|
126
|
-
export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'";
|
|
127
|
-
export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'";
|
|
128
|
-
export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'";
|
|
129
|
-
export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'";
|
|
130
|
-
export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'";
|
|
131
|
-
export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'";
|
|
132
|
-
export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
|
|
133
|
-
export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'";
|
|
134
|
-
export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
|
|
135
|
-
export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
|
|
136
|
-
export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'";
|
|
137
|
-
export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'";
|
|
138
|
-
export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'";
|
|
139
|
-
export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'";
|
|
140
|
-
export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'";
|
|
141
|
-
export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'";
|
|
142
|
-
export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
|
|
143
|
-
export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
|
|
144
|
-
export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'";
|
|
145
|
-
export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
|
|
146
|
-
export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
|
|
147
|
-
export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
|
|
148
|
-
export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'";
|
|
149
|
-
export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'";
|
|
150
|
-
export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
|
|
128
|
+
export const bcdsTypographyLetterSpacing0 = "0em"; // System token, used to generate type styles
|
|
129
|
+
export const bcdsTypographyParagraphSpacing0 = "0"; // System token, used to generate type styles
|
|
130
|
+
export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'"; // Labels and captions
|
|
131
|
+
export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'"; // Smaller body text
|
|
132
|
+
export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'"; // Default body text
|
|
133
|
+
export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'"; // Larger body text
|
|
134
|
+
export const bcdsTypographyRegularH6 = "400 1.125rem/1.913rem 'BC Sans'"; // Alternate (unbolded) style for Heading 6
|
|
135
|
+
export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'"; // Alternate (unbolded) style for Heading 5
|
|
136
|
+
export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'"; // Alternate (unbolded) style for Heading 4
|
|
137
|
+
export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 3
|
|
138
|
+
export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'"; // Alternate (unbolded) style for Heading 2
|
|
139
|
+
export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'"; // Alternate (unbolded) style for Heading 1
|
|
140
|
+
export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'"; // Extra-large body text size. Do not use for headings
|
|
141
|
+
export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (bolded)
|
|
142
|
+
export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'"; // Default for small body text (bolded)
|
|
143
|
+
export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'"; // Default for body text (bolded)
|
|
144
|
+
export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (bolded)
|
|
145
|
+
export const bcdsTypographyBoldH6 = "700 1.125rem/1.913rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H6
|
|
146
|
+
export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H5
|
|
147
|
+
export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H4
|
|
148
|
+
export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H3
|
|
149
|
+
export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H2
|
|
150
|
+
export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'"; // Default style for Heading 6. Includes all sizing/spacing values for H1
|
|
151
|
+
export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'"; // Extra-large font size (bolded). Do not use for headings
|
|
152
|
+
export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'"; // Labels and captions (italic)
|
|
153
|
+
export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'"; // Small body text (italic)
|
|
154
|
+
export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'"; // Default for body text (italic)
|
|
155
|
+
export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Larger text size for body text (italic)
|
|
156
|
+
export const bcdsTypographyItalicH6 = "400 italic 1.125rem/1.913rem 'BC Sans'"; // Alternate (italic) style for Heading 6
|
|
157
|
+
export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'"; // Alternate (italic) style for Heading 5
|
|
158
|
+
export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'"; // Alternate (italic) style for Heading 4
|
|
159
|
+
export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 3
|
|
160
|
+
export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'"; // Alternate (italic) style for Heading 2
|
|
161
|
+
export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'"; // Alternate (italic) style for Heading 1
|
|
162
|
+
export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'"; // Extra-large font size (italic). Do not use for headings
|
|
151
163
|
export const bcdsTypographyTextCaseNone = "none";
|
|
152
|
-
export const bcdsTypographyTextDecorationNone = "none";
|
|
153
|
-
export const bcdsTypographyParagraphIndent0 = "0px";
|
|
154
|
-
export const bcdsTypographyColorPrimary = "#2D2D2D";
|
|
155
|
-
export const bcdsTypographyColorSecondary = "#474543";
|
|
156
|
-
export const bcdsTypographyColorPlaceholder = "#9F9D9C";
|
|
157
|
-
export const bcdsTypographyColorDisabled = "#9F9D9C";
|
|
158
|
-
export const bcdsTypographyColorLink = "#255A90";
|
|
159
|
-
export const bcdsTypographyColorDanger = "#CE3E39";
|
|
160
|
-
export const bcdsTypographyColorPrimaryInvert = "#FFFFFF";
|
|
161
|
-
export const bcdsTypographyColorSecondaryInvert = "#ECEAE8";
|
|
162
|
-
export const bcdsThemeGold10 = "#FEF8E8";
|
|
163
|
-
export const bcdsThemeGold20 = "#FEF0D8";
|
|
164
|
-
export const bcdsThemeGold30 = "#FDE9C4";
|
|
165
|
-
export const bcdsThemeGold40 = "#FCE2B0";
|
|
166
|
-
export const bcdsThemeGold50 = "#FBDA9D";
|
|
167
|
-
export const bcdsThemeGold60 = "#FBD389";
|
|
168
|
-
export const bcdsThemeGold70 = "#FACC75";
|
|
169
|
-
export const bcdsThemeGold80 = "#F9C462";
|
|
170
|
-
export const bcdsThemeGold90 = "#F8BA47";
|
|
171
|
-
export const bcdsThemeGold100 = "#FCBA19";
|
|
172
|
-
export const bcdsThemeBlue10 = "#F1F8FE";
|
|
173
|
-
export const bcdsThemeBlue20 = "#D8EAFD";
|
|
174
|
-
export const bcdsThemeBlue30 = "#C1DDFC";
|
|
175
|
-
export const bcdsThemeBlue40 = "#A8D0FB";
|
|
176
|
-
export const bcdsThemeBlue50 = "#91C4FA";
|
|
177
|
-
export const bcdsThemeBlue60 = "#7AB8F9";
|
|
178
|
-
export const bcdsThemeBlue70 = "#5595D9";
|
|
179
|
-
export const bcdsThemeBlue80 = "#3470B1";
|
|
180
|
-
export const bcdsThemeBlue90 = "#1E5189";
|
|
181
|
-
export const bcdsThemeBlue100 = "#013366";
|
|
182
|
-
export const bcdsThemeGray10 = "#FAF9F8";
|
|
183
|
-
export const bcdsThemeGray20 = "#F3F2F1";
|
|
184
|
-
export const bcdsThemeGray30 = "#ECEAE8";
|
|
185
|
-
export const bcdsThemeGray40 = "#E0DEDC";
|
|
186
|
-
export const bcdsThemeGray50 = "#D1CFCD";
|
|
187
|
-
export const bcdsThemeGray60 = "#C6C5C3";
|
|
188
|
-
export const bcdsThemeGray70 = "#9F9D9C";
|
|
189
|
-
export const bcdsThemeGray80 = "#605E5C";
|
|
190
|
-
export const bcdsThemeGray90 = "#3D3C3B";
|
|
191
|
-
export const bcdsThemeGray100 = "#353433";
|
|
192
|
-
export const bcdsThemeGray110 = "#252423";
|
|
193
|
-
export const bcdsThemeGrayWhite = "#FFFFFF";
|
|
194
|
-
export const bcdsThemePrimaryBlue = "#013366";
|
|
195
|
-
export const bcdsThemePrimaryGold = "#FCBA19";
|
|
164
|
+
export const bcdsTypographyTextDecorationNone = "none"; // System token, used to generate type styles
|
|
165
|
+
export const bcdsTypographyParagraphIndent0 = "0px"; // System token, used to generate type styles
|
|
166
|
+
export const bcdsTypographyColorPrimary = "#2D2D2D"; // Default colour for all body text and headings
|
|
167
|
+
export const bcdsTypographyColorSecondary = "#474543"; // Alternative colour for secondary/miscellaneous text
|
|
168
|
+
export const bcdsTypographyColorPlaceholder = "#9F9D9C"; // Use for placeholder text in forms
|
|
169
|
+
export const bcdsTypographyColorDisabled = "#9F9D9C"; // Use only for text in inactive user interface elements
|
|
170
|
+
export const bcdsTypographyColorLink = "#255A90"; // Use for hyperlinks in body text and headings
|
|
171
|
+
export const bcdsTypographyColorDanger = "#CE3E39"; // Use for error, failure or danger message text
|
|
172
|
+
export const bcdsTypographyColorPrimaryInvert = "#FFFFFF"; // Default colour for text on dark backgrounds
|
|
173
|
+
export const bcdsTypographyColorSecondaryInvert = "#ECEAE8"; // Secondary colour for text on dark backgrounds
|
|
174
|
+
export const bcdsThemeGold10 = "#FEF8E8"; // Gold scale — lightest
|
|
175
|
+
export const bcdsThemeGold20 = "#FEF0D8"; // Gold scale
|
|
176
|
+
export const bcdsThemeGold30 = "#FDE9C4"; // Gold scale
|
|
177
|
+
export const bcdsThemeGold40 = "#FCE2B0"; // Gold scale
|
|
178
|
+
export const bcdsThemeGold50 = "#FBDA9D"; // Gold scale
|
|
179
|
+
export const bcdsThemeGold60 = "#FBD389"; // Gold scale
|
|
180
|
+
export const bcdsThemeGold70 = "#FACC75"; // Gold scale
|
|
181
|
+
export const bcdsThemeGold80 = "#F9C462"; // Gold scale
|
|
182
|
+
export const bcdsThemeGold90 = "#F8BA47"; // Gold scale
|
|
183
|
+
export const bcdsThemeGold100 = "#FCBA19"; // Gold scale — darkest
|
|
184
|
+
export const bcdsThemeBlue10 = "#F1F8FE"; // Blue scale — lightest
|
|
185
|
+
export const bcdsThemeBlue20 = "#D8EAFD"; // Blue scale
|
|
186
|
+
export const bcdsThemeBlue30 = "#C1DDFC"; // Blue scale
|
|
187
|
+
export const bcdsThemeBlue40 = "#A8D0FB"; // Blue scale
|
|
188
|
+
export const bcdsThemeBlue50 = "#91C4FA"; // Blue scale
|
|
189
|
+
export const bcdsThemeBlue60 = "#7AB8F9"; // Blue scale
|
|
190
|
+
export const bcdsThemeBlue70 = "#5595D9"; // Blue scale
|
|
191
|
+
export const bcdsThemeBlue80 = "#3470B1"; // Blue scale
|
|
192
|
+
export const bcdsThemeBlue90 = "#1E5189"; // Blue scale
|
|
193
|
+
export const bcdsThemeBlue100 = "#013366"; // Blue scale — darkest
|
|
194
|
+
export const bcdsThemeGray10 = "#FAF9F8"; // Greyscale — lightest
|
|
195
|
+
export const bcdsThemeGray20 = "#F3F2F1"; // Greyscale
|
|
196
|
+
export const bcdsThemeGray30 = "#ECEAE8"; // Greyscale
|
|
197
|
+
export const bcdsThemeGray40 = "#E0DEDC"; // Greyscale
|
|
198
|
+
export const bcdsThemeGray50 = "#D1CFCD"; // Greyscale
|
|
199
|
+
export const bcdsThemeGray60 = "#C6C5C3"; // Greyscale
|
|
200
|
+
export const bcdsThemeGray70 = "#9F9D9C"; // Greyscale
|
|
201
|
+
export const bcdsThemeGray80 = "#605E5C"; // Greyscale
|
|
202
|
+
export const bcdsThemeGray90 = "#3D3C3B"; // Greyscale
|
|
203
|
+
export const bcdsThemeGray100 = "#353433"; // Greyscale
|
|
204
|
+
export const bcdsThemeGray110 = "#252423"; // Greyscale — darkest
|
|
205
|
+
export const bcdsThemeGrayWhite = "#FFFFFF"; // White
|
|
206
|
+
export const bcdsThemePrimaryBlue = "#013366"; // Primary Blue (Blue 100)
|
|
207
|
+
export const bcdsThemePrimaryGold = "#FCBA19"; // Primary Gold (Gold 100)
|