@camunda/design-system 0.16.0 → 0.17.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --font-sans: "Geist Sans", sans-serif;
@@ -167,19 +167,19 @@
   position: sticky;
 }
 .inset-0 {
-  inset: calc(var(--spacing) * 0);
+  inset: 0;
 }
 .inset-x-0 {
-  inset-inline: calc(var(--spacing) * 0);
+  inset-inline: 0;
 }
 .inset-y-0 {
-  inset-block: calc(var(--spacing) * 0);
+  inset-block: 0;
 }
 .-top-0\.5 {
   top: calc(var(--spacing) * -0.5);
 }
 .top-0 {
-  top: calc(var(--spacing) * 0);
+  top: 0;
 }
 .top-1\/2 {
   top: calc(1 / 2 * 100%);
@@ -194,7 +194,7 @@
   right: calc(var(--spacing) * -0.5);
 }
 .right-0 {
-  right: calc(var(--spacing) * 0);
+  right: 0;
 }
 .right-2 {
   right: calc(var(--spacing) * 2);
@@ -203,10 +203,10 @@
   right: calc(var(--spacing) * 3);
 }
 .bottom-0 {
-  bottom: calc(var(--spacing) * 0);
+  bottom: 0;
 }
 .left-0 {
-  left: calc(var(--spacing) * 0);
+  left: 0;
 }
 .left-0\.5 {
   left: calc(var(--spacing) * 0.5);
@@ -266,7 +266,7 @@
   }
 }
 .m-0 {
-  margin: calc(var(--spacing) * 0);
+  margin: 0;
 }
 .-mx-1 {
   margin-inline: calc(var(--spacing) * -1);
@@ -281,7 +281,7 @@
   margin-inline: calc(var(--spacing) * -6);
 }
 .mx-1 {
-  margin-inline: calc(var(--spacing) * 1);
+  margin-inline: var(--spacing);
 }
 .mx-2 {
   margin-inline: calc(var(--spacing) * 2);
@@ -290,7 +290,7 @@
   margin-inline: auto;
 }
 .my-1 {
-  margin-block: calc(var(--spacing) * 1);
+  margin-block: var(--spacing);
 }
 .my-3 {
   margin-block: calc(var(--spacing) * 3);
@@ -299,13 +299,13 @@
   margin-top: calc(var(--spacing) * -1);
 }
 .mt-0 {
-  margin-top: calc(var(--spacing) * 0);
+  margin-top: 0;
 }
 .mt-0\.5 {
   margin-top: calc(var(--spacing) * 0.5);
 }
 .mt-1 {
-  margin-top: calc(var(--spacing) * 1);
+  margin-top: var(--spacing);
 }
 .mt-1\.5 {
   margin-top: calc(var(--spacing) * 1.5);
@@ -347,7 +347,7 @@
   margin-bottom: calc(var(--spacing) * -6);
 }
 .mb-1 {
-  margin-bottom: calc(var(--spacing) * 1);
+  margin-bottom: var(--spacing);
 }
 .mb-2 {
   margin-bottom: calc(var(--spacing) * 2);
@@ -371,7 +371,7 @@
   margin-left: calc(var(--spacing) * 0.5);
 }
 .ml-1 {
-  margin-left: calc(var(--spacing) * 1);
+  margin-left: var(--spacing);
 }
 .ml-4 {
   margin-left: calc(var(--spacing) * 4);
@@ -477,7 +477,7 @@
   height: var(--radix-select-trigger-height);
 }
 .h-1 {
-  height: calc(var(--spacing) * 1);
+  height: var(--spacing);
 }
 .h-2 {
   height: calc(var(--spacing) * 2);
@@ -582,7 +582,7 @@
   max-height: calc(100dvh - 2rem);
 }
 .min-h-0 {
-  min-height: calc(var(--spacing) * 0);
+  min-height: 0;
 }
 .min-h-9 {
   min-height: calc(var(--spacing) * 9);
@@ -618,7 +618,7 @@
   min-height: 100vh;
 }
 .w-1 {
-  width: calc(var(--spacing) * 1);
+  width: var(--spacing);
 }
 .w-1\/2 {
   width: calc(1 / 2 * 100%);
@@ -774,7 +774,7 @@
   min-width: var(--radix-select-trigger-width);
 }
 .min-w-0 {
-  min-width: calc(var(--spacing) * 0);
+  min-width: 0;
 }
 .min-w-5 {
   min-width: calc(var(--spacing) * 5);
@@ -853,6 +853,34 @@
 .transform {
   transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
 }
+.shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(
+    --shimmer-color,
+    oklch(from currentColor l c h / calc(alpha* 0.2))
+  );
+  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)) ) );
+  @supports (color: color-mix(in lab, red, red)) {
+    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)) ) );
+  }
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+  &:is(.dark *) {
+    --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+  }
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    animation-direction: reverse;
+  }
+}
 .animate-pulse {
   animation: var(--animate-pulse);
 }
