@bcgov/design-tokens 0.0.1

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 (4) hide show
  1. package/README.md +29 -0
  2. package/css/variables.css +376 -0
  3. package/js/variables.js +374 -0
  4. package/package.json +24 -0
package/README.md ADDED
@@ -0,0 +1,29 @@
1
+ # @bcgov/design-tokens
2
+
3
+ This package is being used to test publishing design tokens from Figma to npm.
4
+
5
+ Questions? Please email the <a href="mailto:corporatewebdesign@gov.bc.ca">GDX OSS Design Team</a>.
6
+
7
+ See main repository: https://github.com/bcgov/design-tokens
8
+
9
+ To use, install this package (`npm i @bcgov/design-tokens`) and import the design tokens for your platform. Reference the design tokens according to your platform's needs.
10
+
11
+ ## React example:
12
+
13
+ ```js
14
+ // Import the variables file that makes sense for your platform.
15
+ import "@bcgov/design-tokens/css/variables.css";
16
+
17
+ function Button({ children, ...props }) {
18
+ return (
19
+ <button
20
+ style={{
21
+ backgroundColor: "var(--bcds-surface-primary-default)",
22
+ color: "var(--bcds-text-primary-invert)",
23
+ }}
24
+ >
25
+ {children}
26
+ </button>
27
+ );
28
+ }
29
+ ```
package/css/variables.css ADDED
@@ -0,0 +1,376 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 12 Oct 2023 17:08:55 GMT
4
+ */
5
+
6
+ :root {
7
+ --bcds-bcds-0: 0;
8
+ --bcds-bcds-10: 0.1;
9
+ --bcds-bcds-20: 0.2;
10
+ --bcds-bcds-30: 0.3;
11
+ --bcds-bcds-40: 0.4;
12
+ --bcds-bcds-50: 0.5;
13
+ --bcds-bcds-60: 0.6;
14
+ --bcds-bcds-70: 0.7;
15
+ --bcds-bcds-80: 0.8;
16
+ --bcds-bcds-90: 0.9;
17
+ --bcds-bcds-100: 1;
18
+ --bcds-bcds-text-primary: #2d2d2d;
19
+ --bcds-bcds-text-secondary: #474543;
20
+ --bcds-bcds-text-disabled: #9f9d9c;
21
+ --bcds-bcds-text-link: #255a90;
22
+ --bcds-bcds-text-primary-invert: #ffffff;
23
+ --bcds-bcds-text-secondary-invert: #eceae8;
24
+ --bcds-bcds-surface-primary-default: #013366;
25
+ --bcds-bcds-surface-primary-hover: #1E5189;
26
+ --bcds-bcds-surface-primary-disabled: #edebe9;
27
+ --bcds-bcds-surface-primary-active: #2E5DD7;
28
+ --bcds-bcds-surface-secondary-default: #ffffff;
29
+ --bcds-bcds-surface-secondary-hover: #edebe9;
30
+ --bcds-bcds-surface-secondary-disabled: #edebe9;
31
+ --bcds-bcds-surface-secondary-active: #2E5DD7;
32
+ --bcds-bcds-surface-tertiary-default: #ffffff00;
33
+ --bcds-bcds-surface-tertiary-hover: #eceae8;
34
+ --bcds-bcds-surface-tertiary-disabled: #edebe9;
35
+ --bcds-bcds-surface-tertiary-active: #2E5DD7;
36
+ --bcds-bcds-surface-danger-default: #ce3e39;
37
+ --bcds-bcds-surface-danger-hover: #a2312d;
38
+ --bcds-bcds-surface-danger-disabled: #edebe9;
39
+ --bcds-bcds-surface-danger-active: #2E5DD7;
40
+ --bcds-bcds-surface-background-white: #ffffff;
41
+ --bcds-bcds-surface-background-light: #faf9f8;
42
+ --bcds-bcds-surface-border-light: #d8d8d8;
43
+ --bcds-bcds-surface-border-medium: #898785;
44
+ --bcds-bcds-surface-border-dark: #353433;
45
+ --bcds-bcds-surface-overlay-default: #00000073;
46
+ --bcds-bcds-brand-gold-10: #fff8e9;
47
+ --bcds-bcds-brand-gold-20: #feebc2;
48
+ --bcds-bcds-brand-gold-30: #fddf9d;
49
+ --bcds-bcds-brand-gold-40: #fdd47b;
50
+ --bcds-bcds-brand-gold-50: #fcc85d;
51
+ --bcds-bcds-brand-gold-60: #f8ba47; /* BC Gold */
52
+ --bcds-bcds-brand-gold-70: #ce9737;
53
+ --bcds-bcds-brand-gold-80: #a5792b;
54
+ --bcds-bcds-brand-gold-90: #7e5d21;
55
+ --bcds-bcds-brand-gold-100: #584215;
56
+ --bcds-bcds-brand-blue-10: #f1f8fe;
57
+ --bcds-bcds-brand-blue-20: #d8eafd;
58
+ --bcds-bcds-brand-blue-30: #c1ddfc;
59
+ --bcds-bcds-brand-blue-40: #a8d0fb;
60
+ --bcds-bcds-brand-blue-50: #91c4fa;
61
+ --bcds-bcds-brand-blue-60: #7ab8f9;
62
+ --bcds-bcds-brand-blue-70: #5595d9;
63
+ --bcds-bcds-brand-blue-80: #3470b1;
64
+ --bcds-bcds-brand-blue-90: #1e5189;
65
+ --bcds-bcds-brand-blue-100: #053662; /* BC Blue */
66
+ --bcds-bcds-brand-gray-10: #faf9f8;
67
+ --bcds-bcds-brand-gray-20: #f3f2f1;
68
+ --bcds-bcds-brand-gray-30: #eceae8;
69
+ --bcds-bcds-brand-gray-40: #e0dedc;
70
+ --bcds-bcds-brand-gray-50: #d1cfcd;
71
+ --bcds-bcds-brand-gray-60: #c6c5c3;
72
+ --bcds-bcds-brand-gray-70: #9f9d9c;
73
+ --bcds-bcds-brand-gray-80: #605e5c;
74
+ --bcds-bcds-brand-gray-90: #3d3c3b;
75
+ --bcds-bcds-brand-gray-100: #353433;
76
+ --bcds-bcds-brand-gray-110: #252423;
77
+ --bcds-bcds-brand-gray-white: #ffffff;
78
+ --bcds-bcds-icons-primary: #2d2d2d;
79
+ --bcds-bcds-icons-secondary: #474543;
80
+ --bcds-bcds-icons-disabled: #9f9d9c;
81
+ --bcds-bcds-icons-link: #255a90;
82
+ --bcds-bcds-icons-info: #053662;
83
+ --bcds-bcds-icons-danger: #ce3e39;
84
+ --bcds-bcds-icons-success: #42814a;
85
+ --bcds-bcds-icons-warning: #f8bb47;
86
+ --bcds-bcds-support-surface-color-info: #f7f9fc;
87
+ --bcds-bcds-support-surface-color-danger: #f4e1e2;
88
+ --bcds-bcds-support-surface-color-success: #f6fff8;
89
+ --bcds-bcds-support-surface-color-warning: #fef1d8;
90
+ --bcds-bcds-support-border-color-info: #053662;
91
+ --bcds-bcds-support-border-color-danger: #ce3e39;
92
+ --bcds-bcds-support-border-color-success: #42814a;
93
+ --bcds-bcds-support-border-color-warning: #f8bb47;
94
+ --bcds-bcds-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;
95
+ --bcds-bcds-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */
96
+ --bcds-bcds-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */
97
+ --bcds-bcds-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */
98
+ --bcds-bcds-font-families-bc-sans: 'BC Sans';
99
+ --bcds-bcds-line-heights-xxdense: 1.313rem;
100
+ --bcds-bcds-line-heights-xdense: 1.688rem;
101
+ --bcds-bcds-line-heights-dense: 1.913rem;
102
+ --bcds-bcds-line-heights-regular: 2.125rem;
103
+ --bcds-bcds-line-heights-sparse: 2.25rem;
104
+ --bcds-bcds-line-heights-xsparse: 3rem;
105
+ --bcds-bcds-line-heights-xxsparse: 3.375rem;
106
+ --bcds-bcds-line-heights-auto: AUTO;
107
+ --bcds-bcds-font-weights-regular: 400;
108
+ --bcds-bcds-font-weights-bold: 700;
109
+ --bcds-bcds-font-weights-italic: Italic;
110
+ --bcds-bcds-font-size-label: 0.875rem;
111
+ --bcds-bcds-font-size-body: 1rem;
112
+ --bcds-bcds-font-size-large-body: 1.125rem;
113
+ --bcds-bcds-font-size-h5: 1.25rem;
114
+ --bcds-bcds-font-size-h4: 2.5rem;
115
+ --bcds-bcds-font-size-h3: 1.75rem;
116
+ --bcds-bcds-font-size-h2: 2rem;
117
+ --bcds-bcds-font-size-h1: 2.25rem;
118
+ --bcds-bcds-font-size-display: 3rem;
119
+ --bcds-bcds-letter-spacing-0: 0em;
120
+ --bcds-bcds-paragraph-spacing-0: 0;
121
+ --bcds-bcds-regular-label: 400 0.875rem/1.313rem 'BC Sans';
122
+ --bcds-bcds-regular-body: 400 1rem/1.688rem 'BC Sans';
123
+ --bcds-bcds-regular-large-body: 400 1.125rem/1.913rem 'BC Sans';
124
+ --bcds-bcds-regular-h5: 400 1.25rem/2.125rem 'BC Sans';
125
+ --bcds-bcds-regular-h4: 400 1.5rem/2.25rem 'BC Sans';
126
+ --bcds-bcds-regular-h3: 400 1.75rem/3rem 'BC Sans';
127
+ --bcds-bcds-regular-h2: 400 2rem/3.375rem 'BC Sans';
128
+ --bcds-bcds-regular-h1: 400 2.25rem/3rem 'BC Sans';
129
+ --bcds-bcds-regular-display: 400 3rem/AUTO 'BC Sans';
130
+ --bcds-bcds-bold-label: 700 0.875rem/1.313rem 'BC Sans';
131
+ --bcds-bcds-bold-body: 700 1rem/1.688rem 'BC Sans';
132
+ --bcds-bcds-bold-large-body: 700 1.125rem/1.913rem 'BC Sans';
133
+ --bcds-bcds-bold-h5: 700 1.25rem/2.125rem 'BC Sans';
134
+ --bcds-bcds-bold-h4: 700 1.5rem/2.25rem 'BC Sans';
135
+ --bcds-bcds-bold-h3: 700 1.75rem/3.375rem 'BC Sans';
136
+ --bcds-bcds-bold-h2: 700 2rem/3rem 'BC Sans';
137
+ --bcds-bcds-bold-h1: 700 2.25rem/AUTO 'BC Sans';
138
+ --bcds-bcds-bold-display: 400 3rem/AUTO 'BC Sans';
139
+ --bcds-bcds-italic-label: 400 italic 0.875rem/1.313rem 'BC Sans';
140
+ --bcds-bcds-italic-body: 400 italic 1rem/1.688rem 'BC Sans';
141
+ --bcds-bcds-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans';
142
+ --bcds-bcds-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans';
143
+ --bcds-bcds-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans';
144
+ --bcds-bcds-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans';
145
+ --bcds-bcds-italic-h2: 400 italic 2rem/3.375rem 'BC Sans';
146
+ --bcds-bcds-italic-h1: 400 italic 2.25rem/3rem 'BC Sans';
147
+ --bcds-bcds-italic-display: 400 italic 3rem/AUTO 'BC Sans';
148
+ --bcds-bcds-text-case-none: none;
149
+ --bcds-bcds-text-decoration-none: none;
150
+ --bcds-bcds-border-radius-small: 2px;
151
+ --bcds-bcds-border-radius-medium: 4px;
152
+ --bcds-bcds-border-radius-large: 6px;
153
+ --bcds-bcds-border-width-none: 0;
154
+ --bcds-bcds-border-width-small: 1px;
155
+ --bcds-bcds-border-width-medium: 2px;
156
+ --bcds-bcds-border-width-large: 4px;
157
+ --bcds-bcds-spacing-none: 0;
158
+ --bcds-bcds-spacing-hair: 2px;
159
+ --bcds-bcds-spacing-xxxsmall: 4px;
160
+ --bcds-bcds-spacing-xxsmall: 6px;
161
+ --bcds-bcds-spacing-xsmall: 8px;
162
+ --bcds-bcds-spacing-small: 16px;
163
+ --bcds-bcds-spacing-medium: 24px;
164
+ --bcds-bcds-spacing-large: 32px;
165
+ --bcds-bcds-spacing-xlarge: 40px;
166
+ --bcds-bcds-spacing-xxlarge: 48px;
167
+ --bcds-bcds-active: 1px solid #2E5DD7; /* used for active states for components */
168
+ --bcds-bcds-paragraph-indent-0: 0px;
169
+ --bcds-bcds-margin-none: 0;
170
+ --bcds-bcds-margin-xsmall: 4px;
171
+ --bcds-bcds-margin-small: 8px;
172
+ --bcds-bcds-margin-medium: 16px;
173
+ --bcds-bcds-margin-large: 24px;
174
+ --bcds-bcds-margin-xlarge: 32px;
175
+ --bcds-bcds-padding-none: 0 0 0 0;
176
+ --bcds-bcds-padding-xsmall: 4px 4px 4px 4px;
177
+ --bcds-bcds-padding-small: 8px 8px 8px 8px;
178
+ --bcds-bcds-padding-medium: 16px 16px 16px 16px;
179
+ --bcds-bcds-padding-large: 24px 24px 24px 24px;
180
+ --bcds-bcds-padding-xlarge: 32px 32px 32px 32px;
181
+ --bcds-surface-opacity-0: 0;
182
+ --bcds-surface-opacity-10: 0.1;
183
+ --bcds-surface-opacity-20: 0.2;
184
+ --bcds-surface-opacity-30: 0.3;
185
+ --bcds-surface-opacity-40: 0.4;
186
+ --bcds-surface-opacity-50: 0.5;
187
+ --bcds-surface-opacity-60: 0.6;
188
+ --bcds-surface-opacity-70: 0.7;
189
+ --bcds-surface-opacity-80: 0.8;
190
+ --bcds-surface-opacity-90: 0.9;
191
+ --bcds-surface-opacity-100: 1;
192
+ --bcds-surface-primary-default: #013366;
193
+ --bcds-surface-primary-hover: #1E5189;
194
+ --bcds-surface-primary-disabled: #edebe9;
195
+ --bcds-surface-primary-active: #2E5DD7;
196
+ --bcds-surface-secondary-default: #ffffff;
197
+ --bcds-surface-secondary-hover: #edebe9;
198
+ --bcds-surface-secondary-disabled: #edebe9;
199
+ --bcds-surface-secondary-active: #2E5DD7;
200
+ --bcds-surface-tertiary-default: #ffffff00;
201
+ --bcds-surface-tertiary-hover: #eceae8;
202
+ --bcds-surface-tertiary-disabled: #edebe9;
203
+ --bcds-surface-tertiary-active: #2E5DD7;
204
+ --bcds-surface-danger-default: #ce3e39;
205
+ --bcds-surface-danger-hover: #a2312d;
206
+ --bcds-surface-danger-disabled: #edebe9;
207
+ --bcds-surface-danger-active: #2E5DD7;
208
+ --bcds-surface-background-white: #ffffff;
209
+ --bcds-surface-background-light: #faf9f8;
210
+ --bcds-surface-border-light: #d8d8d8;
211
+ --bcds-surface-border-medium: #898785;
212
+ --bcds-surface-border-dark: #353433;
213
+ --bcds-surface-overlay-default: #00000073;
214
+ --bcds-surface-brand-gold-10: #fff8e9;
215
+ --bcds-surface-brand-gold-20: #feebc2;
216
+ --bcds-surface-brand-gold-30: #fddf9d;
217
+ --bcds-surface-brand-gold-40: #fdd47b;
218
+ --bcds-surface-brand-gold-50: #fcc85d;
219
+ --bcds-surface-brand-gold-60: #f8ba47; /* BC Gold */
220
+ --bcds-surface-brand-gold-70: #ce9737;
221
+ --bcds-surface-brand-gold-80: #a5792b;
222
+ --bcds-surface-brand-gold-90: #7e5d21;
223
+ --bcds-surface-brand-gold-100: #584215;
224
+ --bcds-surface-brand-blue-10: #f1f8fe;
225
+ --bcds-surface-brand-blue-20: #d8eafd;
226
+ --bcds-surface-brand-blue-30: #c1ddfc;
227
+ --bcds-surface-brand-blue-40: #a8d0fb;
228
+ --bcds-surface-brand-blue-50: #91c4fa;
229
+ --bcds-surface-brand-blue-60: #7ab8f9;
230
+ --bcds-surface-brand-blue-70: #5595d9;
231
+ --bcds-surface-brand-blue-80: #3470b1;
232
+ --bcds-surface-brand-blue-90: #1e5189;
233
+ --bcds-surface-brand-blue-100: #053662; /* BC Blue */
234
+ --bcds-surface-brand-gray-10: #faf9f8;
235
+ --bcds-surface-brand-gray-20: #f3f2f1;
236
+ --bcds-surface-brand-gray-30: #eceae8;
237
+ --bcds-surface-brand-gray-40: #e0dedc;
238
+ --bcds-surface-brand-gray-50: #d1cfcd;
239
+ --bcds-surface-brand-gray-60: #c6c5c3;
240
+ --bcds-surface-brand-gray-70: #9f9d9c;
241
+ --bcds-surface-brand-gray-80: #605e5c;
242
+ --bcds-surface-brand-gray-90: #3d3c3b;
243
+ --bcds-surface-brand-gray-100: #353433;
244
+ --bcds-surface-brand-gray-110: #252423;
245
+ --bcds-surface-brand-gray-white: #ffffff;
246
+ --bcds-surface-icons-primary: #2d2d2d;
247
+ --bcds-surface-icons-secondary: #474543;
248
+ --bcds-surface-icons-disabled: #9f9d9c;
249
+ --bcds-surface-icons-link: #255a90;
250
+ --bcds-surface-icons-info: #053662;
251
+ --bcds-surface-icons-danger: #ce3e39;
252
+ --bcds-surface-icons-success: #42814a;
253
+ --bcds-surface-icons-warning: #f8bb47;
254
+ --bcds-surface-support-surface-color-info: #f7f9fc;
255
+ --bcds-surface-support-surface-color-danger: #f4e1e2;
256
+ --bcds-surface-support-surface-color-success: #f6fff8;
257
+ --bcds-surface-support-surface-color-warning: #fef1d8;
258
+ --bcds-surface-support-border-color-info: #053662;
259
+ --bcds-surface-support-border-color-danger: #ce3e39;
260
+ --bcds-surface-support-border-color-success: #42814a;
261
+ --bcds-surface-support-border-color-warning: #f8bb47;
262
+ --bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;
263
+ --bcds-surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */
264
+ --bcds-surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */
265
+ --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */
266
+ --bcds-surface-border-radius-none: 0;
267
+ --bcds-surface-border-radius-small: 2px;
268
+ --bcds-surface-border-radius-medium: 4px;
269
+ --bcds-surface-border-radius-large: 6px;
270
+ --bcds-surface-border-width-none: 0;
271
+ --bcds-surface-border-width-small: 1px;
272
+ --bcds-surface-border-width-medium: 2px;
273
+ --bcds-surface-border-width-large: 4px;
274
+ --bcds-surface-size-small: 0px 8px;
275
+ --bcds-surface-size-medium: 6px 16px;
276
+ --bcds-support-support-surface-color-info: #f7f9fc;
277
+ --bcds-support-support-surface-color-danger: #f4e1e2;
278
+ --bcds-support-support-surface-color-success: #f6fff8;
279
+ --bcds-support-support-surface-color-warning: #fef1d8;
280
+ --bcds-support-support-border-color-info: #053662;
281
+ --bcds-support-support-border-color-danger: #ce3e39;
282
+ --bcds-support-support-border-color-success: #42814a;
283
+ --bcds-support-support-border-color-warning: #f8bb47;
284
+ --bcds-icons-icons-primary: #2d2d2d;
285
+ --bcds-icons-icons-secondary: #474543;
286
+ --bcds-icons-icons-disabled: #9f9d9c;
287
+ --bcds-icons-icons-link: #255a90;
288
+ --bcds-icons-icons-info: #053662;
289
+ --bcds-icons-icons-danger: #ce3e39;
290
+ --bcds-icons-icons-success: #42814a;
291
+ --bcds-icons-icons-warning: #f8bb47;
292
+ --bcds-icons-size-xsmall: 14px;
293
+ --bcds-icons-size-small: 16px;
294
+ --bcds-icons-size-medium: 20px;
295
+ --bcds-icons-size-large: 24px;
296
+ --bcds-icons-size-xlarge: 32px;
297
+ --bcds-layout-border-width-none: 0;
298
+ --bcds-layout-border-width-small: 1px;
299
+ --bcds-layout-border-width-medium: 2px;
300
+ --bcds-layout-border-width-large: 4px;
301
+ --bcds-layout-padding-none: 0;
302
+ --bcds-layout-padding-xsmall: 4px;
303
+ --bcds-layout-padding-small: 8px;
304
+ --bcds-layout-padding-medium: 16px;
305
+ --bcds-layout-padding-large: 24px;
306
+ --bcds-layout-padding-xlarge: 32px;
307
+ --bcds-layout-margin-none: 0;
308
+ --bcds-layout-margin-hair: 2px;
309
+ --bcds-layout-margin-xsmall: 4px;
310
+ --bcds-layout-margin-small: 8px;
311
+ --bcds-layout-margin-medium: 16px;
312
+ --bcds-layout-margin-large: 24px;
313
+ --bcds-layout-margin-xlarge: 32px;
314
+ --bcds-layout-margin-xxlarge: 40px;
315
+ --bcds-layout-margin-xxxlarge: 48px;
316
+ --bcds-layout-margin-huge: 56px;
317
+ --bcds-typography-font-families-bc-sans: 'BC Sans';
318
+ --bcds-typography-line-heights-xxdense: 1.313rem;
319
+ --bcds-typography-line-heights-xdense: 1.688rem;
320
+ --bcds-typography-line-heights-dense: 1.913rem;
321
+ --bcds-typography-line-heights-regular: 2.125rem;
322
+ --bcds-typography-line-heights-sparse: 2.25rem;
323
+ --bcds-typography-line-heights-xsparse: 3rem;
324
+ --bcds-typography-line-heights-xxsparse: 3.375rem;
325
+ --bcds-typography-line-heights-auto: AUTO;
326
+ --bcds-typography-font-weights-regular: 400;
327
+ --bcds-typography-font-weights-bold: 700;
328
+ --bcds-typography-font-weights-italic: Italic;
329
+ --bcds-typography-font-size-label: 0.875rem;
330
+ --bcds-typography-font-size-body: 1rem;
331
+ --bcds-typography-font-size-large-body: 1.125rem;
332
+ --bcds-typography-font-size-h5: 1.25rem;
333
+ --bcds-typography-font-size-h4: 1.5rem;
334
+ --bcds-typography-font-size-h3: 1.75rem;
335
+ --bcds-typography-font-size-h2: 2rem;
336
+ --bcds-typography-font-size-h1: 2.25rem;
337
+ --bcds-typography-font-size-display: 3rem;
338
+ --bcds-typography-letter-spacing-0: 0em;
339
+ --bcds-typography-paragraph-spacing-0: 0;
340
+ --bcds-typography-regular-label: 400 0.875rem/1.313rem 'BC Sans';
341
+ --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans';
342
+ --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans';
343
+ --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans';
344
+ --bcds-typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans';
345
+ --bcds-typography-regular-h3: 400 1.75rem/3rem 'BC Sans';
346
+ --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans';
347
+ --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans';
348
+ --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans';
349
+ --bcds-typography-bold-label: 700 0.875rem/1.313rem 'BC Sans';
350
+ --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans';
351
+ --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans';
352
+ --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans';
353
+ --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans';
354
+ --bcds-typography-bold-h3: 700 1.75rem/3.375rem 'BC Sans';
355
+ --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans';
356
+ --bcds-typography-bold-h1: 700 2.25rem/AUTO 'BC Sans';
357
+ --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans';
358
+ --bcds-typography-italic-label: 400 italic 0.875rem/1.313rem 'BC Sans';
359
+ --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans';
360
+ --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans';
361
+ --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans';
362
+ --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans';
363
+ --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans';
364
+ --bcds-typography-italic-h2: 400 italic 2rem/3.375rem 'BC Sans';
365
+ --bcds-typography-italic-h1: 400 italic 2.25rem/3rem 'BC Sans';
366
+ --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans';
367
+ --bcds-typography-text-case-none: none;
368
+ --bcds-typography-text-decoration-none: none;
369
+ --bcds-typography-paragraph-indent-0: 0px;
370
+ --bcds-typography-color-primary: #2D2D2D;
371
+ --bcds-typography-color-secondary: #474543;
372
+ --bcds-typography-color-disabled: #9F9D9C;
373
+ --bcds-typography-color-link: #255A90;
374
+ --bcds-typography-color-primary-invert: #FFFFFF;
375
+ --bcds-typography-color-secondary-invert: #ECEAE8;
376
+ }
package/js/variables.js ADDED
@@ -0,0 +1,374 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 12 Oct 2023 17:08:55 GMT
4
+ */
5
+
6
+ export const bcdsBcds0 = 0;
7
+ export const bcdsBcds10 = 0.1;
8
+ export const bcdsBcds20 = 0.2;
9
+ export const bcdsBcds30 = 0.3;
10
+ export const bcdsBcds40 = 0.4;
11
+ export const bcdsBcds50 = 0.5;
12
+ export const bcdsBcds60 = 0.6;
13
+ export const bcdsBcds70 = 0.7;
14
+ export const bcdsBcds80 = 0.8;
15
+ export const bcdsBcds90 = 0.9;
16
+ export const bcdsBcds100 = 1;
17
+ export const bcdsBcdsTextPrimary = "#2d2d2d";
18
+ export const bcdsBcdsTextSecondary = "#474543";
19
+ export const bcdsBcdsTextDisabled = "#9f9d9c";
20
+ export const bcdsBcdsTextLink = "#255a90";
21
+ export const bcdsBcdsTextPrimaryInvert = "#ffffff";
22
+ export const bcdsBcdsTextSecondaryInvert = "#eceae8";
23
+ export const bcdsBcdsSurfacePrimaryDefault = "#013366";
24
+ export const bcdsBcdsSurfacePrimaryHover = "#1E5189";
25
+ export const bcdsBcdsSurfacePrimaryDisabled = "#edebe9";
26
+ export const bcdsBcdsSurfacePrimaryActive = "#2E5DD7";
27
+ export const bcdsBcdsSurfaceSecondaryDefault = "#ffffff";
28
+ export const bcdsBcdsSurfaceSecondaryHover = "#edebe9";
29
+ export const bcdsBcdsSurfaceSecondaryDisabled = "#edebe9";
30
+ export const bcdsBcdsSurfaceSecondaryActive = "#2E5DD7";
31
+ export const bcdsBcdsSurfaceTertiaryDefault = "#ffffff00";
32
+ export const bcdsBcdsSurfaceTertiaryHover = "#eceae8";
33
+ export const bcdsBcdsSurfaceTertiaryDisabled = "#edebe9";
34
+ export const bcdsBcdsSurfaceTertiaryActive = "#2E5DD7";
35
+ export const bcdsBcdsSurfaceDangerDefault = "#ce3e39";
36
+ export const bcdsBcdsSurfaceDangerHover = "#a2312d";
37
+ export const bcdsBcdsSurfaceDangerDisabled = "#edebe9";
38
+ export const bcdsBcdsSurfaceDangerActive = "#2E5DD7";
39
+ export const bcdsBcdsSurfaceBackgroundWhite = "#ffffff";
40
+ export const bcdsBcdsSurfaceBackgroundLight = "#faf9f8";
41
+ export const bcdsBcdsSurfaceBorderLight = "#d8d8d8";
42
+ export const bcdsBcdsSurfaceBorderMedium = "#898785";
43
+ export const bcdsBcdsSurfaceBorderDark = "#353433";
44
+ export const bcdsBcdsSurfaceOverlayDefault = "#00000073";
45
+ export const bcdsBcdsBrandGold10 = "#fff8e9";
46
+ export const bcdsBcdsBrandGold20 = "#feebc2";
47
+ export const bcdsBcdsBrandGold30 = "#fddf9d";
48
+ export const bcdsBcdsBrandGold40 = "#fdd47b";
49
+ export const bcdsBcdsBrandGold50 = "#fcc85d";
50
+ export const bcdsBcdsBrandGold60 = "#f8ba47"; // BC Gold
51
+ export const bcdsBcdsBrandGold70 = "#ce9737";
52
+ export const bcdsBcdsBrandGold80 = "#a5792b";
53
+ export const bcdsBcdsBrandGold90 = "#7e5d21";
54
+ export const bcdsBcdsBrandGold100 = "#584215";
55
+ export const bcdsBcdsBrandBlue10 = "#f1f8fe";
56
+ export const bcdsBcdsBrandBlue20 = "#d8eafd";
57
+ export const bcdsBcdsBrandBlue30 = "#c1ddfc";
58
+ export const bcdsBcdsBrandBlue40 = "#a8d0fb";
59
+ export const bcdsBcdsBrandBlue50 = "#91c4fa";
60
+ export const bcdsBcdsBrandBlue60 = "#7ab8f9";
61
+ export const bcdsBcdsBrandBlue70 = "#5595d9";
62
+ export const bcdsBcdsBrandBlue80 = "#3470b1";
63
+ export const bcdsBcdsBrandBlue90 = "#1e5189";
64
+ export const bcdsBcdsBrandBlue100 = "#053662"; // BC Blue
65
+ export const bcdsBcdsBrandGray10 = "#faf9f8";
66
+ export const bcdsBcdsBrandGray20 = "#f3f2f1";
67
+ export const bcdsBcdsBrandGray30 = "#eceae8";
68
+ export const bcdsBcdsBrandGray40 = "#e0dedc";
69
+ export const bcdsBcdsBrandGray50 = "#d1cfcd";
70
+ export const bcdsBcdsBrandGray60 = "#c6c5c3";
71
+ export const bcdsBcdsBrandGray70 = "#9f9d9c";
72
+ export const bcdsBcdsBrandGray80 = "#605e5c";
73
+ export const bcdsBcdsBrandGray90 = "#3d3c3b";
74
+ export const bcdsBcdsBrandGray100 = "#353433";
75
+ export const bcdsBcdsBrandGray110 = "#252423";
76
+ export const bcdsBcdsBrandGrayWhite = "#ffffff";
77
+ export const bcdsBcdsIconsPrimary = "#2d2d2d";
78
+ export const bcdsBcdsIconsSecondary = "#474543";
79
+ export const bcdsBcdsIconsDisabled = "#9f9d9c";
80
+ export const bcdsBcdsIconsLink = "#255a90";
81
+ export const bcdsBcdsIconsInfo = "#053662";
82
+ export const bcdsBcdsIconsDanger = "#ce3e39";
83
+ export const bcdsBcdsIconsSuccess = "#42814a";
84
+ export const bcdsBcdsIconsWarning = "#f8bb47";
85
+ export const bcdsBcdsSupportSurfaceColorInfo = "#f7f9fc";
86
+ export const bcdsBcdsSupportSurfaceColorDanger = "#f4e1e2";
87
+ export const bcdsBcdsSupportSurfaceColorSuccess = "#f6fff8";
88
+ export const bcdsBcdsSupportSurfaceColorWarning = "#fef1d8";
89
+ export const bcdsBcdsSupportBorderColorInfo = "#053662";
90
+ export const bcdsBcdsSupportBorderColorDanger = "#ce3e39";
91
+ export const bcdsBcdsSupportBorderColorSuccess = "#42814a";
92
+ export const bcdsBcdsSupportBorderColorWarning = "#f8bb47";
93
+ export const bcdsBcdsShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
94
+ export const bcdsBcdsShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards
95
+ export const bcdsBcdsShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips
96
+ export const bcdsBcdsShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs
97
+ export const bcdsBcdsFontFamiliesBcSans = "'BC Sans'";
98
+ export const bcdsBcdsLineHeightsXxdense = "1.313rem";
99
+ export const bcdsBcdsLineHeightsXdense = "1.688rem";
100
+ export const bcdsBcdsLineHeightsDense = "1.913rem";
101
+ export const bcdsBcdsLineHeightsRegular = "2.125rem";
102
+ export const bcdsBcdsLineHeightsSparse = "2.25rem";
103
+ export const bcdsBcdsLineHeightsXsparse = "3rem";
104
+ export const bcdsBcdsLineHeightsXxsparse = "3.375rem";
105
+ export const bcdsBcdsLineHeightsAuto = "AUTO";
106
+ export const bcdsBcdsFontWeightsRegular = 400;
107
+ export const bcdsBcdsFontWeightsBold = 700;
108
+ export const bcdsBcdsFontWeightsItalic = "Italic";
109
+ export const bcdsBcdsFontSizeLabel = "0.875rem";
110
+ export const bcdsBcdsFontSizeBody = "1rem";
111
+ export const bcdsBcdsFontSizeLargeBody = "1.125rem";
112
+ export const bcdsBcdsFontSizeH5 = "1.25rem";
113
+ export const bcdsBcdsFontSizeH4 = "2.5rem";
114
+ export const bcdsBcdsFontSizeH3 = "1.75rem";
115
+ export const bcdsBcdsFontSizeH2 = "2rem";
116
+ export const bcdsBcdsFontSizeH1 = "2.25rem";
117
+ export const bcdsBcdsFontSizeDisplay = "3rem";
118
+ export const bcdsBcdsLetterSpacing0 = "0em";
119
+ export const bcdsBcdsParagraphSpacing0 = "0";
120
+ export const bcdsBcdsRegularLabel = "400 0.875rem/1.313rem 'BC Sans'";
121
+ export const bcdsBcdsRegularBody = "400 1rem/1.688rem 'BC Sans'";
122
+ export const bcdsBcdsRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
123
+ export const bcdsBcdsRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
124
+ export const bcdsBcdsRegularH4 = "400 1.5rem/2.25rem 'BC Sans'";
125
+ export const bcdsBcdsRegularH3 = "400 1.75rem/3rem 'BC Sans'";
126
+ export const bcdsBcdsRegularH2 = "400 2rem/3.375rem 'BC Sans'";
127
+ export const bcdsBcdsRegularH1 = "400 2.25rem/3rem 'BC Sans'";
128
+ export const bcdsBcdsRegularDisplay = "400 3rem/AUTO 'BC Sans'";
129
+ export const bcdsBcdsBoldLabel = "700 0.875rem/1.313rem 'BC Sans'";
130
+ export const bcdsBcdsBoldBody = "700 1rem/1.688rem 'BC Sans'";
131
+ export const bcdsBcdsBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
132
+ export const bcdsBcdsBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
133
+ export const bcdsBcdsBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
134
+ export const bcdsBcdsBoldH3 = "700 1.75rem/3.375rem 'BC Sans'";
135
+ export const bcdsBcdsBoldH2 = "700 2rem/3rem 'BC Sans'";
136
+ export const bcdsBcdsBoldH1 = "700 2.25rem/AUTO 'BC Sans'";
137
+ export const bcdsBcdsBoldDisplay = "400 3rem/AUTO 'BC Sans'";
138
+ export const bcdsBcdsItalicLabel = "400 italic 0.875rem/1.313rem 'BC Sans'";
139
+ export const bcdsBcdsItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
140
+ export const bcdsBcdsItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
141
+ export const bcdsBcdsItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
142
+ export const bcdsBcdsItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
143
+ export const bcdsBcdsItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
144
+ export const bcdsBcdsItalicH2 = "400 italic 2rem/3.375rem 'BC Sans'";
145
+ export const bcdsBcdsItalicH1 = "400 italic 2.25rem/3rem 'BC Sans'";
146
+ export const bcdsBcdsItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
147
+ export const bcdsBcdsTextCaseNone = "none";
148
+ export const bcdsBcdsTextDecorationNone = "none";
149
+ export const bcdsBcdsBorderRadiusSmall = "2px";
150
+ export const bcdsBcdsBorderRadiusMedium = "4px";
151
+ export const bcdsBcdsBorderRadiusLarge = "6px";
152
+ export const bcdsBcdsBorderWidthNone = "0";
153
+ export const bcdsBcdsBorderWidthSmall = "1px";
154
+ export const bcdsBcdsBorderWidthMedium = "2px";
155
+ export const bcdsBcdsBorderWidthLarge = "4px";
156
+ export const bcdsBcdsSpacingNone = "0";
157
+ export const bcdsBcdsSpacingHair = "2px";
158
+ export const bcdsBcdsSpacingXxxsmall = "4px";
159
+ export const bcdsBcdsSpacingXxsmall = "6px";
160
+ export const bcdsBcdsSpacingXsmall = "8px";
161
+ export const bcdsBcdsSpacingSmall = "16px";
162
+ export const bcdsBcdsSpacingMedium = "24px";
163
+ export const bcdsBcdsSpacingLarge = "32px";
164
+ export const bcdsBcdsSpacingXlarge = "40px";
165
+ export const bcdsBcdsSpacingXxlarge = "48px";
166
+ export const bcdsBcdsActive = "1px solid #2E5DD7"; // used for active states for components
167
+ export const bcdsBcdsParagraphIndent0 = "0px";
168
+ export const bcdsBcdsMarginNone = "0";
169
+ export const bcdsBcdsMarginXsmall = "4px";
170
+ export const bcdsBcdsMarginSmall = "8px";
171
+ export const bcdsBcdsMarginMedium = "16px";
172
+ export const bcdsBcdsMarginLarge = "24px";
173
+ export const bcdsBcdsMarginXlarge = "32px";
174
+ export const bcdsBcdsPaddingNone = "0 0 0 0";
175
+ export const bcdsBcdsPaddingXsmall = "4px 4px 4px 4px";
176
+ export const bcdsBcdsPaddingSmall = "8px 8px 8px 8px";
177
+ export const bcdsBcdsPaddingMedium = "16px 16px 16px 16px";
178
+ export const bcdsBcdsPaddingLarge = "24px 24px 24px 24px";
179
+ export const bcdsBcdsPaddingXlarge = "32px 32px 32px 32px";
180
+ export const bcdsSurfaceOpacity0 = 0;
181
+ export const bcdsSurfaceOpacity10 = 0.1;
182
+ export const bcdsSurfaceOpacity20 = 0.2;
183
+ export const bcdsSurfaceOpacity30 = 0.3;
184
+ export const bcdsSurfaceOpacity40 = 0.4;
185
+ export const bcdsSurfaceOpacity50 = 0.5;
186
+ export const bcdsSurfaceOpacity60 = 0.6;
187
+ export const bcdsSurfaceOpacity70 = 0.7;
188
+ export const bcdsSurfaceOpacity80 = 0.8;
189
+ export const bcdsSurfaceOpacity90 = 0.9;
190
+ export const bcdsSurfaceOpacity100 = 1;
191
+ export const bcdsSurfacePrimaryDefault = "#013366";
192
+ export const bcdsSurfacePrimaryHover = "#1E5189";
193
+ export const bcdsSurfacePrimaryDisabled = "#edebe9";
194
+ export const bcdsSurfacePrimaryActive = "#2E5DD7";
195
+ export const bcdsSurfaceSecondaryDefault = "#ffffff";
196
+ export const bcdsSurfaceSecondaryHover = "#edebe9";
197
+ export const bcdsSurfaceSecondaryDisabled = "#edebe9";
198
+ export const bcdsSurfaceSecondaryActive = "#2E5DD7";
199
+ export const bcdsSurfaceTertiaryDefault = "#ffffff00";
200
+ export const bcdsSurfaceTertiaryHover = "#eceae8";
201
+ export const bcdsSurfaceTertiaryDisabled = "#edebe9";
202
+ export const bcdsSurfaceTertiaryActive = "#2E5DD7";
203
+ export const bcdsSurfaceDangerDefault = "#ce3e39";
204
+ export const bcdsSurfaceDangerHover = "#a2312d";
205
+ export const bcdsSurfaceDangerDisabled = "#edebe9";
206
+ export const bcdsSurfaceDangerActive = "#2E5DD7";
207
+ export const bcdsSurfaceBackgroundWhite = "#ffffff";
208
+ export const bcdsSurfaceBackgroundLight = "#faf9f8";
209
+ export const bcdsSurfaceBorderLight = "#d8d8d8";
210
+ export const bcdsSurfaceBorderMedium = "#898785";
211
+ export const bcdsSurfaceBorderDark = "#353433";
212
+ export const bcdsSurfaceOverlayDefault = "#00000073";
213
+ export const bcdsSurfaceBrandGold10 = "#fff8e9";
214
+ export const bcdsSurfaceBrandGold20 = "#feebc2";
215
+ export const bcdsSurfaceBrandGold30 = "#fddf9d";
216
+ export const bcdsSurfaceBrandGold40 = "#fdd47b";
217
+ export const bcdsSurfaceBrandGold50 = "#fcc85d";
218
+ export const bcdsSurfaceBrandGold60 = "#f8ba47"; // BC Gold
219
+ export const bcdsSurfaceBrandGold70 = "#ce9737";
220
+ export const bcdsSurfaceBrandGold80 = "#a5792b";
221
+ export const bcdsSurfaceBrandGold90 = "#7e5d21";
222
+ export const bcdsSurfaceBrandGold100 = "#584215";
223
+ export const bcdsSurfaceBrandBlue10 = "#f1f8fe";
224
+ export const bcdsSurfaceBrandBlue20 = "#d8eafd";
225
+ export const bcdsSurfaceBrandBlue30 = "#c1ddfc";
226
+ export const bcdsSurfaceBrandBlue40 = "#a8d0fb";
227
+ export const bcdsSurfaceBrandBlue50 = "#91c4fa";
228
+ export const bcdsSurfaceBrandBlue60 = "#7ab8f9";
229
+ export const bcdsSurfaceBrandBlue70 = "#5595d9";
230
+ export const bcdsSurfaceBrandBlue80 = "#3470b1";
231
+ export const bcdsSurfaceBrandBlue90 = "#1e5189";
232
+ export const bcdsSurfaceBrandBlue100 = "#053662"; // BC Blue
233
+ export const bcdsSurfaceBrandGray10 = "#faf9f8";
234
+ export const bcdsSurfaceBrandGray20 = "#f3f2f1";
235
+ export const bcdsSurfaceBrandGray30 = "#eceae8";
236
+ export const bcdsSurfaceBrandGray40 = "#e0dedc";
237
+ export const bcdsSurfaceBrandGray50 = "#d1cfcd";
238
+ export const bcdsSurfaceBrandGray60 = "#c6c5c3";
239
+ export const bcdsSurfaceBrandGray70 = "#9f9d9c";
240
+ export const bcdsSurfaceBrandGray80 = "#605e5c";
241
+ export const bcdsSurfaceBrandGray90 = "#3d3c3b";
242
+ export const bcdsSurfaceBrandGray100 = "#353433";
243
+ export const bcdsSurfaceBrandGray110 = "#252423";
244
+ export const bcdsSurfaceBrandGrayWhite = "#ffffff";
245
+ export const bcdsSurfaceIconsPrimary = "#2d2d2d";
246
+ export const bcdsSurfaceIconsSecondary = "#474543";
247
+ export const bcdsSurfaceIconsDisabled = "#9f9d9c";
248
+ export const bcdsSurfaceIconsLink = "#255a90";
249
+ export const bcdsSurfaceIconsInfo = "#053662";
250
+ export const bcdsSurfaceIconsDanger = "#ce3e39";
251
+ export const bcdsSurfaceIconsSuccess = "#42814a";
252
+ export const bcdsSurfaceIconsWarning = "#f8bb47";
253
+ export const bcdsSurfaceSupportSurfaceColorInfo = "#f7f9fc";
254
+ export const bcdsSurfaceSupportSurfaceColorDanger = "#f4e1e2";
255
+ export const bcdsSurfaceSupportSurfaceColorSuccess = "#f6fff8";
256
+ export const bcdsSurfaceSupportSurfaceColorWarning = "#fef1d8";
257
+ export const bcdsSurfaceSupportBorderColorInfo = "#053662";
258
+ export const bcdsSurfaceSupportBorderColorDanger = "#ce3e39";
259
+ export const bcdsSurfaceSupportBorderColorSuccess = "#42814a";
260
+ export const bcdsSurfaceSupportBorderColorWarning = "#f8bb47";
261
+ export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
262
+ export const bcdsSurfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards
263
+ export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips
264
+ export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs
265
+ export const bcdsSurfaceBorderRadiusNone = "0";
266
+ export const bcdsSurfaceBorderRadiusSmall = "2px";
267
+ export const bcdsSurfaceBorderRadiusMedium = "4px";
268
+ export const bcdsSurfaceBorderRadiusLarge = "6px";
269
+ export const bcdsSurfaceBorderWidthNone = "0";
270
+ export const bcdsSurfaceBorderWidthSmall = "1px";
271
+ export const bcdsSurfaceBorderWidthMedium = "2px";
272
+ export const bcdsSurfaceBorderWidthLarge = "4px";
273
+ export const bcdsSurfaceSizeSmall = "0px 8px";
274
+ export const bcdsSurfaceSizeMedium = "6px 16px";
275
+ export const bcdsSupportSupportSurfaceColorInfo = "#f7f9fc";
276
+ export const bcdsSupportSupportSurfaceColorDanger = "#f4e1e2";
277
+ export const bcdsSupportSupportSurfaceColorSuccess = "#f6fff8";
278
+ export const bcdsSupportSupportSurfaceColorWarning = "#fef1d8";
279
+ export const bcdsSupportSupportBorderColorInfo = "#053662";
280
+ export const bcdsSupportSupportBorderColorDanger = "#ce3e39";
281
+ export const bcdsSupportSupportBorderColorSuccess = "#42814a";
282
+ export const bcdsSupportSupportBorderColorWarning = "#f8bb47";
283
+ export const bcdsIconsIconsPrimary = "#2d2d2d";
284
+ export const bcdsIconsIconsSecondary = "#474543";
285
+ export const bcdsIconsIconsDisabled = "#9f9d9c";
286
+ export const bcdsIconsIconsLink = "#255a90";
287
+ export const bcdsIconsIconsInfo = "#053662";
288
+ export const bcdsIconsIconsDanger = "#ce3e39";
289
+ export const bcdsIconsIconsSuccess = "#42814a";
290
+ export const bcdsIconsIconsWarning = "#f8bb47";
291
+ export const bcdsIconsSizeXsmall = "14px";
292
+ export const bcdsIconsSizeSmall = "16px";
293
+ export const bcdsIconsSizeMedium = "20px";
294
+ export const bcdsIconsSizeLarge = "24px";
295
+ export const bcdsIconsSizeXlarge = "32px";
296
+ export const bcdsLayoutBorderWidthNone = "0";
297
+ export const bcdsLayoutBorderWidthSmall = "1px";
298
+ export const bcdsLayoutBorderWidthMedium = "2px";
299
+ export const bcdsLayoutBorderWidthLarge = "4px";
300
+ export const bcdsLayoutPaddingNone = "0";
301
+ export const bcdsLayoutPaddingXsmall = "4px";
302
+ export const bcdsLayoutPaddingSmall = "8px";
303
+ export const bcdsLayoutPaddingMedium = "16px";
304
+ export const bcdsLayoutPaddingLarge = "24px";
305
+ export const bcdsLayoutPaddingXlarge = "32px";
306
+ export const bcdsLayoutMarginNone = "0";
307
+ export const bcdsLayoutMarginHair = "2px";
308
+ export const bcdsLayoutMarginXsmall = "4px";
309
+ export const bcdsLayoutMarginSmall = "8px";
310
+ export const bcdsLayoutMarginMedium = "16px";
311
+ export const bcdsLayoutMarginLarge = "24px";
312
+ export const bcdsLayoutMarginXlarge = "32px";
313
+ export const bcdsLayoutMarginXxlarge = "40px";
314
+ export const bcdsLayoutMarginXxxlarge = "48px";
315
+ export const bcdsLayoutMarginHuge = "56px";
316
+ export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'";
317
+ export const bcdsTypographyLineHeightsXxdense = "1.313rem";
318
+ export const bcdsTypographyLineHeightsXdense = "1.688rem";
319
+ export const bcdsTypographyLineHeightsDense = "1.913rem";
320
+ export const bcdsTypographyLineHeightsRegular = "2.125rem";
321
+ export const bcdsTypographyLineHeightsSparse = "2.25rem";
322
+ export const bcdsTypographyLineHeightsXsparse = "3rem";
323
+ export const bcdsTypographyLineHeightsXxsparse = "3.375rem";
324
+ export const bcdsTypographyLineHeightsAuto = "AUTO";
325
+ export const bcdsTypographyFontWeightsRegular = 400;
326
+ export const bcdsTypographyFontWeightsBold = 700;
327
+ export const bcdsTypographyFontWeightsItalic = "Italic";
328
+ export const bcdsTypographyFontSizeLabel = "0.875rem";
329
+ export const bcdsTypographyFontSizeBody = "1rem";
330
+ export const bcdsTypographyFontSizeLargeBody = "1.125rem";
331
+ export const bcdsTypographyFontSizeH5 = "1.25rem";
332
+ export const bcdsTypographyFontSizeH4 = "1.5rem";
333
+ export const bcdsTypographyFontSizeH3 = "1.75rem";
334
+ export const bcdsTypographyFontSizeH2 = "2rem";
335
+ export const bcdsTypographyFontSizeH1 = "2.25rem";
336
+ export const bcdsTypographyFontSizeDisplay = "3rem";
337
+ export const bcdsTypographyLetterSpacing0 = "0em";
338
+ export const bcdsTypographyParagraphSpacing0 = "0";
339
+ export const bcdsTypographyRegularLabel = "400 0.875rem/1.313rem 'BC Sans'";
340
+ export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'";
341
+ export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
342
+ export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
343
+ export const bcdsTypographyRegularH4 = "400 1.5rem/2.25rem 'BC Sans'";
344
+ export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'";
345
+ export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'";
346
+ export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'";
347
+ export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'";
348
+ export const bcdsTypographyBoldLabel = "700 0.875rem/1.313rem 'BC Sans'";
349
+ export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'";
350
+ export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
351
+ export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
352
+ export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
353
+ export const bcdsTypographyBoldH3 = "700 1.75rem/3.375rem 'BC Sans'";
354
+ export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'";
355
+ export const bcdsTypographyBoldH1 = "700 2.25rem/AUTO 'BC Sans'";
356
+ export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'";
357
+ export const bcdsTypographyItalicLabel = "400 italic 0.875rem/1.313rem 'BC Sans'";
358
+ export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
359
+ export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
360
+ export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
361
+ export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
362
+ export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
363
+ export const bcdsTypographyItalicH2 = "400 italic 2rem/3.375rem 'BC Sans'";
364
+ export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3rem 'BC Sans'";
365
+ export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
366
+ export const bcdsTypographyTextCaseNone = "none";
367
+ export const bcdsTypographyTextDecorationNone = "none";
368
+ export const bcdsTypographyParagraphIndent0 = "0px";
369
+ export const bcdsTypographyColorPrimary = "#2D2D2D";
370
+ export const bcdsTypographyColorSecondary = "#474543";
371
+ export const bcdsTypographyColorDisabled = "#9F9D9C";
372
+ export const bcdsTypographyColorLink = "#255A90";
373
+ export const bcdsTypographyColorPrimaryInvert = "#FFFFFF";
374
+ export const bcdsTypographyColorSecondaryInvert = "#ECEAE8";
package/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "@bcgov/design-tokens",
3
+ "version": "0.0.1",
4
+ "description": "Design tokens for BC 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
+ "token-transformer",
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
+ }