@camunda/design-system 0.11.0 → 0.13.0

package/dist/styles.css

@@ -4,27 +4,36 @@
   --font-sans: "Geist Sans", sans-serif;
   --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
   --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
   --color-orange-100: oklch(95.4% 0.038 75.164);
   --color-amber-50: oklch(98.7% 0.022 95.277);
   --color-amber-100: oklch(96.2% 0.059 95.617);
   --color-amber-200: oklch(92.4% 0.12 95.746);
   --color-amber-300: oklch(87.9% 0.169 91.605);
   --color-amber-400: oklch(82.8% 0.189 84.429);
-  --color-amber-500: oklch(76.9% 0.188 70.08);
   --color-amber-600: oklch(66.6% 0.179 58.318);
   --color-amber-700: oklch(55.5% 0.163 48.998);
   --color-amber-800: oklch(47.3% 0.137 46.201);
   --color-amber-900: oklch(41.4% 0.112 45.904);
-  --color-emerald-50: oklch(97.9% 0.021 166.113);
-  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
   --color-emerald-200: oklch(90.5% 0.093 164.15);
   --color-emerald-300: oklch(84.5% 0.143 164.978);
   --color-emerald-400: oklch(76.5% 0.177 163.223);
-  --color-emerald-500: oklch(69.6% 0.17 162.48);
   --color-emerald-600: oklch(59.6% 0.145 163.225);
   --color-emerald-700: oklch(50.8% 0.118 165.612);
   --color-emerald-800: oklch(43.2% 0.095 166.913);
   --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
   --color-blue-50: oklch(97% 0.014 254.604);
   --color-blue-100: oklch(93.2% 0.032 255.585);
   --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -40,7 +49,6 @@
   --color-rose-200: oklch(89.2% 0.058 10.001);
   --color-rose-300: oklch(81% 0.117 11.638);
   --color-rose-400: oklch(71.2% 0.194 13.428);
-  --color-rose-500: oklch(64.5% 0.246 16.439);
   --color-rose-600: oklch(58.6% 0.253 17.585);
   --color-rose-700: oklch(51.4% 0.222 16.935);
   --color-rose-800: oklch(45.5% 0.188 13.697);
@@ -317,9 +325,6 @@
 .-mr-1 {
   margin-right: calc(var(--spacing) * -1);
 }
-.mr-1 {
-  margin-right: calc(var(--spacing) * 1);
-}
 .mr-2 {
   margin-right: calc(var(--spacing) * 2);
 }
@@ -768,12 +773,18 @@
 .min-w-11 {
   min-width: calc(var(--spacing) * 11);
 }
+.min-w-24 {
+  min-width: calc(var(--spacing) * 24);
+}
 .min-w-32 {
   min-width: calc(var(--spacing) * 32);
 }
 .min-w-36 {
   min-width: calc(var(--spacing) * 36);
 }
+.min-w-48 {
+  min-width: calc(var(--spacing) * 48);
+}
 .flex-1 {
   flex: 1;
 }
@@ -1025,9 +1036,6 @@
 .gap-y-1 {
   row-gap: calc(var(--spacing) * 1);
 }
-.gap-y-2 {
-  row-gap: calc(var(--spacing) * 2);
-}
 .divide-x {
   :where(& > :not(:last-child)) {
     --tw-divide-x-reverse: 0;
@@ -1161,6 +1169,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.border-t-0 {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 0px;
+}
 .border-r {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1185,6 +1197,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-accent-border-subtle {
+  border-color: var(--accent-border-subtle);
+}
 .border-border {
   border-color: var(--border);
 }
@@ -1239,12 +1254,6 @@
 .bg-background {
   background-color: var(--background);
 }
-.bg-background\/20 {
-  background-color: var(--background);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--background) 20%, transparent);
-  }
-}
 .bg-background\/70 {
   background-color: var(--background);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1311,18 +1320,18 @@
 .bg-foreground {
   background-color: var(--foreground);
 }
-.bg-foreground\/10 {
-  background-color: var(--foreground);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
-  }
-}
 .bg-info-background-subtle {
   background-color: var(--info-background-subtle);
 }
 .bg-input-background {
   background-color: var(--input-background);
 }
