@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.css CHANGED
@@ -9,7 +9,9 @@
9
9
  --sds-border-base-default: 1px solid #969696;
10
10
  --sds-border-base-disabled: 1px solid #c3c3c3;
11
11
  --sds-border-base-divider: 1px solid #dfdfdf;
12
+ --sds-border-base-divider-inverse: 1px solid #6c6c6c;
12
13
  --sds-border-base-hover: 1px dashed #000000;
14
+ --sds-border-base-inverse: 1px dashed #ffffff;
13
15
  --sds-border-base-pressed: 1px dashed #000000;
14
16
  --sds-border-base-table: 1px solid #c3c3c3;
15
17
  --sds-border-beta-default: 1px solid #6526b5;
@@ -20,16 +22,16 @@
20
22
  --sds-border-info-thick: 2px solid #0041b9;
21
23
  --sds-border-link-dashed: 1px dashed;
22
24
  --sds-border-link-solid: 1px solid;
23
- --sds-border-negative-default: 1px solid #980013;
24
- --sds-border-negative-extra-thick: 4px solid #980013;
25
- --sds-border-negative-thick: 2px solid #980013;
25
+ --sds-border-negative-default: 1px solid #980017;
26
+ --sds-border-negative-extra-thick: 4px solid #980017;
27
+ --sds-border-negative-thick: 2px solid #980017;
26
28
  --sds-border-neutral-default: 1px solid #969696;
27
29
  --sds-border-neutral-extra-thick: 4px solid #969696;
28
30
  --sds-border-neutral-thick: 2px solid #969696;
29
31
  --sds-border-none: none;
30
- --sds-border-notice-default: 1px solid #b77800;
31
- --sds-border-notice-extra-thick: 4px solid #b77800;
32
- --sds-border-notice-thick: 2px solid #b77800;
32
+ --sds-border-notice-default: 1px solid #b07300;
33
+ --sds-border-notice-extra-thick: 4px solid #b07300;
34
+ --sds-border-notice-thick: 2px solid #b07300;
33
35
  --sds-border-positive-default: 1px solid #105b2b;
34
36
  --sds-border-positive-extra-thick: 4px solid #105b2b;
35
37
  --sds-border-positive-thick: 2px solid #105b2b;
@@ -70,50 +72,53 @@
70
72
  --sds-color-primitive-purple-500: #8b54e2;
71
73
  --sds-color-primitive-purple-600: #6526b5;
72
74
  --sds-color-primitive-purple-700: #490092;
73
- --sds-color-primitive-purple-800: #1a004c;
75
+ --sds-color-primitive-purple-800: #26004c;
74
76
  --sds-color-primitive-red-100: #ffe8e6;
75
77
  --sds-color-primitive-red-200: #ffd6d2;
76
78
  --sds-color-primitive-red-300: #ffafa8;
77
79
  --sds-color-primitive-red-400: #ff7e78;
78
80
  --sds-color-primitive-red-500: #db2131;
79
- --sds-color-primitive-red-600: #980013;
81
+ --sds-color-primitive-red-600: #980017;
80
82
  --sds-color-primitive-red-700: #6f0008;
81
83
  --sds-color-primitive-red-800: #340000;
82
- --sds-color-primitive-yellow-100: #ffefcf;
84
+ --sds-color-primitive-yellow-100: #fff3db;
83
85
  --sds-color-primitive-yellow-200: #ffdb97;
84
86
  --sds-color-primitive-yellow-300: #ffca5c;
85
87
  --sds-color-primitive-yellow-400: #fab700;
86
88
  --sds-color-primitive-yellow-500: #da9900;
87
- --sds-color-primitive-yellow-600: #b77800;
89
+ --sds-color-primitive-yellow-600: #b07300;
88
90
  --sds-color-primitive-yellow-700: #7c3e00;
89
91
  --sds-color-primitive-yellow-800: #541700;
90
92
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
91
93
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
92
- --sds-color-semantic-base-border: #969696;
94
+ --sds-color-semantic-base-background-primary: #ffffff;
95
+ --sds-color-semantic-base-background-primary-inverse: #000000;
96
+ --sds-color-semantic-base-background-secondary: #f3f3f3;
97
+ --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
98
+ --sds-color-semantic-base-background-tertiary: #dfdfdf;
99
+ --sds-color-semantic-base-border: #6c6c6c;
93
100
  --sds-color-semantic-base-border-disabled: #c3c3c3;
94
101
  --sds-color-semantic-base-border-hover: #000000;
102
+ --sds-color-semantic-base-border-inverse: #ffffff;
95
103
  --sds-color-semantic-base-border-pressed: #000000;
