@bcgov/design-tokens 2.0.0 → 3.0.0-rc1

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 (6) hide show
  1. package/README.md +2 -2
  2. package/css/variables.css +96 -106
  3. package/css-prefixed/variables.css +96 -106
  4. package/js/variables.js +96 -106
  5. package/js-prefixed/variables.js +96 -106
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @bcgov/design-tokens
2
2
 
3
- This package is being used to test publishing design tokens from Figma to npm.
3
+ This package is used to export and publish design tokens from Figma to npm for the BC Design System.
4
4
 
5
- Questions? Please email the <a href="mailto:corporatewebdesign@gov.bc.ca">GDX OSS Design Team</a>.
5
+ Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
6
6
 
7
7
  See main repository: https://github.com/bcgov/design-system
8
8
 
package/css/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Nov 2023 20:31:25 GMT
3
+ * Generated on Thu, 21 Mar 2024 18:19:40 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -15,112 +15,57 @@
15
15
  --surface-opacity-80: 0.8;
16
16
  --surface-opacity-90: 0.9;
17
17
  --surface-opacity-100: 1;
18
- --surface-primary-default: #013366;
19
- --surface-primary-hover: #1E5189;
20
- --surface-primary-disabled: #edebe9;
21
- --surface-primary-active: #2E5DD7;
22
- --surface-secondary-default: #ffffff;
23
- --surface-secondary-hover: #edebe9;
24
- --surface-secondary-disabled: #edebe9;
25
- --surface-secondary-active: #2E5DD7;
26
- --surface-tertiary-default: #ffffff00;
27
- --surface-tertiary-hover: #eceae8;
28
- --surface-tertiary-disabled: #edebe9;
29
- --surface-tertiary-active: #2E5DD7;
30
- --surface-danger-default: #ce3e39;
31
- --surface-danger-hover: #a2312d;
32
- --surface-danger-active: #2E5DD7;
33
- --surface-danger-disabled: #edebe9;
34
- --surface-background-white: #ffffff;
35
- --surface-background-light: #faf9f8;
36
- --surface-border-light: #d8d8d8;
37
- --surface-border-medium: #898785;
38
- --surface-border-dark: #353433;
39
- --surface-overlay-default: #00000073;
40
- --surface-brand-gold-10: #fff8e9;
41
- --surface-brand-gold-20: #feebc2;
42
- --surface-brand-gold-30: #fddf9d;
43
- --surface-brand-gold-40: #fdd47b;
44
- --surface-brand-gold-50: #fcc85d;
45
- --surface-brand-gold-60: #f8ba47; /* BC Gold */
46
- --surface-brand-gold-70: #ce9737;
47
- --surface-brand-gold-80: #a5792b;
48
- --surface-brand-gold-90: #7e5d21;
49
- --surface-brand-gold-100: #584215;
50
- --surface-brand-blue-10: #f1f8fe;
51
- --surface-brand-blue-20: #d8eafd;
52
- --surface-brand-blue-30: #c1ddfc;
53
- --surface-brand-blue-40: #a8d0fb;
54
- --surface-brand-blue-50: #91c4fa;
55
- --surface-brand-blue-60: #7ab8f9;
56
- --surface-brand-blue-70: #5595d9;
57
- --surface-brand-blue-80: #3470b1;
58
- --surface-brand-blue-90: #1e5189;
59
- --surface-brand-blue-100: #053662; /* BC Blue */
60
- --surface-brand-gray-10: #faf9f8;
61
- --surface-brand-gray-20: #f3f2f1;
62
- --surface-brand-gray-30: #eceae8;
63
- --surface-brand-gray-40: #e0dedc;
64
- --surface-brand-gray-50: #d1cfcd;
65
- --surface-brand-gray-60: #c6c5c3;
66
- --surface-brand-gray-70: #9f9d9c;
67
- --surface-brand-gray-80: #605e5c;
68
- --surface-brand-gray-90: #3d3c3b;
69
- --surface-brand-gray-100: #353433;
70
- --surface-brand-gray-110: #252423;
71
- --surface-brand-gray-white: #ffffff;
72
- --surface-icons-primary: #2d2d2d;
73
- --surface-icons-secondary: #474543;
74
- --surface-icons-disabled: #9f9d9c;
75
- --surface-icons-link: #255a90;
76
- --surface-icons-info: #053662;
77
- --surface-icons-danger: #ce3e39;
78
- --surface-icons-success: #42814a;
79
- --surface-icons-warning: #f8bb47;
80
- --surface-support-surface-color-info: #f7f9fc;
81
- --surface-support-surface-color-danger: #f4e1e2;
82
- --surface-support-surface-color-success: #f6fff8;
83
- --surface-support-surface-color-warning: #fef1d8;
84
- --surface-support-border-color-info: #053662;
85
- --surface-support-border-color-danger: #ce3e39;
86
- --surface-support-border-color-success: #42814a;
87
- --surface-support-border-color-warning: #f8bb47;
88
18
  --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;
89
19
  --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 */
90
20
  --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */
91
21
  --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */
92
- --surface-border-radius-none: 0;
93
- --surface-border-radius-small: 2px;
94
- --surface-border-radius-medium: 4px;
95
- --surface-border-radius-large: 6px;
96
- --surface-border-width-none: 0;
97
- --surface-border-width-small: 1px;
98
- --surface-border-width-medium: 2px;
99
- --surface-border-width-large: 4px;
100
- --surface-size-small: 0px 8px;
101
- --surface-size-medium: 6px 16px;
102
- --support-support-surface-color-info: #f7f9fc;
103
- --support-support-surface-color-danger: #f4e1e2;
104
- --support-support-surface-color-success: #f6fff8;
105
- --support-support-surface-color-warning: #fef1d8;
106
- --support-support-border-color-info: #053662;
107
- --support-support-border-color-danger: #ce3e39;
108
- --support-support-border-color-success: #42814a;
109
- --support-support-border-color-warning: #f8bb47;
110
- --icons-icons-primary: #2d2d2d;
111
- --icons-icons-secondary: #474543;
112
- --icons-icons-disabled: #9f9d9c;
113
- --icons-icons-link: #255a90;
114
- --icons-icons-info: #053662;
115
- --icons-icons-danger: #ce3e39;
116
- --icons-icons-success: #42814a;
117
- --icons-icons-warning: #f8bb47;
118
- --icons-icons-primary-invert: #ffffff;
22
+ --surface-color-primary-button-default: #013366;
23
+ --surface-color-primary-button-hover: #1E5189;
24
+ --surface-color-primary-button-disabled: #EDEBE9;
25
+ --surface-color-primary-danger-button-default: #CE3E39;
26
+ --surface-color-primary-danger-button-hover: #A2312D;
27
+ --surface-color-primary-danger-button-disabled: #EDEBE9;
28
+ --surface-color-secondary-button-default: #FFFFFF;
29
+ --surface-color-secondary-button-hover: #EDEBE9;
30
+ --surface-color-secondary-button-disabled: #EDEBE9;
31
+ --surface-color-tertiary-button-default: rgba(255,255,255,0);
32
+ --surface-color-tertiary-button-hover: #ECEAE8;
33
+ --surface-color-tertiary-button-disabled: #EDEBE9;
34
+ --surface-color-menus-default: #FFFFFF;
35
+ --surface-color-menus-hover: #EDEBE9;
36
+ --surface-color-forms-default: #FFFFFF;
37
+ --surface-color-forms-disabled: #EDEBE9;
38
+ --surface-color-background-white: #FFFFFF;
39
+ --surface-color-background-light-gray: #FAF9F8;
40
+ --surface-color-background-light-blue: #F1F8FE;
41
+ --surface-color-background-dark-blue: #053662;
42
+ --surface-color-border-default: #D8D8D8;
43
+ --surface-color-border-medium: #898785;
44
+ --surface-color-border-dark: #353433;
45
+ --surface-color-border-active: #2E5DD7;
46
+ --surface-color-overlay-default: rgba(0,0,0,0.45);
47
+ --support-surface-color-info: #F7F9FC;
48
+ --support-surface-color-danger: #F4E1E2;
49
+ --support-surface-color-success: #F6FFF8;
50
+ --support-surface-color-warning: #FEF1D8;
51
+ --support-border-color-info: #053662;
52
+ --support-border-color-danger: #CE3E39;
53
+ --support-border-color-success: #42814A;
54
+ --support-border-color-warning: #F8BB47;
119
55
  --icons-size-xsmall: 14px;
120
56
  --icons-size-small: 16px;
121
57
  --icons-size-medium: 20px;
122
58
  --icons-size-large: 24px;
123
59
  --icons-size-xlarge: 32px;
60
+ --icons-color-primary: #2D2D2D;
61
+ --icons-color-secondary: #474543;
62
+ --icons-color-disabled: #9F9D9C;
63
+ --icons-color-link: #255A90;
64
+ --icons-color-info: #053662;
65
+ --icons-color-danger: #CE3E39;
66
+ --icons-color-success: #42814A;
67
+ --icons-color-warning: #F8BB47;
68
+ --icons-color-primary-invert: #FFFFFF;
124
69
  --layout-border-width-none: 0;