+.bg-input\/30 {
+  background-color: var(--input);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+}
 .bg-neutral-action-active {
   background-color: var(--neutral-action-active);
 }
@@ -1335,15 +1344,12 @@
 .bg-neutral-action-hover {
   background-color: var(--neutral-action-hover);
 }
+.bg-neutral-background-medium {
+  background-color: var(--neutral-background-medium);
+}
 .bg-neutral-background-strong {
   background-color: var(--neutral-background-strong);
 }
-.bg-neutral-background-strong\/30 {
-  background-color: var(--neutral-background-strong);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--neutral-background-strong) 30%, transparent);
-  }
-}
 .bg-neutral-background-strong\/50 {
   background-color: var(--neutral-background-strong);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1353,12 +1359,6 @@
 .bg-neutral-background-subtle {
   background-color: var(--neutral-background-subtle);
 }
-.bg-neutral-background-subtle\/45 {
-  background-color: var(--neutral-background-subtle);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--neutral-background-subtle) 45%, transparent);
-  }
-}
 .bg-orange-100 {
   background-color: var(--color-orange-100);
 }
@@ -1398,9 +1398,6 @@
 .bg-transparent {
   background-color: transparent;
 }
-.bg-warning-action-default {
-  background-color: var(--warning-action-default);
-}
 .bg-warning-background-strong {
   background-color: var(--warning-background-strong);
 }
@@ -1761,9 +1758,6 @@
 .text-accent-foreground-strong {
   color: var(--accent-foreground-strong);
 }
-.text-accent-foreground-subtle {
-  color: var(--accent-foreground-subtle);
-}
 .text-background {
   color: var(--background);
 }
@@ -1800,6 +1794,9 @@
 .text-neutral-action-foreground {
   color: var(--neutral-action-foreground);
 }
+.text-neutral-border-strong {
+  color: var(--neutral-border-strong);
+}
 .text-neutral-foreground-strong {
   color: var(--neutral-foreground-strong);
 }
@@ -1833,9 +1830,6 @@
 .text-success-foreground-strong {
   color: var(--success-foreground-strong);
 }
-.text-warning-action-foreground {
-  color: var(--warning-action-foreground);
-}
 .text-warning-foreground-strong {
   color: var(--warning-foreground-strong);
 }
@@ -1861,11 +1855,8 @@
 .underline {
   text-decoration-line: underline;
 }
-.decoration-foreground\/40 {
-  text-decoration-color: var(--foreground);
-  @supports (color: color-mix(in lab, red, red)) {
-    text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
-  }
+.decoration-neutral-border-strong {
+  text-decoration-color: var(--neutral-border-strong);
 }
 .underline-offset-2 {
   text-underline-offset: 2px;
@@ -1943,6 +1934,15 @@
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.ring-border {
+  --tw-ring-color: var(--border);
+}
+.ring-danger-action-default\/20 {
+  --tw-ring-color: var(--danger-action-default);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 20%, transparent);
+  }
+}
 .ring-foreground\/10 {
   --tw-ring-color: var(--foreground);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1971,10 +1971,23 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
+.outline-ring {
+  outline-color: var(--ring);
+}
+.outline-ring\/50 {
+  outline-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+}
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+}
 .filter {
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
@@ -2314,6 +2327,11 @@
     border-bottom-width: 0px;
   }
 }
+.even\:bg-neutral-background-medium {
+  &:nth-child(even) {
+    background-color: var(--neutral-background-medium);
+  }
+}
 .even\:bg-neutral-background-strong\/50 {
   &:nth-child(even) {
     background-color: var(--neutral-background-strong);
@@ -2322,13 +2340,10 @@
     }
   }
 }
-.hover\:border-foreground\/20 {
+.hover\:border-border {
   &:hover {
     @media (hover: hover) {
-      border-color: var(--foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--foreground) 20%, transparent);
-      }
+      border-color: var(--border);
     }
   }
 }
