@camunda/design-system 0.1.1 → 0.2.0

package/dist/styles.css

@@ -18,6 +18,7 @@
   --breakpoint-xl: 80rem;
   --container-xs: 20rem;
   --container-sm: 24rem;
+  --container-md: 28rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
   --text-sm: 0.875rem;
@@ -36,6 +37,7 @@
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
+  --tracking-tight: -0.025em;
   --tracking-wide: 0.025em;
   --tracking-widest: 0.1em;
   --leading-snug: 1.375;
@@ -251,6 +253,12 @@
 .mt-4 {
   margin-top: calc(var(--spacing) * 4);
 }
+.mt-6 {
+  margin-top: calc(var(--spacing) * 6);
+}
+.mt-12 {
+  margin-top: calc(var(--spacing) * 12);
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -284,6 +292,12 @@
 .-ml-0\.5 {
   margin-left: calc(var(--spacing) * -0.5);
 }
+.-ml-px {
+  margin-left: -1px;
+}
+.ml-0\.5 {
+  margin-left: calc(var(--spacing) * 0.5);
+}
 .ml-1 {
   margin-left: calc(var(--spacing) * 1);
 }
@@ -339,6 +353,10 @@
   width: calc(var(--spacing) * 2);
   height: calc(var(--spacing) * 2);
 }
+.size-2\.5 {
+  width: calc(var(--spacing) * 2.5);
+  height: calc(var(--spacing) * 2.5);
+}
 .size-3 {
   width: calc(var(--spacing) * 3);
   height: calc(var(--spacing) * 3);
@@ -379,6 +397,10 @@
   width: calc(var(--spacing) * 11);
   height: calc(var(--spacing) * 11);
 }
+.size-12 {
+  width: calc(var(--spacing) * 12);
+  height: calc(var(--spacing) * 12);
+}
 .size-full {
   width: 100%;
   height: 100%;
@@ -440,9 +462,15 @@
 .h-40 {
   height: calc(var(--spacing) * 40);
 }
+.h-44 {
+  height: calc(var(--spacing) * 44);
+}
 .h-56 {
   height: calc(var(--spacing) * 56);
 }
+.h-72 {
+  height: calc(var(--spacing) * 72);
+}
 .h-\[32rem\] {
   height: 32rem;
 }
@@ -482,6 +510,9 @@
 .max-h-\[60vh\] {
   max-height: 60vh;
 }
+.min-h-9 {
+  min-height: calc(var(--spacing) * 9);
+}
 .min-h-10 {
   min-height: calc(var(--spacing) * 10);
 }
@@ -497,6 +528,12 @@
 .min-h-32 {
   min-height: calc(var(--spacing) * 32);
 }
+.min-h-\[80px\] {
+  min-height: 80px;
+}
+.min-h-\[120px\] {
+  min-height: 120px;
+}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -566,6 +603,9 @@
 .w-40 {
   width: calc(var(--spacing) * 40);
 }
+.w-44 {
+  width: calc(var(--spacing) * 44);
+}
 .w-48 {
   width: calc(var(--spacing) * 48);
 }
@@ -632,6 +672,9 @@
 .max-w-\[calc\(100\%-2rem\)\] {
   max-width: calc(100% - 2rem);
 }
+.max-w-md {
+  max-width: var(--container-md);
+}
 .max-w-sm {
   max-width: var(--container-sm);
 }
@@ -766,6 +809,9 @@
 .auto-rows-min {
   grid-auto-rows: min-content;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -887,6 +933,25 @@
     margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
   }
 }
+.space-y-6 {
+  :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
+.gap-x-5 {
+  column-gap: calc(var(--spacing) * 5);
+}
+.gap-x-8 {
+  column-gap: calc(var(--spacing) * 8);
+}
+.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;
@@ -942,6 +1007,9 @@
 .rounded-4xl {
   border-radius: var(--radius-4xl);
 }
+.rounded-\[2px\] {
+  border-radius: 2px;
+}
 .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -981,10 +1049,18 @@
   border-top-left-radius: calc(var(--radius) - 2px);
   border-bottom-left-radius: calc(var(--radius) - 2px);
 }
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .rounded-r-md {
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);
 }