125
70
  --layout-border-width-small: 1px;
126
71
  --layout-border-width-medium: 2px;
@@ -141,7 +86,12 @@
141
86
  --layout-margin-xxlarge: 40px;
142
87
  --layout-margin-xxxlarge: 48px;
143
88
  --layout-margin-huge: 56px;
89
+ --layout-border-radius-none: 0;
90
+ --layout-border-radius-small: 2px;
91
+ --layout-border-radius-medium: 4px;
92
+ --layout-border-radius-large: 6px;
144
93
  --typography-font-families-bc-sans: 'BC Sans';
94
+ --typography-line-heights-xxxdense: 1.125rem;
145
95
  --typography-line-heights-xxdense: 1.313rem;
146
96
  --typography-line-heights-xdense: 1.688rem;
147
97
  --typography-line-heights-dense: 1.913rem;
@@ -153,7 +103,8 @@
153
103
  --typography-font-weights-regular: 400;
154
104
  --typography-font-weights-bold: 700;
155
105
  --typography-font-weights-italic: Italic;
156
- --typography-font-size-label: 0.875rem;
106
+ --typography-font-size-label: 0.75rem;
107
+ --typography-font-size-small-body: 0.875rem;
157
108
  --typography-font-size-body: 1rem;
158
109
  --typography-font-size-large-body: 1.125rem;
159
110
  --typography-font-size-h5: 1.25rem;
@@ -164,7 +115,8 @@
164
115
  --typography-font-size-display: 3rem;
165
116
  --typography-letter-spacing-0: 0em;
166
117
  --typography-paragraph-spacing-0: 0;
167
- --typography-regular-label: 400 0.875rem/1.313rem 'BC Sans';
118
+ --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans';
119
+ --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans';
168
120
  --typography-regular-body: 400 1rem/1.688rem 'BC Sans';
169
121
  --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans';
170
122
  --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans';
@@ -173,31 +125,69 @@
173
125
  --typography-regular-h2: 400 2rem/3.375rem 'BC Sans';
174
126
  --typography-regular-h1: 400 2.25rem/3rem 'BC Sans';
175
127
  --typography-regular-display: 400 3rem/AUTO 'BC Sans';
176
- --typography-bold-label: 700 0.875rem/1.313rem 'BC Sans';
128
+ --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans';
129
+ --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans';
177
130
  --typography-bold-body: 700 1rem/1.688rem 'BC Sans';
178
131
  --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans';
179
132
  --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans';
180
133
  --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans';
181
- --typography-bold-h3: 700 1.75rem/3.375rem 'BC Sans';
134
+ --typography-bold-h3: 700 1.75rem/3rem 'BC Sans';
182
135
  --typography-bold-h2: 700 2rem/3rem 'BC Sans';
183
- --typography-bold-h1: 700 2.25rem/AUTO 'BC Sans';
136
+ --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans';
184
137
  --typography-bold-display: 700 3rem/AUTO 'BC Sans';
185
- --typography-italic-label: 400 italic 0.875rem/1.313rem 'BC Sans';
138
+ --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans';
139
+ --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans';
186
140
  --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans';
187
141
  --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans';
188
142
  --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans';
189
143
  --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans';
190
144
  --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans';
191
- --typography-italic-h2: 400 italic 2rem/3.375rem 'BC Sans';
192
- --typography-italic-h1: 400 italic 2.25rem/3rem 'BC Sans';
145
+ --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans';
146
+ --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans';
193
147
  --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans';
194
148
  --typography-text-case-none: none;
195
149
  --typography-text-decoration-none: none;
196
150
  --typography-paragraph-indent-0: 0px;
197
151
  --typography-color-primary: #2D2D2D;
198
152
  --typography-color-secondary: #474543;
153
+ --typography-color-placeholder: #9F9D9C;
199
154
  --typography-color-disabled: #9F9D9C;
200
155
  --typography-color-link: #255A90;
156
+ --typography-color-danger: #CE3E39;
201
157
  --typography-color-primary-invert: #FFFFFF;
202
158
  --typography-color-secondary-invert: #ECEAE8;
159
+ --theme-gold-10: #FEF8E8;
160
+ --theme-gold-20: #FEF0D8;
161
+ --theme-gold-30: #FDE9C4;
162
+ --theme-gold-40: #FCE2B0;
163
+ --theme-gold-50: #FBDA9D;
164
+ --theme-gold-60: #FBD389;
165
+ --theme-gold-70: #FACC75;
166
+ --theme-gold-80: #F9C462;
167
+ --theme-gold-90: #F8BA47;
168
+ --theme-gold-100: #FCBA19;
169
+ --theme-blue-10: #F1F8FE;
170
+ --theme-blue-20: #D8EAFD;
171
+ --theme-blue-30: #C1DDFC;
172
+ --theme-blue-40: #A8D0FB;
173
+ --theme-blue-50: #91C4FA;
174
+ --theme-blue-60: #7AB8F9;
175
+ --theme-blue-70: #5595D9;
176
+ --theme-blue-80: #3470B1;
177
+ --theme-blue-90: #1E5189;
178
+ --theme-blue-100: #013366;
179
+ --theme-gray-10: #FAF9F8;
180
+ --theme-gray-20: #F3F2F1;
181
+ --theme-gray-30: #ECEAE8;
182
+ --theme-gray-40: #E0DEDC;
183
+ --theme-gray-50: #D1CFCD;
184
+ --theme-gray-60: #C6C5C3;
185
+ --theme-gray-70: #9F9D9C;
186
+ --theme-gray-80: #605E5C;
187
+ --theme-gray-90: #3D3C3B;
188
+ --theme-gray-100: #353433;
189
+ --theme-gray-110: #252423;
190
+ --theme-gray-white: #FFFFFF;
191
+ --theme-primary-blue: #013366;
192
+ --theme-primary-gold: #FCBA19;
203
193
  }
package/css-prefixed/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Nov 2023 20:31:26 GMT
3
+ * Generated on Thu, 21 Mar 2024 18:19:40 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -15,112 +15,57 @@
15
15
  --bcds-surface-opacity-80: 0.8;
16
16
  --bcds-surface-opacity-90: 0.9;
17
17
  --bcds-surface-opacity-100: 1;
18
- --bcds-surface-primary-default: #013366;
19
- --bcds-surface-primary-hover: #1E5189;
20
- --bcds-surface-primary-disabled: #edebe9;
21
- --bcds-surface-primary-active: #2E5DD7;
22
- --bcds-surface-secondary-default: #ffffff;
23
- --bcds-surface-secondary-hover: #edebe9;
24
- --bcds-surface-secondary-disabled: #edebe9;
25
- --bcds-surface-secondary-active: #2E5DD7;
26
- --bcds-surface-tertiary-default: #ffffff00;
27
- --bcds-surface-tertiary-hover: #eceae8;
28
- --bcds-surface-tertiary-disabled: #edebe9;
29
- --bcds-surface-tertiary-active: #2E5DD7;
30
- --bcds-surface-danger-default: #ce3e39;
31
- --bcds-surface-danger-hover: #a2312d;
32
- --bcds-surface-danger-active: #2E5DD7;
33
- --bcds-surface-danger-disabled: #edebe9;
34
- --bcds-surface-background-white: #ffffff;
35
- --bcds-surface-background-light: #faf9f8;
36
- --bcds-surface-border-light: #d8d8d8;
37
- --bcds-surface-border-medium: #898785;
38
- --bcds-surface-border-dark: #353433;
39
- --bcds-surface-overlay-default: #00000073;
40
- --bcds-surface-brand-gold-10: #fff8e9;
41
- --bcds-surface-brand-gold-20: #feebc2;
42
- --bcds-surface-brand-gold-30: #fddf9d;
43
- --bcds-surface-brand-gold-40: #fdd47b;
44
- --bcds-surface-brand-gold-50: #fcc85d;
45
- --bcds-surface-brand-gold-60: #f8ba47; /* BC Gold */
46
- --bcds-surface-brand-gold-70: #ce9737;
47
- --bcds-surface-brand-gold-80: #a5792b;
48
- --bcds-surface-brand-gold-90: #7e5d21;
49
- --bcds-surface-brand-gold-100: #584215;
50
- --bcds-surface-brand-blue-10: #f1f8fe;
51
- --bcds-surface-brand-blue-20: #d8eafd;
52
- --bcds-surface-brand-blue-30: #c1ddfc;
53
- --bcds-surface-brand-blue-40: #a8d0fb;
54
- --bcds-surface-brand-blue-50: #91c4fa;
55
- --bcds-surface-brand-blue-60: #7ab8f9;
56
- --bcds-surface-brand-blue-70: #5595d9;
57
- --bcds-surface-brand-blue-80: #3470b1;
58
- --bcds-surface-brand-blue-90: #1e5189;
59
- --bcds-surface-brand-blue-100: #053662; /* BC Blue */
60
- --bcds-surface-brand-gray-10: #faf9f8;
61
- --bcds-surface-brand-gray-20: #f3f2f1;
62
- --bcds-surface-brand-gray-30: #eceae8;
63
- --bcds-surface-brand-gray-40: #e0dedc;
64
- --bcds-surface-brand-gray-50: #d1cfcd;
65
- --bcds-surface-brand-gray-60: #c6c5c3;
66
- --bcds-surface-brand-gray-70: #9f9d9c;
67
- --bcds-surface-brand-gray-80: #605e5c;
68
- --bcds-surface-brand-gray-90: #3d3c3b;
69
- --bcds-surface-brand-gray-100: #353433;
70
- --bcds-surface-brand-gray-110: #252423;
71
- --bcds-surface-brand-gray-white: #ffffff;
72
- --bcds-surface-icons-primary: #2d2d2d;
73
- --bcds-surface-icons-secondary: #474543;
74
- --bcds-surface-icons-disabled: #9f9d9c;
75
- --bcds-surface-icons-link: #255a90;
76
- --bcds-surface-icons-info: #053662;
77
- --bcds-surface-icons-danger: #ce3e39;
78
- --bcds-surface-icons-success: #42814a;
79
- --bcds-surface-icons-warning: #f8bb47;
80
- --bcds-surface-support-surface-color-info: #f7f9fc;
81
- --bcds-surface-support-surface-color-danger: #f4e1e2;
82
- --bcds-surface-support-surface-color-success: #f6fff8;
83
- --bcds-surface-support-surface-color-warning: #fef1d8;
84
- --bcds-surface-support-border-color-info: #053662;
85
- --bcds-surface-support-border-color-danger: #ce3e39;
86
- --bcds-surface-support-border-color-success: #42814a;
87
- --bcds-surface-support-border-color-warning: #f8bb47;
88
18
  --bcds-surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;
