@bcgov/design-tokens 3.2.0 → 4.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.
Files changed (14) hide show
  1. package/README.md +93 -87
  2. package/cjs/index.d.ts +204 -204
  3. package/cjs/index.js +208 -204
  4. package/cjs-prefixed/index.d.ts +204 -204
  5. package/cjs-prefixed/index.js +208 -204
  6. package/css/variables.css +157 -157
  7. package/css-prefixed/variables.css +157 -157
  8. package/js/index.d.ts +204 -204
  9. package/js/index.js +12 -6
  10. package/js-prefixed/index.d.ts +204 -204
  11. package/js-prefixed/index.js +14 -7
  12. package/package.json +24 -23
  13. package/scss/variables.scss +508 -0
  14. package/scss-prefixed/variables.scss +508 -0
package/package.json CHANGED
@@ -1,23 +1,24 @@
1
- {
2
- "name": "@bcgov/design-tokens",
3
- "version": "3.2.0",
4
- "description": "Design tokens for B.C. Design System",
5
- "repository": {
6
- "type": "git",
7
- "url": "git+https://github.com/bcgov/design-system.git"
8
- },
9
- "keywords": [
10
- "design system",
11
- "design tokens",
12
- "figma",
13
- "tokens studio",
14
- "style-dictionary"
15
- ],
16
- "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
17
- "license": "Apache-2.0",
18
- "bugs": {
19
- "url": "https://github.com/bcgov/design-system/issues"
20
- },
21
- "homepage": "https://github.com/bcgov/design-system#readme",
22
- "private": false
23
- }
1
+ {
2
+ "name": "@bcgov/design-tokens",
3
+ "version": "4.0.0",
4
+ "description": "Design tokens for B.C. Design System",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/bcgov/design-system.git",
8
+ "directory": "packages/design-tokens/dist"
9
+ },
10
+ "keywords": [
11
+ "design system",
12
+ "design tokens",
13
+ "figma",
14
+ "tokens studio",
15
+ "style-dictionary"
16
+ ],
17
+ "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
18
+ "license": "Apache-2.0",
19
+ "bugs": {
20
+ "url": "https://github.com/bcgov/design-system/issues"
21
+ },
22
+ "homepage": "https://github.com/bcgov/design-system#readme",
23
+ "private": false
24
+ }
package/scss/variables.scss ADDED
@@ -0,0 +1,508 @@
1
+
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+
6
+ $surface-opacity-0: 0;
7
+ $surface-opacity-10: 0.1;
8
+ $surface-opacity-20: 0.2;
9
+ $surface-opacity-30: 0.3;
10
+ $surface-opacity-40: 0.4;
11
+ $surface-opacity-50: 0.5;
12
+ $surface-opacity-60: 0.6;
13
+ $surface-opacity-70: 0.7;
14
+ $surface-opacity-80: 0.8;
15
+ $surface-opacity-90: 0.9;
16
+ $surface-opacity-100: 1;
17
+ $surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements
18
+ $surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements
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
+ $surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly
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
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
52
+ $surface-color-background-dark-blue: #053662; // Dark blue background
53
+ $surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements
54
+ $surface-color-border-medium: #898785; // Default border colour for UI elements
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
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
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
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
80
+ $layout-border-width-none: 0;
81
+ $layout-border-width-small: 1;
82
+ $layout-border-width-medium: 2;
83
+ $layout-border-width-large: 4;
84
+ $layout-padding-none: 0; // No padding
85
+ $layout-padding-hair: 0.125rem; // Smallest padding value for layout
86
+ $layout-padding-xsmall: 0.25rem;
87
+ $layout-padding-small: 0.5rem;
88
+ $layout-padding-medium: 1rem; // Default padding value for layout
89
+ $layout-padding-large: 1.5rem;
90
+ $layout-padding-xlarge: 2rem; // Largest padding value for layout
91
+ $layout-margin-none: 0rem; // No margin
92
+ $layout-margin-hair: 0.125rem; // Smallest margin value for layout
93
+ $layout-margin-xsmall: 0.25rem;
94
+ $layout-margin-small: 0.5rem; // Default margin value for layout
95
+ $layout-margin-medium: 1rem;
96
+ $layout-margin-large: 1.5rem;
97
+ $layout-margin-xlarge: 2rem;
98
+ $layout-margin-xxlarge: 2.5rem;
99
+ $layout-margin-xxxlarge: 3rem;
100
+ $layout-margin-huge: 3.5rem; // Largest margin value for layout
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
106
+ $typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package
107
+ $typography-line-heights-xxxdense: 1.125rem; // Smallest line height
108
+ $typography-line-heights-xxdense: 1.313rem;
109
+ $typography-line-heights-xdense: 1.688rem;
110
+ $typography-line-heights-dense: 1.913rem;
111
+ $typography-line-heights-regular: 2.125rem; // Default line height
112
+ $typography-line-heights-sparse: 2.25rem;
113
+ $typography-line-heights-xsparse: 3rem;
114
+ $typography-line-heights-xxsparse: 3.375rem; // Largest line height
115
+ $typography-line-heights-auto: AUTO; // System token, used to generate type styles
116
+ $typography-font-weights-regular: 400; // System token, used to generate text styles
117
+ $typography-font-weights-bold: 700; // System token, used to generate text styles
118
+ $typography-font-weights-italic-weight: 400; // System token, used to generate text styles
119
+ $typography-font-weights-italic-style: italic; // System token, used to generate text styles
120
+ $typography-font-size-label: 0.75rem;
121
+ $typography-font-size-small-body: 0.875rem;
122
+ $typography-font-size-body: 1rem;
123
+ $typography-font-size-large-body: 1.125rem;
124
+ $typography-font-size-h5: 1.25rem;
125
+ $typography-font-size-h4: 1.5rem;
126
+ $typography-font-size-h3: 1.75rem;
127
+ $typography-font-size-h2: 2rem;
128
+ $typography-font-size-h1: 2.25rem;
129
+ $typography-font-size-display: 3rem;
130
+ $typography-letter-spacing-0: 0%; // System token, used to generate type styles
131
+ $typography-paragraph-spacing-0: 0; // System token, used to generate type styles
132
+ $typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions
133
+ $typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text
134
+ $typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text
135
+ $typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text
136
+ $typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6
137
+ $typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5
138
+ $typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4
139
+ $typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3
140
+ $typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2
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
143
+ $typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded)
144
+ $typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded)
145
+ $typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded)
146
+ $typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded)
147
+ $typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6
148
+ $typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5
149
+ $typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4
150
+ $typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3
151
+ $typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2
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
165
+ $typography-text-case-none: none;
166
+ $typography-text-decoration-none: none; // System token, used to generate type styles
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
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
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
205
+ $theme-gray-100: #353433; // Greyscale
206
+ $theme-gray-110: #252423; // Greyscale — darkest
207
+ $theme-gray-white: #FFFFFF; // White
208
+ $theme-primary-blue: #013366; // Primary Blue (Blue 100)
209
+ $theme-primary-gold: #FCBA19; // Primary Gold (Gold 100)
210
+
211
+ $bcds: (
212
+ 'surface': (
213
+ 'opacity': (
214
+ '0': $surface-opacity-0,
215
+ '10': $surface-opacity-10,
216
+ '20': $surface-opacity-20,
217
+ '30': $surface-opacity-30,
218
+ '40': $surface-opacity-40,
219
+ '50': $surface-opacity-50,
220
+ '60': $surface-opacity-60,
221
+ '70': $surface-opacity-70,
222
+ '80': $surface-opacity-80,
223
+ '90': $surface-opacity-90,
224
+ '100': $surface-opacity-100
225
+ ),
226
+ 'shadow': (
227
+ 'none': $surface-shadow-none,
228
+ 'small': $surface-shadow-small,
229
+ 'medium': $surface-shadow-medium,
230
+ 'large': $surface-shadow-large
231
+ ),
232
+ 'color': (
233
+ 'primary': (
234
+ 'button': (
235
+ 'default': $surface-color-primary-button-default,
236
+ 'hover': $surface-color-primary-button-hover,
237
+ 'disabled': $surface-color-primary-button-disabled
238
+ ),
239
+ 'dangerButton': (
240
+ 'default': $surface-color-primary-danger-button-default,
241
+ 'hover': $surface-color-primary-danger-button-hover,
242
+ 'disabled': $surface-color-primary-danger-button-disabled
243
+ ),
244
+ 'default': $surface-color-primary-default,
245
+ 'hover': $surface-color-primary-hover,
246
+ 'pressed': $surface-color-primary-pressed,
247
+ 'disabled': $surface-color-primary-disabled
248
+ ),
249
+ 'secondary': (
250
+ 'button': (
251
+ 'default': $surface-color-secondary-button-default,
252
+ 'hover': $surface-color-secondary-button-hover,
253
+ 'disabled': $surface-color-secondary-button-disabled
254
+ ),
255
+ 'default': $surface-color-secondary-default,
256
+ 'hover': $surface-color-secondary-hover,
257
+ 'pressed': $surface-color-secondary-pressed,
258
+ 'disabled': $surface-color-secondary-disabled
259
+ ),
260
+ 'tertiary': (
261
+ 'button': (
262
+ 'default': $surface-color-tertiary-button-default,
263
+ 'hover': $surface-color-tertiary-button-hover,
264
+ 'disabled': $surface-color-tertiary-button-disabled
265
+ ),
266
+ 'default': $surface-color-tertiary-default,
267
+ 'hover': $surface-color-tertiary-hover,
268
+ 'pressed': $surface-color-tertiary-pressed,
269
+ 'disabled': $surface-color-tertiary-disabled
270
+ ),
271
+ 'menus': (
272
+ 'default': $surface-color-menus-default,
273
+ 'hover': $surface-color-menus-hover
274
+ ),
275
+ 'forms': (
276
+ 'default': $surface-color-forms-default,
277
+ 'disabled': $surface-color-forms-disabled
278
+ ),
279
+ 'background': (
280
+ 'white': $surface-color-background-white,
281
+ 'lightGray': $surface-color-background-light-gray,
282
+ 'lightBlue': $surface-color-background-light-blue,
283
+ 'darkBlue': $surface-color-background-dark-blue
284
+ ),
285
+ 'border': (
286
+ 'default': $surface-color-border-default,
287
+ 'medium': $surface-color-border-medium,
288
+ 'dark': $surface-color-border-dark,
289
+ 'active': $surface-color-border-active
290
+ ),
291
+ 'overlay': (
292
+ 'default': $surface-color-overlay-default
293
+ )
294
+ )
295
+ ),
296
+ 'support': (
297
+ 'surfaceColor': (
298
+ 'info': $support-surface-color-info,
299
+ 'danger': $support-surface-color-danger,
300
+ 'success': $support-surface-color-success,
301
+ 'warning': $support-surface-color-warning
302
+ ),
303
+ 'borderColor': (
304
+ 'info': $support-border-color-info,
305
+ 'danger': $support-border-color-danger,
306
+ 'success': $support-border-color-success,
307
+ 'warning': $support-border-color-warning
308
+ )
309
+ ),
310
+ 'icons': (
311
+ 'size': (
312
+ 'xsmall': $icons-size-xsmall,
313
+ 'small': $icons-size-small,
314
+ 'medium': $icons-size-medium,
315
+ 'large': $icons-size-large,
316
+ 'xlarge': $icons-size-xlarge
317
+ ),
318
+ 'color': (
319
+ 'primary': $icons-color-primary,
320
+ 'secondary': $icons-color-secondary,
321
+ 'disabled': $icons-color-disabled,
322
+ 'link': $icons-color-link,
323
+ 'info': $icons-color-info,
324
+ 'danger': $icons-color-danger,
325
+ 'success': $icons-color-success,
326
+ 'warning': $icons-color-warning,
327
+ 'primaryInvert': $icons-color-primary-invert
328
+ )
329
+ ),
330
+ 'layout': (
331
+ 'borderWidth': (
332
+ 'none': $layout-border-width-none,
333
+ 'small': $layout-border-width-small,
334
+ 'medium': $layout-border-width-medium,
335
+ 'large': $layout-border-width-large
336
+ ),
337
+ 'padding': (
338
+ 'none': $layout-padding-none,
339
+ 'hair': $layout-padding-hair,
340
+ 'xsmall': $layout-padding-xsmall,
341
+ 'small': $layout-padding-small,
342
+ 'medium': $layout-padding-medium,
343
+ 'large': $layout-padding-large,
344
+ 'xlarge': $layout-padding-xlarge
345
+ ),
346
+ 'margin': (
347
+ 'none': $layout-margin-none,
348
+ 'hair': $layout-margin-hair,
349
+ 'xsmall': $layout-margin-xsmall,
350
+ 'small': $layout-margin-small,
351
+ 'medium': $layout-margin-medium,
352
+ 'large': $layout-margin-large,
353
+ 'xlarge': $layout-margin-xlarge,
354
+ 'xxlarge': $layout-margin-xxlarge,
355
+ 'xxxlarge': $layout-margin-xxxlarge,
356
+ 'huge': $layout-margin-huge
357
+ ),
358
+ 'borderRadius': (
359
+ 'none': $layout-border-radius-none,
360
+ 'small': $layout-border-radius-small,
361
+ 'medium': $layout-border-radius-medium,
362
+ 'large': $layout-border-radius-large,
363
+ 'circular': $layout-border-radius-circular
364
+ )
365
+ ),
366
+ 'typography': (
367
+ 'fontFamilies': (
368
+ 'bc-sans': $typography-font-families-bc-sans
369
+ ),
370
+ 'lineHeights': (
371
+ 'xxxdense': $typography-line-heights-xxxdense,
372
+ 'xxdense': $typography-line-heights-xxdense,
373
+ 'xdense': $typography-line-heights-xdense,
374
+ 'dense': $typography-line-heights-dense,
375
+ 'regular': $typography-line-heights-regular,
376
+ 'sparse': $typography-line-heights-sparse,
377
+ 'xsparse': $typography-line-heights-xsparse,
378
+ 'xxsparse': $typography-line-heights-xxsparse,
379
+ 'auto': $typography-line-heights-auto
380
+ ),
381
+ 'fontWeights': (
382
+ 'regular': $typography-font-weights-regular,
383
+ 'bold': $typography-font-weights-bold,
384
+ 'italic': (
385
+ 'weight': $typography-font-weights-italic-weight,
386
+ 'style': $typography-font-weights-italic-style
387
+ )
388
+ ),
389
+ 'fontSize': (
390
+ 'label': $typography-font-size-label,
391
+ 'smallBody': $typography-font-size-small-body,
392
+ 'body': $typography-font-size-body,
393
+ 'largeBody': $typography-font-size-large-body,
394
+ 'H5': $typography-font-size-h5,
395
+ 'H4': $typography-font-size-h4,
396
+ 'H3': $typography-font-size-h3,
397
+ 'H2': $typography-font-size-h2,
398
+ 'H1': $typography-font-size-h1,
399
+ 'display': $typography-font-size-display
400
+ ),
401
+ 'letterSpacing': (
402
+ '0': $typography-letter-spacing-0
403
+ ),
404
+ 'paragraphSpacing': (
405
+ '0': $typography-paragraph-spacing-0
406
+ ),
407
+ 'regular': (
408
+ 'label': $typography-regular-label,
409
+ 'smallBody': $typography-regular-small-body,
410
+ 'body': $typography-regular-body,
411
+ 'largeBody': $typography-regular-large-body,
412
+ 'H6': $typography-regular-h6,
413
+ 'H5': $typography-regular-h5,
414
+ 'H4': $typography-regular-h4,
415
+ 'H3': $typography-regular-h3,
416
+ 'H2': $typography-regular-h2,
417
+ 'H1': $typography-regular-h1,
418
+ 'display': $typography-regular-display
419
+ ),
420
+ 'bold': (
421
+ 'label': $typography-bold-label,
422
+ 'smallBody': $typography-bold-small-body,
423
+ 'body': $typography-bold-body,
424
+ 'largeBody': $typography-bold-large-body,
425
+ 'H6': $typography-bold-h6,
426
+ 'H5': $typography-bold-h5,
427
+ 'H4': $typography-bold-h4,
428
+ 'H3': $typography-bold-h3,
429
+ 'H2': $typography-bold-h2,
430
+ 'H1': $typography-bold-h1,
431
+ 'display': $typography-bold-display
432
+ ),
433
+ 'italic': (
434
+ 'label': $typography-italic-label,
435
+ 'smallBody': $typography-italic-small-body,
436
+ 'body': $typography-italic-body,
437
+ 'largeBody': $typography-italic-large-body,
438
+ 'H6': $typography-italic-h6,
439
+ 'H5': $typography-italic-h5,
440
+ 'H4': $typography-italic-h4,
441
+ 'H3': $typography-italic-h3,
442
+ 'H2': $typography-italic-h2,
443
+ 'H1': $typography-italic-h1,
444
+ 'display': $typography-italic-display
445
+ ),
446
+ 'textCase': (
447
+ 'none': $typography-text-case-none
448
+ ),
449
+ 'textDecoration': (
450
+ 'none': $typography-text-decoration-none
451
+ ),
452
+ 'paragraphIndent': (
453
+ '0': $typography-paragraph-indent-0
454
+ ),
455
+ 'color': (
456
+ 'primary': $typography-color-primary,
457
+ 'secondary': $typography-color-secondary,
458
+ 'placeholder': $typography-color-placeholder,
459
+ 'disabled': $typography-color-disabled,
460
+ 'link': $typography-color-link,
461
+ 'danger': $typography-color-danger,
462
+ 'primaryInvert': $typography-color-primary-invert,
463
+ 'secondaryInvert': $typography-color-secondary-invert
464
+ )
465
+ ),
466
+ 'theme': (
467
+ 'gold': (
468
+ '10': $theme-gold-10,
469
+ '20': $theme-gold-20,
470
+ '30': $theme-gold-30,
471
+ '40': $theme-gold-40,
472
+ '50': $theme-gold-50,
473
+ '60': $theme-gold-60,
474
+ '70': $theme-gold-70,
475
+ '80': $theme-gold-80,
476
+ '90': $theme-gold-90,
477
+ '100': $theme-gold-100
478
+ ),
479
+ 'blue': (
480
+ '10': $theme-blue-10,
481
+ '20': $theme-blue-20,
482
+ '30': $theme-blue-30,
483
+ '40': $theme-blue-40,
484
+ '50': $theme-blue-50,
485
+ '60': $theme-blue-60,
486
+ '70': $theme-blue-70,
487
+ '80': $theme-blue-80,
488
+ '90': $theme-blue-90,
489
+ '100': $theme-blue-100
490
+ ),
491
+ 'gray': (
492
+ '10': $theme-gray-10,
493
+ '20': $theme-gray-20,
494
+ '30': $theme-gray-30,
495
+ '40': $theme-gray-40,
496
+ '50': $theme-gray-50,
497
+ '60': $theme-gray-60,
498
+ '70': $theme-gray-70,
499
+ '80': $theme-gray-80,
500
+ '90': $theme-gray-90,
501
+ '100': $theme-gray-100,
502
+ '110': $theme-gray-110,
503
+ 'white': $theme-gray-white
504
+ ),
505
+ 'primaryBlue': $theme-primary-blue,
506
+ 'primaryGold': $theme-primary-gold
507
+ )
508
+ );