@bcgov/design-tokens 4.0.0 → 5.0.0-pr758

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 (9) hide show
  1. package/cjs/index.js +97 -97
  2. package/cjs-prefixed/index.js +97 -97
  3. package/css/variables.css +97 -97
  4. package/css-prefixed/variables.css +97 -97
  5. package/js/index.js +97 -97
  6. package/js-prefixed/index.js +97 -97
  7. package/package.json +1 -1
  8. package/scss/variables.scss +110 -110
  9. package/scss-prefixed/variables.scss +110 -110
package/scss/variables.scss CHANGED
@@ -19,68 +19,68 @@ $surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a,
19
19
  $surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons
20
20
  $surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly
21
21
  $surface-color-primary-button-default: #013366; // Default fill colour for primary buttons
22
- $surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button
23
- $surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons
24
- $surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state
25
- $surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button
26
- $surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button
22
+ $surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button
23
+ $surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons
24
+ $surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state
25
+ $surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button
26
+ $surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button
27
27
  $surface-color-primary-default: #013366; // Default theme colour for components and layout
28
- $surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default
29
- $surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default
30
- $surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default
31
- $surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons
32
- $surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button
33
- $surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons
34
- $surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout
35
- $surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default
36
- $surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default
37
- $surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default
38
- $surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons
39
- $surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button
40
- $surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons
41
- $surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout
42
- $surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default
43
- $surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default
44
- $surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default
45
- $surface-color-menus-default: #FFFFFF; // Default fill colour for menu items
46
- $surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item
47
- $surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields
48
- $surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields
49
- $surface-color-background-white: #FFFFFF; // White background
50
- $surface-color-background-light-gray: #FAF9F8; // Default background colour for layout
51
- $surface-color-background-light-blue: #F1F8FE; // Light blue background
28
+ $surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default
29
+ $surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default
30
+ $surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default
31
+ $surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons
32
+ $surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button
33
+ $surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons
34
+ $surface-color-secondary-default: #ffffff; // Light theme colour for components and layout
35
+ $surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default
36
+ $surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default
37
+ $surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default
38
+ $surface-color-tertiary-button-default: rgba(255, 255, 255, 0); // Default fill colour for tertiary buttons
39
+ $surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button
40
+ $surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons
41
+ $surface-color-tertiary-default: rgba(255, 255, 255, 0); // Alternative light theme colour for components and layout
42
+ $surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default
43
+ $surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default
44
+ $surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default
45
+ $surface-color-menus-default: #ffffff; // Default fill colour for menu items
46
+ $surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item
47
+ $surface-color-forms-default: #ffffff; // Default fill colour for form/input fields
48
+ $surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields
49
+ $surface-color-background-white: #ffffff; // White background
50
+ $surface-color-background-light-gray: #faf9f8; // Default background colour for layout
51
+ $surface-color-background-light-blue: #f1f8fe; // Light blue background
52
52
  $surface-color-background-dark-blue: #053662; // Dark blue background
53
- $surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements
53
+ $surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements
54
54
  $surface-color-border-medium: #898785; // Default border colour for UI elements
55
55
  $surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs
56
- $surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements
57
- $surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues
58
- $support-surface-color-info: #F7F9FC;
59
- $support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages
60
- $support-surface-color-success: #F6FFF8; // Background colour for success messages
61
- $support-surface-color-warning: #FEF1D8; // Background colour for warning messages
56
+ $surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements
57
+ $surface-color-overlay-default: rgba(0, 0, 0, 0.45); // Background overlay colour for images and modal dialogues
58
+ $support-surface-color-info: #f7f9fc;
59
+ $support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages
60
+ $support-surface-color-success: #f6fff8; // Background colour for success messages
61
+ $support-surface-color-warning: #fef1d8; // Background colour for warning messages
62
62
  $support-border-color-info: #053662; // Border stroke for general/informational messages