89
19
  --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 */
90
20
  --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 */
91
21
  --bcds-surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */
92
- --bcds-surface-border-radius-none: 0;
93
- --bcds-surface-border-radius-small: 2px;
94
- --bcds-surface-border-radius-medium: 4px;
95
- --bcds-surface-border-radius-large: 6px;
96
- --bcds-surface-border-width-none: 0;
97
- --bcds-surface-border-width-small: 1px;
98
- --bcds-surface-border-width-medium: 2px;
99
- --bcds-surface-border-width-large: 4px;
100
- --bcds-surface-size-small: 0px 8px;
101
- --bcds-surface-size-medium: 6px 16px;
102
- --bcds-support-support-surface-color-info: #f7f9fc;
103
- --bcds-support-support-surface-color-danger: #f4e1e2;
104
- --bcds-support-support-surface-color-success: #f6fff8;
105
- --bcds-support-support-surface-color-warning: #fef1d8;
106
- --bcds-support-support-border-color-info: #053662;
107
- --bcds-support-support-border-color-danger: #ce3e39;
108
- --bcds-support-support-border-color-success: #42814a;
109
- --bcds-support-support-border-color-warning: #f8bb47;
110
- --bcds-icons-icons-primary: #2d2d2d;
111
- --bcds-icons-icons-secondary: #474543;
112
- --bcds-icons-icons-disabled: #9f9d9c;
113
- --bcds-icons-icons-link: #255a90;
114
- --bcds-icons-icons-info: #053662;
115
- --bcds-icons-icons-danger: #ce3e39;
116
- --bcds-icons-icons-success: #42814a;
117
- --bcds-icons-icons-warning: #f8bb47;
118
- --bcds-icons-icons-primary-invert: #ffffff;
22
+ --bcds-surface-color-primary-button-default: #013366;
23
+ --bcds-surface-color-primary-button-hover: #1E5189;
24
+ --bcds-surface-color-primary-button-disabled: #EDEBE9;
25
+ --bcds-surface-color-primary-danger-button-default: #CE3E39;
26
+ --bcds-surface-color-primary-danger-button-hover: #A2312D;
27
+ --bcds-surface-color-primary-danger-button-disabled: #EDEBE9;
28
+ --bcds-surface-color-secondary-button-default: #FFFFFF;
29
+ --bcds-surface-color-secondary-button-hover: #EDEBE9;
30
+ --bcds-surface-color-secondary-button-disabled: #EDEBE9;
31
+ --bcds-surface-color-tertiary-button-default: rgba(255,255,255,0);
32
+ --bcds-surface-color-tertiary-button-hover: #ECEAE8;
33
+ --bcds-surface-color-tertiary-button-disabled: #EDEBE9;
34
+ --bcds-surface-color-menus-default: #FFFFFF;
35
+ --bcds-surface-color-menus-hover: #EDEBE9;
36
+ --bcds-surface-color-forms-default: #FFFFFF;
37
+ --bcds-surface-color-forms-disabled: #EDEBE9;
38
+ --bcds-surface-color-background-white: #FFFFFF;
39
+ --bcds-surface-color-background-light-gray: #FAF9F8;
40
+ --bcds-surface-color-background-light-blue: #F1F8FE;
41
+ --bcds-surface-color-background-dark-blue: #053662;
42
+ --bcds-surface-color-border-default: #D8D8D8;
43
+ --bcds-surface-color-border-medium: #898785;
44
+ --bcds-surface-color-border-dark: #353433;
45
+ --bcds-surface-color-border-active: #2E5DD7;
46
+ --bcds-surface-color-overlay-default: rgba(0,0,0,0.45);
47
+ --bcds-support-surface-color-info: #F7F9FC;
48
+ --bcds-support-surface-color-danger: #F4E1E2;
49
+ --bcds-support-surface-color-success: #F6FFF8;
50
+ --bcds-support-surface-color-warning: #FEF1D8;
51
+ --bcds-support-border-color-info: #053662;
52
+ --bcds-support-border-color-danger: #CE3E39;
53
+ --bcds-support-border-color-success: #42814A;
54
+ --bcds-support-border-color-warning: #F8BB47;
119
55
  --bcds-icons-size-xsmall: 14px;
120
56
  --bcds-icons-size-small: 16px;
121
57
  --bcds-icons-size-medium: 20px;
122
58
  --bcds-icons-size-large: 24px;
123
59
  --bcds-icons-size-xlarge: 32px;
60
+ --bcds-icons-color-primary: #2D2D2D;
61
+ --bcds-icons-color-secondary: #474543;
62
+ --bcds-icons-color-disabled: #9F9D9C;
63
+ --bcds-icons-color-link: #255A90;
64
+ --bcds-icons-color-info: #053662;
65
+ --bcds-icons-color-danger: #CE3E39;
66
+ --bcds-icons-color-success: #42814A;
67
+ --bcds-icons-color-warning: #F8BB47;
68
+ --bcds-icons-color-primary-invert: #FFFFFF;
124
69
  --bcds-layout-border-width-none: 0;
125
70
  --bcds-layout-border-width-small: 1px;
126
71
  --bcds-layout-border-width-medium: 2px;
@@ -141,7 +86,12 @@
141
86
  --bcds-layout-margin-xxlarge: 40px;
142
87
  --bcds-layout-margin-xxxlarge: 48px;
143
88
  --bcds-layout-margin-huge: 56px;
89
+ --bcds-layout-border-radius-none: 0;
90
+ --bcds-layout-border-radius-small: 2px;
91
+ --bcds-layout-border-radius-medium: 4px;
92
+ --bcds-layout-border-radius-large: 6px;
144
93
  --bcds-typography-font-families-bc-sans: 'BC Sans';
94
+ --bcds-typography-line-heights-xxxdense: 1.125rem;
145
95
  --bcds-typography-line-heights-xxdense: 1.313rem;
146
96
  --bcds-typography-line-heights-xdense: 1.688rem;
147
97
  --bcds-typography-line-heights-dense: 1.913rem;
@@ -153,7 +103,8 @@
153
103
  --bcds-typography-font-weights-regular: 400;
154
104
  --bcds-typography-font-weights-bold: 700;
155
105
  --bcds-typography-font-weights-italic: Italic;
156
- --bcds-typography-font-size-label: 0.875rem;
106
+ --bcds-typography-font-size-label: 0.75rem;
107
+ --bcds-typography-font-size-small-body: 0.875rem;
157
108
  --bcds-typography-font-size-body: 1rem;
158
109
  --bcds-typography-font-size-large-body: 1.125rem;
159
110
  --bcds-typography-font-size-h5: 1.25rem;
@@ -164,7 +115,8 @@
164
115
  --bcds-typography-font-size-display: 3rem;
165
116
  --bcds-typography-letter-spacing-0: 0em;
