@czi-sds/components 21.7.0 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +40 -29
  2. package/dist/index.cjs.js +639 -586
  3. package/dist/index.esm.d.ts +40 -29
  4. package/dist/index.esm.js +639 -588
  5. package/dist/tailwind.json +1229 -397
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +199 -189
  8. package/dist/variables.scss +199 -189
  9. package/package.json +2 -2
package/dist/variables.scss CHANGED
@@ -16,34 +16,38 @@ $sds-border-base-disabled: 1px solid #c3c3c3;
16
16
  $sds-border-base-disabled-dark: 1px solid #696969;
17
17
  $sds-border-base-divider: 1px solid #dfdfdf;
18
18
  $sds-border-base-divider-dark: 1px solid #494949;
19
+ $sds-border-base-divider-inverse: 1px solid #6c6c6c;
20
+ $sds-border-base-divider-inverse-dark: 1px solid #cdcdcd;
19
21
  $sds-border-base-hover: 1px dashed #000000;
20
22
  $sds-border-base-hover-dark: 1px dashed #ffffff;
23
+ $sds-border-base-inverse: 1px dashed #ffffff;
24
+ $sds-border-base-inverse-dark: 1px dashed #000000;
21
25
  $sds-border-base-pressed: 1px dashed #000000;
22
26
  $sds-border-base-pressed-dark: 1px dashed #ffffff;
23
27
  $sds-border-base-table: 1px solid #c3c3c3;
24
28
  $sds-border-base-table-dark: 1px solid #696969;
25
29
  $sds-border-beta-default: 1px solid #6526b5;
26
- $sds-border-beta-default-dark: 1px solid #e4dcfc;
30
+ $sds-border-beta-default-dark: 1px solid #cebef8;
27
31
  $sds-border-beta-extra-thick: 4px solid #6526b5;
28
- $sds-border-beta-extra-thick-dark: 4px solid #e4dcfc;
32
+ $sds-border-beta-extra-thick-dark: 4px solid #cebef8;
29
33
  $sds-border-beta-thick: 2px solid #6526b5;
30
- $sds-border-beta-thick-dark: 2px solid #e4dcfc;
34
+ $sds-border-beta-thick-dark: 2px solid #cebef8;
31
35
  $sds-border-info-default: 1px solid #0041b9;
32
- $sds-border-info-default-dark: 1px solid #cde3ff;
36
+ $sds-border-info-default-dark: 1px solid #a2c9ff;
33
37
  $sds-border-info-extra-thick: 4px solid #0041b9;
34
- $sds-border-info-extra-thick-dark: 4px solid #cde3ff;
38
+ $sds-border-info-extra-thick-dark: 4px solid #a2c9ff;
35
39
  $sds-border-info-thick: 2px solid #0041b9;
36
- $sds-border-info-thick-dark: 2px solid #cde3ff;
40
+ $sds-border-info-thick-dark: 2px solid #a2c9ff;
37
41
  $sds-border-link-dashed: 1px dashed;
38
42
  $sds-border-link-dashed-dark: 1px dashed;
39
43
  $sds-border-link-solid: 1px solid;
40
44
  $sds-border-link-solid-dark: 1px solid;
41
- $sds-border-negative-default: 1px solid #980013;
42
- $sds-border-negative-default-dark: 1px solid #FFBDB3;
43
- $sds-border-negative-extra-thick: 4px solid #980013;
44
- $sds-border-negative-extra-thick-dark: 4px solid #FFBDB3;
45
- $sds-border-negative-thick: 2px solid #980013;
46
- $sds-border-negative-thick-dark: 2px solid #FFBDB3;
45
+ $sds-border-negative-default: 1px solid #980017;
46
+ $sds-border-negative-default-dark: 1px solid #ff988a;
47
+ $sds-border-negative-extra-thick: 4px solid #980017;
48
+ $sds-border-negative-extra-thick-dark: 4px solid #ff988a;
49
+ $sds-border-negative-thick: 2px solid #980017;
50
+ $sds-border-negative-thick-dark: 2px solid #ff988a;
47
51
  $sds-border-neutral-default: 1px solid #969696;
48
52
  $sds-border-neutral-default-dark: 1px solid #aaaaaa;
49
53
  $sds-border-neutral-extra-thick: 4px solid #969696;
@@ -52,37 +56,37 @@ $sds-border-neutral-thick: 2px solid #969696;
52
56
  $sds-border-neutral-thick-dark: 2px solid #aaaaaa;
53
57
  $sds-border-none: none;
54
58
  $sds-border-none-dark: none;
55
- $sds-border-notice-default: 1px solid #b77800;
56
- $sds-border-notice-default-dark: 1px solid #efad00;
57
- $sds-border-notice-extra-thick: 4px solid #b77800;
58
- $sds-border-notice-extra-thick-dark: 4px solid #efad00;
59
- $sds-border-notice-thick: 2px solid #b77800;
60
- $sds-border-notice-thick-dark: 2px solid #efad00;
59
+ $sds-border-notice-default: 1px solid #b07300;
60
+ $sds-border-notice-default-dark: 1px solid #e5bc63;
61
+ $sds-border-notice-extra-thick: 4px solid #b07300;
62
+ $sds-border-notice-extra-thick-dark: 4px solid #e5bc63;
63
+ $sds-border-notice-thick: 2px solid #b07300;
64
+ $sds-border-notice-thick-dark: 2px solid #e5bc63;
61
65
  $sds-border-positive-default: 1px solid #105b2b;