@@ -2380,51 +2395,45 @@
     }
   }
 }
-.hover\:bg-neutral-background-subtle {
+.hover\:bg-neutral-background-medium {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--neutral-background-subtle);
+      background-color: var(--neutral-background-medium);
     }
   }
 }
-.hover\:bg-primary-action-hover {
+.hover\:bg-neutral-background-strong {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--primary-action-hover);
+      background-color: var(--neutral-background-strong);
     }
   }
 }
-.hover\:bg-ring\/60 {
+.hover\:bg-neutral-background-subtle {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--ring);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--ring) 60%, transparent);
-      }
+      background-color: var(--neutral-background-subtle);
     }
   }
 }
-.hover\:bg-transparent {
+.hover\:bg-primary-action-hover {
   &:hover {
     @media (hover: hover) {
-      background-color: transparent;
+      background-color: var(--primary-action-hover);
     }
   }
 }
-.hover\:text-neutral-foreground-strong {
+.hover\:bg-transparent {
   &:hover {
     @media (hover: hover) {
-      color: var(--neutral-foreground-strong);
+      background-color: transparent;
     }
   }
 }
-.hover\:text-neutral-foreground-strong\/70 {
+.hover\:text-neutral-foreground-strong {
   &:hover {
     @media (hover: hover) {
       color: var(--neutral-foreground-strong);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--neutral-foreground-strong) 70%, transparent);
-      }
     }
   }
 }
@@ -2471,14 +2480,11 @@
     }
   }
 }
-.not-data-active\:hover\:bg-neutral-background-subtle\/45 {
+.not-data-active\:hover\:bg-neutral-background-medium {
   &:not(*:where([data-state="active"]),  *:where([data-active]:not([data-active="false"]))) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--neutral-background-subtle);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--neutral-background-subtle) 45%, transparent);
-        }
+        background-color: var(--neutral-background-medium);
       }
     }
   }
@@ -2587,9 +2593,9 @@
     border-color: var(--danger-border-subtle);
   }
 }
-.focus-visible\:border-ring {
+.focus-visible\:border-primary-border-strong {
   &:focus-visible {
-    border-color: var(--ring);
+    border-color: var(--primary-border-strong);
   }
 }
 .focus-visible\:bg-neutral-background-subtle {
@@ -2644,14 +2650,6 @@
     --tw-ring-color: var(--ring);
   }
 }
-.focus-visible\:ring-ring\/50 {
-  &:focus-visible {
-    --tw-ring-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-}
 .focus-visible\:ring-offset-2 {
   &:focus-visible {
     --tw-ring-offset-width: 2px;
@@ -2675,11 +2673,6 @@
     outline-width: 2px;
   }
 }
-.focus-visible\:outline-ring {
-  &:focus-visible {
-    outline-color: var(--ring);
-  }
-}
 .focus-visible\:outline-none {
   &:focus-visible {
     --tw-outline-style: none;
@@ -2701,9 +2694,9 @@
     background-color: var(--danger-action-active);
   }
 }
-.active\:bg-neutral-action-active {
+.active\:bg-neutral-background-strong {
   &:active {
-    background-color: var(--neutral-action-active);
+    background-color: var(--neutral-background-strong);
   }
 }
 .active\:bg-primary-action-active {
@@ -2734,19 +2727,6 @@
     background-color: var(--danger-action-disabled);
   }
 }
-.disabled\:bg-input\/50 {
-  &:disabled {
-    background-color: var(--input);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--input) 50%, transparent);
-    }
-  }
-}
-.disabled\:bg-neutral-action-disabled {
-  &:disabled {
-    background-color: var(--neutral-action-disabled);
-  }
-}
 .disabled\:bg-primary-action-disabled {
   &:disabled {
     background-color: var(--primary-action-disabled);
@@ -2762,12 +2742,9 @@
     border-radius: var(--radius);
   }
 }
