@camunda/design-system 0.16.0 → 0.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  :root, :host {
4
4
  --font-sans: "Geist Sans", sans-serif;
@@ -167,19 +167,19 @@
167
167
  position: sticky;
168
168
  }
169
169
  .inset-0 {
170
- inset: calc(var(--spacing) * 0);
170
+ inset: 0;
171
171
  }
172
172
  .inset-x-0 {
173
- inset-inline: calc(var(--spacing) * 0);
173
+ inset-inline: 0;
174
174
  }
175
175
  .inset-y-0 {
176
- inset-block: calc(var(--spacing) * 0);
176
+ inset-block: 0;
177
177
  }
178
178
  .-top-0\.5 {
179
179
  top: calc(var(--spacing) * -0.5);
180
180
  }
181
181
  .top-0 {
182
- top: calc(var(--spacing) * 0);
182
+ top: 0;
183
183
  }
184
184
  .top-1\/2 {
185
185
  top: calc(1 / 2 * 100%);
@@ -194,7 +194,7 @@
194
194
  right: calc(var(--spacing) * -0.5);
195
195
  }
196
196
  .right-0 {
197
- right: calc(var(--spacing) * 0);
197
+ right: 0;
198
198
  }
199
199
  .right-2 {
200
200
  right: calc(var(--spacing) * 2);
@@ -203,10 +203,10 @@
203
203
  right: calc(var(--spacing) * 3);
204
204
  }
205
205
  .bottom-0 {
206
- bottom: calc(var(--spacing) * 0);
206
+ bottom: 0;
207
207
  }
208
208
  .left-0 {
209
- left: calc(var(--spacing) * 0);
209
+ left: 0;
210
210
  }
211
211
  .left-0\.5 {
212
212
  left: calc(var(--spacing) * 0.5);
@@ -266,7 +266,7 @@
266
266
  }
267
267
  }
268
268
  .m-0 {
269
- margin: calc(var(--spacing) * 0);
269
+ margin: 0;
270
270
  }
271
271
  .-mx-1 {
272
272
  margin-inline: calc(var(--spacing) * -1);
@@ -281,7 +281,7 @@
281
281
  margin-inline: calc(var(--spacing) * -6);
282
282
  }
283
283
  .mx-1 {
284
- margin-inline: calc(var(--spacing) * 1);
284
+ margin-inline: var(--spacing);
285
285
  }
286
286
  .mx-2 {
287
287
  margin-inline: calc(var(--spacing) * 2);
@@ -290,7 +290,7 @@
290
290
  margin-inline: auto;
291
291
  }
292
292
  .my-1 {
293
- margin-block: calc(var(--spacing) * 1);
293
+ margin-block: var(--spacing);
294
294
  }
295
295
  .my-3 {
296
296
  margin-block: calc(var(--spacing) * 3);
@@ -299,13 +299,13 @@
299
299
  margin-top: calc(var(--spacing) * -1);
300
300
  }
301
301
  .mt-0 {
302
- margin-top: calc(var(--spacing) * 0);
302
+ margin-top: 0;
303
303
  }
304
304
  .mt-0\.5 {
305
305
  margin-top: calc(var(--spacing) * 0.5);
306
306
  }
307
307
  .mt-1 {
308
- margin-top: calc(var(--spacing) * 1);
308
+ margin-top: var(--spacing);
309
309
  }
310
310
  .mt-1\.5 {
311
311
  margin-top: calc(var(--spacing) * 1.5);
@@ -347,7 +347,7 @@
347
347
  margin-bottom: calc(var(--spacing) * -6);
348
348
  }
349
349
  .mb-1 {
350
- margin-bottom: calc(var(--spacing) * 1);
350
+ margin-bottom: var(--spacing);
351
351
  }
352
352
  .mb-2 {
353
353
  margin-bottom: calc(var(--spacing) * 2);
@@ -371,7 +371,7 @@
371
371
  margin-left: calc(var(--spacing) * 0.5);
372
372
  }
373
373
  .ml-1 {
374
- margin-left: calc(var(--spacing) * 1);
374
+ margin-left: var(--spacing);
375
375
  }
376
376
  .ml-4 {
377
377
  margin-left: calc(var(--spacing) * 4);
@@ -477,7 +477,7 @@
477
477
  height: var(--radix-select-trigger-height);
478
478
  }