62
- $sds-border-positive-default-dark: 1px solid #bcecc5;
66
+ $sds-border-positive-default-dark: 1px solid #85d898;
63
67
  $sds-border-positive-extra-thick: 4px solid #105b2b;
64
- $sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
68
+ $sds-border-positive-extra-thick-dark: 4px solid #85d898;
65
69
  $sds-border-positive-thick: 2px solid #105b2b;
66
- $sds-border-positive-thick-dark: 2px solid #bcecc5;
70
+ $sds-border-positive-thick-dark: 2px solid #85d898;
67
71
  $sds-breakpoint-sm: 0px;
68
72
  $sds-breakpoint-md: 512px;
69
73
  $sds-breakpoint-lg: 1024px;
70
74
  $sds-color-primitive-blue-100: #e2eeff;
71
- $sds-color-primitive-blue-100-dark: #002573;
75
+ $sds-color-primitive-blue-100-dark: #0f1d4a;
72
76
  $sds-color-primitive-blue-200: #cce1ff;
73
- $sds-color-primitive-blue-200-dark: #0048c5;
77
+ $sds-color-primitive-blue-200-dark: #0a216e;
74
78
  $sds-color-primitive-blue-300: #9dc6ff;
75
- $sds-color-primitive-blue-300-dark: #2573f4;
79
+ $sds-color-primitive-blue-300-dark: #0647b8;
76
80
  $sds-color-primitive-blue-400: #6ca6ff;
77
- $sds-color-primitive-blue-400-dark: #5b9aff;
81
+ $sds-color-primitive-blue-400-dark: #2573f4;
78
82
  $sds-color-primitive-blue-500: #1a6cef;
79
- $sds-color-primitive-blue-500-dark: #a2c9ff;
83
+ $sds-color-primitive-blue-500-dark: #5b9aff;
80
84
  $sds-color-primitive-blue-600: #0041b9;
81
- $sds-color-primitive-blue-600-dark: #cde3ff;
85
+ $sds-color-primitive-blue-600-dark: #a2c9ff;
82
86
  $sds-color-primitive-blue-700: #002d90;
83
- $sds-color-primitive-blue-700-dark: #e2eeff;
87
+ $sds-color-primitive-blue-700-dark: #cde3ff;
84
88
  $sds-color-primitive-blue-800: #00114a;
85
- $sds-color-primitive-blue-800-dark: #f7faff;
89
+ $sds-color-primitive-blue-800-dark: #e2eeff;
86
90
  $sds-color-primitive-gray-50: #ffffff;
87
91
  $sds-color-primitive-gray-50-dark: #000000;
88
92
  $sds-color-primitive-gray-75: #fafafa;
@@ -106,85 +110,99 @@ $sds-color-primitive-gray-800-dark: #fafafa;
106
110
  $sds-color-primitive-gray-900: #000000;
107
111
  $sds-color-primitive-gray-900-dark: #ffffff;
108
112
  $sds-color-primitive-green-100: #daf4de;
109
- $sds-color-primitive-green-100-dark: #053918;
113
+ $sds-color-primitive-green-100-dark: #082608;
110
114
  $sds-color-primitive-green-200: #b9ecc3;
111
- $sds-color-primitive-green-200-dark: #12612e;
115
+ $sds-color-primitive-green-200-dark: #063617;
112
116
  $sds-color-primitive-green-300: #7fd693;
113
- $sds-color-primitive-green-300-dark: #288b49;
117
+ $sds-color-primitive-green-300-dark: #10632e;
114
118
  $sds-color-primitive-green-400: #50b96d;
115
- $sds-color-primitive-green-400-dark: #43ae63;
119
+ $sds-color-primitive-green-400-dark: #278b48;
116
120
  $sds-color-primitive-green-500: #238444;
117
- $sds-color-primitive-green-500-dark: #85d898;
121
+ $sds-color-primitive-green-500-dark: #4bae68;
118
122
  $sds-color-primitive-green-600: #105b2b;
119
- $sds-color-primitive-green-600-dark: #bcecc5;
123
+ $sds-color-primitive-green-600-dark: #85d898;
120
124
  $sds-color-primitive-green-700: #07431d;
121
- $sds-color-primitive-green-700-dark: #daf4de;
125
+ $sds-color-primitive-green-700-dark: #bcecc5;
122
126
  $sds-color-primitive-green-800: #001f00;
123
- $sds-color-primitive-green-800-dark: #f7fbf6;
127
+ $sds-color-primitive-green-800-dark: #daf4de;
124
128
  $sds-color-primitive-purple-100: #efeafe;
125
- $sds-color-primitive-purple-100-dark: #4b0190;
129
+ $sds-color-primitive-purple-100-dark: #331252;
126
130
  $sds-color-primitive-purple-200: #e4dbfc;