166
117
  --bcds-typography-paragraph-spacing-0: 0;
167
- --bcds-typography-regular-label: 400 0.875rem/1.313rem 'BC Sans';
118
+ --bcds-typography-regular-label: 400 0.75rem/1.125rem 'BC Sans';
119
+ --bcds-typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans';
168
120
  --bcds-typography-regular-body: 400 1rem/1.688rem 'BC Sans';
169
121
  --bcds-typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans';
170
122
  --bcds-typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans';
@@ -173,31 +125,69 @@
173
125
  --bcds-typography-regular-h2: 400 2rem/3.375rem 'BC Sans';
174
126
  --bcds-typography-regular-h1: 400 2.25rem/3rem 'BC Sans';
175
127
  --bcds-typography-regular-display: 400 3rem/AUTO 'BC Sans';
176
- --bcds-typography-bold-label: 700 0.875rem/1.313rem 'BC Sans';
128
+ --bcds-typography-bold-label: 700 0.75rem/1.125rem 'BC Sans';
129
+ --bcds-typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans';
177
130
  --bcds-typography-bold-body: 700 1rem/1.688rem 'BC Sans';
178
131
  --bcds-typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans';
179
132
  --bcds-typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans';
180
133
  --bcds-typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans';
181
- --bcds-typography-bold-h3: 700 1.75rem/3.375rem 'BC Sans';
134
+ --bcds-typography-bold-h3: 700 1.75rem/3rem 'BC Sans';
182
135
  --bcds-typography-bold-h2: 700 2rem/3rem 'BC Sans';
183
- --bcds-typography-bold-h1: 700 2.25rem/AUTO 'BC Sans';
136
+ --bcds-typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans';
184
137
  --bcds-typography-bold-display: 700 3rem/AUTO 'BC Sans';
185
- --bcds-typography-italic-label: 400 italic 0.875rem/1.313rem 'BC Sans';
138
+ --bcds-typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans';
139
+ --bcds-typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans';
186
140
  --bcds-typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans';
187
141
  --bcds-typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans';
188
142
  --bcds-typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans';
189
143
  --bcds-typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans';
190
144
  --bcds-typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans';
191
- --bcds-typography-italic-h2: 400 italic 2rem/3.375rem 'BC Sans';
192
- --bcds-typography-italic-h1: 400 italic 2.25rem/3rem 'BC Sans';
145
+ --bcds-typography-italic-h2: 400 italic 2rem/3rem 'BC Sans';
146
+ --bcds-typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans';
193
147
  --bcds-typography-italic-display: 400 italic 3rem/AUTO 'BC Sans';
194
148
  --bcds-typography-text-case-none: none;
195
149
  --bcds-typography-text-decoration-none: none;
196
150
  --bcds-typography-paragraph-indent-0: 0px;
197
151
  --bcds-typography-color-primary: #2D2D2D;
198
152
  --bcds-typography-color-secondary: #474543;
153
+ --bcds-typography-color-placeholder: #9F9D9C;
199
154
  --bcds-typography-color-disabled: #9F9D9C;
200
155
  --bcds-typography-color-link: #255A90;
156
+ --bcds-typography-color-danger: #CE3E39;
201
157
  --bcds-typography-color-primary-invert: #FFFFFF;
202
158
  --bcds-typography-color-secondary-invert: #ECEAE8;
159
+ --bcds-theme-gold-10: #FEF8E8;
160
+ --bcds-theme-gold-20: #FEF0D8;
161
+ --bcds-theme-gold-30: #FDE9C4;
162
+ --bcds-theme-gold-40: #FCE2B0;
163
+ --bcds-theme-gold-50: #FBDA9D;
164
+ --bcds-theme-gold-60: #FBD389;
165
+ --bcds-theme-gold-70: #FACC75;
166
+ --bcds-theme-gold-80: #F9C462;
167
+ --bcds-theme-gold-90: #F8BA47;
168
+ --bcds-theme-gold-100: #FCBA19;
169
+ --bcds-theme-blue-10: #F1F8FE;
170
+ --bcds-theme-blue-20: #D8EAFD;
171
+ --bcds-theme-blue-30: #C1DDFC;
172
+ --bcds-theme-blue-40: #A8D0FB;
173
+ --bcds-theme-blue-50: #91C4FA;
174
+ --bcds-theme-blue-60: #7AB8F9;
175
+ --bcds-theme-blue-70: #5595D9;
176
+ --bcds-theme-blue-80: #3470B1;
177
+ --bcds-theme-blue-90: #1E5189;
178
+ --bcds-theme-blue-100: #013366;
179
+ --bcds-theme-gray-10: #FAF9F8;
180
+ --bcds-theme-gray-20: #F3F2F1;
181
+ --bcds-theme-gray-30: #ECEAE8;
182
+ --bcds-theme-gray-40: #E0DEDC;
183
+ --bcds-theme-gray-50: #D1CFCD;
184
+ --bcds-theme-gray-60: #C6C5C3;
185
+ --bcds-theme-gray-70: #9F9D9C;
186
+ --bcds-theme-gray-80: #605E5C;
187
+ --bcds-theme-gray-90: #3D3C3B;
188
+ --bcds-theme-gray-100: #353433;
189
+ --bcds-theme-gray-110: #252423;
190
+ --bcds-theme-gray-white: #FFFFFF;
191
+ --bcds-theme-primary-blue: #013366;
192
+ --bcds-theme-primary-gold: #FCBA19;
203
193
  }
package/js/variables.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Nov 2023 20:31:26 GMT
3
+ * Generated on Thu, 21 Mar 2024 18:19:40 GMT
4
4
  */
5
5
 
6
6
  export const surfaceOpacity0 = 0;
@@ -14,112 +14,57 @@ export const surfaceOpacity70 = 0.7;
14
14
  export const surfaceOpacity80 = 0.8;
15
15
  export const surfaceOpacity90 = 0.9;
16
16
  export const surfaceOpacity100 = 1;
17
- export const surfacePrimaryDefault = "#013366";
18
- export const surfacePrimaryHover = "#1E5189";
19
- export const surfacePrimaryDisabled = "#edebe9";
20
- export const surfacePrimaryActive = "#2E5DD7";
21
- export const surfaceSecondaryDefault = "#ffffff";
22
- export const surfaceSecondaryHover = "#edebe9";
23
- export const surfaceSecondaryDisabled = "#edebe9";
24
- export const surfaceSecondaryActive = "#2E5DD7";
25
- export const surfaceTertiaryDefault = "#ffffff00";
26
- export const surfaceTertiaryHover = "#eceae8";
27
- export const surfaceTertiaryDisabled = "#edebe9";
28
- export const surfaceTertiaryActive = "#2E5DD7";
29
- export const surfaceDangerDefault = "#ce3e39";
30
- export const surfaceDangerHover = "#a2312d";
31
- export const surfaceDangerActive = "#2E5DD7";
32
- export const surfaceDangerDisabled = "#edebe9";
33
- export const surfaceBackgroundWhite = "#ffffff";
34
- export const surfaceBackgroundLight = "#faf9f8";
35
- export const surfaceBorderLight = "#d8d8d8";
36
- export const surfaceBorderMedium = "#898785";
37
- export const surfaceBorderDark = "#353433";
38
- export const surfaceOverlayDefault = "#00000073";
39
- export const surfaceBrandGold10 = "#fff8e9";
40
- export const surfaceBrandGold20 = "#feebc2";
41
- export const surfaceBrandGold30 = "#fddf9d";
42
- export const surfaceBrandGold40 = "#fdd47b";
43
- export const surfaceBrandGold50 = "#fcc85d";
44
- export const surfaceBrandGold60 = "#f8ba47"; // BC Gold
45
- export const surfaceBrandGold70 = "#ce9737";
46
- export const surfaceBrandGold80 = "#a5792b";
47
- export const surfaceBrandGold90 = "#7e5d21";
48
- export const surfaceBrandGold100 = "#584215";
49
- export const surfaceBrandBlue10 = "#f1f8fe";
50
- export const surfaceBrandBlue20 = "#d8eafd";
51
- export const surfaceBrandBlue30 = "#c1ddfc";
52
- export const surfaceBrandBlue40 = "#a8d0fb";
53
- export const surfaceBrandBlue50 = "#91c4fa";
54
- export const surfaceBrandBlue60 = "#7ab8f9";
55
- export const surfaceBrandBlue70 = "#5595d9";
56
- export const surfaceBrandBlue80 = "#3470b1";
57
- export const surfaceBrandBlue90 = "#1e5189";
58
- export const surfaceBrandBlue100 = "#053662"; // BC Blue
59
- export const surfaceBrandGray10 = "#faf9f8";
60
- export const surfaceBrandGray20 = "#f3f2f1";
61
- export const surfaceBrandGray30 = "#eceae8";
62
- export const surfaceBrandGray40 = "#e0dedc";
63
- export const surfaceBrandGray50 = "#d1cfcd";
64
- export const surfaceBrandGray60 = "#c6c5c3";
65
- export const surfaceBrandGray70 = "#9f9d9c";
66
- export const surfaceBrandGray80 = "#605e5c";
67
- export const surfaceBrandGray90 = "#3d3c3b";
68
- export const surfaceBrandGray100 = "#353433";
69
- export const surfaceBrandGray110 = "#252423";
70
- export const surfaceBrandGrayWhite = "#ffffff";
71
- export const surfaceIconsPrimary = "#2d2d2d";
72
- export const surfaceIconsSecondary = "#474543";
73
- export const surfaceIconsDisabled = "#9f9d9c";
74
- export const surfaceIconsLink = "#255a90";
75
- export const surfaceIconsInfo = "#053662";
76
- export const surfaceIconsDanger = "#ce3e39";
77
- export const surfaceIconsSuccess = "#42814a";
78
- export const surfaceIconsWarning = "#f8bb47";
79
- export const surfaceSupportSurfaceColorInfo = "#f7f9fc";
80
- export const surfaceSupportSurfaceColorDanger = "#f4e1e2";
81
- export const surfaceSupportSurfaceColorSuccess = "#f6fff8";
82
- export const surfaceSupportSurfaceColorWarning = "#fef1d8";
83
- export const surfaceSupportBorderColorInfo = "#053662";
84
- export const surfaceSupportBorderColorDanger = "#ce3e39";
85
- export const surfaceSupportBorderColorSuccess = "#42814a";
86
- export const surfaceSupportBorderColorWarning = "#f8bb47";
87
17
  export const surfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