@@ -884,10 +912,10 @@
   resize: vertical;
 }
 .scroll-my-1 {
-  scroll-margin-block: calc(var(--spacing) * 1);
+  scroll-margin-block: var(--spacing);
 }
 .scroll-py-1 {
-  scroll-padding-block: calc(var(--spacing) * 1);
+  scroll-padding-block: var(--spacing);
 }
 .list-inside {
   list-style-position: inside;
@@ -959,13 +987,13 @@
   justify-content: flex-start;
 }
 .gap-0 {
-  gap: calc(var(--spacing) * 0);
+  gap: 0;
 }
 .gap-0\.5 {
   gap: calc(var(--spacing) * 0.5);
 }
 .gap-1 {
-  gap: calc(var(--spacing) * 1);
+  gap: var(--spacing);
 }
 .gap-1\.5 {
   gap: calc(var(--spacing) * 1.5);
@@ -1009,8 +1037,8 @@
 .space-y-1 {
   :where(& > :not(:last-child)) {
     --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
   }
 }
 .space-y-1\.5 {
@@ -1055,7 +1083,7 @@
   column-gap: calc(var(--spacing) * 8);
 }
 .gap-y-1 {
-  row-gap: calc(var(--spacing) * 1);
+  row-gap: var(--spacing);
 }
 .gap-y-3 {
   row-gap: calc(var(--spacing) * 3);
@@ -1428,6 +1456,9 @@
 .bg-warning-background-subtle {
   background-color: var(--warning-background-subtle);
 }
+.bg-zinc-200 {
+  background-color: var(--color-zinc-200);
+}
 .bg-zinc-900 {
   background-color: var(--color-zinc-900);
 }
@@ -1453,13 +1484,13 @@
   object-fit: cover;
 }
 .p-0 {
-  padding: calc(var(--spacing) * 0);
+  padding: 0;
 }
 .p-0\.5 {
   padding: calc(var(--spacing) * 0.5);
 }
 .p-1 {
-  padding: calc(var(--spacing) * 1);
+  padding: var(--spacing);
 }
 .p-1\.5 {
   padding: calc(var(--spacing) * 1.5);
@@ -1504,7 +1535,7 @@
   padding: 1px;
 }
 .px-1 {
-  padding-inline: calc(var(--spacing) * 1);
+  padding-inline: var(--spacing);
 }
 .px-1\.5 {
   padding-inline: calc(var(--spacing) * 1.5);
@@ -1531,7 +1562,7 @@
   padding-block: calc(var(--spacing) * 0.5);
 }
 .py-1 {
-  padding-block: calc(var(--spacing) * 1);
+  padding-block: var(--spacing);
 }
 .py-1\.5 {
   padding-block: calc(var(--spacing) * 1.5);
@@ -1561,13 +1592,13 @@
   padding-block: calc(var(--spacing) * 16);
 }
 .pt-0 {
-  padding-top: calc(var(--spacing) * 0);
+  padding-top: 0;
 }
 .pt-0\.5 {
   padding-top: calc(var(--spacing) * 0.5);
 }
 .pt-1 {
-  padding-top: calc(var(--spacing) * 1);
+  padding-top: var(--spacing);
 }
 .pt-2 {
   padding-top: calc(var(--spacing) * 2);
@@ -1582,7 +1613,7 @@
   padding-right: calc(var(--spacing) * 0.5);
 }
 .pr-1 {
-  padding-right: calc(var(--spacing) * 1);
+  padding-right: var(--spacing);
 }
 .pr-2 {
   padding-right: calc(var(--spacing) * 2);
@@ -1600,16 +1631,16 @@
   padding-right: calc(var(--spacing) * 9);
 }
 .pb-0 {
-  padding-bottom: calc(var(--spacing) * 0);
+  padding-bottom: 0;
 }
 .pb-1 {
-  padding-bottom: calc(var(--spacing) * 1);
+  padding-bottom: var(--spacing);
 }
 .pb-4 {
   padding-bottom: calc(var(--spacing) * 4);
 }
 .pl-1 {
-  padding-left: calc(var(--spacing) * 1);
+  padding-left: var(--spacing);
 }
 .pl-2 {
   padding-left: calc(var(--spacing) * 2);
@@ -1809,6 +1840,9 @@
 .text-danger-foreground-strong {
   color: var(--danger-foreground-strong);
 }
+.text-danger-foreground-subtle {
+  color: var(--danger-foreground-subtle);
+}
 .text-emerald-600 {
   color: var(--color-emerald-600);
 }
@@ -2304,7 +2338,7 @@
   &:is(:where(.group\/tabs):where([data-orientation="horizontal"]) *) {
     &::after {
       content: var(--tw-content);
-      inset-inline: calc(var(--spacing) * 0);
+      inset-inline: 0;
     }
   }
 }
@@ -2328,7 +2362,7 @@
   &:is(:where(.group\/tabs):where([data-orientation="vertical"]) *) {
     &::after {
       content: var(--tw-content);
-      inset-block: calc(var(--spacing) * 0);
+      inset-block: 0;
     }
   }
 }