+.rounded-r-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .rounded-b-md {
   border-bottom-right-radius: calc(var(--radius) - 2px);
   border-bottom-left-radius: calc(var(--radius) - 2px);
@@ -1025,6 +1101,10 @@
   border-left-style: var(--tw-border-style);
   border-left-width: 3px;
 }
+.border-dashed {
+  --tw-border-style: dashed;
+  border-style: dashed;
+}
 .border-none {
   --tw-border-style: none;
   border-style: none;
@@ -1152,6 +1232,12 @@
     background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
   }
 }
+.bg-destructive\/15 {
+  background-color: var(--destructive);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
+  }
+}
 .bg-destructive\/20 {
   background-color: var(--destructive);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1167,6 +1253,9 @@
     background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
   }
 }
+.bg-info {
+  background-color: var(--info);
+}
 .bg-info\/10 {
   background-color: var(--info);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1251,6 +1340,12 @@
     background-color: color-mix(in oklab, var(--success) 10%, transparent);
   }
 }
+.bg-success\/15 {
+  background-color: var(--success);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--success) 15%, transparent);
+  }
+}
 .bg-switch-background {
   background-color: var(--switch-background);
 }
@@ -1275,15 +1370,48 @@
 .fill-background {
   fill: var(--background);
 }
+.fill-card {
+  fill: var(--card);
+}
 .fill-current {
   fill: currentcolor;
 }
+.fill-destructive\/10 {
+  fill: var(--destructive);
+  @supports (color: color-mix(in lab, red, red)) {
+    fill: color-mix(in oklab, var(--destructive) 10%, transparent);
+  }
+}
 .fill-foreground {
   fill: var(--foreground);
 }
+.fill-info\/10 {
+  fill: var(--info);
+  @supports (color: color-mix(in lab, red, red)) {
+    fill: color-mix(in oklab, var(--info) 10%, transparent);
+  }
+}
+.fill-muted {
+  fill: var(--muted);
+}
+.fill-muted-foreground {
+  fill: var(--muted-foreground);
+}
 .fill-primary {
   fill: var(--primary);
 }
+.stroke-border {
+  stroke: var(--border);
+}
+.stroke-destructive {
+  stroke: var(--destructive);
+}
+.stroke-info {
+  stroke: var(--info);
+}
+.stroke-muted-foreground {
+  stroke: var(--muted-foreground);
+}
 .p-0 {
   padding: calc(var(--spacing) * 0);
 }
@@ -1383,6 +1511,9 @@
 .py-6 {
   padding-block: calc(var(--spacing) * 6);
 }
+.py-10 {
+  padding-block: calc(var(--spacing) * 10);
+}
 .py-16 {
   padding-block: calc(var(--spacing) * 16);
 }
@@ -1398,6 +1529,9 @@
 .pt-12 {
   padding-top: calc(var(--spacing) * 12);
 }
+.pr-0\.5 {
+  padding-right: calc(var(--spacing) * 0.5);
+}
 .pr-1 {
   padding-right: calc(var(--spacing) * 1);
 }
@@ -1434,6 +1568,9 @@
 .pl-2\.5 {
   padding-left: calc(var(--spacing) * 2.5);
 }
+.pl-5 {
+  padding-left: calc(var(--spacing) * 5);
+}
 .pl-8 {
   padding-left: calc(var(--spacing) * 8);
 }
@@ -1486,6 +1623,15 @@
   font-size: var(--text-xs);
   line-height: var(--tw-leading, var(--text-xs--line-height));
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[11px\] {
+  font-size: 11px;
+}
+.text-\[12px\] {
+  font-size: 12px;
+}
 .text-\[28px\] {
   font-size: 28px;
 }