63
- $support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages
64
- $support-border-color-success: #42814A; // Border stroke for success messages
65
- $support-border-color-warning: #F8BB47; // Border stroke for warning messages
66
- $icons-size-xsmall: 14; // Smallest icon size
67
- $icons-size-small: 16;
68
- $icons-size-medium: 20; // Default icon size
69
- $icons-size-large: 24;
70
- $icons-size-xlarge: 32; // Largest icon size
71
- $icons-color-primary: #2D2D2D; // Default colour for icons
63
+ $support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages
64
+ $support-border-color-success: #42814a; // Border stroke for success messages
65
+ $support-border-color-warning: #f8bb47; // Border stroke for warning messages
66
+ $icons-size-xsmall: 14px; // Smallest icon size
67
+ $icons-size-small: 16px;
68
+ $icons-size-medium: 20px; // Default icon size
69
+ $icons-size-large: 24px;
70
+ $icons-size-xlarge: 32px; // Largest icon size
71
+ $icons-color-primary: #2d2d2d; // Default colour for icons
72
72
  $icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons
73
- $icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons
74
- $icons-color-link: #255A90; // Use for hyperlinked icons
73
+ $icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons
74
+ $icons-color-link: #255a90; // Use for hyperlinked icons
75
75
  $icons-color-info: #053662; // Emphasis colour for icons in general/informational state
76
- $icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state
77
- $icons-color-success: #42814A; // Emphasis colour for icons in success state
78
- $icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state
79
- $icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds
76
+ $icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state
77
+ $icons-color-success: #42814a; // Emphasis colour for icons in success state
78
+ $icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state
79
+ $icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds
80
80
  $layout-border-width-none: 0;
81
- $layout-border-width-small: 1;
82
- $layout-border-width-medium: 2;
83
- $layout-border-width-large: 4;
81
+ $layout-border-width-small: 1px;
82
+ $layout-border-width-medium: 2px;
83
+ $layout-border-width-large: 4px;
84
84
  $layout-padding-none: 0; // No padding
85
85
  $layout-padding-hair: 0.125rem; // Smallest padding value for layout
86
86
  $layout-padding-xsmall: 0.25rem;
@@ -99,10 +99,10 @@ $layout-margin-xxlarge: 2.5rem;
99
99
  $layout-margin-xxxlarge: 3rem;
100
100
  $layout-margin-huge: 3.5rem; // Largest margin value for layout
101
101
  $layout-border-radius-none: 0;
102
- $layout-border-radius-small: 2;
103
- $layout-border-radius-medium: 4;
104
- $layout-border-radius-large: 6;
105
- $layout-border-radius-circular: 9999; // Used for components with a circular radius
102
+ $layout-border-radius-small: 2px;
103
+ $layout-border-radius-medium: 4px;
104
+ $layout-border-radius-large: 6px;
105
+ $layout-border-radius-circular: 9999px; // Used for components with a circular radius
106
106
  $typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package
107
107
  $typography-line-heights-xxxdense: 1.125rem; // Smallest line height
108
108
  $typography-line-heights-xxdense: 1.313rem;
@@ -112,7 +112,7 @@ $typography-line-heights-regular: 2.125rem; // Default line height
112
112
  $typography-line-heights-sparse: 2.25rem;
113
113
  $typography-line-heights-xsparse: 3rem;
114
114
  $typography-line-heights-xxsparse: 3.375rem; // Largest line height
115
- $typography-line-heights-auto: AUTO; // System token, used to generate type styles
115
+ $typography-line-heights-auto: normal; // System token, used to generate type styles
116
116
  $typography-font-weights-regular: 400; // System token, used to generate text styles
117
117
  $typography-font-weights-bold: 700; // System token, used to generate text styles
118
118
  $typography-font-weights-italic-weight: 400; // System token, used to generate text styles
@@ -127,7 +127,7 @@ $typography-font-size-h3: 1.75rem;
127
127
  $typography-font-size-h2: 2rem;
128
128
  $typography-font-size-h1: 2.25rem;
129
129
  $typography-font-size-display: 3rem;
130
- $typography-letter-spacing-0: 0%; // System token, used to generate type styles
130
+ $typography-letter-spacing-0: 0em; // System token, used to generate type styles
131
131
  $typography-paragraph-spacing-0: 0; // System token, used to generate type styles
132
132
  $typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions
133
133
  $typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text
@@ -139,7 +139,7 @@ $typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) st
139
139
  $typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3
140
140
  $typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2
141
141
  $typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1
142
- $typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings
142
+ $typography-regular-display: 400 3rem 'BC Sans'; // Extra-large body text size. Do not use for headings
143
143
  $typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded)
144
144
  $typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded)
145
145
  $typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded)
@@ -150,63 +150,63 @@ $typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading
150
150
  $typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3
151
151
  $typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2