127
- $sds-color-primitive-purple-200-dark: #6b2ebc;
131
+ $sds-color-primitive-purple-200-dark: #410f70;
128
132
  $sds-color-primitive-purple-300: #cbbaf8;
129
- $sds-color-primitive-purple-300-dark: #905de6;
133
+ $sds-color-primitive-purple-300-dark: #6429b2;
130
134
  $sds-color-primitive-purple-400: #b296f2;
131
- $sds-color-primitive-purple-400-dark: #aa89ef;
135
+ $sds-color-primitive-purple-400-dark: #905de6;
132
136
  $sds-color-primitive-purple-500: #8b54e2;
133
- $sds-color-primitive-purple-500-dark: #cebef8;
137
+ $sds-color-primitive-purple-500-dark: #aa89ef;
134
138
  $sds-color-primitive-purple-600: #6526b5;
135
- $sds-color-primitive-purple-600-dark: #e4dcfc;
139
+ $sds-color-primitive-purple-600-dark: #cebef8;
136
140
  $sds-color-primitive-purple-700: #490092;
137
- $sds-color-primitive-purple-700-dark: #f0ebfe;
138
- $sds-color-primitive-purple-800: #1a004c;
139
- $sds-color-primitive-purple-800-dark: #fbf9ff;
141
+ $sds-color-primitive-purple-700-dark: #e4dcfc;
142
+ $sds-color-primitive-purple-800: #26004c;
143
+ $sds-color-primitive-purple-800-dark: #f0ebfe;
140
144
  $sds-color-primitive-red-100: #ffe8e6;
141
- $sds-color-primitive-red-100-dark: #630008;
145
+ $sds-color-primitive-red-100-dark: #330603;
142
146
  $sds-color-primitive-red-200: #ffd6d2;
143
- $sds-color-primitive-red-200-dark: #A30000;
147
+ $sds-color-primitive-red-200-dark: #660a12;
144
148
  $sds-color-primitive-red-300: #ffafa8;
145
- $sds-color-primitive-red-300-dark: #E52722;
149
+ $sds-color-primitive-red-300-dark: #9e1c1c;
146
150
  $sds-color-primitive-red-400: #ff7e78;
147
- $sds-color-primitive-red-400-dark: #FF695B;
151
+ $sds-color-primitive-red-400-dark: #c73028;
148
152
  $sds-color-primitive-red-500: #db2131;
149
- $sds-color-primitive-red-500-dark: #FF9385;
150
- $sds-color-primitive-red-600: #980013;
151
- $sds-color-primitive-red-600-dark: #FFBDB3;
153
+ $sds-color-primitive-red-500-dark: #e05043;
154
+ $sds-color-primitive-red-600: #980017;
155
+ $sds-color-primitive-red-600-dark: #ff988a;
152
156
  $sds-color-primitive-red-700: #6f0008;
153
- $sds-color-primitive-red-700-dark: #FFD8D1;
157
+ $sds-color-primitive-red-700-dark: #ffbdb3;
154
158
  $sds-color-primitive-red-800: #340000;
155
- $sds-color-primitive-red-800-dark: #FFF1EE;
156
- $sds-color-primitive-yellow-100: #ffefcf;
157
- $sds-color-primitive-yellow-100-dark: #552300;
159
+ $sds-color-primitive-red-800-dark: #ffd8d1;
160
+ $sds-color-primitive-yellow-100: #fff3db;
161
+ $sds-color-primitive-yellow-100-dark: #361b07;
158
162
  $sds-color-primitive-yellow-200: #ffdb97;
159
- $sds-color-primitive-yellow-200-dark: #834500;
163
+ $sds-color-primitive-yellow-200-dark: #52270a;
160
164
  $sds-color-primitive-yellow-300: #ffca5c;
161
- $sds-color-primitive-yellow-300-dark: #985a00;
165
+ $sds-color-primitive-yellow-300-dark: #965a0b;
162
166
  $sds-color-primitive-yellow-400: #fab700;
163
- $sds-color-primitive-yellow-400-dark: #ac6c00;
167
+ $sds-color-primitive-yellow-400-dark: #bd8804;
164
168
  $sds-color-primitive-yellow-500: #da9900;
165
- $sds-color-primitive-yellow-500-dark: #cf8e00;
166
- $sds-color-primitive-yellow-600: #b77800;
167
- $sds-color-primitive-yellow-600-dark: #efad00;
169
+ $sds-color-primitive-yellow-500-dark: #d9a943;
170
+ $sds-color-primitive-yellow-600: #b07300;
171
+ $sds-color-primitive-yellow-600-dark: #e5bc63;
168
172
  $sds-color-primitive-yellow-700: #7c3e00;
169
- $sds-color-primitive-yellow-700-dark: #ffdc9a;
173
+ $sds-color-primitive-yellow-700-dark: #f5d789;
170
174
  $sds-color-primitive-yellow-800: #541700;
171
- $sds-color-primitive-yellow-800-dark: #fcf2e3;
175
+ $sds-color-primitive-yellow-800-dark: #ffe6a8;
172
176
  $sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
