@camunda/design-system 0.47.0 → 0.49.0

package/dist/styles.css

@@ -40,6 +40,7 @@
   --color-teal-600: oklch(60% 0.118 184.704);
   --color-cyan-400: oklch(78.9% 0.154 211.53);
   --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
   --color-sky-500: oklch(68.5% 0.169 237.323);
   --color-sky-600: oklch(58.8% 0.158 241.966);
   --color-sky-700: oklch(50% 0.134 242.749);
@@ -509,6 +510,18 @@
 .ml-auto {
   margin-left: auto;
 }
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block {
   display: block;
 }
@@ -712,6 +725,9 @@
 .h-auto {
   height: auto;
 }
+.h-auto\! {
+  height: auto !important;
+}
 .h-full {
   height: 100%;
 }
@@ -739,6 +755,9 @@
 .max-h-\[60vh\] {
   max-height: 60vh;
 }
+.max-h-\[356px\] {
+  max-height: 356px;
+}
 .max-h-\[calc\(100dvh-2rem\)\] {
   max-height: calc(100dvh - 2rem);
 }
@@ -1540,6 +1559,9 @@
 .border-red-600 {
   border-color: var(--color-red-600);
 }
+.border-ring {
+  border-color: var(--ring);
+}
 .border-success-border-subtle {
   border-color: var(--success-border-subtle);
 }
@@ -2402,6 +2424,10 @@
   --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-3 {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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-background {
   --tw-ring-color: var(--background);
 }
@@ -2432,10 +2458,22 @@
 .ring-ring {
   --tw-ring-color: var(--ring);
 }
+.ring-ring\/20 {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
+  }
+}
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 }
+.ring-offset-background {
+  --tw-ring-offset-color: var(--background);
+}
+.ring-offset-transparent {
+  --tw-ring-offset-color: transparent;
+}
 .outline-hidden {
   --tw-outline-style: none;
   outline-style: none;
@@ -2912,6 +2950,9 @@
 .focus-visible\:border-primary-border-strong:focus-visible {
   border-color: var(--primary-border-strong);
 }
+.focus-visible\:border-ring:focus-visible {
+  border-color: var(--ring);
+}
 .focus-visible\:bg-neutral-background-subtle:focus-visible {
   background-color: var(--neutral-background-subtle);
 }
@@ -2921,10 +2962,6 @@
 .focus-visible\:underline:focus-visible {
   text-decoration-line: underline;
 }
-.focus-visible\:ring-1:focus-visible {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
-}
 .focus-visible\:ring-2:focus-visible {
   --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);
@@ -2933,10 +2970,6 @@
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
 }
-.focus-visible\:ring-\[3px\]:focus-visible {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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);
-}
 .focus-visible\:ring-danger-action-default\/20:focus-visible {
   --tw-ring-color: var(--danger-action-default);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2946,12 +2979,11 @@
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: var(--ring);
 }
-.focus-visible\:ring-offset-2:focus-visible {
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-}
-.focus-visible\:ring-offset-background:focus-visible {
-  --tw-ring-offset-color: var(--background);
+.focus-visible\:ring-ring\/20:focus-visible {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
+  }
 }
 .focus-visible\:outline-1:focus-visible {
   outline-style: var(--tw-outline-style);
@@ -3117,8 +3149,12 @@
 .data-placeholder\:text-neutral-foreground-subtle[data-placeholder] {
   color: var(--neutral-foreground-subtle);
 }
-.data-\[focus-visible-restore\]\:border-primary-border-strong[data-focus-visible-restore] {
-  border-color: var(--primary-border-strong);
+.data-\[focus-visible-restore\]\:border-ring[data-focus-visible-restore] {
+  border-color: var(--ring);
+}
+.data-\[focus-visible-restore\]\:ring-2[data-focus-visible-restore] {
+  --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);
 }
 .data-\[focus-visible-restore\]\:ring-3[data-focus-visible-restore] {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3127,6 +3163,15 @@
 .data-\[focus-visible-restore\]\:ring-ring[data-focus-visible-restore] {
   --tw-ring-color: var(--ring);
 }
+.data-\[focus-visible-restore\]\:ring-ring\/20[data-focus-visible-restore] {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
+  }
+}
+.data-\[expanded\=false\]\:data-\[front\=false\]\:h-auto\![data-expanded="false"][data-front="false"] {
+  height: auto !important;
+}
 .data-\[inset\]\:pl-8[data-inset] {
   padding-left: calc(var(--spacing) * 8);
 }
@@ -3444,6 +3489,12 @@
     --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 40%, transparent);
   }
 }