96
104
  --sds-color-semantic-base-border-table: #c3c3c3;
97
105
  --sds-color-semantic-base-divider: #dfdfdf;
106
+ --sds-color-semantic-base-divider-inverse: #6c6c6c;
98
107
  --sds-color-semantic-base-fill-disabled: #dfdfdf;
99
108
  --sds-color-semantic-base-fill-hover: #c3c3c347;
100
109
  --sds-color-semantic-base-fill-open: #c3c3c347;
101
110
  --sds-color-semantic-base-fill-pressed: #c3c3c347;
102
111
  --sds-color-semantic-base-fill-primary: #ffffff;
103
112
  --sds-color-semantic-base-fill-selected: #000000;
104
- --sds-color-semantic-base-icon-disabled: #c3c3c3;
105
- --sds-color-semantic-base-icon-primary: #969696;
106
- --sds-color-semantic-base-icon-primary-hover: #000000;
107
- --sds-color-semantic-base-icon-primary-inverse: #ffffff;
108
- --sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
109
- --sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
110
- --sds-color-semantic-base-icon-primary-pressed: #000000;
111
- --sds-color-semantic-base-icon-secondary: #000000;
112
- --sds-color-semantic-base-surface-background: #ffffff;
113
- --sds-color-semantic-base-surface-primary: #ffffff;
114
- --sds-color-semantic-base-surface-primary-inverse: #000000;
115
- --sds-color-semantic-base-surface-secondary: #f3f3f3;
116
- --sds-color-semantic-base-surface-tertiary: #dfdfdf;
113
+ --sds-color-semantic-base-ornament-disabled: #c3c3c3;
114
+ --sds-color-semantic-base-ornament-on-fill: #ffffff;
115
+ --sds-color-semantic-base-ornament-primary: #000000;
116
+ --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
117
+ --sds-color-semantic-base-ornament-secondary: #6c6c6c;
118
+ --sds-color-semantic-base-ornament-secondary-hover: #000000;
119
+ --sds-color-semantic-base-ornament-secondary-pressed: #000000;
120
+ --sds-color-semantic-base-surface: #ffffff;
121
+ --sds-color-semantic-base-surface-inverse: #000000;
117
122
  --sds-color-semantic-base-text-disabled: #c3c3c3;
118
123
  --sds-color-semantic-base-text-primary: #000000;
119
124
  --sds-color-semantic-base-text-primary-inverse: #ffffff;
@@ -128,70 +133,70 @@
128
133
  --sds-color-semantic-accent-fill-hover: #0041b9;
129
134
  --sds-color-semantic-accent-fill-pressed: #002d90;
130
135
  --sds-color-semantic-accent-fill-primary: #1a6cef;
131
- --sds-color-semantic-accent-icon: #1a6cef;
132
- --sds-color-semantic-accent-icon-focus: #1a6cef;
133
- --sds-color-semantic-accent-icon-hover: #0041b9;
134
- --sds-color-semantic-accent-icon-open: #1a6cef;
135
- --sds-color-semantic-accent-icon-pressed: #002d90;
136
- --sds-color-semantic-accent-icon-selected: #1a6cef;
137
- --sds-color-semantic-accent-surface-primary: #e2eeff;
138
- --sds-color-semantic-accent-surface-secondary: #1a6cef;
136
+ --sds-color-semantic-accent-ornament: #1a6cef;
137
+ --sds-color-semantic-accent-ornament-focus: #1a6cef;
138
+ --sds-color-semantic-accent-ornament-hover: #0041b9;
139
+ --sds-color-semantic-accent-ornament-open: #1a6cef;
140
+ --sds-color-semantic-accent-ornament-pressed: #002d90;
141
+ --sds-color-semantic-accent-ornament-selected: #1a6cef;
142
+ --sds-color-semantic-accent-surface-primary: #1a6cef;
143
+ --sds-color-semantic-accent-surface-secondary: #e2eeff;
139
144
  --sds-color-semantic-accent-text-action: #1a6cef;
140
145
  --sds-color-semantic-accent-text-action-hover: #0041b9;
141
146
  --sds-color-semantic-accent-text-action-pressed: #002d90;
142
- --sds-color-semantic-beta-border: #8b54e2;
147
+ --sds-color-semantic-beta-border: #6526b5;
143
148
  --sds-color-semantic-beta-fill-hover: #6526b5;
144
149
  --sds-color-semantic-beta-fill-pressed: #490092;
145
150
  --sds-color-semantic-beta-fill-primary: #8b54e2;
146
151
  --sds-color-semantic-beta-fill-secondary: #efeafe;
147
152
  --sds-color-semantic-beta-ornament: #6526b5;