479
479
  .h-1 {
480
- height: calc(var(--spacing) * 1);
480
+ height: var(--spacing);
481
481
  }
482
482
  .h-2 {
483
483
  height: calc(var(--spacing) * 2);
@@ -582,7 +582,7 @@
582
582
  max-height: calc(100dvh - 2rem);
583
583
  }
584
584
  .min-h-0 {
585
- min-height: calc(var(--spacing) * 0);
585
+ min-height: 0;
586
586
  }
587
587
  .min-h-9 {
588
588
  min-height: calc(var(--spacing) * 9);
@@ -618,7 +618,7 @@
618
618
  min-height: 100vh;
619
619
  }
620
620
  .w-1 {
621
- width: calc(var(--spacing) * 1);
621
+ width: var(--spacing);
622
622
  }
623
623
  .w-1\/2 {
624
624
  width: calc(1 / 2 * 100%);
@@ -774,7 +774,7 @@
774
774
  min-width: var(--radix-select-trigger-width);
775
775
  }
776
776
  .min-w-0 {
777
- min-width: calc(var(--spacing) * 0);
777
+ min-width: 0;
778
778
  }
779
779
  .min-w-5 {
780
780
  min-width: calc(var(--spacing) * 5);
@@ -853,6 +853,34 @@
853
853
  .transform {
854
854
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
855
855
  }
856
+ .shimmer {
857
+ --_spread: var(--shimmer-spread, calc(3ch + 40px));
858
+ --_base: currentColor;
859
+ --_highlight: var(
860
+ --shimmer-color,
861
+ oklch(from currentColor l c h / calc(alpha* 0.2))
862
+ );
863
+ background-image: var( --shimmer-image, linear-gradient( calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * 0.5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * 0.5), var(--_base) calc(50% + var(--_spread)) ) );
864
+ @supports (color: color-mix(in lab, red, red)) {
865
+ background-image: var( --shimmer-image, linear-gradient( calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5), var(--_base) calc(50% + var(--_spread)) ) );
866
+ }
867
+ background-repeat: no-repeat;
868
+ background-size: calc(200% + var(--_spread) * 2) 100%;
869
+ background-position: 0 0;
870
+ background-clip: text;
871
+ -webkit-background-clip: text;
872
+ -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
873
+ animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
874
+ &:is(.dark *) {
875
+ --_highlight: var(
876
+ --shimmer-color,
877
+ oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
878
+ );
879
+ }
880
+ &:where([dir="rtl"], [dir="rtl"] *) {
881
+ animation-direction: reverse;
882
+ }
883
+ }
856
884
  .animate-pulse {
857
885
  animation: var(--animate-pulse);
858
886
  }
@@ -884,10 +912,10 @@
884
912
  resize: vertical;
885
913
  }
886
914
  .scroll-my-1 {
887
- scroll-margin-block: calc(var(--spacing) * 1);
915
+ scroll-margin-block: var(--spacing);
888
916
  }
889
917
  .scroll-py-1 {
890
- scroll-padding-block: calc(var(--spacing) * 1);
918
+ scroll-padding-block: var(--spacing);
891
919
  }
892
920
  .list-inside {
893
921
  list-style-position: inside;
@@ -959,13 +987,13 @@
959
987
  justify-content: flex-start;
960
988
  }
961
989
  .gap-0 {
962
- gap: calc(var(--spacing) * 0);
990
+ gap: 0;
963
991
  }
964
992
  .gap-0\.5 {
965
993
  gap: calc(var(--spacing) * 0.5);
966
994
  }
967
995
  .gap-1 {
968
- gap: calc(var(--spacing) * 1);
996
+ gap: var(--spacing);
969
997
  }
