@ks-digital/designsystem-themes 0.0.1-alpha.52 → 0.0.1-alpha.53

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 (10) hide show
  1. package/README.md +8 -4
  2. package/dist/themes/ksdigital.css +130 -1
  3. package/dist/themes/ksdigital.tailwind.css +34 -0
  4. package/dist/themes/ledsagerbevis.css +130 -1
  5. package/dist/themes/ledsagerbevis.tailwind.css +34 -0
  6. package/dist/themes/minkommune.css +130 -1
  7. package/dist/themes/minkommune.tailwind.css +34 -0
  8. package/dist/themes/tilskudd.css +489 -360
  9. package/dist/themes/tilskudd.tailwind.css +34 -0
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -75,7 +75,11 @@ import '@ks-digital/designsystem-themes/ledsagerbevis.css'
75
75
 
76
76
  1. Add theme to `designsystemet.config.json`. The color names must match the other themes.
77
77
  2. Create design tokens for theme `pnpm run themes:create-tokens`
78
- 3. Build themes `pnpm run themes:build`
79
- 4. Add theme `exports`-field in `packages/themes/package.json`
80
- 5. Add theme to Storybook `tools/storybook/themes.ts`
81
- 6. Add theme to docs `apps/www/src/Temaer.mdx`
78
+ 3. Apply KS custom token aliases to the generated token sources `pnpm run themes:apply-custom-tokens:tokens`
79
+ 4. Build themes `pnpm run themes:build`.
80
+ This also applies KS custom token aliases to the generated theme outputs via `themes:apply-custom-tokens:outputs`.
81
+ 5. Add theme `exports`-field in `packages/themes/package.json`
82
+ 6. Add theme to Storybook `tools/storybook/themes.ts`
83
+ 7. Add theme to docs `apps/www/src/Temaer.mdx`
84
+
85
+ For the full pipeline, you can also run `pnpm run themes:generate`.
package/dist/themes/ksdigital.css CHANGED
@@ -1,7 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /*
3
3
  build: v1.12.1
4
- design-tokens: v1.12.1
5
4
  */
6
5
 