148
- --sds-color-semantic-beta-surface-primary: #efeafe;
149
- --sds-color-semantic-beta-surface-secondary: #8b54e2;
153
+ --sds-color-semantic-beta-surface-primary: #8b54e2;
154
+ --sds-color-semantic-beta-surface-secondary: #efeafe;
150
155
  --sds-color-semantic-beta-text: #6526b5;
151
- --sds-color-semantic-info-border: #1a6cef;
156
+ --sds-color-semantic-info-border: #0041b9;
152
157
  --sds-color-semantic-info-fill-hover: #0041b9;
153
158
  --sds-color-semantic-info-fill-pressed: #002d90;
154
159
  --sds-color-semantic-info-fill-primary: #1a6cef;
155
160
  --sds-color-semantic-info-fill-secondary: #e2eeff;
156
161
  --sds-color-semantic-info-ornament: #0041b9;
157
- --sds-color-semantic-info-surface-primary: #e2eeff;
158
- --sds-color-semantic-info-surface-secondary: #1a6cef;
162
+ --sds-color-semantic-info-surface-primary: #1a6cef;
163
+ --sds-color-semantic-info-surface-secondary: #e2eeff;
159
164
  --sds-color-semantic-info-text: #0041b9;
160
- --sds-color-semantic-negative-border: #db2131;
161
- --sds-color-semantic-negative-fill-hover: #980013;
165
+ --sds-color-semantic-negative-border: #980017;
166
+ --sds-color-semantic-negative-fill-hover: #980017;
162
167
  --sds-color-semantic-negative-fill-pressed: #6f0008;
163
168
  --sds-color-semantic-negative-fill-primary: #db2131;
164
169
  --sds-color-semantic-negative-fill-secondary: #ffe8e6;
165
- --sds-color-semantic-negative-ornament: #980013;
166
- --sds-color-semantic-negative-surface-primary: #ffe8e6;
167
- --sds-color-semantic-negative-surface-secondary: #db2131;
168
- --sds-color-semantic-negative-text: #980013;
170
+ --sds-color-semantic-negative-ornament: #980017;
171
+ --sds-color-semantic-negative-surface-primary: #db2131;
172
+ --sds-color-semantic-negative-surface-secondary: #ffe8e6;
173
+ --sds-color-semantic-negative-text: #980017;
169
174
  --sds-color-semantic-neutral-border: #969696;
170
175
  --sds-color-semantic-neutral-fill-hover: #6c6c6c;
171
176
  --sds-color-semantic-neutral-fill-pressed: #3b3b3b;
172
177
  --sds-color-semantic-neutral-fill-primary: #969696;
173
178
  --sds-color-semantic-neutral-fill-secondary: #f3f3f3;
174
179
  --sds-color-semantic-neutral-ornament: #3b3b3b;
175
- --sds-color-semantic-neutral-surface-primary: #dfdfdf;
176
- --sds-color-semantic-neutral-surface-secondary: #969696;
180
+ --sds-color-semantic-neutral-surface-primary: #969696;
181
+ --sds-color-semantic-neutral-surface-secondary: #dfdfdf;
177
182
  --sds-color-semantic-neutral-text: #3b3b3b;
178
- --sds-color-semantic-notice-border: #da9900;
179
- --sds-color-semantic-notice-fill-hover: #b77800;
183
+ --sds-color-semantic-notice-border: #b07300;
184
+ --sds-color-semantic-notice-fill-hover: #b07300;
180
185
  --sds-color-semantic-notice-fill-pressed: #7c3e00;
181
186
  --sds-color-semantic-notice-fill-primary: #da9900;
182
- --sds-color-semantic-notice-fill-secondary: #ffefcf;
183
- --sds-color-semantic-notice-ornament: #b77800;
184
- --sds-color-semantic-notice-surface-primary: #ffefcf;
185
- --sds-color-semantic-notice-surface-secondary: #da9900;
186
- --sds-color-semantic-notice-text: #b77800;
187
- --sds-color-semantic-positive-border: #238444;
187
+ --sds-color-semantic-notice-fill-secondary: #fff3db;
188
+ --sds-color-semantic-notice-ornament: #b07300;
189
+ --sds-color-semantic-notice-surface-primary: #da9900;
190
+ --sds-color-semantic-notice-surface-secondary: #fff3db;
191
+ --sds-color-semantic-notice-text: #b07300;
192
+ --sds-color-semantic-positive-border: #105b2b;
188
193
  --sds-color-semantic-positive-fill-hover: #105b2b;
189
194
  --sds-color-semantic-positive-fill-pressed: #07431d;
190
195
  --sds-color-semantic-positive-fill-primary: #238444;
191
196
  --sds-color-semantic-positive-fill-secondary: #daf4de;