970
998
  .gap-1\.5 {
971
999
  gap: calc(var(--spacing) * 1.5);
@@ -1009,8 +1037,8 @@
1009
1037
  .space-y-1 {
1010
1038
  :where(& > :not(:last-child)) {
1011
1039
  --tw-space-y-reverse: 0;
1012
- margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
1013
- margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
1040
+ margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
1041
+ margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
1014
1042
  }
1015
1043
  }
1016
1044
  .space-y-1\.5 {
@@ -1055,7 +1083,7 @@
1055
1083
  column-gap: calc(var(--spacing) * 8);
1056
1084
  }
1057
1085
  .gap-y-1 {
1058
- row-gap: calc(var(--spacing) * 1);
1086
+ row-gap: var(--spacing);
1059
1087
  }
1060
1088
  .gap-y-3 {
1061
1089
  row-gap: calc(var(--spacing) * 3);
@@ -1453,13 +1481,13 @@
1453
1481
  object-fit: cover;
1454
1482
  }
1455
1483
  .p-0 {
1456
- padding: calc(var(--spacing) * 0);
1484
+ padding: 0;
1457
1485
  }
1458
1486
  .p-0\.5 {
1459
1487
  padding: calc(var(--spacing) * 0.5);
1460
1488
  }
1461
1489
  .p-1 {
1462
- padding: calc(var(--spacing) * 1);
1490
+ padding: var(--spacing);
1463
1491
  }
1464
1492
  .p-1\.5 {
1465
1493
  padding: calc(var(--spacing) * 1.5);
@@ -1504,7 +1532,7 @@
1504
1532
  padding: 1px;
1505
1533
  }
1506
1534
  .px-1 {
1507
- padding-inline: calc(var(--spacing) * 1);
1535
+ padding-inline: var(--spacing);
1508
1536
  }
1509
1537
  .px-1\.5 {
1510
1538
  padding-inline: calc(var(--spacing) * 1.5);
@@ -1531,7 +1559,7 @@
1531
1559
  padding-block: calc(var(--spacing) * 0.5);
1532
1560
  }
1533
1561
  .py-1 {
1534
- padding-block: calc(var(--spacing) * 1);
1562
+ padding-block: var(--spacing);
1535
1563
  }
1536
1564
  .py-1\.5 {
1537
1565
  padding-block: calc(var(--spacing) * 1.5);
@@ -1561,13 +1589,13 @@
1561
1589
  padding-block: calc(var(--spacing) * 16);
1562
1590
  }
1563
1591
  .pt-0 {
1564
- padding-top: calc(var(--spacing) * 0);
1592
+ padding-top: 0;
1565
1593
  }
1566
1594
  .pt-0\.5 {
1567
1595
  padding-top: calc(var(--spacing) * 0.5);
1568
1596
  }
1569
1597
  .pt-1 {
1570
- padding-top: calc(var(--spacing) * 1);
1598
+ padding-top: var(--spacing);
1571
1599
  }
1572
1600
  .pt-2 {
1573
1601
  padding-top: calc(var(--spacing) * 2);
@@ -1582,7 +1610,7 @@
1582
1610
  padding-right: calc(var(--spacing) * 0.5);
1583
1611
  }
1584
1612
  .pr-1 {
1585
- padding-right: calc(var(--spacing) * 1);
1613
+ padding-right: var(--spacing);
1586
1614
  }
1587
1615
  .pr-2 {
1588
1616
  padding-right: calc(var(--spacing) * 2);
@@ -1600,16 +1628,16 @@
1600
1628
  padding-right: calc(var(--spacing) * 9);
1601
1629
  }
1602
1630
  .pb-0 {
1603
- padding-bottom: calc(var(--spacing) * 0);
1631
+ padding-bottom: 0;
1604
1632
  }
1605
1633
  .pb-1 {
1606
- padding-bottom: calc(var(--spacing) * 1);
1634
+ padding-bottom: var(--spacing);
1607
1635
  }
1608
1636
  .pb-4 {
1609
1637
  padding-bottom: calc(var(--spacing) * 4);
1610
1638
  }
1611
1639
  .pl-1 {
1612
- padding-left: calc(var(--spacing) * 1);
1640
+ padding-left: var(--spacing);
1613
1641
  }
1614
1642
  .pl-2 {
1615
1643
  padding-left: calc(var(--spacing) * 2);
@@ -1809,6 +1837,9 @@
1809
1837
  .text-danger-foreground-strong {
1810
1838
  color: var(--danger-foreground-strong);
1811
1839
  }
1840
+ .text-danger-foreground-subtle {
1841
+ color: var(--danger-foreground-subtle);
1842
+ }
1812
1843
  .text-emerald-600 {
1813
1844
  color: var(--color-emerald-600);
1814
1845
  }
@@ -2304,7 +2335,7 @@
2304
2335
  &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
2305
2336
  &::after {
2306
2337
  content: var(--tw-content);
2307
- inset-inline: calc(var(--spacing) * 0);
2338
+ inset-inline: 0;
2308
2339
  }
2309
2340
  }
2310
2341
  }