173
177
  $sds-color-primitive-overlay-100-dark: rgba(0, 0, 0, 0.08);
174
178
  $sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
175
179
  $sds-color-primitive-overlay-200-dark: rgba(0, 0, 0, 0.03);
176
- $sds-color-semantic-base-border: #969696;
177
- $sds-color-semantic-base-border-dark: #aaaaaa;
180
+ $sds-color-semantic-base-background-primary: #ffffff;
181
+ $sds-color-semantic-base-background-primary-dark: #000000;
182
+ $sds-color-semantic-base-background-primary-inverse: #000000;
183
+ $sds-color-semantic-base-background-primary-inverse-dark: #ffffff;
184
+ $sds-color-semantic-base-background-secondary: #f3f3f3;
185
+ $sds-color-semantic-base-background-secondary-dark: #333333;
186
+ $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
187
+ $sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
188
+ $sds-color-semantic-base-background-tertiary: #dfdfdf;
189
+ $sds-color-semantic-base-background-tertiary-dark: #494949;
190
+ $sds-color-semantic-base-border: #6c6c6c;
191
+ $sds-color-semantic-base-border-dark: #cdcdcd;
178
192
  $sds-color-semantic-base-border-disabled: #c3c3c3;
179
193
  $sds-color-semantic-base-border-disabled-dark: #696969;
180
194
  $sds-color-semantic-base-border-hover: #000000;
181
195
  $sds-color-semantic-base-border-hover-dark: #ffffff;
196
+ $sds-color-semantic-base-border-inverse: #ffffff;
197
+ $sds-color-semantic-base-border-inverse-dark: #000000;
182
198
  $sds-color-semantic-base-border-pressed: #000000;
183
199
  $sds-color-semantic-base-border-pressed-dark: #ffffff;
184
200
  $sds-color-semantic-base-border-table: #c3c3c3;
185
201
  $sds-color-semantic-base-border-table-dark: #696969;
186
202
  $sds-color-semantic-base-divider: #dfdfdf;
187
203
  $sds-color-semantic-base-divider-dark: #494949;
204
+ $sds-color-semantic-base-divider-inverse: #6c6c6c;
205
+ $sds-color-semantic-base-divider-inverse-dark: #cdcdcd;
188
206
  $sds-color-semantic-base-fill-disabled: #dfdfdf;
189
207
  $sds-color-semantic-base-fill-disabled-dark: #494949;
190
208
  $sds-color-semantic-base-fill-hover: #c3c3c347;
@@ -197,32 +215,24 @@ $sds-color-semantic-base-fill-primary: #ffffff;
197
215
  $sds-color-semantic-base-fill-primary-dark: #000000;
198
216
  $sds-color-semantic-base-fill-selected: #000000;
199
217
  $sds-color-semantic-base-fill-selected-dark: #ffffff;
200
- $sds-color-semantic-base-icon-disabled: #c3c3c3;
201
- $sds-color-semantic-base-icon-disabled-dark: #696969;
202
- $sds-color-semantic-base-icon-primary: #969696;
203
- $sds-color-semantic-base-icon-primary-dark: #aaaaaa;
204
- $sds-color-semantic-base-icon-primary-hover: #000000;
205
- $sds-color-semantic-base-icon-primary-hover-dark: #ffffff;
206
- $sds-color-semantic-base-icon-primary-inverse: #ffffff;
207
- $sds-color-semantic-base-icon-primary-inverse-dark: #000000;
208
- $sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
209
- $sds-color-semantic-base-icon-primary-inverse-hover-dark: #9b9b9b;
210
- $sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
211
- $sds-color-semantic-base-icon-primary-inverse-pressed-dark: #9b9b9b;
212
- $sds-color-semantic-base-icon-primary-pressed: #000000;
213
- $sds-color-semantic-base-icon-primary-pressed-dark: #ffffff;
214
- $sds-color-semantic-base-icon-secondary: #000000;
215
- $sds-color-semantic-base-icon-secondary-dark: #ffffff;
216
- $sds-color-semantic-base-surface-background: #ffffff;
217
- $sds-color-semantic-base-surface-background-dark: #000000;
218
- $sds-color-semantic-base-surface-primary: #ffffff;
219
- $sds-color-semantic-base-surface-primary-dark: #000000;
220
- $sds-color-semantic-base-surface-primary-inverse: #000000;
221
- $sds-color-semantic-base-surface-primary-inverse-dark: #ffffff;
222
- $sds-color-semantic-base-surface-secondary: #f3f3f3;
223
- $sds-color-semantic-base-surface-secondary-dark: #333333;
224
- $sds-color-semantic-base-surface-tertiary: #dfdfdf;
225
- $sds-color-semantic-base-surface-tertiary-dark: #494949;
218
+ $sds-color-semantic-base-ornament-disabled: #c3c3c3;
219
+ $sds-color-semantic-base-ornament-disabled-dark: #696969;
220
+ $sds-color-semantic-base-ornament-on-fill: #ffffff;
221
+ $sds-color-semantic-base-ornament-on-fill-dark: #000000;
222
+ $sds-color-semantic-base-ornament-primary: #000000;
223
+ $sds-color-semantic-base-ornament-primary-dark: #ffffff;
224
+ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
225
+ $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
226
+ $sds-color-semantic-base-ornament-secondary: #6c6c6c;
227
+ $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
228
+ $sds-color-semantic-base-ornament-secondary-hover: #000000;
229
+ $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
230
+ $sds-color-semantic-base-ornament-secondary-pressed: #000000;
231
+ $sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff;
232
+ $sds-color-semantic-base-surface: #ffffff;
233
+ $sds-color-semantic-base-surface-dark: #000000;
234
+ $sds-color-semantic-base-surface-inverse: #000000;
235
+ $sds-color-semantic-base-surface-inverse-dark: #ffffff;
226
236
  $sds-color-semantic-base-text-disabled: #c3c3c3;