88
18
  export const surfaceShadowSmall = "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021"; // Primarily used as a hover effect for cards
89
19
  export const surfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips
90
20
  export const surfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs
91
- export const surfaceBorderRadiusNone = "0";
92
- export const surfaceBorderRadiusSmall = "2px";
93
- export const surfaceBorderRadiusMedium = "4px";
94
- export const surfaceBorderRadiusLarge = "6px";
95
- export const surfaceBorderWidthNone = "0";
96
- export const surfaceBorderWidthSmall = "1px";
97
- export const surfaceBorderWidthMedium = "2px";
98
- export const surfaceBorderWidthLarge = "4px";
99
- export const surfaceSizeSmall = "0px 8px";
100
- export const surfaceSizeMedium = "6px 16px";
101
- export const supportSupportSurfaceColorInfo = "#f7f9fc";
102
- export const supportSupportSurfaceColorDanger = "#f4e1e2";
103
- export const supportSupportSurfaceColorSuccess = "#f6fff8";
104
- export const supportSupportSurfaceColorWarning = "#fef1d8";
105
- export const supportSupportBorderColorInfo = "#053662";
106
- export const supportSupportBorderColorDanger = "#ce3e39";
107
- export const supportSupportBorderColorSuccess = "#42814a";
108
- export const supportSupportBorderColorWarning = "#f8bb47";
109
- export const iconsIconsPrimary = "#2d2d2d";
110
- export const iconsIconsSecondary = "#474543";
111
- export const iconsIconsDisabled = "#9f9d9c";
112
- export const iconsIconsLink = "#255a90";
113
- export const iconsIconsInfo = "#053662";
114
- export const iconsIconsDanger = "#ce3e39";
115
- export const iconsIconsSuccess = "#42814a";
116
- export const iconsIconsWarning = "#f8bb47";
117
- export const iconsIconsPrimaryInvert = "#ffffff";
21
+ export const surfaceColorPrimaryButtonDefault = "#013366";
22
+ export const surfaceColorPrimaryButtonHover = "#1E5189";
23
+ export const surfaceColorPrimaryButtonDisabled = "#EDEBE9";
24
+ export const surfaceColorPrimaryDangerButtonDefault = "#CE3E39";
25
+ export const surfaceColorPrimaryDangerButtonHover = "#A2312D";
26
+ export const surfaceColorPrimaryDangerButtonDisabled = "#EDEBE9";
27
+ export const surfaceColorSecondaryButtonDefault = "#FFFFFF";
28
+ export const surfaceColorSecondaryButtonHover = "#EDEBE9";
29
+ export const surfaceColorSecondaryButtonDisabled = "#EDEBE9";
30
+ export const surfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)";
31
+ export const surfaceColorTertiaryButtonHover = "#ECEAE8";
32
+ export const surfaceColorTertiaryButtonDisabled = "#EDEBE9";
33
+ export const surfaceColorMenusDefault = "#FFFFFF";
34
+ export const surfaceColorMenusHover = "#EDEBE9";
35
+ export const surfaceColorFormsDefault = "#FFFFFF";
36
+ export const surfaceColorFormsDisabled = "#EDEBE9";
37
+ export const surfaceColorBackgroundWhite = "#FFFFFF";
38
+ export const surfaceColorBackgroundLightGray = "#FAF9F8";
39
+ export const surfaceColorBackgroundLightBlue = "#F1F8FE";
40
+ export const surfaceColorBackgroundDarkBlue = "#053662";
41
+ export const surfaceColorBorderDefault = "#D8D8D8";
42
+ export const surfaceColorBorderMedium = "#898785";
43
+ export const surfaceColorBorderDark = "#353433";
44
+ export const surfaceColorBorderActive = "#2E5DD7";
45
+ export const surfaceColorOverlayDefault = "rgba(0,0,0,0.45)";
46
+ export const supportSurfaceColorInfo = "#F7F9FC";
47
+ export const supportSurfaceColorDanger = "#F4E1E2";
48
+ export const supportSurfaceColorSuccess = "#F6FFF8";
49
+ export const supportSurfaceColorWarning = "#FEF1D8";
50
+ export const supportBorderColorInfo = "#053662";
51
+ export const supportBorderColorDanger = "#CE3E39";
52
+ export const supportBorderColorSuccess = "#42814A";
53
+ export const supportBorderColorWarning = "#F8BB47";
118
54
  export const iconsSizeXsmall = "14px";
119
55
  export const iconsSizeSmall = "16px";
120
56
  export const iconsSizeMedium = "20px";
121
57
  export const iconsSizeLarge = "24px";
122
58
  export const iconsSizeXlarge = "32px";
59
+ export const iconsColorPrimary = "#2D2D2D";
60
+ export const iconsColorSecondary = "#474543";
61
+ export const iconsColorDisabled = "#9F9D9C";
62
+ export const iconsColorLink = "#255A90";
63
+ export const iconsColorInfo = "#053662";
64
+ export const iconsColorDanger = "#CE3E39";
65
+ export const iconsColorSuccess = "#42814A";
66
+ export const iconsColorWarning = "#F8BB47";
67
+ export const iconsColorPrimaryInvert = "#FFFFFF";
123
68
  export const layoutBorderWidthNone = "0";
124
69
  export const layoutBorderWidthSmall = "1px";
125
70
  export const layoutBorderWidthMedium = "2px";
@@ -140,7 +85,12 @@ export const layoutMarginXlarge = "32px";
140
85
  export const layoutMarginXxlarge = "40px";
141
86
  export const layoutMarginXxxlarge = "48px";
142
87
  export const layoutMarginHuge = "56px";
88
+ export const layoutBorderRadiusNone = "0";
89
+ export const layoutBorderRadiusSmall = "2px";
90
+ export const layoutBorderRadiusMedium = "4px";
91
+ export const layoutBorderRadiusLarge = "6px";
143
92
  export const typographyFontFamiliesBcSans = "'BC Sans'";
93
+ export const typographyLineHeightsXxxdense = "1.125rem";
144
94
  export const typographyLineHeightsXxdense = "1.313rem";
145
95
  export const typographyLineHeightsXdense = "1.688rem";
146
96
  export const typographyLineHeightsDense = "1.913rem";
@@ -152,7 +102,8 @@ export const typographyLineHeightsAuto = "AUTO";
152
102
  export const typographyFontWeightsRegular = 400;
153
103
  export const typographyFontWeightsBold = 700;
154
104
  export const typographyFontWeightsItalic = "Italic";
155
- export const typographyFontSizeLabel = "0.875rem";
105
+ export const typographyFontSizeLabel = "0.75rem";
106
+ export const typographyFontSizeSmallBody = "0.875rem";
156
107
  export const typographyFontSizeBody = "1rem";
157
108
  export const typographyFontSizeLargeBody = "1.125rem";
158
109
  export const typographyFontSizeH5 = "1.25rem";
@@ -163,7 +114,8 @@ export const typographyFontSizeH1 = "2.25rem";
163
114
  export const typographyFontSizeDisplay = "3rem";
164
115
  export const typographyLetterSpacing0 = "0em";
165
116
  export const typographyParagraphSpacing0 = "0";