192
197
  --sds-color-semantic-positive-ornament: #105b2b;
193
- --sds-color-semantic-positive-surface-primary: #daf4de;
194
- --sds-color-semantic-positive-surface-secondary: #238444;
198
+ --sds-color-semantic-positive-surface-primary: #238444;
199
+ --sds-color-semantic-positive-surface-secondary: #daf4de;
195
200
  --sds-color-semantic-positive-text: #105b2b;
196
201
  --sds-corner-l: 20px;
197
202
  --sds-corner-m: 4px;
@@ -382,41 +387,43 @@
382
387
  --sds-border-base-default: 1px solid #aaaaaa;
383
388
  --sds-border-base-disabled: 1px solid #696969;
384
389
  --sds-border-base-divider: 1px solid #494949;
390
+ --sds-border-base-divider-inverse: 1px solid #cdcdcd;
385
391
  --sds-border-base-hover: 1px dashed #ffffff;
392
+ --sds-border-base-inverse: 1px dashed #000000;
386
393
  --sds-border-base-pressed: 1px dashed #ffffff;
387
394
  --sds-border-base-table: 1px solid #696969;
388
- --sds-border-beta-default: 1px solid #e4dcfc;
389
- --sds-border-beta-extra-thick: 4px solid #e4dcfc;
390
- --sds-border-beta-thick: 2px solid #e4dcfc;
391
- --sds-border-info-default: 1px solid #cde3ff;
392
- --sds-border-info-extra-thick: 4px solid #cde3ff;
393
- --sds-border-info-thick: 2px solid #cde3ff;
395
+ --sds-border-beta-default: 1px solid #cebef8;
396
+ --sds-border-beta-extra-thick: 4px solid #cebef8;
397
+ --sds-border-beta-thick: 2px solid #cebef8;
398
+ --sds-border-info-default: 1px solid #a2c9ff;
399
+ --sds-border-info-extra-thick: 4px solid #a2c9ff;
400
+ --sds-border-info-thick: 2px solid #a2c9ff;
394
401
  --sds-border-link-dashed: 1px dashed;
395
402
  --sds-border-link-solid: 1px solid;
396
- --sds-border-negative-default: 1px solid #FFBDB3;
397
- --sds-border-negative-extra-thick: 4px solid #FFBDB3;
398
- --sds-border-negative-thick: 2px solid #FFBDB3;
403
+ --sds-border-negative-default: 1px solid #ff988a;
404
+ --sds-border-negative-extra-thick: 4px solid #ff988a;
405
+ --sds-border-negative-thick: 2px solid #ff988a;
399
406
  --sds-border-neutral-default: 1px solid #aaaaaa;
400
407
  --sds-border-neutral-extra-thick: 4px solid #aaaaaa;
401
408
  --sds-border-neutral-thick: 2px solid #aaaaaa;
402
409
  --sds-border-none: none;
403
- --sds-border-notice-default: 1px solid #efad00;
404
- --sds-border-notice-extra-thick: 4px solid #efad00;
405
- --sds-border-notice-thick: 2px solid #efad00;
406
- --sds-border-positive-default: 1px solid #bcecc5;
407
- --sds-border-positive-extra-thick: 4px solid #bcecc5;
408
- --sds-border-positive-thick: 2px solid #bcecc5;
410
+ --sds-border-notice-default: 1px solid #e5bc63;
411
+ --sds-border-notice-extra-thick: 4px solid #e5bc63;
412
+ --sds-border-notice-thick: 2px solid #e5bc63;
413
+ --sds-border-positive-default: 1px solid #85d898;
414
+ --sds-border-positive-extra-thick: 4px solid #85d898;
415
+ --sds-border-positive-thick: 2px solid #85d898;
409
416
  --sds-breakpoint-sm: 0px;
410
417
  --sds-breakpoint-md: 512px;
411
418
  --sds-breakpoint-lg: 1024px;
412
- --sds-color-primitive-blue-100: #002573;
413
- --sds-color-primitive-blue-200: #0048c5;
414
- --sds-color-primitive-blue-300: #2573f4;
415
- --sds-color-primitive-blue-400: #5b9aff;
416
- --sds-color-primitive-blue-500: #a2c9ff;
417
- --sds-color-primitive-blue-600: #cde3ff;
418
- --sds-color-primitive-blue-700: #e2eeff;
419
- --sds-color-primitive-blue-800: #f7faff;
419
+ --sds-color-primitive-blue-100: #0f1d4a;
420
+ --sds-color-primitive-blue-200: #0a216e;
421
+ --sds-color-primitive-blue-300: #0647b8;
422
+ --sds-color-primitive-blue-400: #2573f4;
423
+ --sds-color-primitive-blue-500: #5b9aff;
424
+ --sds-color-primitive-blue-600: #a2c9ff;
425
+ --sds-color-primitive-blue-700: #cde3ff;
426
+ --sds-color-primitive-blue-800: #e2eeff;
420
427
  --sds-color-primitive-gray-50: #000000;