-.has-aria-expanded\:bg-neutral-background-strong\/50 {
+.has-aria-expanded\:bg-neutral-background-medium {
   &:has(*[aria-expanded="true"]) {
-    background-color: var(--neutral-background-strong);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--neutral-background-strong) 50%, transparent);
-    }
+    background-color: var(--neutral-background-medium);
   }
 }
 .has-data-\[icon\=inline-end\]\:pr-1\.5 {
@@ -2820,9 +2797,9 @@
     cursor: default;
   }
 }
-.aria-expanded\:bg-neutral-background-subtle {
+.aria-expanded\:bg-neutral-background-medium {
   &[aria-expanded="true"] {
-    background-color: var(--neutral-background-subtle);
+    background-color: var(--neutral-background-medium);
   }
 }
 .aria-expanded\:text-neutral-foreground-strong {
@@ -2830,11 +2807,6 @@
     color: var(--neutral-foreground-strong);
   }
 }
-.aria-expanded\:text-neutral-foreground-subtle {
-  &[aria-expanded="true"] {
-    color: var(--neutral-foreground-subtle);
-  }
-}
 .aria-invalid\:border-danger-action-default {
   &[aria-invalid="true"] {
     border-color: var(--danger-action-default);
@@ -3207,22 +3179,14 @@
     flex-direction: row;
   }
 }
-.dark\:border-input {
+.dark\:border-accent-action-default {
   &:is(.dark *) {
-    border-color: var(--input);
+    border-color: var(--accent-action-default);
   }
 }
-.dark\:bg-danger-background-subtle {
+.dark\:bg-accent-background-strong {
   &:is(.dark *) {
-    background-color: var(--danger-background-subtle);
-  }
-}
-.dark\:bg-input\/30 {
-  &:is(.dark *) {
-    background-color: var(--input);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--input) 30%, transparent);
-    }
+    background-color: var(--accent-background-strong);
   }
 }
 .dark\:text-neutral-foreground-subtle {
@@ -3239,14 +3203,11 @@
     }
   }
 }
-.dark\:hover\:bg-input\/50 {
+.dark\:hover\:bg-neutral-background-medium {
   &:is(.dark *) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--input);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--input) 50%, transparent);
-        }
+        background-color: var(--neutral-background-medium);
       }
     }
   }
@@ -3260,17 +3221,10 @@
     }
   }
 }
-.dark\:not-data-active\:hover\:bg-input\/20 {
+.dark\:focus-visible\:border-primary-border-subtle {
   &:is(.dark *) {
-    &:not(*:where([data-state="active"]),  *:where([data-active]:not([data-active="false"]))) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--input);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 20%, transparent);
-          }
-        }
-      }
+    &:focus-visible {
+      border-color: var(--primary-border-subtle);
     }
   }
 }
@@ -3284,13 +3238,17 @@
     }
   }
 }
-.dark\:disabled\:bg-input\/80 {
+.dark\:active\:bg-neutral-background-strong {
   &:is(.dark *) {
-    &:disabled {
-      background-color: var(--input);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 80%, transparent);
-      }
+    &:active {
+      background-color: var(--neutral-background-strong);
+    }
+  }
+}
+.dark\:aria-expanded\:bg-neutral-background-medium {
+  &:is(.dark *) {
+    &[aria-expanded="true"] {
+      background-color: var(--neutral-background-medium);
     }
   }
 }
@@ -3321,16 +3279,6 @@
     }
   }
 }
-.dark\:data-\[state\=unchecked\]\:bg-input\/80 {
-  &:is(.dark *) {
-    &[data-state="unchecked"] {
-      background-color: var(--input);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 80%, transparent);
-      }
-    }
-  }
-}
 .data-open\:duration-200 {
   &:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
     --tw-duration: 200ms;
@@ -3431,13 +3379,10 @@
     }
   }
 }
-.dark\:data-active\:bg-input\/35 {
+.dark\:data-active\:bg-neutral-background-medium {
   &:is(.dark *) {
     &:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
-      background-color: var(--input);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 35%, transparent);
-      }
+      background-color: var(--neutral-background-medium);
     }
   }
 }