227
237
  $sds-color-semantic-base-text-disabled-dark: #696969;
228
238
  $sds-color-semantic-base-text-primary: #000000;
@@ -234,99 +244,99 @@ $sds-color-semantic-base-text-secondary-dark: #cdcdcd;
234
244
  $sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
235
245
  $sds-color-semantic-base-text-secondary-inverse-dark: #696969;
236
246
  $sds-color-semantic-accent-border: #1a6cef;
237
- $sds-color-semantic-accent-border-dark: #a2c9ff;
247
+ $sds-color-semantic-accent-border-dark: #5b9aff;
238
248
  $sds-color-semantic-accent-border-focus: #1a6cef;
239
- $sds-color-semantic-accent-border-focus-dark: #a2c9ff;
249
+ $sds-color-semantic-accent-border-focus-dark: #5b9aff;
240
250
  $sds-color-semantic-accent-border-hover: #0041b9;
241
- $sds-color-semantic-accent-border-hover-dark: #cde3ff;
251
+ $sds-color-semantic-accent-border-hover-dark: #a2c9ff;
242
252
  $sds-color-semantic-accent-border-open: #1a6cef;
243
- $sds-color-semantic-accent-border-open-dark: #a2c9ff;
253
+ $sds-color-semantic-accent-border-open-dark: #5b9aff;
244
254
  $sds-color-semantic-accent-border-pressed: #002d90;
245
- $sds-color-semantic-accent-border-pressed-dark: #e2eeff;
255
+ $sds-color-semantic-accent-border-pressed-dark: #cde3ff;
246
256
  $sds-color-semantic-accent-border-selected: #1a6cef;
247
- $sds-color-semantic-accent-border-selected-dark: #a2c9ff;
257
+ $sds-color-semantic-accent-border-selected-dark: #5b9aff;
248
258
  $sds-color-semantic-accent-fill-hover: #0041b9;
249
- $sds-color-semantic-accent-fill-hover-dark: #cde3ff;
259
+ $sds-color-semantic-accent-fill-hover-dark: #a2c9ff;
250
260
  $sds-color-semantic-accent-fill-pressed: #002d90;
251
- $sds-color-semantic-accent-fill-pressed-dark: #e2eeff;
261
+ $sds-color-semantic-accent-fill-pressed-dark: #cde3ff;
252
262
  $sds-color-semantic-accent-fill-primary: #1a6cef;
253
- $sds-color-semantic-accent-fill-primary-dark: #a2c9ff;
254
- $sds-color-semantic-accent-icon: #1a6cef;
255
- $sds-color-semantic-accent-icon-dark: #a2c9ff;
256
- $sds-color-semantic-accent-icon-focus: #1a6cef;
257
- $sds-color-semantic-accent-icon-focus-dark: #a2c9ff;
258
- $sds-color-semantic-accent-icon-hover: #0041b9;
259
- $sds-color-semantic-accent-icon-hover-dark: #cde3ff;
260
- $sds-color-semantic-accent-icon-open: #1a6cef;
261
- $sds-color-semantic-accent-icon-open-dark: #a2c9ff;
262
- $sds-color-semantic-accent-icon-pressed: #002d90;
263
- $sds-color-semantic-accent-icon-pressed-dark: #e2eeff;
264
- $sds-color-semantic-accent-icon-selected: #1a6cef;
265
- $sds-color-semantic-accent-icon-selected-dark: #a2c9ff;
266
- $sds-color-semantic-accent-surface-primary: #e2eeff;
267
- $sds-color-semantic-accent-surface-primary-dark: #002573;
268
- $sds-color-semantic-accent-surface-secondary: #1a6cef;
269
- $sds-color-semantic-accent-surface-secondary-dark: #a2c9ff;
263
+ $sds-color-semantic-accent-fill-primary-dark: #5b9aff;
264
+ $sds-color-semantic-accent-ornament: #1a6cef;
265
+ $sds-color-semantic-accent-ornament-dark: #5b9aff;
266
+ $sds-color-semantic-accent-ornament-focus: #1a6cef;
267
+ $sds-color-semantic-accent-ornament-focus-dark: #5b9aff;
268
+ $sds-color-semantic-accent-ornament-hover: #0041b9;
269
+ $sds-color-semantic-accent-ornament-hover-dark: #a2c9ff;
270
+ $sds-color-semantic-accent-ornament-open: #1a6cef;
271
+ $sds-color-semantic-accent-ornament-open-dark: #5b9aff;
272
+ $sds-color-semantic-accent-ornament-pressed: #002d90;
273
+ $sds-color-semantic-accent-ornament-pressed-dark: #cde3ff;
274
+ $sds-color-semantic-accent-ornament-selected: #1a6cef;
275
+ $sds-color-semantic-accent-ornament-selected-dark: #5b9aff;
276
+ $sds-color-semantic-accent-surface-primary: #1a6cef;
277
+ $sds-color-semantic-accent-surface-primary-dark: #5b9aff;
278
+ $sds-color-semantic-accent-surface-secondary: #e2eeff;
279
+ $sds-color-semantic-accent-surface-secondary-dark: #0f1d4a;
270
280
  $sds-color-semantic-accent-text-action: #1a6cef;