421
428
  --sds-color-primitive-gray-75: #101010;
422
429
  --sds-color-primitive-gray-100: #333333;
@@ -428,144 +435,147 @@
428
435
  --sds-color-primitive-gray-700: #ededed;
429
436
  --sds-color-primitive-gray-800: #fafafa;
430
437
  --sds-color-primitive-gray-900: #ffffff;
431
- --sds-color-primitive-green-100: #053918;
432
- --sds-color-primitive-green-200: #12612e;
433
- --sds-color-primitive-green-300: #288b49;
434
- --sds-color-primitive-green-400: #43ae63;
435
- --sds-color-primitive-green-500: #85d898;
436
- --sds-color-primitive-green-600: #bcecc5;
437
- --sds-color-primitive-green-700: #daf4de;
438
- --sds-color-primitive-green-800: #f7fbf6;
439
- --sds-color-primitive-purple-100: #4b0190;
440
- --sds-color-primitive-purple-200: #6b2ebc;
441
- --sds-color-primitive-purple-300: #905de6;
442
- --sds-color-primitive-purple-400: #aa89ef;
443
- --sds-color-primitive-purple-500: #cebef8;
444
- --sds-color-primitive-purple-600: #e4dcfc;
445
- --sds-color-primitive-purple-700: #f0ebfe;
446
- --sds-color-primitive-purple-800: #fbf9ff;
447
- --sds-color-primitive-red-100: #630008;
448
- --sds-color-primitive-red-200: #A30000;
449
- --sds-color-primitive-red-300: #E52722;
450
- --sds-color-primitive-red-400: #FF695B;
451
- --sds-color-primitive-red-500: #FF9385;
452
- --sds-color-primitive-red-600: #FFBDB3;
453
- --sds-color-primitive-red-700: #FFD8D1;
454
- --sds-color-primitive-red-800: #FFF1EE;
455
- --sds-color-primitive-yellow-100: #552300;
456
- --sds-color-primitive-yellow-200: #834500;
457
- --sds-color-primitive-yellow-300: #985a00;
458
- --sds-color-primitive-yellow-400: #ac6c00;
459
- --sds-color-primitive-yellow-500: #cf8e00;
460
- --sds-color-primitive-yellow-600: #efad00;
461
- --sds-color-primitive-yellow-700: #ffdc9a;
462
- --sds-color-primitive-yellow-800: #fcf2e3;
438
+ --sds-color-primitive-green-100: #082608;
439
+ --sds-color-primitive-green-200: #063617;
440
+ --sds-color-primitive-green-300: #10632e;
441
+ --sds-color-primitive-green-400: #278b48;
442
+ --sds-color-primitive-green-500: #4bae68;
443
+ --sds-color-primitive-green-600: #85d898;
444
+ --sds-color-primitive-green-700: #bcecc5;
445
+ --sds-color-primitive-green-800: #daf4de;
446
+ --sds-color-primitive-purple-100: #331252;
447
+ --sds-color-primitive-purple-200: #410f70;
448
+ --sds-color-primitive-purple-300: #6429b2;
449
+ --sds-color-primitive-purple-400: #905de6;
450
+ --sds-color-primitive-purple-500: #aa89ef;
451
+ --sds-color-primitive-purple-600: #cebef8;
452
+ --sds-color-primitive-purple-700: #e4dcfc;
453
+ --sds-color-primitive-purple-800: #f0ebfe;
454
+ --sds-color-primitive-red-100: #330603;
455
+ --sds-color-primitive-red-200: #660a12;
456
+ --sds-color-primitive-red-300: #9e1c1c;
457
+ --sds-color-primitive-red-400: #c73028;
458
+ --sds-color-primitive-red-500: #e05043;
459
+ --sds-color-primitive-red-600: #ff988a;
460
+ --sds-color-primitive-red-700: #ffbdb3;
461
+ --sds-color-primitive-red-800: #ffd8d1;
462
+ --sds-color-primitive-yellow-100: #361b07;
463
+ --sds-color-primitive-yellow-200: #52270a;
464
+ --sds-color-primitive-yellow-300: #965a0b;
465
+ --sds-color-primitive-yellow-400: #bd8804;
466
+ --sds-color-primitive-yellow-500: #d9a943;
467
+ --sds-color-primitive-yellow-600: #e5bc63;
468
+ --sds-color-primitive-yellow-700: #f5d789;
469
+ --sds-color-primitive-yellow-800: #ffe6a8;
463
470
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
464
471
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
465
- --sds-color-semantic-base-border: #aaaaaa;
472
+ --sds-color-semantic-base-background-primary: #000000;
473
+ --sds-color-semantic-base-background-primary-inverse: #ffffff;
474
+ --sds-color-semantic-base-background-secondary: #333333;
475
+ --sds-color-semantic-base-background-secondary-inverse: #ededed;
476
+ --sds-color-semantic-base-background-tertiary: #494949;
477
+ --sds-color-semantic-base-border: #cdcdcd;
466
478
  --sds-color-semantic-base-border-disabled: #696969;