@@ -2328,7 +2359,7 @@
2328
2359
  &:is(:where(.group\/tabs):where([data-orientation="vertical"]) *) {
2329
2360
  &::after {
2330
2361
  content: var(--tw-content);
2331
- inset-block: calc(var(--spacing) * 0);
2362
+ inset-block: 0;
2332
2363
  }
2333
2364
  }
2334
2365
  }
@@ -2350,7 +2381,7 @@
2350
2381
  }
2351
2382
  .first\:ml-0 {
2352
2383
  &:first-child {
2353
- margin-left: calc(var(--spacing) * 0);
2384
+ margin-left: 0;
2354
2385
  }
2355
2386
  }
2356
2387
  .first\:rounded-l-md {
@@ -2585,11 +2616,6 @@
2585
2616
  border-radius: calc(var(--radius) - 2px);
2586
2617
  }
2587
2618
  }
2588
- .focus\:bg-accent-background-subtle {
2589
- &:focus {
2590
- background-color: var(--accent-background-subtle);
2591
- }
2592
- }
2593
2619
  .focus\:bg-background {
2594
2620
  &:focus {
2595
2621
  background-color: var(--background);
@@ -2610,11 +2636,6 @@
2610
2636
  padding-block: calc(var(--spacing) * 2);
2611
2637
  }
2612
2638
  }
2613
- .focus\:text-accent-foreground-strong {
2614
- &:focus {
2615
- color: var(--accent-foreground-strong);
2616
- }
2617
- }
2618
2639
  .focus\:text-primary-foreground-strong {
2619
2640
  &:focus {
2620
2641
  color: var(--primary-foreground-strong);
@@ -2833,12 +2854,12 @@
2833
2854
  }
2834
2855
  .has-data-\[slot\=card-footer\]\:pb-0 {
2835
2856
  &:has(*[data-slot="card-footer"]) {
2836
- padding-bottom: calc(var(--spacing) * 0);
2857
+ padding-bottom: 0;
2837
2858
  }
2838
2859
  }
2839
2860
  .has-\[\>img\:first-child\]\:pt-0 {
2840
2861
  &:has(>img:first-child) {
2841
- padding-top: calc(var(--spacing) * 0);
2862
+ padding-top: 0;
2842
2863
  }
2843
2864
  }
2844
2865
  .aria-disabled\:pointer-events-none {
@@ -2929,7 +2950,7 @@
2929
2950
  }
2930
2951
  .data-\[side\=bottom\]\:translate-y-1 {
2931
2952
  &[data-side="bottom"] {
2932
- --tw-translate-y: calc(var(--spacing) * 1);
2953
+ --tw-translate-y: var(--spacing);
2933
2954
  translate: var(--tw-translate-x) var(--tw-translate-y);
2934
2955
  }
2935
2956
  }
@@ -2941,7 +2962,7 @@
2941
2962
  }
2942
2963
  .data-\[side\=right\]\:translate-x-1 {
2943
2964
  &[data-side="right"] {
2944
- --tw-translate-x: calc(var(--spacing) * 1);
2965
+ --tw-translate-x: var(--spacing);
2945
2966
  translate: var(--tw-translate-x) var(--tw-translate-y);
2946
2967
  }
2947
2968
  }
@@ -2979,7 +3000,7 @@
2979
3000
  .data-\[size\=sm\]\:has-data-\[slot\=card-footer\]\:pb-0 {
2980
3001
  &[data-size="sm"] {
2981
3002
  &:has(*[data-slot="card-footer"]) {
2982
- padding-bottom: calc(var(--spacing) * 0);
3003
+ padding-bottom: 0;
2983
3004
  }
2984
3005
  }
2985
3006
  }
@@ -3045,14 +3066,14 @@
3045
3066
  rotate: 180deg;
3046
3067
  }
3047
3068
  }