152
152
  $typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1
153
- $typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings
154
- $typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic)
155
- $typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic)
156
- $typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic)
157
- $typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic)
158
- $typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6
159
- $typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5
160
- $typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4
161
- $typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3
162
- $typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2
163
- $typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1
164
- $typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings
153
+ $typography-bold-display: 700 3rem 'BC Sans'; // Extra-large font size (bolded). Do not use for headings
154
+ $typography-italic-label: italic 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic)
155
+ $typography-italic-small-body: italic 400 0.875rem/1.313rem 'BC Sans'; // Small body text (italic)
156
+ $typography-italic-body: italic 400 1rem/1.688rem 'BC Sans'; // Default for body text (italic)
157
+ $typography-italic-large-body: italic 400 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic)
158
+ $typography-italic-h6: italic 400 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6
159
+ $typography-italic-h5: italic 400 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5
160
+ $typography-italic-h4: italic 400 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4
161
+ $typography-italic-h3: italic 400 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3
162
+ $typography-italic-h2: italic 400 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2
163
+ $typography-italic-h1: italic 400 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1
164
+ $typography-italic-display: italic 400 3rem 'BC Sans'; // Extra-large font size (italic). Do not use for headings
165
165
  $typography-text-case-none: none;
166
166
  $typography-text-decoration-none: none; // System token, used to generate type styles
167
167
  $typography-paragraph-indent-0: 0px; // System token, used to generate type styles
168
- $typography-color-primary: #2D2D2D; // Default colour for all body text and headings
168
+ $typography-color-primary: #2d2d2d; // Default colour for all body text and headings
169
169
  $typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text
170
- $typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms
171
- $typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements
172
- $typography-color-link: #255A90; // Use for hyperlinks in body text and headings
173
- $typography-color-danger: #CE3E39; // Use for error, failure or danger message text
174
- $typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds
175
- $typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds
176
- $theme-gold-10: #FEF8E8; // Gold scale — lightest
177
- $theme-gold-20: #FEF0D8; // Gold scale
178
- $theme-gold-30: #FDE9C4; // Gold scale
179
- $theme-gold-40: #FCE2B0; // Gold scale
180
- $theme-gold-50: #FBDA9D; // Gold scale
181
- $theme-gold-60: #FBD389; // Gold scale
182
- $theme-gold-70: #FACC75; // Gold scale
183
- $theme-gold-80: #F9C462; // Gold scale
184
- $theme-gold-90: #F8BA47; // Gold scale
185
- $theme-gold-100: #FCBA19; // Gold scale — darkest
186
- $theme-blue-10: #F1F8FE; // Blue scale — lightest
187
- $theme-blue-20: #D8EAFD; // Blue scale
188
- $theme-blue-30: #C1DDFC; // Blue scale
189
- $theme-blue-40: #A8D0FB; // Blue scale
190
- $theme-blue-50: #91C4FA; // Blue scale
191
- $theme-blue-60: #7AB8F9; // Blue scale
192
- $theme-blue-70: #5595D9; // Blue scale
193
- $theme-blue-80: #3470B1; // Blue scale
194
- $theme-blue-90: #1E5189; // Blue scale
170
+ $typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms
171
+ $typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements
172
+ $typography-color-link: #255a90; // Use for hyperlinks in body text and headings
173
+ $typography-color-danger: #ce3e39; // Use for error, failure or danger message text
174
+ $typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds
175
+ $typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds
176
+ $theme-gold-10: #fef8e8; // Gold scale — lightest
177
+ $theme-gold-20: #fef0d8; // Gold scale
178
+ $theme-gold-30: #fde9c4; // Gold scale
179
+ $theme-gold-40: #fce2b0; // Gold scale
180
+ $theme-gold-50: #fbda9d; // Gold scale
181
+ $theme-gold-60: #fbd389; // Gold scale
182
+ $theme-gold-70: #facc75; // Gold scale
183
+ $theme-gold-80: #f9c462; // Gold scale
184
+ $theme-gold-90: #f8ba47; // Gold scale
185
+ $theme-gold-100: #fcba19; // Gold scale — darkest
186
+ $theme-blue-10: #f1f8fe; // Blue scale — lightest
187
+ $theme-blue-20: #d8eafd; // Blue scale
188
+ $theme-blue-30: #c1ddfc; // Blue scale
189
+ $theme-blue-40: #a8d0fb; // Blue scale
190
+ $theme-blue-50: #91c4fa; // Blue scale
191
+ $theme-blue-60: #7ab8f9; // Blue scale
192
+ $theme-blue-70: #5595d9; // Blue scale
193
+ $theme-blue-80: #3470b1; // Blue scale
194
+ $theme-blue-90: #1e5189; // Blue scale
195
195
  $theme-blue-100: #013366; // Blue scale — darkest