@@ -2350,7 +2384,7 @@
 }
 .first\:ml-0 {
   &:first-child {
-    margin-left: calc(var(--spacing) * 0);
+    margin-left: 0;
   }
 }
 .first\:rounded-l-md {
@@ -2585,11 +2619,6 @@
     border-radius: calc(var(--radius) - 2px);
   }
 }
-.focus\:bg-accent-background-subtle {
-  &:focus {
-    background-color: var(--accent-background-subtle);
-  }
-}
 .focus\:bg-background {
   &:focus {
     background-color: var(--background);
@@ -2610,11 +2639,6 @@
     padding-block: calc(var(--spacing) * 2);
   }
 }
-.focus\:text-accent-foreground-strong {
-  &:focus {
-    color: var(--accent-foreground-strong);
-  }
-}
 .focus\:text-primary-foreground-strong {
   &:focus {
     color: var(--primary-foreground-strong);
@@ -2833,12 +2857,12 @@
 }
 .has-data-\[slot\=card-footer\]\:pb-0 {
   &:has(*[data-slot="card-footer"]) {
-    padding-bottom: calc(var(--spacing) * 0);
+    padding-bottom: 0;
   }
 }
 .has-\[\>img\:first-child\]\:pt-0 {
   &:has(>img:first-child) {
-    padding-top: calc(var(--spacing) * 0);
+    padding-top: 0;
   }
 }
 .aria-disabled\:pointer-events-none {
@@ -2929,7 +2953,7 @@
 }
 .data-\[side\=bottom\]\:translate-y-1 {
   &[data-side="bottom"] {
-    --tw-translate-y: calc(var(--spacing) * 1);
+    --tw-translate-y: var(--spacing);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
@@ -2941,7 +2965,7 @@
 }
 .data-\[side\=right\]\:translate-x-1 {
   &[data-side="right"] {
-    --tw-translate-x: calc(var(--spacing) * 1);
+    --tw-translate-x: var(--spacing);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
@@ -2979,7 +3003,7 @@
 .data-\[size\=sm\]\:has-data-\[slot\=card-footer\]\:pb-0 {
   &[data-size="sm"] {
     &:has(*[data-slot="card-footer"]) {
-      padding-bottom: calc(var(--spacing) * 0);
+      padding-bottom: 0;
     }
   }
 }
@@ -3045,14 +3069,14 @@
     rotate: 180deg;
   }
 }
-.data-\[state\=open\]\:bg-accent-background-subtle {
+.data-\[state\=open\]\:bg-primary-background-strong {
   &[data-state="open"] {
-    background-color: var(--accent-background-subtle);
+    background-color: var(--primary-background-strong);
   }
 }
-.data-\[state\=open\]\:text-accent-foreground-strong {
+.data-\[state\=open\]\:text-primary-foreground-strong {
   &[data-state="open"] {
-    color: var(--accent-foreground-strong);
+    color: var(--primary-foreground-strong);
   }
 }
 .data-\[state\=selected\]\:bg-neutral-background-strong {
@@ -3062,7 +3086,7 @@
 }
 .data-\[state\=unchecked\]\:translate-x-0 {
   &[data-state="unchecked"] {
-    --tw-translate-x: calc(var(--spacing) * 0);
+    --tw-translate-x: 0;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
@@ -3071,22 +3095,22 @@
     background-color: var(--switch-background);
   }
 }
-.data-\[variant\=destructive\]\:text-danger-action-default {
+.data-\[variant\=destructive\]\:text-danger-foreground-subtle {
   &[data-variant="destructive"] {
-    color: var(--danger-action-default);
+    color: var(--danger-foreground-subtle);
   }
 }
-.data-\[variant\=destructive\]\:focus\:bg-danger-background-strong {
+.data-\[variant\=destructive\]\:focus\:bg-primary-background-strong {
   &[data-variant="destructive"] {
     &:focus {
-      background-color: var(--danger-background-strong);
+      background-color: var(--primary-background-strong);
     }
   }
 }
-.data-\[variant\=destructive\]\:focus\:text-danger-foreground-strong {
+.data-\[variant\=destructive\]\:focus\:text-danger-foreground-subtle {
   &[data-variant="destructive"] {
     &:focus {
-      color: var(--danger-foreground-strong);
+      color: var(--danger-foreground-subtle);
     }
   }
 }
@@ -3147,9 +3171,9 @@
     max-width: var(--container-sm);
   }
 }
-.sm\:grid-cols-3 {
+.sm\:grid-cols-2 {
   @media (width >= 40rem) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 .sm\:grid-cols-4 {
@@ -3522,7 +3546,7 @@
 }
 .\[\&_\[cmdk-group-heading\]\]\:py-1 {
   & [cmdk-group-heading] {
-    padding-block: calc(var(--spacing) * 1);
+    padding-block: var(--spacing);
   }
 }
 .\[\&_\[cmdk-group-heading\]\]\:text-xs {
@@ -3658,7 +3682,7 @@
 }
 .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
   &:has([role=checkbox]) {
-    padding-right: calc(var(--spacing) * 0);
+    padding-right: 0;
   }
 }
 .\[\.border-b\]\:pb-4 {
@@ -3815,18 +3839,18 @@
     }
   }
 }
-.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-danger-action-default {
+.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-danger-foreground-subtle {
   &[data-variant="destructive"] {
     :is(& > *) {
       &:is(svg) {
-        color: var(--danger-action-default) !important;
+        color: var(--danger-foreground-subtle) !important;
       }
     }
   }
 }
 .\[\&\>\*\]\:min-w-0 {
   &>* {
-    min-width: calc(var(--spacing) * 0);
+    min-width: 0;
   }
 }
 .\[\&\>svg\]\:pointer-events-none {
@@ -3874,6 +3898,50 @@
     }
   }
 }
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
 @font-face {
   font-family: 'Geist Sans';
   font-style: normal;
@@ -4154,7 +4222,7 @@
   --neutral-background-subtle: var(--color-zinc-900);
   --neutral-background-medium: var(--color-zinc-800);
   --neutral-background-strong: var(--color-zinc-700);
-  --neutral-foreground-subtle: var(--color-zinc-400);
+  --neutral-foreground-subtle: var(--color-zinc-300);
   --neutral-foreground-strong: var(--color-zinc-50);
   --neutral-border-subtle: var(--color-zinc-700);
   --neutral-border-strong: var(--color-zinc-500);
@@ -4192,8 +4260,22 @@
   );
   }
   --accent-action-foreground: var(--color-white);
-  --accent-background-subtle: var(--color-brand-900);
-  --accent-background-strong: var(--color-brand-800);
+  --accent-background-subtle: var(--color-brand-500);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent-background-subtle: color-mix(
+    in srgb,
+    var(--color-brand-500) 14%,
+    var(--color-zinc-900)
+  );
+  }
+  --accent-background-strong: var(--color-brand-500);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent-background-strong: color-mix(
+    in srgb,
+    var(--color-brand-500) 22%,
+    var(--color-zinc-800)
+  );
+  }
   --accent-foreground-subtle: var(--color-brand-300);
   --accent-foreground-strong: var(--color-brand-200);
   --accent-border-subtle: var(--color-brand-800);
@@ -4777,8 +4859,19 @@ input:where([type='button'], [type='reset'], [type='submit']):where(.c4-ui,.c4-u
     opacity: 0.5;
   }
 }
+@keyframes tw-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    :root, :host {
+      --shimmer-angle: 20deg;
+    }
     *, ::before, ::after, ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
@@ -4840,6 +4933,13 @@ input:where([type='button'], [type='reset'], [type='submit']):where(.c4-ui,.c4-u
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --scroll-fade-t: 0px;
+      --scroll-fade-b: 0px;
+      --scroll-fade-s: 0px;
+      --scroll-fade-e: 0px;
+      --scroll-fade-mask: initial;
+      --shimmer-image: initial;
+      --shimmer-text-fill: initial;
     }
   }
 }