3048
- .data-\[state\=open\]\:bg-accent-background-subtle {
3069
+ .data-\[state\=open\]\:bg-primary-background-strong {
3049
3070
  &[data-state="open"] {
3050
- background-color: var(--accent-background-subtle);
3071
+ background-color: var(--primary-background-strong);
3051
3072
  }
3052
3073
  }
3053
- .data-\[state\=open\]\:text-accent-foreground-strong {
3074
+ .data-\[state\=open\]\:text-primary-foreground-strong {
3054
3075
  &[data-state="open"] {
3055
- color: var(--accent-foreground-strong);
3076
+ color: var(--primary-foreground-strong);
3056
3077
  }
3057
3078
  }
3058
3079
  .data-\[state\=selected\]\:bg-neutral-background-strong {
@@ -3062,7 +3083,7 @@
3062
3083
  }
3063
3084
  .data-\[state\=unchecked\]\:translate-x-0 {
3064
3085
  &[data-state="unchecked"] {
3065
- --tw-translate-x: calc(var(--spacing) * 0);
3086
+ --tw-translate-x: 0;
3066
3087
  translate: var(--tw-translate-x) var(--tw-translate-y);
3067
3088
  }
3068
3089
  }
@@ -3071,22 +3092,22 @@
3071
3092
  background-color: var(--switch-background);
3072
3093
  }
3073
3094
  }
3074
- .data-\[variant\=destructive\]\:text-danger-action-default {
3095
+ .data-\[variant\=destructive\]\:text-danger-foreground-subtle {
3075
3096
  &[data-variant="destructive"] {
3076
- color: var(--danger-action-default);
3097
+ color: var(--danger-foreground-subtle);
3077
3098
  }
3078
3099
  }
3079
- .data-\[variant\=destructive\]\:focus\:bg-danger-background-strong {
3100
+ .data-\[variant\=destructive\]\:focus\:bg-primary-background-strong {
3080
3101
  &[data-variant="destructive"] {
3081
3102
  &:focus {
3082
- background-color: var(--danger-background-strong);
3103
+ background-color: var(--primary-background-strong);
3083
3104
  }
3084
3105
  }
3085
3106
  }
3086
- .data-\[variant\=destructive\]\:focus\:text-danger-foreground-strong {
3107
+ .data-\[variant\=destructive\]\:focus\:text-danger-foreground-subtle {
3087
3108
  &[data-variant="destructive"] {
3088
3109
  &:focus {
3089
- color: var(--danger-foreground-strong);
3110
+ color: var(--danger-foreground-subtle);
3090
3111
  }
3091
3112
  }
3092
3113
  }
@@ -3147,9 +3168,9 @@
3147
3168
  max-width: var(--container-sm);
3148
3169
  }
3149
3170
  }
3150
- .sm\:grid-cols-3 {
3171
+ .sm\:grid-cols-2 {
3151
3172
  @media (width >= 40rem) {
3152
- grid-template-columns: repeat(3, minmax(0, 1fr));
3173
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3153
3174
  }
3154
3175
  }
3155
3176
  .sm\:grid-cols-4 {
@@ -3522,7 +3543,7 @@
3522
3543
  }
3523
3544
  .\[\&_\[cmdk-group-heading\]\]\:py-1 {
3524
3545
  & [cmdk-group-heading] {
3525
- padding-block: calc(var(--spacing) * 1);
3546
+ padding-block: var(--spacing);
3526
3547
  }
3527
3548
  }
3528
3549
  .\[\&_\[cmdk-group-heading\]\]\:text-xs {
@@ -3658,7 +3679,7 @@
3658
3679
  }
3659
3680
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
3660
3681
  &:has([role=checkbox]) {
3661
- padding-right: calc(var(--spacing) * 0);
3682
+ padding-right: 0;
3662
3683
  }
3663
3684
  }
3664
3685
  .\[\.border-b\]\:pb-4 {
@@ -3815,18 +3836,18 @@
3815
3836
  }
3816
3837
  }
3817
3838
  }
3818
- .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-danger-action-default {
3839
+ .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-danger-foreground-subtle {
3819
3840
  &[data-variant="destructive"] {
3820
3841
  :is(& > *) {
3821
3842
  &:is(svg) {
3822
- color: var(--danger-action-default) !important;
3843
+ color: var(--danger-foreground-subtle) !important;
3823
3844
  }
3824
3845
  }
3825
3846
  }
3826
3847
  }
3827
3848
  .\[\&\>\*\]\:min-w-0 {
3828
3849
  &>* {
3829
- min-width: calc(var(--spacing) * 0);
3850
+ min-width: 0;
3830
3851
  }
3831
3852
  }
3832
3853
  .\[\&\>svg\]\:pointer-events-none {
@@ -3874,6 +3895,50 @@
3874
3895
  }
3875
3896
  }
3876
3897
  }