196
- $theme-gray-10: #FAF9F8; // Greyscale — lightest
197
- $theme-gray-20: #F3F2F1; // Greyscale
198
- $theme-gray-30: #ECEAE8; // Greyscale
199
- $theme-gray-40: #E0DEDC; // Greyscale
200
- $theme-gray-50: #D1CFCD; // Greyscale
201
- $theme-gray-60: #C6C5C3; // Greyscale
202
- $theme-gray-70: #9F9D9C; // Greyscale
203
- $theme-gray-80: #605E5C; // Greyscale
204
- $theme-gray-90: #3D3C3B; // Greyscale
196
+ $theme-gray-10: #faf9f8; // Greyscale — lightest
197
+ $theme-gray-20: #f3f2f1; // Greyscale
198
+ $theme-gray-30: #eceae8; // Greyscale
199
+ $theme-gray-40: #e0dedc; // Greyscale
200
+ $theme-gray-50: #d1cfcd; // Greyscale
201
+ $theme-gray-60: #c6c5c3; // Greyscale
202
+ $theme-gray-70: #9f9d9c; // Greyscale
203
+ $theme-gray-80: #605e5c; // Greyscale
204
+ $theme-gray-90: #3d3c3b; // Greyscale
205
205
  $theme-gray-100: #353433; // Greyscale
206
206
  $theme-gray-110: #252423; // Greyscale — darkest
207
- $theme-gray-white: #FFFFFF; // White
207
+ $theme-gray-white: #ffffff; // White
208
208
  $theme-primary-blue: #013366; // Primary Blue (Blue 100)
209
- $theme-primary-gold: #FCBA19; // Primary Gold (Gold 100)
209
+ $theme-primary-gold: #fcba19; // Primary Gold (Gold 100)
210
210
 