@@ -1559,6 +1705,10 @@
   --tw-font-weight: var(--font-weight-semibold);
   font-weight: var(--font-weight-semibold);
 }
+.tracking-tight {
+  --tw-tracking: var(--tracking-tight);
+  letter-spacing: var(--tracking-tight);
+}
 .tracking-wide {
   --tw-tracking: var(--tracking-wide);
   letter-spacing: var(--tracking-wide);
@@ -1642,6 +1792,9 @@
 .text-warning {
   color: var(--warning);
 }
+.text-warning-foreground {
+  color: var(--warning-foreground);
+}
 .text-white {
   color: var(--color-white);
 }
@@ -1682,6 +1835,9 @@
 .opacity-50 {
   opacity: 50%;
 }
+.opacity-60 {
+  opacity: 60%;
+}
 .opacity-70 {
   opacity: 70%;
 }
@@ -2124,6 +2280,13 @@
     }
   }
 }
+.hover\:border-primary {
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--primary);
+    }
+  }
+}
 .hover\:bg-accent {
   &:hover {
     @media (hover: hover) {
@@ -2348,6 +2511,13 @@
     }
   }
 }
+.hover\:opacity-100 {
+  &:hover {
+    @media (hover: hover) {
+      opacity: 100%;
+    }
+  }
+}
 .hover\:shadow-md {
   &:hover {
     @media (hover: hover) {
@@ -2485,6 +2655,12 @@
     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);
@@ -2772,6 +2948,11 @@
     height: calc(var(--spacing) * 8);
   }
 }
+.data-\[size\=sm\]\:min-h-8 {
+  &[data-size="sm"] {
+    min-height: calc(var(--spacing) * 8);
+  }
+}
 .data-\[size\=sm\]\:gap-3 {
   &[data-size="sm"] {
     gap: calc(var(--spacing) * 3);
@@ -2956,6 +3137,11 @@
     max-width: var(--container-sm);
   }
 }
+.sm\:grid-cols-3 {
+  @media (width >= 40rem) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 .sm\:flex-row {
   @media (width >= 40rem) {
     flex-direction: row;
@@ -2976,6 +3162,11 @@
     display: none;
   }
 }
+.md\:grid-cols-4 {
+  @media (width >= 48rem) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .md\:grid-cols-8 {
   @media (width >= 48rem) {
     grid-template-columns: repeat(8, minmax(0, 1fr));
@@ -2992,6 +3183,11 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
+.lg\:col-span-2 {
+  @media (width >= 64rem) {
+    grid-column: span 2 / span 2;
+  }
+}
 .lg\:col-span-4 {
   @media (width >= 64rem) {
     grid-column: span 4 / span 4;
@@ -3007,11 +3203,31 @@
     display: flex;
   }
 }
+.lg\:w-80 {
+  @media (width >= 64rem) {
+    width: calc(var(--spacing) * 80);
+  }
+}
+.lg\:grid-cols-3 {
+  @media (width >= 64rem) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.lg\:grid-cols-4 {
+  @media (width >= 64rem) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .lg\:grid-cols-16 {
   @media (width >= 64rem) {
     grid-template-columns: repeat(16, minmax(0, 1fr));
   }
 }
+.lg\:flex-row {
+  @media (width >= 64rem) {
+    flex-direction: row;
+  }
+}
 .dark\:border-input {
   &:is(.dark *) {
     border-color: var(--input);
@@ -3357,6 +3573,23 @@
     color: var(--muted-foreground);
   }
 }
+.\[\&_\[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);
+  }
+}
 .\[\&_svg\]\:pointer-events-none {
   & svg {
     pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/design-system",
-  "version": "0.1.1",
+  "version": "0.2.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": {
@@ -130,6 +130,7 @@
     "react": "19.2.6",
     "react-docgen-typescript": "2.4.0",
     "react-dom": "19.2.6",
+    "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1",
     "rimraf": "6.1.3",
     "storybook": "10.4.1",