467
479
  --sds-color-semantic-base-border-hover: #ffffff;
480
+ --sds-color-semantic-base-border-inverse: #000000;
468
481
  --sds-color-semantic-base-border-pressed: #ffffff;
469
482
  --sds-color-semantic-base-border-table: #696969;
470
483
  --sds-color-semantic-base-divider: #494949;
484
+ --sds-color-semantic-base-divider-inverse: #cdcdcd;
471
485
  --sds-color-semantic-base-fill-disabled: #494949;
472
486
  --sds-color-semantic-base-fill-hover: #69696947;
473
487
  --sds-color-semantic-base-fill-open: #69696947;
474
488
  --sds-color-semantic-base-fill-pressed: #69696947;
475
489
  --sds-color-semantic-base-fill-primary: #000000;
476
490
  --sds-color-semantic-base-fill-selected: #ffffff;
477
- --sds-color-semantic-base-icon-disabled: #696969;
478
- --sds-color-semantic-base-icon-primary: #aaaaaa;
479
- --sds-color-semantic-base-icon-primary-hover: #ffffff;
480
- --sds-color-semantic-base-icon-primary-inverse: #000000;
481
- --sds-color-semantic-base-icon-primary-inverse-hover: #9b9b9b;
482
- --sds-color-semantic-base-icon-primary-inverse-pressed: #9b9b9b;
483
- --sds-color-semantic-base-icon-primary-pressed: #ffffff;
484
- --sds-color-semantic-base-icon-secondary: #ffffff;
485
- --sds-color-semantic-base-surface-background: #000000;
486
- --sds-color-semantic-base-surface-primary: #000000;
487
- --sds-color-semantic-base-surface-primary-inverse: #ffffff;
488
- --sds-color-semantic-base-surface-secondary: #333333;
489
- --sds-color-semantic-base-surface-tertiary: #494949;
491
+ --sds-color-semantic-base-ornament-disabled: #696969;
492
+ --sds-color-semantic-base-ornament-on-fill: #000000;
493
+ --sds-color-semantic-base-ornament-primary: #ffffff;
494
+ --sds-color-semantic-base-ornament-primary-inverse: #000000;
495
+ --sds-color-semantic-base-ornament-secondary: #cdcdcd;
496
+ --sds-color-semantic-base-ornament-secondary-hover: #ffffff;
497
+ --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
498
+ --sds-color-semantic-base-surface: #000000;
499
+ --sds-color-semantic-base-surface-inverse: #ffffff;
490
500
  --sds-color-semantic-base-text-disabled: #696969;
491
501
  --sds-color-semantic-base-text-primary: #ffffff;
492
502
  --sds-color-semantic-base-text-primary-inverse: #000000;
493
503
  --sds-color-semantic-base-text-secondary: #cdcdcd;
494
504
  --sds-color-semantic-base-text-secondary-inverse: #696969;