211
211
  $bcds: (
212
212
  'surface': (
package/scss-prefixed/variables.scss CHANGED
@@ -19,68 +19,68 @@ $bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #00000
19
19
  $bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons
20
20
  $bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly
21
21
  $bcds-surface-color-primary-button-default: #013366; // Default fill colour for primary buttons
22
- $bcds-surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button
23
- $bcds-surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons
24
- $bcds-surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state
25
- $bcds-surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button
26
- $bcds-surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button
22
+ $bcds-surface-color-primary-button-hover: #1e5189; // Fill colour used when user hovers over primary button
23
+ $bcds-surface-color-primary-button-disabled: #edebe9; // Fill colour for inactive primary buttons
24
+ $bcds-surface-color-primary-danger-button-default: #ce3e39; // Default fill colour for buttons in danger/warning state
25
+ $bcds-surface-color-primary-danger-button-hover: #a2312d; // Fill colour used when user hovers over danger/warning button
26
+ $bcds-surface-color-primary-danger-button-disabled: #edebe9; // Default fill colour for disabled danger/warning button
27
27
  $bcds-surface-color-primary-default: #013366; // Default theme colour for components and layout
28
- $bcds-surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default
29
- $bcds-surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default
30
- $bcds-surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default
31
- $bcds-surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons
32
- $bcds-surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button
33
- $bcds-surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons
34
- $bcds-surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout
35
- $bcds-surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default
36
- $bcds-surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default
37
- $bcds-surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default
38
- $bcds-surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons
39
- $bcds-surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button
40
- $bcds-surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons
41
- $bcds-surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout
42
- $bcds-surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default
43
- $bcds-surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default
44
- $bcds-surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default
45
- $bcds-surface-color-menus-default: #FFFFFF; // Default fill colour for menu items
46
- $bcds-surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item
47
- $bcds-surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields
48
- $bcds-surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields
49
- $bcds-surface-color-background-white: #FFFFFF; // White background
50
- $bcds-surface-color-background-light-gray: #FAF9F8; // Default background colour for layout
51
- $bcds-surface-color-background-light-blue: #F1F8FE; // Light blue background
28
+ $bcds-surface-color-primary-hover: #1e5189; // Hover variant of surface.color.primary.default
29
+ $bcds-surface-color-primary-pressed: #01264c; // Selected/pressed variant of surface.color.primary.default
30
+ $bcds-surface-color-primary-disabled: #edebe9; // Disabled/inactive variant of surface.color.primary default
31
+ $bcds-surface-color-secondary-button-default: #ffffff; // Fill colour for secondary buttons
32
+ $bcds-surface-color-secondary-button-hover: #edebe9; // Fill colour used when user hovers over secondary button
33
+ $bcds-surface-color-secondary-button-disabled: #edebe9; // Fill colour for inactive secondary buttons
34
+ $bcds-surface-color-secondary-default: #ffffff; // Light theme colour for components and layout
35
+ $bcds-surface-color-secondary-hover: #edebe9; // Hover variant of surface.color.secondary.default
36
+ $bcds-surface-color-secondary-pressed: #e0dedc; // Selected/pressed variant of surface.color.secondary.default
37
+ $bcds-surface-color-secondary-disabled: #edebe9; // Disabled/inactive variant of surface.color.secondary default
38
+ $bcds-surface-color-tertiary-button-default: rgba(255, 255, 255, 0); // Default fill colour for tertiary buttons
39
+ $bcds-surface-color-tertiary-button-hover: #eceae8; // Fill colour used when user hovers over tertiary button
40
+ $bcds-surface-color-tertiary-button-disabled: #edebe9; // Fill colour for inactive tertiary buttons
41
+ $bcds-surface-color-tertiary-default: rgba(255, 255, 255, 0); // Alternative light theme colour for components and layout
42
+ $bcds-surface-color-tertiary-hover: #eceae8; // Hover variant of surface.color.tertiary.default
43
+ $bcds-surface-color-tertiary-pressed: #e0dedc; // Selected/pressed variant of surface.color.tertiary.default
44
+ $bcds-surface-color-tertiary-disabled: #edebe9; // Disabled/inactive variant of surface.color.tertiary default
45
+ $bcds-surface-color-menus-default: #ffffff; // Default fill colour for menu items
46
+ $bcds-surface-color-menus-hover: #edebe9; // Fill colour used when user hovers over a menu item
47
+ $bcds-surface-color-forms-default: #ffffff; // Default fill colour for form/input fields
48
+ $bcds-surface-color-forms-disabled: #edebe9; // Fill colour for inactive/disabled form/input fields
49
+ $bcds-surface-color-background-white: #ffffff; // White background
50
+ $bcds-surface-color-background-light-gray: #faf9f8; // Default background colour for layout
51
+ $bcds-surface-color-background-light-blue: #f1f8fe; // Light blue background
52
52
  $bcds-surface-color-background-dark-blue: #053662; // Dark blue background
53
- $bcds-surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements
53
+ $bcds-surface-color-border-default: #d8d8d8; // Lighter border colour for UI elements
54
54
  $bcds-surface-color-border-medium: #898785; // Default border colour for UI elements
55
55
  $bcds-surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs
56
- $bcds-surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements
57
- $bcds-surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues
58
- $bcds-support-surface-color-info: #F7F9FC;
59
- $bcds-support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages
60
- $bcds-support-surface-color-success: #F6FFF8; // Background colour for success messages
61
- $bcds-support-surface-color-warning: #FEF1D8; // Background colour for warning messages
56
+ $bcds-surface-color-border-active: #2e5dd7; // Used as the active stroke colour for UI elements
57
+ $bcds-surface-color-overlay-default: rgba(0, 0, 0, 0.45); // Background overlay colour for images and modal dialogues
58
+ $bcds-support-surface-color-info: #f7f9fc;
59
+ $bcds-support-surface-color-danger: #f4e1e2; // Background colour for error, failure or danger messages
60
+ $bcds-support-surface-color-success: #f6fff8; // Background colour for success messages
61
+ $bcds-support-surface-color-warning: #fef1d8; // Background colour for warning messages
62
62
  $bcds-support-border-color-info: #053662; // Border stroke for general/informational messages
63
- $bcds-support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages
64
- $bcds-support-border-color-success: #42814A; // Border stroke for success messages
65
- $bcds-support-border-color-warning: #F8BB47; // Border stroke for warning messages
66
- $bcds-icons-size-xsmall: 14; // Smallest icon size
67
- $bcds-icons-size-small: 16;
68
- $bcds-icons-size-medium: 20; // Default icon size
69
- $bcds-icons-size-large: 24;
70
- $bcds-icons-size-xlarge: 32; // Largest icon size
71
- $bcds-icons-color-primary: #2D2D2D; // Default colour for icons
63
+ $bcds-support-border-color-danger: #ce3e39; // Border stroke for error, failure or danger messages
64
+ $bcds-support-border-color-success: #42814a; // Border stroke for success messages
65
+ $bcds-support-border-color-warning: #f8bb47; // Border stroke for warning messages
66
+ $bcds-icons-size-xsmall: 14px; // Smallest icon size
67
+ $bcds-icons-size-small: 16px;
68
+ $bcds-icons-size-medium: 20px; // Default icon size
69
+ $bcds-icons-size-large: 24px;
70
+ $bcds-icons-size-xlarge: 32px; // Largest icon size
71
+ $bcds-icons-color-primary: #2d2d2d; // Default colour for icons
72
72
  $bcds-icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons
73
- $bcds-icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons
74
- $bcds-icons-color-link: #255A90; // Use for hyperlinked icons
73
+ $bcds-icons-color-disabled: #9f9d9c; // Use only for inactive/disabled icons
74
+ $bcds-icons-color-link: #255a90; // Use for hyperlinked icons
75
75
  $bcds-icons-color-info: #053662; // Emphasis colour for icons in general/informational state
76
- $bcds-icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state
77
- $bcds-icons-color-success: #42814A; // Emphasis colour for icons in success state
78
- $bcds-icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state
79
- $bcds-icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds
76
+ $bcds-icons-color-danger: #ce3e39; // Emphasis colour for icons in error, failure or danger state
77
+ $bcds-icons-color-success: #42814a; // Emphasis colour for icons in success state
78
+ $bcds-icons-color-warning: #f8bb47; // Emphasis colour for icons in warning state
79
+ $bcds-icons-color-primary-invert: #ffffff; // Default colour for icons on dark backgrounds
80
80
  $bcds-layout-border-width-none: 0;
81
- $bcds-layout-border-width-small: 1;
82
- $bcds-layout-border-width-medium: 2;
83
- $bcds-layout-border-width-large: 4;
81
+ $bcds-layout-border-width-small: 1px;
82
+ $bcds-layout-border-width-medium: 2px;
83
+ $bcds-layout-border-width-large: 4px;
84
84
  $bcds-layout-padding-none: 0; // No padding
85
85
  $bcds-layout-padding-hair: 0.125rem; // Smallest padding value for layout
86
86
  $bcds-layout-padding-xsmall: 0.25rem;
@@ -99,10 +99,10 @@ $bcds-layout-margin-xxlarge: 2.5rem;
99
99
  $bcds-layout-margin-xxxlarge: 3rem;
100
100
  $bcds-layout-margin-huge: 3.5rem; // Largest margin value for layout
101
101
  $bcds-layout-border-radius-none: 0;
102
- $bcds-layout-border-radius-small: 2;
103
- $bcds-layout-border-radius-medium: 4;
104
- $bcds-layout-border-radius-large: 6;
105
- $bcds-layout-border-radius-circular: 9999; // Used for components with a circular radius
102
+ $bcds-layout-border-radius-small: 2px;
103
+ $bcds-layout-border-radius-medium: 4px;
104
+ $bcds-layout-border-radius-large: 6px;
105
+ $bcds-layout-border-radius-circular: 9999px; // Used for components with a circular radius
106
106
  $bcds-typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package
107
107
  $bcds-typography-line-heights-xxxdense: 1.125rem; // Smallest line height
108
108
  $bcds-typography-line-heights-xxdense: 1.313rem;
@@ -112,7 +112,7 @@ $bcds-typography-line-heights-regular: 2.125rem; // Default line height
112
112
  $bcds-typography-line-heights-sparse: 2.25rem;
113
113
  $bcds-typography-line-heights-xsparse: 3rem;
114
114
  $bcds-typography-line-heights-xxsparse: 3.375rem; // Largest line height
115
- $bcds-typography-line-heights-auto: AUTO; // System token, used to generate type styles
115
+ $bcds-typography-line-heights-auto: normal; // System token, used to generate type styles
116
116
  $bcds-typography-font-weights-regular: 400; // System token, used to generate text styles
117
117
  $bcds-typography-font-weights-bold: 700; // System token, used to generate text styles
118
118
  $bcds-typography-font-weights-italic-weight: 400; // System token, used to generate text styles
@@ -127,7 +127,7 @@ $bcds-typography-font-size-h3: 1.75rem;
127
127
  $bcds-typography-font-size-h2: 2rem;
128
128
  $bcds-typography-font-size-h1: 2.25rem;
129
129
  $bcds-typography-font-size-display: 3rem;
130
- $bcds-typography-letter-spacing-0: 0%; // System token, used to generate type styles
130
+ $bcds-typography-letter-spacing-0: 0em; // System token, used to generate type styles
131
131
  $bcds-typography-paragraph-spacing-0: 0; // System token, used to generate type styles
132
132
  $bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions
133
133
  $bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text
@@ -139,7 +139,7 @@ $bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolde
139
139
  $bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3
140
140
  $bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2
141
141
  $bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1
142
- $bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings
142
+ $bcds-typography-regular-display: 400 3rem 'BC Sans'; // Extra-large body text size. Do not use for headings
143
143
  $bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded)
144
144
  $bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded)
