@camunda/design-system 0.17.0 → 0.19.0

package/dist/styles.css

@@ -75,6 +75,7 @@
   --container-xs: 20rem;
   --container-sm: 24rem;
   --container-md: 28rem;
+  --container-xl: 36rem;
   --container-5xl: 64rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
@@ -117,11 +118,13 @@
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --blur-xs: 4px;
   --blur-sm: 8px;
+  --aspect-video: 16 / 9;
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --default-font-family: "Geist Sans", sans-serif;
   --default-mono-font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
   --font-heading: var(--font-sans);
+  --color-input: var(--input);
   --color-overlay: var(--overlay);
 }
 .\@container\/card-header {
@@ -289,6 +292,9 @@
 .mx-auto {
   margin-inline: auto;
 }
+.my-0\.5 {
+  margin-block: calc(var(--spacing) * 0.5);
+}
 .my-1 {
   margin-block: var(--spacing);
 }
@@ -418,9 +424,15 @@
 .field-sizing-content {
   field-sizing: content;
 }
+.aspect-auto {
+  aspect-ratio: auto;
+}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+.aspect-video {
+  aspect-ratio: var(--aspect-video);
+}
 .size-2 {
   width: calc(var(--spacing) * 2);
   height: calc(var(--spacing) * 2);
@@ -524,6 +536,9 @@
 .h-24 {
   height: calc(var(--spacing) * 24);
 }
+.h-28 {
+  height: calc(var(--spacing) * 28);
+}
 .h-32 {
   height: calc(var(--spacing) * 32);
 }
@@ -617,6 +632,12 @@
 .min-h-screen {
   min-height: 100vh;
 }
+.w-0 {
+  width: 0;
+}
+.w-0\.5 {
+  width: calc(var(--spacing) * 0.5);
+}
 .w-1 {
   width: var(--spacing);
 }
@@ -767,6 +788,9 @@
 .max-w-sm {
   max-width: var(--container-sm);
 }
+.max-w-xl {
+  max-width: var(--container-xl);
+}
 .max-w-xs {
   max-width: var(--container-xs);
 }
@@ -974,6 +998,9 @@
 .items-start {
   align-items: flex-start;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -1217,6 +1244,10 @@
   border-style: var(--tw-border-style);
   border-width: 2px;
 }
+.border-\[1\.5px\] {
+  border-style: var(--tw-border-style);
+  border-width: 1.5px;
+}
 .border-t {
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
@@ -1249,6 +1280,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\(--color-border-tooltip\) {
+  border-color: var(--color-border-tooltip);
+}
 .border-accent-border-subtle {
   border-color: var(--accent-border-subtle);
 }
@@ -1294,6 +1328,12 @@
 .border-l-transparent {
   border-left-color: transparent;
 }
+.bg-\(--color-indicator-legend\) {
+  background-color: var(--color-indicator-legend);
+}
+.bg-\(--color-indicator-tooltip\) {
+  background-color: var(--color-indicator-tooltip);
+}
 .bg-\[var\(--color-blue-500\)\] {
   background-color: var(--color-blue-500);
 }
@@ -1411,6 +1451,9 @@
 .bg-neutral-background-subtle {
   background-color: var(--neutral-background-subtle);
 }
+.bg-neutral-foreground-subtle {
+  background-color: var(--neutral-foreground-subtle);
+}
 .bg-orange-100 {
   background-color: var(--color-orange-100);
 }
@@ -1474,6 +1517,9 @@
 .fill-foreground {
   fill: var(--foreground);
 }
+.fill-neutral-foreground-strong {
+  fill: var(--neutral-foreground-strong);
+}
 .fill-primary-action-default {
   fill: var(--primary-action-default);
 }
@@ -1603,6 +1649,9 @@
 .pt-2 {
   padding-top: calc(var(--spacing) * 2);
 }
+.pt-3 {
+  padding-top: calc(var(--spacing) * 3);
+}
 .pt-4 {
   padding-top: calc(var(--spacing) * 4);
 }
@@ -1636,6 +1685,9 @@
 .pb-1 {
   padding-bottom: var(--spacing);
 }
+.pb-3 {
+  padding-bottom: calc(var(--spacing) * 3);
+}
 .pb-4 {
   padding-bottom: calc(var(--spacing) * 4);
 }
@@ -3539,6 +3591,66 @@
     align-self: stretch;
   }
 }
+.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-neutral-foreground-subtle {
+  & .recharts-cartesian-axis-tick text {
+    fill: var(--neutral-foreground-subtle);
+  }
+}
+.\[\&_\.recharts-cartesian-grid_line\]\:stroke-border {
+  & .recharts-cartesian-grid line {
+    stroke: var(--border);
+  }
+}
+.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent {
+  & .recharts-dot[stroke='#fff'] {
+    stroke: transparent;
+  }
+}
+.\[\&_\.recharts-layer\]\:outline-hidden {
+  & .recharts-layer {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+}
+.\[\&_\.recharts-radial-bar-background-sector\]\:fill-neutral-background-strong {
+  & .recharts-radial-bar-background-sector {
+    fill: var(--neutral-background-strong);
+  }
+}
+.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-neutral-background-strong {
+  & .recharts-rectangle.recharts-tooltip-cursor {
+    fill: var(--neutral-background-strong);
+  }
+}
+.\[\&_\.recharts-reference-line-line\]\:stroke-border {
+  & .recharts-reference-line-line {
+    stroke: var(--border);
+  }
+}
+.\[\&_\.recharts-sector\]\:outline-hidden {
+  & .recharts-sector {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+}
+.\[\&_\.recharts-surface\]\:outline-hidden {
+  & .recharts-surface {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+}
 .\[\&_\[cmdk-group-heading\]\]\:px-1\.5 {
   & [cmdk-group-heading] {
     padding-inline: calc(var(--spacing) * 1.5);
@@ -3858,6 +3970,18 @@
     pointer-events: none;
   }
 }
+.\[\&\>svg\]\:size-2\.5 {
+  &>svg {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
+}
+.\[\&\>svg\]\:size-3 {
+  &>svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+}
 .\[\&\>svg\]\:size-3\! {
   &>svg {
     width: calc(var(--spacing) * 3) !important;
@@ -3890,6 +4014,11 @@
     width: calc(var(--spacing) * 8);
   }
 }
+.\[\&\>svg\]\:text-neutral-foreground-subtle {
+  &>svg {
+    color: var(--neutral-foreground-subtle);
+  }
+}
 .\[\&\>tr\]\:last\:border-b-0 {
   &>tr {
     &:last-child {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/design-system",
-  "version": "0.17.0",
+  "version": "0.19.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": {

package/dist/src/examples/cost-dashboard/useChartColors.d.ts

@@ -1,10 +0,0 @@
-import { type RefObject } from "react";
-/**
- * Resolve --chart-1..5 to concrete colors from the nearest themed ancestor.
- * recharts geometry (stroke/fill) needs literal color strings, not var(),
- * and the tokens are scoped to .c4-ui, so we read the resolved values once.
- * Note: read on mount only — a live light/dark toggle while mounted won't
- * recolor the series until remount. Acceptable for a static showcase.
- */
-export declare function useChartColors(): [RefObject<HTMLDivElement | null>, string[]];
-//# sourceMappingURL=useChartColors.d.ts.map

package/dist/src/examples/cost-dashboard/useChartColors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useChartColors.d.ts","sourceRoot":"","sources":["../../../../src/examples/cost-dashboard/useChartColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAW7E"}

package/dist/src/examples/cost-dashboard/useChartColors.js

@@ -1,20 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-/**
- * Resolve --chart-1..5 to concrete colors from the nearest themed ancestor.
- * recharts geometry (stroke/fill) needs literal color strings, not var(),
- * and the tokens are scoped to .c4-ui, so we read the resolved values once.
- * Note: read on mount only — a live light/dark toggle while mounted won't
- * recolor the series until remount. Acceptable for a static showcase.
- */
-export function useChartColors() {
-    const ref = useRef(null);
-    const [colors, setColors] = useState([]);
-    useEffect(() => {
-        if (!ref.current)
-            return;
-        const cs = getComputedStyle(ref.current);
-        setColors([1, 2, 3, 4, 5].map((n) => cs.getPropertyValue(`--chart-${n}`).trim()));
-    }, []);
-    return [ref, colors];
-}
-//# sourceMappingURL=useChartColors.js.map

package/dist/src/examples/cost-dashboard/useChartColors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useChartColors.js","sourceRoot":"","sources":["../../../../src/examples/cost-dashboard/useChartColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE;;;;;;GAMG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,MAAM,EAAE,GAAG,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACzC,SAAS,CACP,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CACvE,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;AACvB,CAAC"}