7
6
  @layer ds.theme.size-mode {
@@ -129,6 +128,7 @@ design-tokens: v1.12.1
129
128
  --ds-color-accent-border-default: #75778e;
130
129
  --ds-color-accent-border-strong: #595b77;
131
130
  --ds-color-accent-text-subtle: #595b77;
131
+ --ds-color-accent-icon-subtle: #595b77;
132
132
  --ds-color-accent-text-default: #25284c;
133
133
  --ds-color-accent-base-default: #00042e;
134
134
  --ds-color-accent-base-hover: #151940;
@@ -145,6 +145,7 @@ design-tokens: v1.12.1
145
145
  --ds-color-neutral-border-default: #74797e;
146
146
  --ds-color-neutral-border-strong: #585e64;
147
147
  --ds-color-neutral-text-subtle: #585e64;
148
+ --ds-color-neutral-icon-subtle: #585e64;
148
149
  --ds-color-neutral-text-default: #242c34;
149
150
  --ds-color-neutral-base-default: #1d252d;
150
151
  --ds-color-neutral-base-hover: #2f363d;
@@ -161,12 +162,30 @@ design-tokens: v1.12.1
161
162
  --ds-color-support1-border-default: #8060ec;
162
163
  --ds-color-support1-border-strong: #6244cb;
163
164
  --ds-color-support1-text-subtle: #6244cb;
165
+ --ds-color-support1-icon-subtle: #6244cb;
164
166
  --ds-color-support1-text-default: #2e2060;
165
167
  --ds-color-support1-base-default: #714eea;
166
168
  --ds-color-support1-base-hover: #5d40c0;
167
169
  --ds-color-support1-base-active: #493297;
168
170
  --ds-color-support1-base-contrast-subtle: #f3f0fd;
169
171
  --ds-color-support1-base-contrast-default: #ffffff;
172
+ --ds-color-support2-background-default: #ffffff;
173
+ --ds-color-support2-background-tinted: #f3f3f3;
174
+ --ds-color-support2-surface-default: #ffffff;
175
+ --ds-color-support2-surface-tinted: #e8e8e8;
176
+ --ds-color-support2-surface-hover: #dadada;
177
+ --ds-color-support2-surface-active: #cacaca;
178
+ --ds-color-support2-border-subtle: #bcbcbc;
179
+ --ds-color-support2-border-default: #797979;
180
+ --ds-color-support2-border-strong: #5d5d5d;
181
+ --ds-color-support2-text-subtle: #5d5d5d;
182
+ --ds-color-support2-icon-subtle: #5d5d5d;
183
+ --ds-color-support2-text-default: #2b2b2b;
184
+ --ds-color-support2-base-default: #ffffff;
185
+ --ds-color-support2-base-hover: #e8e8e8;
186
+ --ds-color-support2-base-active: #d1d1d1;
187
+ --ds-color-support2-base-contrast-subtle: #5e5e5e;
188
+ --ds-color-support2-base-contrast-default: #000000;
170
189
  --ds-color-info-background-default: #ffffff;
171
190
  --ds-color-info-background-tinted: #edf5fa;
172
191
  --ds-color-info-surface-default: #ffffff;
@@ -177,6 +196,7 @@ design-tokens: v1.12.1
177
196
  --ds-color-info-border-default: #1f7dc5;
178
197
  --ds-color-info-border-strong: #0860a3;
179
198
  --ds-color-info-text-subtle: #0860a3;
199
+ --ds-color-info-icon-subtle: #0860a3;
180
200
  --ds-color-info-text-default: #042d4d;
181
201
  --ds-color-info-base-default: #0a71c0;
182
202
  --ds-color-info-base-hover: #085d9f;
@@ -193,6 +213,7 @@ design-tokens: v1.12.1
193
213
  --ds-color-success-border-default: #108c22;
194
214
  --ds-color-success-border-strong: #056d13;
195
215
  --ds-color-success-text-subtle: #056d13;
216
+ --ds-color-success-icon-subtle: #056d13;
196
217
  --ds-color-success-text-default: #023409;
197
218
  --ds-color-success-base-default: #068718;
198
219
  --ds-color-success-base-hover: #057014;
@@ -209,6 +230,7 @@ design-tokens: v1.12.1
209
230
  --ds-color-warning-border-default: #a56d13;
210
231
  --ds-color-warning-border-strong: #80540f;
211
232
  --ds-color-warning-text-subtle: #80540f;
233
+ --ds-color-warning-icon-subtle: #80540f;
212
234
  --ds-color-warning-text-default: #3c2807;
213
235
  --ds-color-warning-base-default: #ea9b1b;
214
236
  --ds-color-warning-base-hover: #cd8818;
@@ -225,6 +247,7 @@ design-tokens: v1.12.1
225
247
  --ds-color-danger-border-default: #ce4d4d;
226
248
  --ds-color-danger-border-strong: #b81a1a;
227
249
  --ds-color-danger-text-subtle: #b81a1a;
250
+ --ds-color-danger-icon-subtle: #b81a1a;
228
251
  --ds-color-danger-text-default: #590d0d;
229
252
  --ds-color-danger-base-default: #c01b1b;
230
253
  --ds-color-danger-base-hover: #9b1616;
@@ -250,6 +273,7 @@ design-tokens: v1.12.1
250
273
  --ds-color-accent-border-default: #75778e;
251
274
  --ds-color-accent-border-strong: #595b77;
252
275
  --ds-color-accent-text-subtle: #595b77;
276
+ --ds-color-accent-icon-subtle: #595b77;
253
277
  --ds-color-accent-text-default: #25284c;
254
278
  --ds-color-accent-base-default: #00042e;
255
279
  --ds-color-accent-base-hover: #151940;
@@ -266,6 +290,7 @@ design-tokens: v1.12.1
266
290
  --ds-color-neutral-border-default: #74797e;
267
291
  --ds-color-neutral-border-strong: #585e64;
268
292
  --ds-color-neutral-text-subtle: #585e64;
293
+ --ds-color-neutral-icon-subtle: #585e64;
269
294
  --ds-color-neutral-text-default: #242c34;
270
295
  --ds-color-neutral-base-default: #1d252d;
271
296
  --ds-color-neutral-base-hover: #2f363d;
@@ -282,12 +307,30 @@ design-tokens: v1.12.1
282
307
  --ds-color-support1-border-default: #8060ec;
283
308
  --ds-color-support1-border-strong: #6244cb;
284
309
  --ds-color-support1-text-subtle: #6244cb;
310
+ --ds-color-support1-icon-subtle: #6244cb;
285
311
  --ds-color-support1-text-default: #2e2060;
286
312
  --ds-color-support1-base-default: #714eea;
287
313
  --ds-color-support1-base-hover: #5d40c0;
288
314
  --ds-color-support1-base-active: #493297;
289
315
  --ds-color-support1-base-contrast-subtle: #f3f0fd;
290
316
  --ds-color-support1-base-contrast-default: #ffffff;
317
+ --ds-color-support2-background-default: #ffffff;
318
+ --ds-color-support2-background-tinted: #f3f3f3;
319
+ --ds-color-support2-surface-default: #ffffff;
320
+ --ds-color-support2-surface-tinted: #e8e8e8;
321
+ --ds-color-support2-surface-hover: #dadada;
322
+ --ds-color-support2-surface-active: #cacaca;
323
+ --ds-color-support2-border-subtle: #bcbcbc;
324
+ --ds-color-support2-border-default: #797979;
325
+ --ds-color-support2-border-strong: #5d5d5d;
326
+ --ds-color-support2-text-subtle: #5d5d5d;
327
+ --ds-color-support2-icon-subtle: #5d5d5d;
328
+ --ds-color-support2-text-default: #2b2b2b;
329
+ --ds-color-support2-base-default: #ffffff;
330
+ --ds-color-support2-base-hover: #e8e8e8;
331
+ --ds-color-support2-base-active: #d1d1d1;
332
+ --ds-color-support2-base-contrast-subtle: #5e5e5e;
333
+ --ds-color-support2-base-contrast-default: #000000;
291
334
  --ds-color-info-background-default: #ffffff;
292
335
  --ds-color-info-background-tinted: #edf5fa;
293
336
  --ds-color-info-surface-default: #ffffff;
@@ -298,6 +341,7 @@ design-tokens: v1.12.1
298
341
  --ds-color-info-border-default: #1f7dc5;
299
342
  --ds-color-info-border-strong: #0860a3;
300
343
  --ds-color-info-text-subtle: #0860a3;
344
+ --ds-color-info-icon-subtle: #0860a3;
301
345
  --ds-color-info-text-default: #042d4d;
302
346
  --ds-color-info-base-default: #0a71c0;
303
347
  --ds-color-info-base-hover: #085d9f;
@@ -314,6 +358,7 @@ design-tokens: v1.12.1
314
358
  --ds-color-success-border-default: #108c22;
315
359
  --ds-color-success-border-strong: #056d13;
316
360
  --ds-color-success-text-subtle: #056d13;
361
+ --ds-color-success-icon-subtle: #056d13;
317
362
  --ds-color-success-text-default: #023409;
318
363
  --ds-color-success-base-default: #068718;
319
364
  --ds-color-success-base-hover: #057014;
@@ -330,6 +375,7 @@ design-tokens: v1.12.1
330
375
  --ds-color-warning-border-default: #a56d13;
331
376
  --ds-color-warning-border-strong: #80540f;
332
377
  --ds-color-warning-text-subtle: #80540f;
378
+ --ds-color-warning-icon-subtle: #80540f;
333
379
  --ds-color-warning-text-default: #3c2807;
334
380
  --ds-color-warning-base-default: #ea9b1b;
335
381
  --ds-color-warning-base-hover: #cd8818;
@@ -346,6 +392,7 @@ design-tokens: v1.12.1
346
392
  --ds-color-danger-border-default: #ce4d4d;
347
393
  --ds-color-danger-border-strong: #b81a1a;
348
394
  --ds-color-danger-text-subtle: #b81a1a;
395
+ --ds-color-danger-icon-subtle: #b81a1a;
349
396
  --ds-color-danger-text-default: #590d0d;
350
397
  --ds-color-danger-base-default: #c01b1b;
351
398
  --ds-color-danger-base-hover: #9b1616;
@@ -557,6 +604,7 @@ design-tokens: v1.12.1
557
604
  --ds-color-accent-border-default: #7e818f;
558
605
  --ds-color-accent-border-strong: #a5a7b1;
559
606
  --ds-color-accent-text-subtle: #a5a7b1;
607
+ --ds-color-accent-icon-subtle: #a5a7b1;
560
608
  --ds-color-accent-text-default: #ececee;
561
609
  --ds-color-accent-base-default: #a9aab8;
562
610
  --ds-color-accent-base-hover: #9395a7;
@@ -573,6 +621,7 @@ design-tokens: v1.12.1
573
621
  --ds-color-neutral-border-default: #7e8285;
574
622
  --ds-color-neutral-border-strong: #a6a8aa;
575
623
  --ds-color-neutral-text-subtle: #a6a8aa;
624
+ --ds-color-neutral-icon-subtle: #a6a8aa;
576
625
  --ds-color-neutral-text-default: #ececed;
577
626
  --ds-color-neutral-base-default: #a8abae;
578
627
  --ds-color-neutral-base-hover: #93979a;
@@ -589,12 +638,30 @@ design-tokens: v1.12.1
589
638
  --ds-color-support1-border-default: #8375cf;
590
639
  --ds-color-support1-border-strong: #aaa0de;
591
640
  --ds-color-support1-text-subtle: #aaa0de;
641
+ --ds-color-support1-icon-subtle: #aaa0de;
592
642
  --ds-color-support1-text-default: #edebf8;
593
643
  --ds-color-support1-base-default: #896cee;
594
644
  --ds-color-support1-base-hover: #9f87f1;
595
645
  --ds-color-support1-base-active: #b3a0f4;
596
646
  --ds-color-support1-base-contrast-subtle: #100d1c;
597
647
  --ds-color-support1-base-contrast-default: #000000;
648
+ --ds-color-support2-background-default: #181818;
649
+ --ds-color-support2-background-tinted: #1f1f1f;
650
+ --ds-color-support2-surface-default: #282828;
651
+ --ds-color-support2-surface-tinted: #2e2e2e;
652
+ --ds-color-support2-surface-hover: #353535;
653
+ --ds-color-support2-surface-active: #434343;
654
+ --ds-color-support2-border-subtle: #505050;
655
+ --ds-color-support2-border-default: #818181;
656
+ --ds-color-support2-border-strong: #a8a8a8;
657
+ --ds-color-support2-text-subtle: #a8a8a8;
658
+ --ds-color-support2-icon-subtle: #a8a8a8;
659
+ --ds-color-support2-text-default: #ececec;
660
+ --ds-color-support2-base-default: #000000;
661
+ --ds-color-support2-base-hover: #181818;
662
+ --ds-color-support2-base-active: #282828;
663
+ --ds-color-support2-base-contrast-subtle: #919191;
664
+ --ds-color-support2-base-contrast-default: #ffffff;
598
665
  --ds-color-info-background-default: #0d1925;
599
666
  --ds-color-info-background-tinted: #112130;
600
667
  --ds-color-info-surface-default: #15293d;
@@ -605,6 +672,7 @@ design-tokens: v1.12.1
605
672
  --ds-color-info-border-default: #5585b4;
606
673
  --ds-color-info-border-strong: #8aabcb;
607
674
  --ds-color-info-text-subtle: #8aabcb;
675
+ --ds-color-info-icon-subtle: #8aabcb;
608
676
  --ds-color-info-text-default: #e6edf4;
609
677
  --ds-color-info-base-default: #2d85c9;
610
678
  --ds-color-info-base-hover: #519ad2;
@@ -621,6 +689,7 @@ design-tokens: v1.12.1
621
689
  --ds-color-success-border-default: #528f52;
622
690
  --ds-color-success-border-strong: #89b289;
623
691
  --ds-color-success-text-subtle: #89b289;
692
+ --ds-color-success-icon-subtle: #89b289;
624
693
  --ds-color-success-text-default: #e6efe6;
625
694
  --ds-color-success-base-default: #138d24;
626
695
  --ds-color-success-base-hover: #3ca14b;
@@ -637,6 +706,7 @@ design-tokens: v1.12.1
637
706
  --ds-color-warning-border-default: #a37a46;
638
707
  --ds-color-warning-border-strong: #d39e5b;
639
708
  --ds-color-warning-text-subtle: #d39e5b;
709
+ --ds-color-warning-icon-subtle: #d39e5b;
640
710
  --ds-color-warning-text-default: #f7ebdb;
641
711
  --ds-color-warning-base-default: #60400b;
642
712
  --ds-color-warning-base-hover: #7a510e;
@@ -653,6 +723,7 @@ design-tokens: v1.12.1
653
723
  --ds-color-danger-border-default: #bc6b64;
654
724
  --ds-color-danger-border-strong: #d19a96;
655
725
  --ds-color-danger-text-subtle: #d19a96;
726
+ --ds-color-danger-icon-subtle: #d19a96;
656
727
  --ds-color-danger-text-default: #f5eae9;
657
728
  --ds-color-danger-base-default: #d76e6e;
658
729
  --ds-color-danger-base-hover: #df8b8b;
@@ -678,6 +749,7 @@ design-tokens: v1.12.1
678
749
  --ds-color-accent-border-default: #7e818f;
679
750
  --ds-color-accent-border-strong: #a5a7b1;
680
751
  --ds-color-accent-text-subtle: #a5a7b1;
752
+ --ds-color-accent-icon-subtle: #a5a7b1;
681
753
  --ds-color-accent-text-default: #ececee;
682
754
  --ds-color-accent-base-default: #a9aab8;
683
755
  --ds-color-accent-base-hover: #9395a7;
@@ -694,6 +766,7 @@ design-tokens: v1.12.1
694
766
  --ds-color-neutral-border-default: #7e8285;
695
767
  --ds-color-neutral-border-strong: #a6a8aa;
696
768
  --ds-color-neutral-text-subtle: #a6a8aa;
769
+ --ds-color-neutral-icon-subtle: #a6a8aa;
697
770
  --ds-color-neutral-text-default: #ececed;
698
771
  --ds-color-neutral-base-default: #a8abae;
699
772
  --ds-color-neutral-base-hover: #93979a;
@@ -710,12 +783,30 @@ design-tokens: v1.12.1
710
783
  --ds-color-support1-border-default: #8375cf;
711
784
  --ds-color-support1-border-strong: #aaa0de;
712
785
  --ds-color-support1-text-subtle: #aaa0de;
786
+ --ds-color-support1-icon-subtle: #aaa0de;
713
787
  --ds-color-support1-text-default: #edebf8;
714
788
  --ds-color-support1-base-default: #896cee;
715
789
  --ds-color-support1-base-hover: #9f87f1;
716
790
  --ds-color-support1-base-active: #b3a0f4;
717
791
  --ds-color-support1-base-contrast-subtle: #100d1c;
718
792
  --ds-color-support1-base-contrast-default: #000000;
793
+ --ds-color-support2-background-default: #181818;
794
+ --ds-color-support2-background-tinted: #1f1f1f;
795
+ --ds-color-support2-surface-default: #282828;
796
+ --ds-color-support2-surface-tinted: #2e2e2e;
797
+ --ds-color-support2-surface-hover: #353535;
798
+ --ds-color-support2-surface-active: #434343;
799
+ --ds-color-support2-border-subtle: #505050;
800
+ --ds-color-support2-border-default: #818181;
801
+ --ds-color-support2-border-strong: #a8a8a8;
802
+ --ds-color-support2-text-subtle: #a8a8a8;
803
+ --ds-color-support2-icon-subtle: #a8a8a8;
804
+ --ds-color-support2-text-default: #ececec;
805
+ --ds-color-support2-base-default: #000000;
806
+ --ds-color-support2-base-hover: #181818;
807
+ --ds-color-support2-base-active: #282828;
808
+ --ds-color-support2-base-contrast-subtle: #919191;
809
+ --ds-color-support2-base-contrast-default: #ffffff;
719
810
  --ds-color-info-background-default: #0d1925;
720
811
  --ds-color-info-background-tinted: #112130;
721
812
  --ds-color-info-surface-default: #15293d;
@@ -726,6 +817,7 @@ design-tokens: v1.12.1
726
817
  --ds-color-info-border-default: #5585b4;
727
818
  --ds-color-info-border-strong: #8aabcb;
728
819
  --ds-color-info-text-subtle: #8aabcb;
820
+ --ds-color-info-icon-subtle: #8aabcb;
729
821
  --ds-color-info-text-default: #e6edf4;
730
822
  --ds-color-info-base-default: #2d85c9;
731
823
  --ds-color-info-base-hover: #519ad2;
@@ -742,6 +834,7 @@ design-tokens: v1.12.1
742
834
  --ds-color-success-border-default: #528f52;
743
835
  --ds-color-success-border-strong: #89b289;
744
836
  --ds-color-success-text-subtle: #89b289;
837
+ --ds-color-success-icon-subtle: #89b289;
745
838
  --ds-color-success-text-default: #e6efe6;
746
839
  --ds-color-success-base-default: #138d24;
747
840
  --ds-color-success-base-hover: #3ca14b;
@@ -758,6 +851,7 @@ design-tokens: v1.12.1
758
851
  --ds-color-warning-border-default: #a37a46;
759
852
  --ds-color-warning-border-strong: #d39e5b;
760
853
  --ds-color-warning-text-subtle: #d39e5b;
854
+ --ds-color-warning-icon-subtle: #d39e5b;
761
855
  --ds-color-warning-text-default: #f7ebdb;
762
856
  --ds-color-warning-base-default: #60400b;
763
857
  --ds-color-warning-base-hover: #7a510e;
@@ -774,6 +868,7 @@ design-tokens: v1.12.1
774
868
  --ds-color-danger-border-default: #bc6b64;
775
869
  --ds-color-danger-border-strong: #d19a96;
776
870
  --ds-color-danger-text-subtle: #d19a96;
871
+ --ds-color-danger-icon-subtle: #d19a96;
777
872
  --ds-color-danger-text-default: #f5eae9;
778
873
  --ds-color-danger-base-default: #d76e6e;
779
874
  --ds-color-danger-base-hover: #df8b8b;
@@ -890,6 +985,7 @@ design-tokens: v1.12.1
890
985
  --ds-color-border-default: var(--ds-color-accent-border-default);
891
986
  --ds-color-border-strong: var(--ds-color-accent-border-strong);
892
987
  --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
988
+ --ds-color-icon-subtle: var(--ds-color-accent-icon-subtle);
893
989
  --ds-color-text-default: var(--ds-color-accent-text-default);
894
990
  --ds-color-base-default: var(--ds-color-accent-base-default);
895
991
  --ds-color-base-hover: var(--ds-color-accent-base-hover);
@@ -916,6 +1012,7 @@ design-tokens: v1.12.1
916
1012
  --ds-color-border-default: var(--ds-color-danger-border-default);
917
1013
  --ds-color-border-strong: var(--ds-color-danger-border-strong);
918
1014
  --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1015
+ --ds-color-icon-subtle: var(--ds-color-danger-icon-subtle);
919
1016
  --ds-color-text-default: var(--ds-color-danger-text-default);
920
1017
  --ds-color-base-default: var(--ds-color-danger-base-default);
921
1018
  --ds-color-base-hover: var(--ds-color-danger-base-hover);
@@ -942,6 +1039,7 @@ design-tokens: v1.12.1
942
1039
  --ds-color-border-default: var(--ds-color-info-border-default);
943
1040
  --ds-color-border-strong: var(--ds-color-info-border-strong);
944
1041
  --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1042
+ --ds-color-icon-subtle: var(--ds-color-info-icon-subtle);
945
1043
  --ds-color-text-default: var(--ds-color-info-text-default);
946
1044
  --ds-color-base-default: var(--ds-color-info-base-default);
947
1045
  --ds-color-base-hover: var(--ds-color-info-base-hover);
@@ -966,6 +1064,7 @@ design-tokens: v1.12.1
966
1064
  --ds-color-border-default: var(--ds-color-neutral-border-default);
967
1065
  --ds-color-border-strong: var(--ds-color-neutral-border-strong);
968
1066
  --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
1067
+ --ds-color-icon-subtle: var(--ds-color-neutral-icon-subtle);
969
1068
  --ds-color-text-default: var(--ds-color-neutral-text-default);
970
1069
  --ds-color-base-default: var(--ds-color-neutral-base-default);
971
1070
  --ds-color-base-hover: var(--ds-color-neutral-base-hover);
@@ -992,6 +1091,7 @@ design-tokens: v1.12.1
992
1091
  --ds-color-border-default: var(--ds-color-success-border-default);
993
1092
  --ds-color-border-strong: var(--ds-color-success-border-strong);
994
1093
  --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1094
+ --ds-color-icon-subtle: var(--ds-color-success-icon-subtle);
995
1095
  --ds-color-text-default: var(--ds-color-success-text-default);
996
1096
  --ds-color-base-default: var(--ds-color-success-base-default);
997
1097
  --ds-color-base-hover: var(--ds-color-success-base-hover);
@@ -1018,6 +1118,7 @@ design-tokens: v1.12.1
1018
1118
  --ds-color-border-default: var(--ds-color-support1-border-default);
1019
1119
  --ds-color-border-strong: var(--ds-color-support1-border-strong);
1020
1120
  --ds-color-text-subtle: var(--ds-color-support1-text-subtle);
1121
+ --ds-color-icon-subtle: var(--ds-color-support1-icon-subtle);
1021
1122
  --ds-color-text-default: var(--ds-color-support1-text-default);
1022
1123
  --ds-color-base-default: var(--ds-color-support1-base-default);
1023
1124
  --ds-color-base-hover: var(--ds-color-support1-base-hover);
@@ -1031,6 +1132,33 @@ design-tokens: v1.12.1
1031
1132
  }