145
145
  $bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded)
@@ -150,63 +150,63 @@ $bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Hea
150
150
  $bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3
151
151
  $bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2
152
152
  $bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1
153
- $bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings
154
- $bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic)
155
- $bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic)
156
- $bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic)
157
- $bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic)
158
- $bcds-typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6
159
- $bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5
160
- $bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4
161
- $bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3
162
- $bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2
163
- $bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1
164
- $bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings
153
+ $bcds-typography-bold-display: 700 3rem 'BC Sans'; // Extra-large font size (bolded). Do not use for headings
154
+ $bcds-typography-italic-label: italic 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic)
155
+ $bcds-typography-italic-small-body: italic 400 0.875rem/1.313rem 'BC Sans'; // Small body text (italic)
156
+ $bcds-typography-italic-body: italic 400 1rem/1.688rem 'BC Sans'; // Default for body text (italic)
157
+ $bcds-typography-italic-large-body: italic 400 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic)
158
+ $bcds-typography-italic-h6: italic 400 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6
159
+ $bcds-typography-italic-h5: italic 400 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5
160
+ $bcds-typography-italic-h4: italic 400 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4
161
+ $bcds-typography-italic-h3: italic 400 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3
162
+ $bcds-typography-italic-h2: italic 400 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2
163
+ $bcds-typography-italic-h1: italic 400 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1
164
+ $bcds-typography-italic-display: italic 400 3rem 'BC Sans'; // Extra-large font size (italic). Do not use for headings
165
165
  $bcds-typography-text-case-none: none;