166
- export const typographyRegularLabel = "400 0.875rem/1.313rem 'BC Sans'";
117
+ export const typographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'";
118
+ export const typographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'";
167
119
  export const typographyRegularBody = "400 1rem/1.688rem 'BC Sans'";
168
120
  export const typographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
169
121
  export const typographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
@@ -172,30 +124,68 @@ export const typographyRegularH3 = "400 1.75rem/3rem 'BC Sans'";
172
124
  export const typographyRegularH2 = "400 2rem/3.375rem 'BC Sans'";
173
125
  export const typographyRegularH1 = "400 2.25rem/3rem 'BC Sans'";
174
126
  export const typographyRegularDisplay = "400 3rem/AUTO 'BC Sans'";
175
- export const typographyBoldLabel = "700 0.875rem/1.313rem 'BC Sans'";
127
+ export const typographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'";
128
+ export const typographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'";
176
129
  export const typographyBoldBody = "700 1rem/1.688rem 'BC Sans'";
177
130
  export const typographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
178
131
  export const typographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
179
132
  export const typographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
180
- export const typographyBoldH3 = "700 1.75rem/3.375rem 'BC Sans'";
133
+ export const typographyBoldH3 = "700 1.75rem/3rem 'BC Sans'";
181
134
  export const typographyBoldH2 = "700 2rem/3rem 'BC Sans'";
182
- export const typographyBoldH1 = "700 2.25rem/AUTO 'BC Sans'";
135
+ export const typographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'";
183
136
  export const typographyBoldDisplay = "700 3rem/AUTO 'BC Sans'";
184
- export const typographyItalicLabel = "400 italic 0.875rem/1.313rem 'BC Sans'";
137
+ export const typographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'";
138
+ export const typographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'";
185
139
  export const typographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
186
140
  export const typographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
187
141
  export const typographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
188
142
  export const typographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
189
143
  export const typographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
190
- export const typographyItalicH2 = "400 italic 2rem/3.375rem 'BC Sans'";
191
- export const typographyItalicH1 = "400 italic 2.25rem/3rem 'BC Sans'";
144
+ export const typographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'";
145
+ export const typographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'";
192
146
  export const typographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
193
147
  export const typographyTextCaseNone = "none";
194
148
  export const typographyTextDecorationNone = "none";
195
149
  export const typographyParagraphIndent0 = "0px";
196
150
  export const typographyColorPrimary = "#2D2D2D";
197
151
  export const typographyColorSecondary = "#474543";
152
+ export const typographyColorPlaceholder = "#9F9D9C";
198
153
  export const typographyColorDisabled = "#9F9D9C";
199
154
  export const typographyColorLink = "#255A90";
155
+ export const typographyColorDanger = "#CE3E39";
200
156
  export const typographyColorPrimaryInvert = "#FFFFFF";
201
157
  export const typographyColorSecondaryInvert = "#ECEAE8";
158
+ export const themeGold10 = "#FEF8E8";
159
+ export const themeGold20 = "#FEF0D8";
160
+ export const themeGold30 = "#FDE9C4";
161
+ export const themeGold40 = "#FCE2B0";
162
+ export const themeGold50 = "#FBDA9D";
163
+ export const themeGold60 = "#FBD389";
164
+ export const themeGold70 = "#FACC75";
165
+ export const themeGold80 = "#F9C462";
166
+ export const themeGold90 = "#F8BA47";
167
+ export const themeGold100 = "#FCBA19";
168
+ export const themeBlue10 = "#F1F8FE";
169
+ export const themeBlue20 = "#D8EAFD";
170
+ export const themeBlue30 = "#C1DDFC";
171
+ export const themeBlue40 = "#A8D0FB";
172
+ export const themeBlue50 = "#91C4FA";
173
+ export const themeBlue60 = "#7AB8F9";
174
+ export const themeBlue70 = "#5595D9";
175
+ export const themeBlue80 = "#3470B1";
176
+ export const themeBlue90 = "#1E5189";
177
+ export const themeBlue100 = "#013366";
178
+ export const themeGray10 = "#FAF9F8";
179
+ export const themeGray20 = "#F3F2F1";
180
+ export const themeGray30 = "#ECEAE8";
181
+ export const themeGray40 = "#E0DEDC";
182
+ export const themeGray50 = "#D1CFCD";
183
+ export const themeGray60 = "#C6C5C3";
184
+ export const themeGray70 = "#9F9D9C";
185
+ export const themeGray80 = "#605E5C";
186
+ export const themeGray90 = "#3D3C3B";
187
+ export const themeGray100 = "#353433";
188
+ export const themeGray110 = "#252423";
189
+ export const themeGrayWhite = "#FFFFFF";
190
+ export const themePrimaryBlue = "#013366";
191
+ export const themePrimaryGold = "#FCBA19";
package/js-prefixed/variables.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Nov 2023 20:31:26 GMT
3
+ * Generated on Thu, 21 Mar 2024 18:19:40 GMT
4
4
  */
5
5
 
6
6
  export const bcdsSurfaceOpacity0 = 0;
@@ -14,112 +14,57 @@ export const bcdsSurfaceOpacity70 = 0.7;
14
14
  export const bcdsSurfaceOpacity80 = 0.8;
15
15
  export const bcdsSurfaceOpacity90 = 0.9;
16
16
  export const bcdsSurfaceOpacity100 = 1;
17
- export const bcdsSurfacePrimaryDefault = "#013366";
18
- export const bcdsSurfacePrimaryHover = "#1E5189";
19
- export const bcdsSurfacePrimaryDisabled = "#edebe9";
20
- export const bcdsSurfacePrimaryActive = "#2E5DD7";
21
- export const bcdsSurfaceSecondaryDefault = "#ffffff";
22
- export const bcdsSurfaceSecondaryHover = "#edebe9";
23
- export const bcdsSurfaceSecondaryDisabled = "#edebe9";
24
- export const bcdsSurfaceSecondaryActive = "#2E5DD7";
25
- export const bcdsSurfaceTertiaryDefault = "#ffffff00";
26
- export const bcdsSurfaceTertiaryHover = "#eceae8";
27
- export const bcdsSurfaceTertiaryDisabled = "#edebe9";
28
- export const bcdsSurfaceTertiaryActive = "#2E5DD7";
29
- export const bcdsSurfaceDangerDefault = "#ce3e39";
30
- export const bcdsSurfaceDangerHover = "#a2312d";
31
- export const bcdsSurfaceDangerActive = "#2E5DD7";
32
- export const bcdsSurfaceDangerDisabled = "#edebe9";
33
- export const bcdsSurfaceBackgroundWhite = "#ffffff";
34
- export const bcdsSurfaceBackgroundLight = "#faf9f8";
35
- export const bcdsSurfaceBorderLight = "#d8d8d8";
36
- export const bcdsSurfaceBorderMedium = "#898785";
37
- export const bcdsSurfaceBorderDark = "#353433";
38
- export const bcdsSurfaceOverlayDefault = "#00000073";
39
- export const bcdsSurfaceBrandGold10 = "#fff8e9";
40
- export const bcdsSurfaceBrandGold20 = "#feebc2";
41
- export const bcdsSurfaceBrandGold30 = "#fddf9d";
42
- export const bcdsSurfaceBrandGold40 = "#fdd47b";
43
- export const bcdsSurfaceBrandGold50 = "#fcc85d";
44
- export const bcdsSurfaceBrandGold60 = "#f8ba47"; // BC Gold
45
- export const bcdsSurfaceBrandGold70 = "#ce9737";
46
- export const bcdsSurfaceBrandGold80 = "#a5792b";
47
- export const bcdsSurfaceBrandGold90 = "#7e5d21";
48
- export const bcdsSurfaceBrandGold100 = "#584215";
49
- export const bcdsSurfaceBrandBlue10 = "#f1f8fe";
50
- export const bcdsSurfaceBrandBlue20 = "#d8eafd";
51
- export const bcdsSurfaceBrandBlue30 = "#c1ddfc";
52
- export const bcdsSurfaceBrandBlue40 = "#a8d0fb";
53
- export const bcdsSurfaceBrandBlue50 = "#91c4fa";
54
- export const bcdsSurfaceBrandBlue60 = "#7ab8f9";
55
- export const bcdsSurfaceBrandBlue70 = "#5595d9";
56
- export const bcdsSurfaceBrandBlue80 = "#3470b1";
57
- export const bcdsSurfaceBrandBlue90 = "#1e5189";
58
- export const bcdsSurfaceBrandBlue100 = "#053662"; // BC Blue
59
- export const bcdsSurfaceBrandGray10 = "#faf9f8";
60
- export const bcdsSurfaceBrandGray20 = "#f3f2f1";
61
- export const bcdsSurfaceBrandGray30 = "#eceae8";
62
- export const bcdsSurfaceBrandGray40 = "#e0dedc";
63
- export const bcdsSurfaceBrandGray50 = "#d1cfcd";
64
- export const bcdsSurfaceBrandGray60 = "#c6c5c3";
65
- export const bcdsSurfaceBrandGray70 = "#9f9d9c";
66
- export const bcdsSurfaceBrandGray80 = "#605e5c";
67
- export const bcdsSurfaceBrandGray90 = "#3d3c3b";
68
- export const bcdsSurfaceBrandGray100 = "#353433";
69
- export const bcdsSurfaceBrandGray110 = "#252423";
70
- export const bcdsSurfaceBrandGrayWhite = "#ffffff";
71
- export const bcdsSurfaceIconsPrimary = "#2d2d2d";
72
- export const bcdsSurfaceIconsSecondary = "#474543";
73
- export const bcdsSurfaceIconsDisabled = "#9f9d9c";
74
- export const bcdsSurfaceIconsLink = "#255a90";
75
- export const bcdsSurfaceIconsInfo = "#053662";
76
- export const bcdsSurfaceIconsDanger = "#ce3e39";
77
- export const bcdsSurfaceIconsSuccess = "#42814a";
78
- export const bcdsSurfaceIconsWarning = "#f8bb47";
79
- export const bcdsSurfaceSupportSurfaceColorInfo = "#f7f9fc";
80
- export const bcdsSurfaceSupportSurfaceColorDanger = "#f4e1e2";
81
- export const bcdsSurfaceSupportSurfaceColorSuccess = "#f6fff8";
82
- export const bcdsSurfaceSupportSurfaceColorWarning = "#fef1d8";
83
- export const bcdsSurfaceSupportBorderColorInfo = "#053662";
84
- export const bcdsSurfaceSupportBorderColorDanger = "#ce3e39";
85
- export const bcdsSurfaceSupportBorderColorSuccess = "#42814a";
86
- export const bcdsSurfaceSupportBorderColorWarning = "#f8bb47";
87
17
  export const bcdsSurfaceShadowNone = "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021";