1032
1133
  }
1033
1134
 
1135
+ @layer ds.theme.color {
1136
+ [data-color='support2'],
1137
+ [data-color-scheme][data-color='support2'] {
1138
+ --ds-color-background-default: var(--ds-color-support2-background-default);
1139
+ --ds-color-background-tinted: var(--ds-color-support2-background-tinted);
1140
+ --ds-color-surface-default: var(--ds-color-support2-surface-default);
1141
+ --ds-color-surface-tinted: var(--ds-color-support2-surface-tinted);
1142
+ --ds-color-surface-hover: var(--ds-color-support2-surface-hover);
1143
+ --ds-color-surface-active: var(--ds-color-support2-surface-active);
1144
+ --ds-color-border-subtle: var(--ds-color-support2-border-subtle);
1145
+ --ds-color-border-default: var(--ds-color-support2-border-default);
1146
+ --ds-color-border-strong: var(--ds-color-support2-border-strong);
1147
+ --ds-color-text-subtle: var(--ds-color-support2-text-subtle);
1148
+ --ds-color-icon-subtle: var(--ds-color-support2-icon-subtle);
1149
+ --ds-color-text-default: var(--ds-color-support2-text-default);
1150
+ --ds-color-base-default: var(--ds-color-support2-base-default);
1151
+ --ds-color-base-hover: var(--ds-color-support2-base-hover);
1152
+ --ds-color-base-active: var(--ds-color-support2-base-active);
1153
+ --ds-color-base-contrast-subtle: var(
1154
+ --ds-color-support2-base-contrast-subtle
1155
+ );
1156
+ --ds-color-base-contrast-default: var(
1157
+ --ds-color-support2-base-contrast-default
1158
+ );
1159
+ }
1160
+ }
1161
+
1034
1162
  @layer ds.theme.color {
1035
1163
  [data-color='warning'],
1036
1164
  [data-color-scheme][data-color='warning'] {
@@ -1044,6 +1172,7 @@ design-tokens: v1.12.1
1044
1172
  --ds-color-border-default: var(--ds-color-warning-border-default);
1045
1173
  --ds-color-border-strong: var(--ds-color-warning-border-strong);
1046
1174
  --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1175
+ --ds-color-icon-subtle: var(--ds-color-warning-icon-subtle);
1047
1176
  --ds-color-text-default: var(--ds-color-warning-text-default);
1048
1177
  --ds-color-base-default: var(--ds-color-warning-base-default);
1049
1178
  --ds-color-base-hover: var(--ds-color-warning-base-hover);
package/dist/themes/ksdigital.tailwind.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --color-accent-border-default: var(--ds-color-accent-border-default);
19
19
  --color-accent-border-strong: var(--ds-color-accent-border-strong);
20
20
  --color-accent-border-subtle: var(--ds-color-accent-border-subtle);
21
+ --color-accent-icon-subtle: var(--ds-color-accent-icon-subtle);
21
22
  --color-accent-surface-active: var(--ds-color-accent-surface-active);
22
23
  --color-accent-surface-default: var(--ds-color-accent-surface-default);
23
24
  --color-accent-surface-hover: var(--ds-color-accent-surface-hover);
@@ -48,12 +49,14 @@
48
49
  --color-danger-border-default: var(--ds-color-danger-border-default);
49
50
  --color-danger-border-strong: var(--ds-color-danger-border-strong);
50
51
  --color-danger-border-subtle: var(--ds-color-danger-border-subtle);
52
+ --color-danger-icon-subtle: var(--ds-color-danger-icon-subtle);
51
53
  --color-danger-surface-active: var(--ds-color-danger-surface-active);
52
54
  --color-danger-surface-default: var(--ds-color-danger-surface-default);
53
55
  --color-danger-surface-hover: var(--ds-color-danger-surface-hover);
54
56
  --color-danger-surface-tinted: var(--ds-color-danger-surface-tinted);
55
57
  --color-danger-text-default: var(--ds-color-danger-text-default);
56
58
  --color-danger-text-subtle: var(--ds-color-danger-text-subtle);
59
+ --color-icon-subtle: var(--ds-color-icon-subtle);
57
60
  --color-info-background-default: var(--ds-color-info-background-default);
58
61
  --color-info-background-tinted: var(--ds-color-info-background-tinted);
59
62
  --color-info-base-active: var(--ds-color-info-base-active);
@@ -66,6 +69,7 @@
66
69
  --color-info-border-default: var(--ds-color-info-border-default);
67
70
  --color-info-border-strong: var(--ds-color-info-border-strong);
68
71
  --color-info-border-subtle: var(--ds-color-info-border-subtle);
72
+ --color-info-icon-subtle: var(--ds-color-info-icon-subtle);
69
73
  --color-info-surface-active: var(--ds-color-info-surface-active);
70
74
  --color-info-surface-default: var(--ds-color-info-surface-default);
71
75
  --color-info-surface-hover: var(--ds-color-info-surface-hover);
@@ -88,6 +92,7 @@
88
92
  --color-neutral-border-default: var(--ds-color-neutral-border-default);
89
93
  --color-neutral-border-strong: var(--ds-color-neutral-border-strong);
90
94
  --color-neutral-border-subtle: var(--ds-color-neutral-border-subtle);
95
+ --color-neutral-icon-subtle: var(--ds-color-neutral-icon-subtle);
91
96
  --color-neutral-surface-active: var(--ds-color-neutral-surface-active);
92
97
  --color-neutral-surface-default: var(--ds-color-neutral-surface-default);
93
98
  --color-neutral-surface-hover: var(--ds-color-neutral-surface-hover);
@@ -110,6 +115,7 @@
110
115
  --color-success-border-default: var(--ds-color-success-border-default);
111
116
  --color-success-border-strong: var(--ds-color-success-border-strong);
112
117
  --color-success-border-subtle: var(--ds-color-success-border-subtle);
118
+ --color-success-icon-subtle: var(--ds-color-success-icon-subtle);
113
119
  --color-success-surface-active: var(--ds-color-success-surface-active);
114
120
  --color-success-surface-default: var(--ds-color-success-surface-default);
115
121
  --color-success-surface-hover: var(--ds-color-success-surface-hover);
@@ -134,12 +140,38 @@
134
140
  --color-support1-border-default: var(--ds-color-support1-border-default);
135
141
  --color-support1-border-strong: var(--ds-color-support1-border-strong);
136
142
  --color-support1-border-subtle: var(--ds-color-support1-border-subtle);
143
+ --color-support1-icon-subtle: var(--ds-color-support1-icon-subtle);
137
144
  --color-support1-surface-active: var(--ds-color-support1-surface-active);
138
145
  --color-support1-surface-default: var(--ds-color-support1-surface-default);
139
146
  --color-support1-surface-hover: var(--ds-color-support1-surface-hover);
140
147
  --color-support1-surface-tinted: var(--ds-color-support1-surface-tinted);
141
148
  --color-support1-text-default: var(--ds-color-support1-text-default);
142
149
  --color-support1-text-subtle: var(--ds-color-support1-text-subtle);
150
+ --color-support2-background-default: var(
151
+ --ds-color-support2-background-default
152
+ );
153
+ --color-support2-background-tinted: var(
154
+ --ds-color-support2-background-tinted
155
+ );
156
+ --color-support2-base-active: var(--ds-color-support2-base-active);
157
+ --color-support2-base-contrast-default: var(
158
+ --ds-color-support2-base-contrast-default
159
+ );
160
+ --color-support2-base-contrast-subtle: var(
161
+ --ds-color-support2-base-contrast-subtle
162
+ );
163
+ --color-support2-base-default: var(--ds-color-support2-base-default);
164
+ --color-support2-base-hover: var(--ds-color-support2-base-hover);
165
+ --color-support2-border-default: var(--ds-color-support2-border-default);
166
+ --color-support2-border-strong: var(--ds-color-support2-border-strong);
167
+ --color-support2-border-subtle: var(--ds-color-support2-border-subtle);
168
+ --color-support2-icon-subtle: var(--ds-color-support2-icon-subtle);
169
+ --color-support2-surface-active: var(--ds-color-support2-surface-active);
170
+ --color-support2-surface-default: var(--ds-color-support2-surface-default);
171
+ --color-support2-surface-hover: var(--ds-color-support2-surface-hover);
172
+ --color-support2-surface-tinted: var(--ds-color-support2-surface-tinted);
173
+ --color-support2-text-default: var(--ds-color-support2-text-default);
174
+ --color-support2-text-subtle: var(--ds-color-support2-text-subtle);
143
175
  --color-surface-active: var(--ds-color-surface-active);
144
176
  --color-surface-default: var(--ds-color-surface-default);
145
177
  --color-surface-hover: var(--ds-color-surface-hover);
@@ -162,6 +194,7 @@
162
194
  --color-warning-border-default: var(--ds-color-warning-border-default);
163
195
  --color-warning-border-strong: var(--ds-color-warning-border-strong);
164
196
  --color-warning-border-subtle: var(--ds-color-warning-border-subtle);
197
+ --color-warning-icon-subtle: var(--ds-color-warning-icon-subtle);
165
198
  --color-warning-surface-active: var(--ds-color-warning-surface-active);
166
199
  --color-warning-surface-default: var(--ds-color-warning-surface-default);
167
200
  --color-warning-surface-hover: var(--ds-color-warning-surface-hover);
@@ -203,6 +236,7 @@
203
236
  --color-border-default: var(--ds-color-border-default);
204
237
  --color-border-strong: var(--ds-color-border-strong);
205
238
  --color-text-subtle: var(--ds-color-text-subtle);
239
+ --color-icon-subtle: var(--ds-color-icon-subtle);
206
240
  --color-text-default: var(--ds-color-text-default);
207
241
  --color-base-default: var(--ds-color-base-default);
208
242
  --color-base-hover: var(--ds-color-base-hover);