+.dark\:focus-visible\:ring-ring\/40:is(.dark *):focus-visible {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 40%, transparent);
+  }
+}
 .dark\:active\:bg-neutral-background-strong:is(.dark *):active {
   background-color: var(--neutral-background-strong);
 }
@@ -3462,8 +3513,11 @@
     --tw-ring-color: color-mix(in oklab, var(--danger-action-default) 40%, transparent);
   }
 }
-.dark\:data-\[focus-visible-restore\]\:border-primary-border-subtle:is(.dark *)[data-focus-visible-restore] {
-  border-color: var(--primary-border-subtle);
+.dark\:data-\[focus-visible-restore\]\:ring-ring\/40:is(.dark *)[data-focus-visible-restore] {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 40%, transparent);
+  }
 }
 .dark\:data-\[state\=checked\]\:bg-primary-foreground-strong:is(.dark *)[data-state="checked"] {
   background-color: var(--primary-foreground-strong);
@@ -3552,7 +3606,7 @@
 .data-vertical\:self-stretch:where([data-orientation="vertical"]) {
   align-self: stretch;
 }
-.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-neutral-foreground-subtle .recharts-cartesian-axis-tick text {
+.\[\&_\.recharts-cartesian-axis-tick-value\]\:fill-neutral-foreground-subtle .recharts-cartesian-axis-tick-value {
   fill: var(--neutral-foreground-subtle);
 }
 .\[\&_\.recharts-cartesian-grid_line\]\:stroke-border .recharts-cartesian-grid line {
@@ -3907,10 +3961,7 @@
   --input: var(--color-zinc-300);
   --input-background: var(--color-white);
   --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);
-  }
+  --ring: var(--color-sky-700);
   --neutral-action-default: var(--color-zinc-700);
   --neutral-action-hover: var(--color-zinc-800);
   --neutral-action-active: var(--color-zinc-900);
@@ -4110,10 +4161,7 @@
   --input: var(--color-zinc-400);
   --input-background: var(--color-zinc-900);
   --switch-background: var(--color-zinc-700);
-  --ring: var(--color-brand-600);
-  @supports (color: color-mix(in lab, red, red)) {
-    --ring: color-mix(in srgb, var(--color-brand-600) 90%, transparent);
-  }
+  --ring: var(--color-sky-400);
   --neutral-action-default: var(--color-zinc-700);
   --neutral-action-hover: var(--color-zinc-800);
   --neutral-action-active: var(--color-zinc-900);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/design-system",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "Camunda's AI-first design system. shadcn + Tailwind components, design tokens aligned to Camunda's identity, and AI tooling for component authoring + migration.",
   "license": "Apache-2.0",
   "repository": {
@@ -116,11 +116,11 @@
     "@eslint/js": "9.39.5",
     "@fontsource/geist-sans": "5.3.0",
     "@playwright/test": "1.61.1",
-    "@storybook/addon-a11y": "10.4.6",
-    "@storybook/addon-docs": "10.4.6",
-    "@storybook/addon-links": "10.4.6",
-    "@storybook/react": "10.4.6",
-    "@storybook/react-vite": "10.4.6",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/react": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/cli": "^4.3.2",
     "@tailwindcss/vite": "4.3.3",
@@ -142,7 +142,7 @@
     "remark-gfm": "^4.0.1",
     "rimraf": "6.1.3",
     "shadcn": "4.13.1",
-    "storybook": "10.4.6",
+    "storybook": "10.5.10",
     "tailwindcss": "4.3.3",
     "tailwindcss-scoped-preflight": "4.0.6",
     "tsc-alias": "1.9.1",