166
166
  $bcds-typography-text-decoration-none: none; // System token, used to generate type styles
167
167
  $bcds-typography-paragraph-indent-0: 0px; // System token, used to generate type styles
168
- $bcds-typography-color-primary: #2D2D2D; // Default colour for all body text and headings
168
+ $bcds-typography-color-primary: #2d2d2d; // Default colour for all body text and headings
169
169
  $bcds-typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text
170
- $bcds-typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms
171
- $bcds-typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements
172
- $bcds-typography-color-link: #255A90; // Use for hyperlinks in body text and headings
173
- $bcds-typography-color-danger: #CE3E39; // Use for error, failure or danger message text
174
- $bcds-typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds
175
- $bcds-typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds
176
- $bcds-theme-gold-10: #FEF8E8; // Gold scale — lightest
177
- $bcds-theme-gold-20: #FEF0D8; // Gold scale
178
- $bcds-theme-gold-30: #FDE9C4; // Gold scale
179
- $bcds-theme-gold-40: #FCE2B0; // Gold scale
180
- $bcds-theme-gold-50: #FBDA9D; // Gold scale
181
- $bcds-theme-gold-60: #FBD389; // Gold scale
182
- $bcds-theme-gold-70: #FACC75; // Gold scale
183
- $bcds-theme-gold-80: #F9C462; // Gold scale
184
- $bcds-theme-gold-90: #F8BA47; // Gold scale
185
- $bcds-theme-gold-100: #FCBA19; // Gold scale — darkest
186
- $bcds-theme-blue-10: #F1F8FE; // Blue scale — lightest
187
- $bcds-theme-blue-20: #D8EAFD; // Blue scale
188
- $bcds-theme-blue-30: #C1DDFC; // Blue scale
189
- $bcds-theme-blue-40: #A8D0FB; // Blue scale
190
- $bcds-theme-blue-50: #91C4FA; // Blue scale
191
- $bcds-theme-blue-60: #7AB8F9; // Blue scale
192
- $bcds-theme-blue-70: #5595D9; // Blue scale
193
- $bcds-theme-blue-80: #3470B1; // Blue scale
194
- $bcds-theme-blue-90: #1E5189; // Blue scale
170
+ $bcds-typography-color-placeholder: #9f9d9c; // Use for placeholder text in forms
171
+ $bcds-typography-color-disabled: #9f9d9c; // Use only for text in inactive user interface elements
172
+ $bcds-typography-color-link: #255a90; // Use for hyperlinks in body text and headings
173
+ $bcds-typography-color-danger: #ce3e39; // Use for error, failure or danger message text
174
+ $bcds-typography-color-primary-invert: #ffffff; // Default colour for text on dark backgrounds
175
+ $bcds-typography-color-secondary-invert: #eceae8; // Secondary colour for text on dark backgrounds
176
+ $bcds-theme-gold-10: #fef8e8; // Gold scale — lightest
177
+ $bcds-theme-gold-20: #fef0d8; // Gold scale
178
+ $bcds-theme-gold-30: #fde9c4; // Gold scale
179
+ $bcds-theme-gold-40: #fce2b0; // Gold scale
180
+ $bcds-theme-gold-50: #fbda9d; // Gold scale
181
+ $bcds-theme-gold-60: #fbd389; // Gold scale
182
+ $bcds-theme-gold-70: #facc75; // Gold scale
183
+ $bcds-theme-gold-80: #f9c462; // Gold scale
184
+ $bcds-theme-gold-90: #f8ba47; // Gold scale
185
+ $bcds-theme-gold-100: #fcba19; // Gold scale — darkest
186
+ $bcds-theme-blue-10: #f1f8fe; // Blue scale — lightest
187
+ $bcds-theme-blue-20: #d8eafd; // Blue scale
188
+ $bcds-theme-blue-30: #c1ddfc; // Blue scale
189
+ $bcds-theme-blue-40: #a8d0fb; // Blue scale
190
+ $bcds-theme-blue-50: #91c4fa; // Blue scale
191
+ $bcds-theme-blue-60: #7ab8f9; // Blue scale
192
+ $bcds-theme-blue-70: #5595d9; // Blue scale
193
+ $bcds-theme-blue-80: #3470b1; // Blue scale
194
+ $bcds-theme-blue-90: #1e5189; // Blue scale
195
195
  $bcds-theme-blue-100: #013366; // Blue scale — darkest