495
- --sds-color-semantic-accent-border: #a2c9ff;
496
- --sds-color-semantic-accent-border-focus: #a2c9ff;
497
- --sds-color-semantic-accent-border-hover: #cde3ff;
498
- --sds-color-semantic-accent-border-open: #a2c9ff;
499
- --sds-color-semantic-accent-border-pressed: #e2eeff;
500
- --sds-color-semantic-accent-border-selected: #a2c9ff;
501
- --sds-color-semantic-accent-fill-hover: #cde3ff;
502
- --sds-color-semantic-accent-fill-pressed: #e2eeff;
503
- --sds-color-semantic-accent-fill-primary: #a2c9ff;
504
- --sds-color-semantic-accent-icon: #a2c9ff;
505
- --sds-color-semantic-accent-icon-focus: #a2c9ff;
506
- --sds-color-semantic-accent-icon-hover: #cde3ff;
507
- --sds-color-semantic-accent-icon-open: #a2c9ff;
508
- --sds-color-semantic-accent-icon-pressed: #e2eeff;
509
- --sds-color-semantic-accent-icon-selected: #a2c9ff;
510
- --sds-color-semantic-accent-surface-primary: #002573;
511
- --sds-color-semantic-accent-surface-secondary: #a2c9ff;
512
- --sds-color-semantic-accent-text-action: #a2c9ff;
513
- --sds-color-semantic-accent-text-action-hover: #cde3ff;
514
- --sds-color-semantic-accent-text-action-pressed: #e2eeff;
505
+ --sds-color-semantic-accent-border: #5b9aff;
506
+ --sds-color-semantic-accent-border-focus: #5b9aff;
507
+ --sds-color-semantic-accent-border-hover: #a2c9ff;
508
+ --sds-color-semantic-accent-border-open: #5b9aff;
509
+ --sds-color-semantic-accent-border-pressed: #cde3ff;
510
+ --sds-color-semantic-accent-border-selected: #5b9aff;
511
+ --sds-color-semantic-accent-fill-hover: #a2c9ff;
512
+ --sds-color-semantic-accent-fill-pressed: #cde3ff;
513
+ --sds-color-semantic-accent-fill-primary: #5b9aff;
514
+ --sds-color-semantic-accent-ornament: #5b9aff;
515
+ --sds-color-semantic-accent-ornament-focus: #5b9aff;
516
+ --sds-color-semantic-accent-ornament-hover: #a2c9ff;
517
+ --sds-color-semantic-accent-ornament-open: #5b9aff;
518
+ --sds-color-semantic-accent-ornament-pressed: #cde3ff;
519
+ --sds-color-semantic-accent-ornament-selected: #5b9aff;
520
+ --sds-color-semantic-accent-surface-primary: #5b9aff;
521
+ --sds-color-semantic-accent-surface-secondary: #0f1d4a;
522
+ --sds-color-semantic-accent-text-action: #5b9aff;
523
+ --sds-color-semantic-accent-text-action-hover: #a2c9ff;
524
+ --sds-color-semantic-accent-text-action-pressed: #cde3ff;
515
525
  --sds-color-semantic-beta-border: #cebef8;
516
- --sds-color-semantic-beta-fill-hover: #e4dcfc;
517
- --sds-color-semantic-beta-fill-pressed: #f0ebfe;
518
- --sds-color-semantic-beta-fill-primary: #cebef8;
519
- --sds-color-semantic-beta-fill-secondary: #4b0190;
520
- --sds-color-semantic-beta-ornament: #e4dcfc;
521
- --sds-color-semantic-beta-surface-primary: #4b0190;
522
- --sds-color-semantic-beta-surface-secondary: #cebef8;
523
- --sds-color-semantic-beta-text: #e4dcfc;
526
+ --sds-color-semantic-beta-fill-hover: #cebef8;
527
+ --sds-color-semantic-beta-fill-pressed: #e4dcfc;
528
+ --sds-color-semantic-beta-fill-primary: #aa89ef;
529
+ --sds-color-semantic-beta-fill-secondary: #331252;
530
+ --sds-color-semantic-beta-ornament: #cebef8;
531
+ --sds-color-semantic-beta-surface-primary: #aa89ef;
532
+ --sds-color-semantic-beta-surface-secondary: #331252;
533
+ --sds-color-semantic-beta-text: #cebef8;
524
534
  --sds-color-semantic-info-border: #a2c9ff;
525
- --sds-color-semantic-info-fill-hover: #cde3ff;
526
- --sds-color-semantic-info-fill-pressed: #e2eeff;
527
- --sds-color-semantic-info-fill-primary: #a2c9ff;
528
- --sds-color-semantic-info-fill-secondary: #002573;
529
- --sds-color-semantic-info-ornament: #cde3ff;
530
- --sds-color-semantic-info-surface-primary: #002573;
531
- --sds-color-semantic-info-surface-secondary: #a2c9ff;
532
- --sds-color-semantic-info-text: #cde3ff;
533
- --sds-color-semantic-negative-border: #FF9385;
534
- --sds-color-semantic-negative-fill-hover: #FFBDB3;
535
- --sds-color-semantic-negative-fill-pressed: #FFD8D1;
536
- --sds-color-semantic-negative-fill-primary: #FF9385;
537
- --sds-color-semantic-negative-fill-secondary: #630008;
538
- --sds-color-semantic-negative-ornament: #FFBDB3;
539
- --sds-color-semantic-negative-surface-primary: #630008;
540
- --sds-color-semantic-negative-surface-secondary: #FF9385;
541
- --sds-color-semantic-negative-text: #FFBDB3;
535
+ --sds-color-semantic-info-fill-hover: #a2c9ff;
536
+ --sds-color-semantic-info-fill-pressed: #cde3ff;
537
+ --sds-color-semantic-info-fill-primary: #5b9aff;
538
+ --sds-color-semantic-info-fill-secondary: #0f1d4a;
539
+ --sds-color-semantic-info-ornament: #a2c9ff;
540
+ --sds-color-semantic-info-surface-primary: #5b9aff;
541
+ --sds-color-semantic-info-surface-secondary: #0f1d4a;
542
+ --sds-color-semantic-info-text: #a2c9ff;
543
+ --sds-color-semantic-negative-border: #ff988a;
544
+ --sds-color-semantic-negative-fill-hover: #ff988a;
545
+ --sds-color-semantic-negative-fill-pressed: #ffbdb3;
546
+ --sds-color-semantic-negative-fill-primary: #e05043;
547
+ --sds-color-semantic-negative-fill-secondary: #330603;
548
+ --sds-color-semantic-negative-ornament: #ff988a;
549
+ --sds-color-semantic-negative-surface-primary: #e05043;
550
+ --sds-color-semantic-negative-surface-secondary: #330603;
551
+ --sds-color-semantic-negative-text: #ff988a;
542
552
  --sds-color-semantic-neutral-border: #aaaaaa;