@@ -3518,21 +3463,9 @@
     color: var(--neutral-foreground-subtle);
   }
 }
-.\[\&_\[data-slot\=table-container\]\]\:rounded-none {
-  & [data-slot=table-container] {
-    border-radius: 0;
-  }
-}
-.\[\&_\[data-slot\=table-container\]\]\:border-0 {
-  & [data-slot=table-container] {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-}
-.\[\&_\[data-slot\=table-container\]\]\:shadow-none {
-  & [data-slot=table-container] {
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+.\[\&_\[data-slot\=table-row\]\:hover\]\:bg-neutral-background-medium {
+  & [data-slot=table-row]:hover {
+    background-color: var(--neutral-background-medium);
   }
 }
 .\[\&_p\]\:leading-relaxed {
@@ -3617,32 +3550,38 @@
     }
   }
 }
-.\[a\]\:hover\:bg-accent-background-subtle\/80 {
+.\[a\]\:hover\:bg-accent-background-strong {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent-background-subtle);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent-background-subtle) 80%, transparent);
-        }
+        background-color: var(--accent-background-strong);
       }
     }
   }
 }
-.\[a\]\:hover\:bg-danger-action-hover {
+.\[a\]\:hover\:bg-danger-background-strong {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--danger-action-hover);
+        background-color: var(--danger-background-strong);
       }
     }
   }
 }
-.\[a\]\:hover\:bg-neutral-background-subtle {
+.\[a\]\:hover\:bg-info-background-strong {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--neutral-background-subtle);
+        background-color: var(--info-background-strong);
+      }
+    }
+  }
+}
+.\[a\]\:hover\:bg-neutral-background-strong {
+  &:is(a) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--neutral-background-strong);
       }
     }
   }
@@ -3656,11 +3595,20 @@
     }
   }
 }
-.\[a\]\:hover\:text-neutral-foreground-subtle {
+.\[a\]\:hover\:bg-success-background-strong {
   &:is(a) {
     &:hover {
       @media (hover: hover) {
-        color: var(--neutral-foreground-subtle);
+        background-color: var(--success-background-strong);
+      }
+    }
+  }
+}
+.\[a\]\:hover\:bg-warning-background-strong {
+  &:is(a) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--warning-background-strong);
       }
     }
   }
@@ -3676,6 +3624,17 @@
     }
   }
 }