271
- $sds-color-semantic-accent-text-action-dark: #a2c9ff;
281
+ $sds-color-semantic-accent-text-action-dark: #5b9aff;
272
282
  $sds-color-semantic-accent-text-action-hover: #0041b9;
273
- $sds-color-semantic-accent-text-action-hover-dark: #cde3ff;
283
+ $sds-color-semantic-accent-text-action-hover-dark: #a2c9ff;
274
284
  $sds-color-semantic-accent-text-action-pressed: #002d90;
275
- $sds-color-semantic-accent-text-action-pressed-dark: #e2eeff;
276
- $sds-color-semantic-beta-border: #8b54e2;
285
+ $sds-color-semantic-accent-text-action-pressed-dark: #cde3ff;
286
+ $sds-color-semantic-beta-border: #6526b5;
277
287
  $sds-color-semantic-beta-border-dark: #cebef8;
278
288
  $sds-color-semantic-beta-fill-hover: #6526b5;
279
- $sds-color-semantic-beta-fill-hover-dark: #e4dcfc;
289
+ $sds-color-semantic-beta-fill-hover-dark: #cebef8;
280
290
  $sds-color-semantic-beta-fill-pressed: #490092;
281
- $sds-color-semantic-beta-fill-pressed-dark: #f0ebfe;
291
+ $sds-color-semantic-beta-fill-pressed-dark: #e4dcfc;
282
292
  $sds-color-semantic-beta-fill-primary: #8b54e2;
283
- $sds-color-semantic-beta-fill-primary-dark: #cebef8;
293
+ $sds-color-semantic-beta-fill-primary-dark: #aa89ef;
284
294
  $sds-color-semantic-beta-fill-secondary: #efeafe;
285
- $sds-color-semantic-beta-fill-secondary-dark: #4b0190;
295
+ $sds-color-semantic-beta-fill-secondary-dark: #331252;
286
296
  $sds-color-semantic-beta-ornament: #6526b5;
287
- $sds-color-semantic-beta-ornament-dark: #e4dcfc;
288
- $sds-color-semantic-beta-surface-primary: #efeafe;
289
- $sds-color-semantic-beta-surface-primary-dark: #4b0190;
290
- $sds-color-semantic-beta-surface-secondary: #8b54e2;
291
- $sds-color-semantic-beta-surface-secondary-dark: #cebef8;
297
+ $sds-color-semantic-beta-ornament-dark: #cebef8;
298
+ $sds-color-semantic-beta-surface-primary: #8b54e2;
299
+ $sds-color-semantic-beta-surface-primary-dark: #aa89ef;
300
+ $sds-color-semantic-beta-surface-secondary: #efeafe;
301
+ $sds-color-semantic-beta-surface-secondary-dark: #331252;
292
302
  $sds-color-semantic-beta-text: #6526b5;
293
- $sds-color-semantic-beta-text-dark: #e4dcfc;
294
- $sds-color-semantic-info-border: #1a6cef;
303
+ $sds-color-semantic-beta-text-dark: #cebef8;
304
+ $sds-color-semantic-info-border: #0041b9;
295
305
  $sds-color-semantic-info-border-dark: #a2c9ff;
296
306
  $sds-color-semantic-info-fill-hover: #0041b9;
297
- $sds-color-semantic-info-fill-hover-dark: #cde3ff;
307
+ $sds-color-semantic-info-fill-hover-dark: #a2c9ff;
298
308
  $sds-color-semantic-info-fill-pressed: #002d90;
299
- $sds-color-semantic-info-fill-pressed-dark: #e2eeff;
309
+ $sds-color-semantic-info-fill-pressed-dark: #cde3ff;
300
310
  $sds-color-semantic-info-fill-primary: #1a6cef;
301
- $sds-color-semantic-info-fill-primary-dark: #a2c9ff;
311
+ $sds-color-semantic-info-fill-primary-dark: #5b9aff;
302
312
  $sds-color-semantic-info-fill-secondary: #e2eeff;
303
- $sds-color-semantic-info-fill-secondary-dark: #002573;
313
+ $sds-color-semantic-info-fill-secondary-dark: #0f1d4a;
304
314
  $sds-color-semantic-info-ornament: #0041b9;