543
553
  --sds-color-semantic-neutral-fill-hover: #cdcdcd;
544
554
  --sds-color-semantic-neutral-fill-pressed: #ededed;
545
555
  --sds-color-semantic-neutral-fill-primary: #aaaaaa;
546
556
  --sds-color-semantic-neutral-fill-secondary: #333333;
547
557
  --sds-color-semantic-neutral-ornament: #ededed;
548
- --sds-color-semantic-neutral-surface-primary: #494949;
549
- --sds-color-semantic-neutral-surface-secondary: #aaaaaa;
558
+ --sds-color-semantic-neutral-surface-primary: #aaaaaa;
559
+ --sds-color-semantic-neutral-surface-secondary: #494949;
550
560
  --sds-color-semantic-neutral-text: #ededed;
551
- --sds-color-semantic-notice-border: #cf8e00;
552
- --sds-color-semantic-notice-fill-hover: #efad00;
553
- --sds-color-semantic-notice-fill-pressed: #ffdc9a;
554
- --sds-color-semantic-notice-fill-primary: #cf8e00;
555
- --sds-color-semantic-notice-fill-secondary: #552300;
556
- --sds-color-semantic-notice-ornament: #efad00;
557
- --sds-color-semantic-notice-surface-primary: #552300;
558
- --sds-color-semantic-notice-surface-secondary: #cf8e00;
559
- --sds-color-semantic-notice-text: #efad00;
561
+ --sds-color-semantic-notice-border: #e5bc63;
562
+ --sds-color-semantic-notice-fill-hover: #e5bc63;
563
+ --sds-color-semantic-notice-fill-pressed: #f5d789;
564
+ --sds-color-semantic-notice-fill-primary: #d9a943;
565
+ --sds-color-semantic-notice-fill-secondary: #361b07;
566
+ --sds-color-semantic-notice-ornament: #e5bc63;
567
+ --sds-color-semantic-notice-surface-primary: #d9a943;
568
+ --sds-color-semantic-notice-surface-secondary: #361b07;
569
+ --sds-color-semantic-notice-text: #e5bc63;
560
570
  --sds-color-semantic-positive-border: #85d898;
561
- --sds-color-semantic-positive-fill-hover: #bcecc5;
562
- --sds-color-semantic-positive-fill-pressed: #daf4de;
563
- --sds-color-semantic-positive-fill-primary: #85d898;
564
- --sds-color-semantic-positive-fill-secondary: #053918;
565
- --sds-color-semantic-positive-ornament: #bcecc5;
566
- --sds-color-semantic-positive-surface-primary: #053918;
567
- --sds-color-semantic-positive-surface-secondary: #85d898;
568
- --sds-color-semantic-positive-text: #bcecc5;
571
+ --sds-color-semantic-positive-fill-hover: #85d898;
572
+ --sds-color-semantic-positive-fill-pressed: #bcecc5;
573
+ --sds-color-semantic-positive-fill-primary: #4bae68;
574
+ --sds-color-semantic-positive-fill-secondary: #082608;
575
+ --sds-color-semantic-positive-ornament: #85d898;
576
+ --sds-color-semantic-positive-surface-primary: #4bae68;
577
+ --sds-color-semantic-positive-surface-secondary: #082608;
578
+ --sds-color-semantic-positive-text: #85d898;
569
579
  --sds-corner-l: 20px;
570
580
  --sds-corner-m: 4px;
571
581
  --sds-corner-s: 2px;