+.dark\:\[a\]\:hover\:bg-accent-action-default {
+  &:is(.dark *) {
+    &:is(a) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--accent-action-default);
+        }
+      }
+    }
+  }
+}
 .\*\:\[img\:first-child\]\:rounded-t-xl {
   :is(& > *) {
     &:is(img:first-child) {
@@ -3818,19 +3777,22 @@
   --color-brand-800: #742900;
   --color-brand-900: #4c1b00;
   --color-brand-950: #240e00;
-  --background: var(--color-white);
+  --background: var(--color-zinc-50);
   --foreground: var(--color-zinc-900);
-  --border: color-mix(in srgb, oklch(21% 0.006 285.885) 20%, transparent);
+  --border: color-mix(in srgb, oklch(70.5% 0.015 286.067) 20%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --border: color-mix(in srgb, var(--color-zinc-900) 20%, transparent);
+    --border: color-mix(in srgb, var(--color-zinc-400) 20%, transparent);
   }
   --radius: 0.5rem;
   --popover: var(--color-white);
   --popover-foreground: var(--color-zinc-900);
-  --input: var(--color-zinc-500);
+  --input: var(--color-zinc-300);
   --input-background: var(--color-white);
-  --switch-background: var(--color-zinc-200);
-  --ring: var(--primary-border-subtle);
+  --switch-background: var(--color-zinc-300);
+  --ring: var(--color-brand-600);
+  @supports (color: color-mix(in lab, red, red)) {
+    --ring: color-mix(in srgb, var(--color-brand-600) 65%, transparent);
+  }
   --neutral-action-default: var(--color-zinc-700);
   --neutral-action-hover: var(--color-zinc-800);
   --neutral-action-active: var(--color-zinc-900);
@@ -3847,12 +3809,24 @@
   );
   }
   --neutral-action-foreground: var(--color-zinc-50);
-  --neutral-background-subtle: var(--color-zinc-50);
-  --neutral-background-strong: var(--color-zinc-100);
-  --neutral-foreground-subtle: var(--color-zinc-700);
-  --neutral-foreground-strong: var(--color-zinc-900);
+  --neutral-background-subtle: var(--color-white);
+  --neutral-background-medium: color-mix(
+    in srgb,
+    oklch(96.7% 0.001 286.375) 80%,
+    oklch(92% 0.004 286.32)
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --neutral-background-medium: color-mix(
+    in srgb,
+    var(--color-zinc-100) 80%,
+    var(--color-zinc-200)
+  );
+  }
+  --neutral-background-strong: var(--color-zinc-200);
+  --neutral-foreground-subtle: var(--color-zinc-600);
+  --neutral-foreground-strong: var(--color-zinc-800);
   --neutral-border-subtle: var(--color-zinc-200);
-  --neutral-border-strong: var(--color-zinc-400);
+  --neutral-border-strong: var(--color-zinc-300);
   --primary-action-default: var(--color-zinc-950);
   --primary-action-hover: var(--color-zinc-800);
   --primary-action-active: color-mix(in srgb, oklch(27.4% 0.006 286.033) 88%, black);
@@ -3872,8 +3846,8 @@
   );
   }
   --primary-action-foreground: var(--color-white);
-  --primary-background-subtle: var(--color-zinc-50);
-  --primary-background-strong: var(--color-zinc-100);
+  --primary-background-subtle: var(--color-zinc-100);
+  --primary-background-strong: var(--color-zinc-200);
   --primary-foreground-subtle: var(--color-zinc-700);
   --primary-foreground-strong: var(--color-zinc-900);
   --primary-border-subtle: var(--color-zinc-200);
@@ -3918,18 +3892,18 @@
   --warning-foreground-strong: var(--color-amber-900);
   --warning-border-subtle: var(--color-amber-200);
   --warning-border-strong: var(--color-amber-400);
-  --danger-action-default: var(--color-rose-700);
-  --danger-action-hover: var(--color-rose-800);
-  --danger-action-active: var(--color-rose-900);
+  --danger-action-default: var(--color-red-700);
+  --danger-action-hover: var(--color-red-800);
+  --danger-action-active: var(--color-red-900);
   --danger-action-disabled: color-mix(
     in srgb,
-    oklch(51.4% 0.222 16.935) 38%,
+    oklch(50.5% 0.213 27.518) 38%,
     transparent
   );
   @supports (color: color-mix(in lab, red, red)) {
     --danger-action-disabled: color-mix(
     in srgb,
-    var(--color-rose-700) 38%,
+    var(--color-red-700) 38%,
     transparent
   );
   }
@@ -3940,40 +3914,40 @@
   --danger-foreground-strong: var(--color-rose-900);
   --danger-border-subtle: var(--color-rose-200);
   --danger-border-strong: var(--color-rose-400);
-  --success-action-default: var(--color-emerald-700);
-  --success-action-hover: var(--color-emerald-800);
-  --success-action-active: var(--color-emerald-900);
+  --success-action-default: var(--color-green-700);
+  --success-action-hover: var(--color-green-800);
+  --success-action-active: var(--color-green-900);
   --success-action-disabled: color-mix(
     in srgb,
-    oklch(50.8% 0.118 165.612) 38%,
+    oklch(52.7% 0.154 150.069) 38%,
     transparent
   );
   @supports (color: color-mix(in lab, red, red)) {
     --success-action-disabled: color-mix(
     in srgb,
-    var(--color-emerald-700) 38%,
+    var(--color-green-700) 38%,
     transparent
   );
   }