305
- $sds-color-semantic-info-ornament-dark: #cde3ff;
306
- $sds-color-semantic-info-surface-primary: #e2eeff;
307
- $sds-color-semantic-info-surface-primary-dark: #002573;
308
- $sds-color-semantic-info-surface-secondary: #1a6cef;
309
- $sds-color-semantic-info-surface-secondary-dark: #a2c9ff;
315
+ $sds-color-semantic-info-ornament-dark: #a2c9ff;
316
+ $sds-color-semantic-info-surface-primary: #1a6cef;
317
+ $sds-color-semantic-info-surface-primary-dark: #5b9aff;
318
+ $sds-color-semantic-info-surface-secondary: #e2eeff;
319
+ $sds-color-semantic-info-surface-secondary-dark: #0f1d4a;
310
320
  $sds-color-semantic-info-text: #0041b9;
311
- $sds-color-semantic-info-text-dark: #cde3ff;
312
- $sds-color-semantic-negative-border: #db2131;
313
- $sds-color-semantic-negative-border-dark: #FF9385;
314
- $sds-color-semantic-negative-fill-hover: #980013;
315
- $sds-color-semantic-negative-fill-hover-dark: #FFBDB3;
321
+ $sds-color-semantic-info-text-dark: #a2c9ff;
322
+ $sds-color-semantic-negative-border: #980017;
323
+ $sds-color-semantic-negative-border-dark: #ff988a;
324
+ $sds-color-semantic-negative-fill-hover: #980017;
325
+ $sds-color-semantic-negative-fill-hover-dark: #ff988a;
316
326
  $sds-color-semantic-negative-fill-pressed: #6f0008;
317
- $sds-color-semantic-negative-fill-pressed-dark: #FFD8D1;
327
+ $sds-color-semantic-negative-fill-pressed-dark: #ffbdb3;
318
328
  $sds-color-semantic-negative-fill-primary: #db2131;
319
- $sds-color-semantic-negative-fill-primary-dark: #FF9385;
329
+ $sds-color-semantic-negative-fill-primary-dark: #e05043;
320
330
  $sds-color-semantic-negative-fill-secondary: #ffe8e6;
321
- $sds-color-semantic-negative-fill-secondary-dark: #630008;
322
- $sds-color-semantic-negative-ornament: #980013;
323
- $sds-color-semantic-negative-ornament-dark: #FFBDB3;
324
- $sds-color-semantic-negative-surface-primary: #ffe8e6;
325
- $sds-color-semantic-negative-surface-primary-dark: #630008;
326
- $sds-color-semantic-negative-surface-secondary: #db2131;
327
- $sds-color-semantic-negative-surface-secondary-dark: #FF9385;
328
- $sds-color-semantic-negative-text: #980013;
329
- $sds-color-semantic-negative-text-dark: #FFBDB3;
331
+ $sds-color-semantic-negative-fill-secondary-dark: #330603;
332
+ $sds-color-semantic-negative-ornament: #980017;
333
+ $sds-color-semantic-negative-ornament-dark: #ff988a;
334
+ $sds-color-semantic-negative-surface-primary: #db2131;
335
+ $sds-color-semantic-negative-surface-primary-dark: #e05043;
336
+ $sds-color-semantic-negative-surface-secondary: #ffe8e6;
337
+ $sds-color-semantic-negative-surface-secondary-dark: #330603;
338
+ $sds-color-semantic-negative-text: #980017;
339
+ $sds-color-semantic-negative-text-dark: #ff988a;
330
340
  $sds-color-semantic-neutral-border: #969696;
331
341
  $sds-color-semantic-neutral-border-dark: #aaaaaa;
332
342
  $sds-color-semantic-neutral-fill-hover: #6c6c6c;
@@ -339,48 +349,48 @@ $sds-color-semantic-neutral-fill-secondary: #f3f3f3;
339
349
  $sds-color-semantic-neutral-fill-secondary-dark: #333333;
340
350
  $sds-color-semantic-neutral-ornament: #3b3b3b;
341
351
  $sds-color-semantic-neutral-ornament-dark: #ededed;
342
- $sds-color-semantic-neutral-surface-primary: #dfdfdf;
343
- $sds-color-semantic-neutral-surface-primary-dark: #494949;
344
- $sds-color-semantic-neutral-surface-secondary: #969696;
345
- $sds-color-semantic-neutral-surface-secondary-dark: #aaaaaa;
352
+ $sds-color-semantic-neutral-surface-primary: #969696;
353
+ $sds-color-semantic-neutral-surface-primary-dark: #aaaaaa;
354
+ $sds-color-semantic-neutral-surface-secondary: #dfdfdf;
355
+ $sds-color-semantic-neutral-surface-secondary-dark: #494949;
346
356
  $sds-color-semantic-neutral-text: #3b3b3b;
347
357
  $sds-color-semantic-neutral-text-dark: #ededed;