196
- $bcds-theme-gray-10: #FAF9F8; // Greyscale — lightest
197
- $bcds-theme-gray-20: #F3F2F1; // Greyscale
198
- $bcds-theme-gray-30: #ECEAE8; // Greyscale
199
- $bcds-theme-gray-40: #E0DEDC; // Greyscale
200
- $bcds-theme-gray-50: #D1CFCD; // Greyscale
201
- $bcds-theme-gray-60: #C6C5C3; // Greyscale
202
- $bcds-theme-gray-70: #9F9D9C; // Greyscale
203
- $bcds-theme-gray-80: #605E5C; // Greyscale
204
- $bcds-theme-gray-90: #3D3C3B; // Greyscale
196
+ $bcds-theme-gray-10: #faf9f8; // Greyscale — lightest
197
+ $bcds-theme-gray-20: #f3f2f1; // Greyscale
198
+ $bcds-theme-gray-30: #eceae8; // Greyscale
199
+ $bcds-theme-gray-40: #e0dedc; // Greyscale
200
+ $bcds-theme-gray-50: #d1cfcd; // Greyscale
201
+ $bcds-theme-gray-60: #c6c5c3; // Greyscale
202
+ $bcds-theme-gray-70: #9f9d9c; // Greyscale
203
+ $bcds-theme-gray-80: #605e5c; // Greyscale
204
+ $bcds-theme-gray-90: #3d3c3b; // Greyscale
205
205
  $bcds-theme-gray-100: #353433; // Greyscale
206
206
  $bcds-theme-gray-110: #252423; // Greyscale — darkest
207
- $bcds-theme-gray-white: #FFFFFF; // White
207
+ $bcds-theme-gray-white: #ffffff; // White
208
208
  $bcds-theme-primary-blue: #013366; // Primary Blue (Blue 100)
209
- $bcds-theme-primary-gold: #FCBA19; // Primary Gold (Gold 100)
209
+ $bcds-theme-primary-gold: #fcba19; // Primary Gold (Gold 100)
210
210
 
211
211
  $bcds: (
212
212
  'surface': (