88
18
  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
89
19
  export const bcdsSurfaceShadowMedium = "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021"; // Primarily used for dropdown menus and tooltips
90
20
  export const bcdsSurfaceShadowLarge = "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038"; // Primarily used for dialogs
91
- export const bcdsSurfaceBorderRadiusNone = "0";
92
- export const bcdsSurfaceBorderRadiusSmall = "2px";
93
- export const bcdsSurfaceBorderRadiusMedium = "4px";
94
- export const bcdsSurfaceBorderRadiusLarge = "6px";
95
- export const bcdsSurfaceBorderWidthNone = "0";
96
- export const bcdsSurfaceBorderWidthSmall = "1px";
97
- export const bcdsSurfaceBorderWidthMedium = "2px";
98
- export const bcdsSurfaceBorderWidthLarge = "4px";
99
- export const bcdsSurfaceSizeSmall = "0px 8px";
100
- export const bcdsSurfaceSizeMedium = "6px 16px";
101
- export const bcdsSupportSupportSurfaceColorInfo = "#f7f9fc";
102
- export const bcdsSupportSupportSurfaceColorDanger = "#f4e1e2";
103
- export const bcdsSupportSupportSurfaceColorSuccess = "#f6fff8";
104
- export const bcdsSupportSupportSurfaceColorWarning = "#fef1d8";
105
- export const bcdsSupportSupportBorderColorInfo = "#053662";
106
- export const bcdsSupportSupportBorderColorDanger = "#ce3e39";
107
- export const bcdsSupportSupportBorderColorSuccess = "#42814a";
108
- export const bcdsSupportSupportBorderColorWarning = "#f8bb47";
109
- export const bcdsIconsIconsPrimary = "#2d2d2d";
110
- export const bcdsIconsIconsSecondary = "#474543";
111
- export const bcdsIconsIconsDisabled = "#9f9d9c";
112
- export const bcdsIconsIconsLink = "#255a90";
113
- export const bcdsIconsIconsInfo = "#053662";
114
- export const bcdsIconsIconsDanger = "#ce3e39";
115
- export const bcdsIconsIconsSuccess = "#42814a";
116
- export const bcdsIconsIconsWarning = "#f8bb47";
117
- export const bcdsIconsIconsPrimaryInvert = "#ffffff";
21
+ export const bcdsSurfaceColorPrimaryButtonDefault = "#013366";
22
+ export const bcdsSurfaceColorPrimaryButtonHover = "#1E5189";
23
+ export const bcdsSurfaceColorPrimaryButtonDisabled = "#EDEBE9";
24
+ export const bcdsSurfaceColorPrimaryDangerButtonDefault = "#CE3E39";
25
+ export const bcdsSurfaceColorPrimaryDangerButtonHover = "#A2312D";
26
+ export const bcdsSurfaceColorPrimaryDangerButtonDisabled = "#EDEBE9";
27
+ export const bcdsSurfaceColorSecondaryButtonDefault = "#FFFFFF";
28
+ export const bcdsSurfaceColorSecondaryButtonHover = "#EDEBE9";
29
+ export const bcdsSurfaceColorSecondaryButtonDisabled = "#EDEBE9";
30
+ export const bcdsSurfaceColorTertiaryButtonDefault = "rgba(255,255,255,0)";
31
+ export const bcdsSurfaceColorTertiaryButtonHover = "#ECEAE8";
32
+ export const bcdsSurfaceColorTertiaryButtonDisabled = "#EDEBE9";
33
+ export const bcdsSurfaceColorMenusDefault = "#FFFFFF";
34
+ export const bcdsSurfaceColorMenusHover = "#EDEBE9";
35
+ export const bcdsSurfaceColorFormsDefault = "#FFFFFF";
36
+ export const bcdsSurfaceColorFormsDisabled = "#EDEBE9";
37
+ export const bcdsSurfaceColorBackgroundWhite = "#FFFFFF";
38
+ export const bcdsSurfaceColorBackgroundLightGray = "#FAF9F8";
39
+ export const bcdsSurfaceColorBackgroundLightBlue = "#F1F8FE";
40
+ export const bcdsSurfaceColorBackgroundDarkBlue = "#053662";
41
+ export const bcdsSurfaceColorBorderDefault = "#D8D8D8";
42
+ export const bcdsSurfaceColorBorderMedium = "#898785";
43
+ export const bcdsSurfaceColorBorderDark = "#353433";
44
+ export const bcdsSurfaceColorBorderActive = "#2E5DD7";
45
+ export const bcdsSurfaceColorOverlayDefault = "rgba(0,0,0,0.45)";
46
+ export const bcdsSupportSurfaceColorInfo = "#F7F9FC";
47
+ export const bcdsSupportSurfaceColorDanger = "#F4E1E2";
48
+ export const bcdsSupportSurfaceColorSuccess = "#F6FFF8";
49
+ export const bcdsSupportSurfaceColorWarning = "#FEF1D8";
50
+ export const bcdsSupportBorderColorInfo = "#053662";
51
+ export const bcdsSupportBorderColorDanger = "#CE3E39";
52
+ export const bcdsSupportBorderColorSuccess = "#42814A";
53
+ export const bcdsSupportBorderColorWarning = "#F8BB47";
118
54
  export const bcdsIconsSizeXsmall = "14px";
119
55
  export const bcdsIconsSizeSmall = "16px";
120
56
  export const bcdsIconsSizeMedium = "20px";
121
57
  export const bcdsIconsSizeLarge = "24px";
122
58
  export const bcdsIconsSizeXlarge = "32px";
59
+ export const bcdsIconsColorPrimary = "#2D2D2D";
60
+ export const bcdsIconsColorSecondary = "#474543";
61
+ export const bcdsIconsColorDisabled = "#9F9D9C";
62
+ export const bcdsIconsColorLink = "#255A90";
63
+ export const bcdsIconsColorInfo = "#053662";
64
+ export const bcdsIconsColorDanger = "#CE3E39";
65
+ export const bcdsIconsColorSuccess = "#42814A";
66
+ export const bcdsIconsColorWarning = "#F8BB47";
67
+ export const bcdsIconsColorPrimaryInvert = "#FFFFFF";
123
68
  export const bcdsLayoutBorderWidthNone = "0";
124
69
  export const bcdsLayoutBorderWidthSmall = "1px";
125
70
  export const bcdsLayoutBorderWidthMedium = "2px";
@@ -140,7 +85,12 @@ export const bcdsLayoutMarginXlarge = "32px";
140
85
  export const bcdsLayoutMarginXxlarge = "40px";
141
86
  export const bcdsLayoutMarginXxxlarge = "48px";
142
87
  export const bcdsLayoutMarginHuge = "56px";
88
+ export const bcdsLayoutBorderRadiusNone = "0";
89
+ export const bcdsLayoutBorderRadiusSmall = "2px";
90
+ export const bcdsLayoutBorderRadiusMedium = "4px";
91
+ export const bcdsLayoutBorderRadiusLarge = "6px";
143
92
  export const bcdsTypographyFontFamiliesBcSans = "'BC Sans'";