348
- $sds-color-semantic-notice-border: #da9900;
349
- $sds-color-semantic-notice-border-dark: #cf8e00;
350
- $sds-color-semantic-notice-fill-hover: #b77800;
351
- $sds-color-semantic-notice-fill-hover-dark: #efad00;
358
+ $sds-color-semantic-notice-border: #b07300;
359
+ $sds-color-semantic-notice-border-dark: #e5bc63;
360
+ $sds-color-semantic-notice-fill-hover: #b07300;
361
+ $sds-color-semantic-notice-fill-hover-dark: #e5bc63;
352
362
  $sds-color-semantic-notice-fill-pressed: #7c3e00;
353
- $sds-color-semantic-notice-fill-pressed-dark: #ffdc9a;
363
+ $sds-color-semantic-notice-fill-pressed-dark: #f5d789;
354
364
  $sds-color-semantic-notice-fill-primary: #da9900;
355
- $sds-color-semantic-notice-fill-primary-dark: #cf8e00;
356
- $sds-color-semantic-notice-fill-secondary: #ffefcf;
357
- $sds-color-semantic-notice-fill-secondary-dark: #552300;
358
- $sds-color-semantic-notice-ornament: #b77800;
359
- $sds-color-semantic-notice-ornament-dark: #efad00;
360
- $sds-color-semantic-notice-surface-primary: #ffefcf;
361
- $sds-color-semantic-notice-surface-primary-dark: #552300;
362
- $sds-color-semantic-notice-surface-secondary: #da9900;
363
- $sds-color-semantic-notice-surface-secondary-dark: #cf8e00;
364
- $sds-color-semantic-notice-text: #b77800;
365
- $sds-color-semantic-notice-text-dark: #efad00;
366
- $sds-color-semantic-positive-border: #238444;
365
+ $sds-color-semantic-notice-fill-primary-dark: #d9a943;
366
+ $sds-color-semantic-notice-fill-secondary: #fff3db;
367
+ $sds-color-semantic-notice-fill-secondary-dark: #361b07;
368
+ $sds-color-semantic-notice-ornament: #b07300;
369
+ $sds-color-semantic-notice-ornament-dark: #e5bc63;
370
+ $sds-color-semantic-notice-surface-primary: #da9900;
371
+ $sds-color-semantic-notice-surface-primary-dark: #d9a943;
372
+ $sds-color-semantic-notice-surface-secondary: #fff3db;
373
+ $sds-color-semantic-notice-surface-secondary-dark: #361b07;
374
+ $sds-color-semantic-notice-text: #b07300;
375
+ $sds-color-semantic-notice-text-dark: #e5bc63;
376
+ $sds-color-semantic-positive-border: #105b2b;
367
377
  $sds-color-semantic-positive-border-dark: #85d898;
368
378
  $sds-color-semantic-positive-fill-hover: #105b2b;
369
- $sds-color-semantic-positive-fill-hover-dark: #bcecc5;
379
+ $sds-color-semantic-positive-fill-hover-dark: #85d898;
370
380
  $sds-color-semantic-positive-fill-pressed: #07431d;
371
- $sds-color-semantic-positive-fill-pressed-dark: #daf4de;
381
+ $sds-color-semantic-positive-fill-pressed-dark: #bcecc5;
372
382
  $sds-color-semantic-positive-fill-primary: #238444;
373
- $sds-color-semantic-positive-fill-primary-dark: #85d898;
383
+ $sds-color-semantic-positive-fill-primary-dark: #4bae68;
374
384
  $sds-color-semantic-positive-fill-secondary: #daf4de;
375
- $sds-color-semantic-positive-fill-secondary-dark: #053918;
385
+ $sds-color-semantic-positive-fill-secondary-dark: #082608;
376
386
  $sds-color-semantic-positive-ornament: #105b2b;
377
- $sds-color-semantic-positive-ornament-dark: #bcecc5;
378
- $sds-color-semantic-positive-surface-primary: #daf4de;
379
- $sds-color-semantic-positive-surface-primary-dark: #053918;
380
- $sds-color-semantic-positive-surface-secondary: #238444;
381
- $sds-color-semantic-positive-surface-secondary-dark: #85d898;
387
+ $sds-color-semantic-positive-ornament-dark: #85d898;
388
+ $sds-color-semantic-positive-surface-primary: #238444;
389
+ $sds-color-semantic-positive-surface-primary-dark: #4bae68;
390
+ $sds-color-semantic-positive-surface-secondary: #daf4de;
391
+ $sds-color-semantic-positive-surface-secondary-dark: #082608;
382
392
  $sds-color-semantic-positive-text: #105b2b;
383
- $sds-color-semantic-positive-text-dark: #bcecc5;
393
+ $sds-color-semantic-positive-text-dark: #85d898;
384
394
  $sds-corner-l: 20px;
385
395
  $sds-corner-m: 4px;
386
396
  $sds-corner-s: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@czi-sds/components",
3
- "version": "21.7.0",
3
+ "version": "22.0.0",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.cjs.d.ts",
@@ -69,5 +69,5 @@
69
69
  "@types/react-dom": "^18.2.18",
70
70
  "style-dictionary": "^4.1.0"
71
71
  },
72
- "gitHead": "44ad2b400e28b3572beabf1eaf43be590d8600ec"
72
+ "gitHead": "cdeb50a6baded1b522792c20a65b4a5c4a4df79d"
73
73
  }