-  --success-action-foreground: var(--color-emerald-50);
-  --success-background-subtle: var(--color-emerald-50);
-  --success-background-strong: var(--color-emerald-100);
-  --success-foreground-subtle: var(--color-emerald-700);
-  --success-foreground-strong: var(--color-emerald-900);
-  --success-border-subtle: var(--color-emerald-200);
-  --success-border-strong: var(--color-emerald-400);
-  --info-action-default: var(--color-blue-700);
-  --info-action-hover: var(--color-blue-800);
-  --info-action-active: var(--color-blue-900);
+  --success-action-foreground: var(--color-green-50);
+  --success-background-subtle: var(--color-green-50);
+  --success-background-strong: var(--color-green-100);
+  --success-foreground-subtle: var(--color-green-700);
+  --success-foreground-strong: var(--color-green-900);
+  --success-border-subtle: var(--color-green-200);
+  --success-border-strong: var(--color-green-400);
+  --info-action-default: var(--color-sky-700);
+  --info-action-hover: var(--color-sky-800);
+  --info-action-active: var(--color-sky-900);
   --info-action-disabled: color-mix(
     in srgb,
-    oklch(48.8% 0.243 264.376) 38%,
+    oklch(50% 0.134 242.749) 38%,
     transparent
   );
   @supports (color: color-mix(in lab, red, red)) {
     --info-action-disabled: color-mix(
     in srgb,
-    var(--color-blue-700) 38%,
+    var(--color-sky-700) 38%,
     transparent
   );
   }
@@ -4006,16 +3980,19 @@
 .dark .c4-ui, .c4-ui.dark {
   --background: var(--color-zinc-950);
   --foreground: var(--color-zinc-50);
-  --border: color-mix(in srgb, #fff 10%, transparent);
+  --border: color-mix(in srgb, #fff 16%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
-    --border: color-mix(in srgb, var(--color-white) 10%, transparent);
+    --border: color-mix(in srgb, var(--color-white) 16%, transparent);
   }
   --popover: var(--color-zinc-800);
   --popover-foreground: var(--color-zinc-50);
-  --input: var(--color-zinc-500);
+  --input: var(--color-zinc-400);
   --input-background: var(--color-zinc-900);
   --switch-background: var(--color-zinc-700);
-  --ring: var(--primary-border-subtle);
+  --ring: var(--color-brand-600);
+  @supports (color: color-mix(in lab, red, red)) {
+    --ring: color-mix(in srgb, var(--color-brand-600) 90%, transparent);
+  }
   --neutral-action-default: var(--color-zinc-700);
   --neutral-action-hover: var(--color-zinc-800);
   --neutral-action-active: var(--color-zinc-900);
@@ -4033,10 +4010,11 @@
   }
   --neutral-action-foreground: var(--color-zinc-50);
   --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-strong: var(--color-zinc-50);
-  --neutral-border-subtle: var(--color-zinc-300);
+  --neutral-border-subtle: var(--color-zinc-700);
   --neutral-border-strong: var(--color-zinc-500);
   --primary-action-default: var(--color-white);
   --primary-action-hover: var(--color-zinc-100);
@@ -4072,12 +4050,12 @@
   );
   }
   --accent-action-foreground: var(--color-white);
-  --accent-background-subtle: var(--color-brand-600);
-  --accent-background-strong: var(--color-brand-700);
-  --accent-foreground-subtle: var(--color-brand-200);
-  --accent-foreground-strong: var(--color-white);
-  --accent-border-subtle: var(--color-brand-300);
-  --accent-border-strong: var(--color-brand-500);
+  --accent-background-subtle: var(--color-brand-900);
+  --accent-background-strong: var(--color-brand-800);
+  --accent-foreground-subtle: var(--color-brand-300);
+  --accent-foreground-strong: var(--color-brand-200);
+  --accent-border-subtle: var(--color-brand-800);
+  --accent-border-strong: var(--color-brand-600);
   --warning-action-default: var(--color-amber-700);
   --warning-action-hover: var(--color-amber-800);
   --warning-action-active: var(--color-amber-900);