93
+ export const bcdsTypographyLineHeightsXxxdense = "1.125rem";
144
94
  export const bcdsTypographyLineHeightsXxdense = "1.313rem";
145
95
  export const bcdsTypographyLineHeightsXdense = "1.688rem";
146
96
  export const bcdsTypographyLineHeightsDense = "1.913rem";
@@ -152,7 +102,8 @@ export const bcdsTypographyLineHeightsAuto = "AUTO";
152
102
  export const bcdsTypographyFontWeightsRegular = 400;
153
103
  export const bcdsTypographyFontWeightsBold = 700;
154
104
  export const bcdsTypographyFontWeightsItalic = "Italic";
155
- export const bcdsTypographyFontSizeLabel = "0.875rem";
105
+ export const bcdsTypographyFontSizeLabel = "0.75rem";
106
+ export const bcdsTypographyFontSizeSmallBody = "0.875rem";
156
107
  export const bcdsTypographyFontSizeBody = "1rem";
157
108
  export const bcdsTypographyFontSizeLargeBody = "1.125rem";
158
109
  export const bcdsTypographyFontSizeH5 = "1.25rem";
@@ -163,7 +114,8 @@ export const bcdsTypographyFontSizeH1 = "2.25rem";
163
114
  export const bcdsTypographyFontSizeDisplay = "3rem";
164
115
  export const bcdsTypographyLetterSpacing0 = "0em";
165
116
  export const bcdsTypographyParagraphSpacing0 = "0";
166
- export const bcdsTypographyRegularLabel = "400 0.875rem/1.313rem 'BC Sans'";
117
+ export const bcdsTypographyRegularLabel = "400 0.75rem/1.125rem 'BC Sans'";
118
+ export const bcdsTypographyRegularSmallBody = "400 0.875rem/1.313rem 'BC Sans'";
167
119
  export const bcdsTypographyRegularBody = "400 1rem/1.688rem 'BC Sans'";
168
120
  export const bcdsTypographyRegularLargeBody = "400 1.125rem/1.913rem 'BC Sans'";
169
121
  export const bcdsTypographyRegularH5 = "400 1.25rem/2.125rem 'BC Sans'";
@@ -172,30 +124,68 @@ export const bcdsTypographyRegularH3 = "400 1.75rem/3rem 'BC Sans'";
172
124
  export const bcdsTypographyRegularH2 = "400 2rem/3.375rem 'BC Sans'";
173
125
  export const bcdsTypographyRegularH1 = "400 2.25rem/3rem 'BC Sans'";
174
126
  export const bcdsTypographyRegularDisplay = "400 3rem/AUTO 'BC Sans'";
175
- export const bcdsTypographyBoldLabel = "700 0.875rem/1.313rem 'BC Sans'";
127
+ export const bcdsTypographyBoldLabel = "700 0.75rem/1.125rem 'BC Sans'";
128
+ export const bcdsTypographyBoldSmallBody = "700 0.875rem/1.313rem 'BC Sans'";
176
129
  export const bcdsTypographyBoldBody = "700 1rem/1.688rem 'BC Sans'";
177
130
  export const bcdsTypographyBoldLargeBody = "700 1.125rem/1.913rem 'BC Sans'";
178
131
  export const bcdsTypographyBoldH5 = "700 1.25rem/2.125rem 'BC Sans'";
179
132
  export const bcdsTypographyBoldH4 = "700 1.5rem/2.25rem 'BC Sans'";
180
- export const bcdsTypographyBoldH3 = "700 1.75rem/3.375rem 'BC Sans'";
133
+ export const bcdsTypographyBoldH3 = "700 1.75rem/3rem 'BC Sans'";
181
134
  export const bcdsTypographyBoldH2 = "700 2rem/3rem 'BC Sans'";
182
- export const bcdsTypographyBoldH1 = "700 2.25rem/AUTO 'BC Sans'";
135
+ export const bcdsTypographyBoldH1 = "700 2.25rem/3.375rem 'BC Sans'";
183
136
  export const bcdsTypographyBoldDisplay = "700 3rem/AUTO 'BC Sans'";
184
- export const bcdsTypographyItalicLabel = "400 italic 0.875rem/1.313rem 'BC Sans'";
137
+ export const bcdsTypographyItalicLabel = "400 italic 0.75rem/1.125rem 'BC Sans'";
138
+ export const bcdsTypographyItalicSmallBody = "400 italic 0.875rem/1.313rem 'BC Sans'";
185
139
  export const bcdsTypographyItalicBody = "400 italic 1rem/1.688rem 'BC Sans'";
186
140
  export const bcdsTypographyItalicLargeBody = "400 italic 1.125rem/1.913rem 'BC Sans'";
187
141
  export const bcdsTypographyItalicH5 = "400 italic 1.25rem/2.125rem 'BC Sans'";
188
142
  export const bcdsTypographyItalicH4 = "400 italic 1.5rem/2.25rem 'BC Sans'";
189
143
  export const bcdsTypographyItalicH3 = "400 italic 1.75rem/3.375rem 'BC Sans'";
190
- export const bcdsTypographyItalicH2 = "400 italic 2rem/3.375rem 'BC Sans'";
191
- export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3rem 'BC Sans'";
144
+ export const bcdsTypographyItalicH2 = "400 italic 2rem/3rem 'BC Sans'";
145
+ export const bcdsTypographyItalicH1 = "400 italic 2.25rem/3.375rem 'BC Sans'";
192
146
  export const bcdsTypographyItalicDisplay = "400 italic 3rem/AUTO 'BC Sans'";
193
147
  export const bcdsTypographyTextCaseNone = "none";
194
148
  export const bcdsTypographyTextDecorationNone = "none";
195
149
  export const bcdsTypographyParagraphIndent0 = "0px";
196
150
  export const bcdsTypographyColorPrimary = "#2D2D2D";
197
151
  export const bcdsTypographyColorSecondary = "#474543";
152
+ export const bcdsTypographyColorPlaceholder = "#9F9D9C";
198
153
  export const bcdsTypographyColorDisabled = "#9F9D9C";
199
154
  export const bcdsTypographyColorLink = "#255A90";
155
+ export const bcdsTypographyColorDanger = "#CE3E39";
200
156
  export const bcdsTypographyColorPrimaryInvert = "#FFFFFF";
201
157
  export const bcdsTypographyColorSecondaryInvert = "#ECEAE8";
158
+ export const bcdsThemeGold10 = "#FEF8E8";
159
+ export const bcdsThemeGold20 = "#FEF0D8";
160
+ export const bcdsThemeGold30 = "#FDE9C4";
161
+ export const bcdsThemeGold40 = "#FCE2B0";
162
+ export const bcdsThemeGold50 = "#FBDA9D";
163
+ export const bcdsThemeGold60 = "#FBD389";
164
+ export const bcdsThemeGold70 = "#FACC75";
165
+ export const bcdsThemeGold80 = "#F9C462";
166
+ export const bcdsThemeGold90 = "#F8BA47";
167
+ export const bcdsThemeGold100 = "#FCBA19";
168
+ export const bcdsThemeBlue10 = "#F1F8FE";
169
+ export const bcdsThemeBlue20 = "#D8EAFD";
170
+ export const bcdsThemeBlue30 = "#C1DDFC";
171
+ export const bcdsThemeBlue40 = "#A8D0FB";
172
+ export const bcdsThemeBlue50 = "#91C4FA";
173
+ export const bcdsThemeBlue60 = "#7AB8F9";
174
+ export const bcdsThemeBlue70 = "#5595D9";
175
+ export const bcdsThemeBlue80 = "#3470B1";
176
+ export const bcdsThemeBlue90 = "#1E5189";
177
+ export const bcdsThemeBlue100 = "#013366";
178
+ export const bcdsThemeGray10 = "#FAF9F8";
179
+ export const bcdsThemeGray20 = "#F3F2F1";
180
+ export const bcdsThemeGray30 = "#ECEAE8";
181
+ export const bcdsThemeGray40 = "#E0DEDC";
182
+ export const bcdsThemeGray50 = "#D1CFCD";
183
+ export const bcdsThemeGray60 = "#C6C5C3";
184
+ export const bcdsThemeGray70 = "#9F9D9C";
185
+ export const bcdsThemeGray80 = "#605E5C";
186
+ export const bcdsThemeGray90 = "#3D3C3B";
187
+ export const bcdsThemeGray100 = "#353433";
188
+ export const bcdsThemeGray110 = "#252423";
189
+ export const bcdsThemeGrayWhite = "#FFFFFF";
190
+ export const bcdsThemePrimaryBlue = "#013366";
191
+ export const bcdsThemePrimaryGold = "#FCBA19";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcgov/design-tokens",
3
- "version": "2.0.0",
3
+ "version": "3.0.0-rc1",
4
4
  "description": "Design tokens for BC Design System",
5
5
  "repository": {
6
6
  "type": "git",