3898
+ @property --scroll-fade-t {
3899
+ syntax: "<length-percentage>";
3900
+ inherits: false;
3901
+ initial-value: 0px;
3902
+ }
3903
+ @property --scroll-fade-b {
3904
+ syntax: "<length-percentage>";
3905
+ inherits: false;
3906
+ initial-value: 0px;
3907
+ }
3908
+ @property --scroll-fade-s {
3909
+ syntax: "<length-percentage>";
3910
+ inherits: false;
3911
+ initial-value: 0px;
3912
+ }
3913
+ @property --scroll-fade-e {
3914
+ syntax: "<length-percentage>";
3915
+ inherits: false;
3916
+ initial-value: 0px;
3917
+ }
3918
+ @property --scroll-fade-mask {
3919
+ syntax: "*";
3920
+ inherits: false;
3921
+ }
3922
+ @property --shimmer-angle {
3923
+ syntax: "<angle>";
3924
+ inherits: true;
3925
+ initial-value: 20deg;
3926
+ }
3927
+ @property --shimmer-image {
3928
+ syntax: "*";
3929
+ inherits: false;
3930
+ }
3931
+ @property --shimmer-text-fill {
3932
+ syntax: "*";
3933
+ inherits: false;
3934
+ }
3935
+ @media (prefers-reduced-motion: reduce) {
3936
+ .shimmer {
3937
+ animation: none;
3938
+ background-image: none;
3939
+ -webkit-text-fill-color: currentColor;
3940
+ }
3941
+ }
3877
3942
  @font-face {
3878
3943
  font-family: 'Geist Sans';
3879
3944
  font-style: normal;
@@ -4154,7 +4219,7 @@
4154
4219
  --neutral-background-subtle: var(--color-zinc-900);
4155
4220
  --neutral-background-medium: var(--color-zinc-800);
4156
4221
  --neutral-background-strong: var(--color-zinc-700);
4157
- --neutral-foreground-subtle: var(--color-zinc-400);
4222
+ --neutral-foreground-subtle: var(--color-zinc-300);
4158
4223
  --neutral-foreground-strong: var(--color-zinc-50);
4159
4224
  --neutral-border-subtle: var(--color-zinc-700);
4160
4225
  --neutral-border-strong: var(--color-zinc-500);
@@ -4192,8 +4257,22 @@
4192
4257
  );
4193
4258
  }
4194
4259
  --accent-action-foreground: var(--color-white);
4195
- --accent-background-subtle: var(--color-brand-900);
4196
- --accent-background-strong: var(--color-brand-800);
4260
+ --accent-background-subtle: var(--color-brand-500);
4261
+ @supports (color: color-mix(in lab, red, red)) {
4262
+ --accent-background-subtle: color-mix(
4263
+ in srgb,
4264
+ var(--color-brand-500) 14%,
4265
+ var(--color-zinc-900)
4266
+ );
4267
+ }
4268
+ --accent-background-strong: var(--color-brand-500);
4269
+ @supports (color: color-mix(in lab, red, red)) {
4270
+ --accent-background-strong: color-mix(
4271
+ in srgb,
4272
+ var(--color-brand-500) 22%,
4273
+ var(--color-zinc-800)
4274
+ );
4275
+ }
4197
4276
  --accent-foreground-subtle: var(--color-brand-300);
4198
4277
  --accent-foreground-strong: var(--color-brand-200);
4199
4278
  --accent-border-subtle: var(--color-brand-800);
@@ -4777,8 +4856,19 @@ input:where([type='button'], [type='reset'], [type='submit']):where(.c4-ui,.c4-u
4777
4856
  opacity: 0.5;
4778
4857
  }
4779
4858
  }
4859
+ @keyframes tw-shimmer {
4860
+ from {
4861
+ background-position: 100% 0;
4862
+ }
4863
+ to {
4864
+ background-position: 0 0;
4865
+ }
4866
+ }
4780
4867
  @layer properties {
4781
4868
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4869
+ :root, :host {
4870
+ --shimmer-angle: 20deg;
4871
+ }
4782
4872
  *, ::before, ::after, ::backdrop {
4783
4873
  --tw-translate-x: 0;
4784
4874
  --tw-translate-y: 0;
@@ -4840,6 +4930,13 @@ input:where([type='button'], [type='reset'], [type='submit']):where(.c4-ui,.c4-u
4840
4930
  --tw-duration: initial;
4841
4931
  --tw-ease: initial;
4842
4932
  --tw-content: "";
4933
+ --scroll-fade-t: 0px;
4934
+ --scroll-fade-b: 0px;
4935
+ --scroll-fade-s: 0px;
4936
+ --scroll-fade-e: 0px;
4937
+ --scroll-fade-mask: initial;
4938
+ --shimmer-image: initial;
4939
+ --shimmer-text-fill: initial;
4843
4940
  }
4844
4941
  }
4845
4942
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camunda/design-system",
3
- "version": "0.16.0",
3
+ "version": "0.16.1",
4
4
  "description": "Camunda's AI-first design system. shadcn + Tailwind components, design tokens aligned to Camunda's identity, and AI tooling for component authoring + migration.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -87,7 +87,6 @@
87
87
  }
