@invana/styling 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/styling",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Invana TailwindCSS 4 Design System - Reusable styling configuration",
   "homepage": "https://github.com/invana/design-kit#readme",
   "type": "module",

package/src/index.css

@@ -49,6 +49,15 @@
   --color-destructive: hsl(0 70% 60%);
   --color-destructive-foreground: hsl(0 0% 100%);
 
+  /* Semantic status colors — agent/task state (activity markers, task dots,
+     votes). Distinct from destructive (which stays the action-danger color). */
+  --color-success: hsl(142 70% 38%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(38 92% 42%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(210 90% 45%);
+  --color-info-foreground: hsl(0 0% 100%);
+
   --color-muted: hsl(210 6% 90%);
   --color-muted-foreground: hsl(210 8% 45%);
 
@@ -63,12 +72,56 @@
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(210 10% 20%);
 
-  /* Border Radius */
-  --radius: 0.5rem;
+  /* ------------------------------------------------------------------------
+   * Border radius — the design language, decided 01-09-2026.
+   *
+   *   STRUCTURE is cut.      0      anything that CONTAINS
+   *   CONTROLS are pressed.  2px    anything you PRESS or TYPE INTO
+   *   SHAPE is not radius.   999px  only where round IS the object
+   *
+   * Structure: cards, panels, dialogs, popovers, menus, tables, ledger rows,
+   * chips, badges, tab panels, canvas surfaces, diagram nodes.
+   * Controls: buttons, inputs, selects, textareas, menu items, tab triggers,
+   * toggles — `rounded-control`, generated from `--radius-control` below.
+   * Shape: avatars, status dots, spinners, slider thumbs, switch capsules,
+   * scrollbar thumbs. These keep `rounded-full` because they are round
+   * objects, not rectangles with soft ends. A rectangle wearing round ends is
+   * a pill, and there are no pills.
+   *
+   * WHY 0 FOR STRUCTURE. The hairline grid is the house component: cells sit
+   * on a `bg-border` backdrop separated by `gap-px`, so the "border" is the
+   * backdrop showing through a one-pixel gap. Any radius on a cell lets that
+   * backdrop through at every corner as a grey notch — radii and hairline
+   * grids cannot both win. It also holds at application density: a radius
+   * that is invisible on a 44px button is loud on a 24px row, and nesting a
+   * chip in a row in a panel in a card stacks four of them into mush. Sharp
+   * nests at any size.
+   *
+   * WHY 2px FOR CONTROLS, not 0. At touch size a fully cut button reads as
+   * cut metal. 2px is invisible as decoration and legible as affordance: the
+   * difference between a surface and a thing you press is information, and in
+   * a dense application that does real work.
+   *
+   * The scale is deliberately flat. `rounded-sm` / `-md` / `-lg` / `-xl` /
+   * `-2xl` all resolve to 0, so the ~79 components already written against
+   * them need no edit, and a `rounded-lg` typed out of habit tomorrow cannot
+   * quietly reintroduce a radius.
+   * ---------------------------------------------------------------------- */
+  --radius: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-2xl: 0px;
+  --radius-3xl: 0px;
+
+  /* The only non-zero rectangle radius in the system. Generates
+     `rounded-control`, which every control component points at. */
+  --radius-control: 2px;
+
+  /* Retained: predates the decision, and is now the same value as
+     --radius-control. Prefer `rounded-control` — it says what it is for. */
   --radius-2px: 2px;
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 6px);
 
   /* Animations */
   --animate-accordion-down: accordion-down 0.2s ease-out;
@@ -102,6 +155,9 @@
   --destructive: 0 70% 60%;
   --background: 0 0% 97%;
   --accent: 210 6% 92%;
+  --success: 142 70% 38%;
+  --warning: 38 92% 42%;
+  --info: 210 90% 45%;
 
   --surface-alpha: 1; /* opaque → identical to current look */
   --glass-blur: none; /* no backdrop blur */

package/src/theme.css

@@ -33,11 +33,18 @@
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(222.2 84% 4.9%);
 
-  /* Border Radius */
-  --radius: 0.5rem;
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  /* Border Radius — see the full rationale in `index.css`.
+     Structure 0 · controls 2px (`rounded-control`) · round only where round
+     IS the object. The scale is flat on purpose so components already written
+     against rounded-sm/md/lg need no edit and cannot drift back. */
+  --radius: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-2xl: 0px;
+  --radius-3xl: 0px;
+  --radius-control: 2px;
 
   /* Animations */
   --animate-accordion-down: accordion-down 0.2s ease-out;

package/src/themes/default.css

@@ -26,6 +26,12 @@
   --destructive: 0 70% 60%;
   --destructive-foreground: 0 0% 100%;
   --ring: 142 70% 43%;
+  --success: 142 70% 38%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 42%;
+  --warning-foreground: 0 0% 100%;
+  --info: 210 90% 45%;
+  --info-foreground: 0 0% 100%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(0 0% 97%);
@@ -47,6 +53,12 @@
   --color-border: hsl(210 6% 85%);
   --color-input: hsl(210 6% 92%);
   --color-ring: hsl(142 70% 43%);
+  --color-success: hsl(142 70% 38%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(38 92% 42%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(210 90% 45%);
+  --color-info-foreground: hsl(0 0% 100%);
 }
 
 /* Dark mode - Default theme */
@@ -72,6 +84,12 @@
   --destructive: 0 60% 45%;
   --destructive-foreground: 0 0% 95%;
   --ring: 142 70% 60%;
+  --success: 142 65% 55%;
+  --success-foreground: 210 4% 13%;
+  --warning: 45 90% 60%;
+  --warning-foreground: 210 4% 13%;
+  --info: 210 90% 65%;
+  --info-foreground: 210 4% 13%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(210 4% 10%);
@@ -93,4 +111,10 @@
   --color-border: hsl(210 6% 22%);
   --color-input: hsl(210 6% 22%);
   --color-ring: hsl(142 70% 60%);
+  --color-success: hsl(142 65% 55%);
+  --color-success-foreground: hsl(210 4% 13%);
+  --color-warning: hsl(45 90% 60%);
+  --color-warning-foreground: hsl(210 4% 13%);
+  --color-info: hsl(210 90% 65%);
+  --color-info-foreground: hsl(210 4% 13%);
 }

package/src/themes/tailwind.css

@@ -34,6 +34,12 @@
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 100%;
   --ring: 199 89% 48%; /* sky-500 */
+  --success: 142 72% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 32 95% 44%;
+  --warning-foreground: 0 0% 100%;
+  --info: 199 89% 48%;
+  --info-foreground: 0 0% 100%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(0 0% 100%);
@@ -55,6 +61,12 @@
   --color-border: hsl(214 32% 91%);
   --color-input: hsl(214 32% 91%);
   --color-ring: hsl(199 89% 48%);
+  --color-success: hsl(142 72% 36%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(32 95% 44%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(199 89% 48%);
+  --color-info-foreground: hsl(0 0% 100%);
 }
 
 /* Dark mode - Tailwind theme */
@@ -81,6 +93,12 @@
   --destructive: 0 63% 31%;
   --destructive-foreground: 210 40% 98%;
   --ring: 198 93% 60%; /* sky-400 */
+  --success: 142 69% 58%;
+  --success-foreground: 222 47% 11%;
+  --warning: 45 96% 56%;
+  --warning-foreground: 222 47% 11%;
+  --info: 199 93% 60%;
+  --info-foreground: 222 47% 11%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(222 47% 5%);
@@ -102,4 +120,10 @@
   --color-border: hsl(217 19% 27%);
   --color-input: hsl(217 19% 27%);
   --color-ring: hsl(198 93% 60%);
+  --color-success: hsl(142 69% 58%);
+  --color-success-foreground: hsl(222 47% 11%);
+  --color-warning: hsl(45 96% 56%);
+  --color-warning-foreground: hsl(222 47% 11%);
+  --color-info: hsl(199 93% 60%);
+  --color-info-foreground: hsl(222 47% 11%);
 }

package/src/themes/vite.css

@@ -36,6 +36,12 @@
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 100%;
   --ring: 235 85% 70%;
+  --success: 153 55% 40%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 44%;
+  --warning-foreground: 0 0% 100%;
+  --info: 213 90% 52%;
+  --info-foreground: 0 0% 100%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(0 0% 100%);
@@ -57,6 +63,12 @@
   --color-border: hsl(240 6% 90%);
   --color-input: hsl(240 6% 90%);
   --color-ring: hsl(235 85% 70%);
+  --color-success: hsl(153 55% 40%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(38 92% 44%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(213 90% 52%);
+  --color-info-foreground: hsl(0 0% 100%);
 }
 
 /* Dark mode - Vite theme */
@@ -83,6 +95,12 @@
   --destructive: 0 63% 50%;
   --destructive-foreground: 0 0% 100%;
   --ring: 235 85% 70%;
+  --success: 153 55% 55%;
+  --success-foreground: 240 6% 12%;
+  --warning: 45 90% 60%;
+  --warning-foreground: 240 6% 12%;
+  --info: 213 90% 66%;
+  --info-foreground: 240 6% 12%;
 
   /* Full HSL colors for direct use */
   --color-background: hsl(0 0% 14%);
@@ -104,4 +122,10 @@
   --color-border: hsl(0 0% 20%);
   --color-input: hsl(0 0% 20%);
   --color-ring: hsl(235 85% 70%);
+  --color-success: hsl(153 55% 55%);
+  --color-success-foreground: hsl(240 6% 12%);
+  --color-warning: hsl(45 90% 60%);
+  --color-warning-foreground: hsl(240 6% 12%);
+  --color-info: hsl(213 90% 66%);
+  --color-info-foreground: hsl(240 6% 12%);
 }