@@ -4094,12 +4072,12 @@
   );
   }
   --warning-action-foreground: var(--color-white);
-  --warning-background-subtle: var(--color-amber-600);
-  --warning-background-strong: var(--color-amber-700);
-  --warning-foreground-subtle: var(--color-amber-200);
-  --warning-foreground-strong: var(--color-white);
-  --warning-border-subtle: var(--color-amber-300);
-  --warning-border-strong: var(--color-amber-500);
+  --warning-background-subtle: var(--color-amber-900);
+  --warning-background-strong: var(--color-amber-800);
+  --warning-foreground-subtle: var(--color-amber-300);
+  --warning-foreground-strong: var(--color-amber-200);
+  --warning-border-subtle: var(--color-amber-800);
+  --warning-border-strong: var(--color-amber-600);
   --danger-action-default: var(--color-rose-700);
   --danger-action-hover: var(--color-rose-800);
   --danger-action-active: var(--color-rose-900);
@@ -4116,12 +4094,12 @@
   );
   }
   --danger-action-foreground: var(--color-white);
-  --danger-background-subtle: var(--color-rose-600);
-  --danger-background-strong: var(--color-rose-700);
-  --danger-foreground-subtle: var(--color-rose-200);
-  --danger-foreground-strong: var(--color-white);
-  --danger-border-subtle: var(--color-rose-300);
-  --danger-border-strong: var(--color-rose-500);
+  --danger-background-subtle: var(--color-rose-900);
+  --danger-background-strong: var(--color-rose-800);
+  --danger-foreground-subtle: var(--color-rose-300);
+  --danger-foreground-strong: var(--color-rose-200);
+  --danger-border-subtle: var(--color-rose-800);
+  --danger-border-strong: var(--color-rose-600);
   --success-action-default: var(--color-emerald-400);
   --success-action-hover: var(--color-emerald-600);
   --success-action-active: var(--color-emerald-700);
@@ -4138,12 +4116,12 @@
   );
   }
   --success-action-foreground: var(--color-white);
-  --success-background-subtle: var(--color-emerald-600);
-  --success-background-strong: var(--color-emerald-700);
-  --success-foreground-subtle: var(--color-emerald-200);
-  --success-foreground-strong: var(--color-white);
-  --success-border-subtle: var(--color-emerald-300);
-  --success-border-strong: var(--color-emerald-500);
+  --success-background-subtle: var(--color-emerald-900);
+  --success-background-strong: var(--color-emerald-800);
+  --success-foreground-subtle: var(--color-emerald-300);
+  --success-foreground-strong: var(--color-emerald-200);
+  --success-border-subtle: var(--color-emerald-800);
+  --success-border-strong: var(--color-emerald-600);
   --info-action-default: var(--color-blue-400);
   --info-action-hover: var(--color-blue-600);
   --info-action-active: var(--color-blue-700);
@@ -4160,12 +4138,12 @@
   );
   }
   --info-action-foreground: var(--color-white);
-  --info-background-subtle: var(--color-blue-600);
-  --info-background-strong: var(--color-blue-700);
-  --info-foreground-subtle: var(--color-blue-200);
-  --info-foreground-strong: var(--color-white);
-  --info-border-subtle: var(--color-blue-300);
-  --info-border-strong: var(--color-blue-500);
+  --info-background-subtle: var(--color-blue-900);
+  --info-background-strong: var(--color-blue-800);
+  --info-foreground-subtle: var(--color-blue-300);
+  --info-foreground-strong: var(--color-blue-200);
+  --info-border-subtle: var(--color-blue-800);
+  --info-border-strong: var(--color-blue-600);
   --overlay: color-mix(in srgb, #000 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     --overlay: color-mix(in srgb, var(--color-black) 40%, transparent);
@@ -4188,9 +4166,6 @@
   .c4-ui *, .c4-ui *::before, .c4-ui *::after {
     border-color: var(--border);
     outline-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
   }
   .c4-ui button, .c4-ui [role="button"] {
     cursor: pointer;