88
88
  },
89
89
  "dependencies": {
90
- "@fontsource/geist-sans": "5.2.5",
91
90
  "@tanstack/react-table": "^8.20.5",
92
91
  "@tanstack/react-virtual": "^3.14.2",
93
92
  "class-variance-authority": "0.7.1",
@@ -97,26 +96,26 @@
97
96
  "lucide-react": "1.17.0",
98
97
  "radix-ui": "1.4.3",
99
98
  "react-day-picker": "^10.0.1",
100
- "shadcn": "4.8.2",
101
99
  "tailwind-merge": "3.6.0"
102
100
  },
103
101
  "overrides": {
104
102
  "esbuild": "0.28.1"
105
103
  },
106
104
  "devDependencies": {
107
- "@carbon/react": "^1.109.0",
105
+ "@carbon/react": "^1.110.0",
108
106
  "@changesets/changelog-github": "^0.7.0",
109
107
  "@changesets/cli": "^2.31.0",
110
108
  "@eslint/js": "9.39.4",
111
- "@playwright/test": "1.60.0",
112
- "@storybook/addon-a11y": "10.4.1",
113
- "@storybook/addon-docs": "10.4.1",
114
- "@storybook/addon-links": "10.4.1",
115
- "@storybook/react": "10.4.1",
116
- "@storybook/react-vite": "10.4.1",
109
+ "@fontsource/geist-sans": "5.2.5",
110
+ "@playwright/test": "1.61.1",
111
+ "@storybook/addon-a11y": "10.4.6",
112
+ "@storybook/addon-docs": "10.4.6",
113
+ "@storybook/addon-links": "10.4.6",
114
+ "@storybook/react": "10.4.6",
115
+ "@storybook/react-vite": "10.4.6",
117
116
  "@storybook/test-runner": "^0.24.4",
118
- "@tailwindcss/cli": "^4.3.0",
119
- "@tailwindcss/vite": "4.3.0",
117
+ "@tailwindcss/cli": "^4.3.2",
118
+ "@tailwindcss/vite": "4.3.2",
120
119
  "@types/node": "24.12.4",
121
120
  "@types/react": "19.2.17",
122
121
  "@types/react-dom": "19.2.3",
@@ -124,9 +123,9 @@
124
123
  "axe-playwright": "^2.2.2",
125
124
  "eslint": "9.39.4",
126
125
  "eslint-plugin-react-hooks": "7.1.1",
127
- "globals": "17.6.0",
126
+ "globals": "17.7.0",
128
127
  "husky": "^9.1.7",
129
- "lint-staged": "^17.0.7",
128
+ "lint-staged": "^17.0.8",
130
129
  "prettier": "3.8.3",
131
130
  "prettier-plugin-tailwindcss": "0.8.0",
132
131
  "react": "19.2.6",
@@ -135,14 +134,15 @@
135
134
  "recharts": "^3.8.1",
136
135
  "remark-gfm": "^4.0.1",
137
136
  "rimraf": "6.1.3",
138
- "storybook": "10.4.1",
139
- "tailwindcss": "4.3.0",
137
+ "shadcn": "4.12.0",
138
+ "storybook": "10.4.6",
139
+ "tailwindcss": "4.3.2",
140
140
  "tailwindcss-scoped-preflight": "4.0.6",
141
141
  "tsc-alias": "1.8.17",
142
142
  "tw-animate-css": "1.4.0",
143
143
  "typescript": "5.9.3",
144
- "typescript-eslint": "8.60.0",
145
- "vite": "7.3.3",
144
+ "typescript-eslint": "8.62.1",
145
+ "vite": "7.3.6",
146
146
  "vite-tsconfig-paths": "6.1.1"
147
147
  },
148
148
  "volta": {