@invana/styling 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/styling",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Invana TailwindCSS 4 Design System - Reusable styling configuration",
   "homepage": "https://github.com/invana/design-kit#readme",
   "type": "module",
@@ -71,6 +71,14 @@
     "./themes/presets-base.css": {
       "style": "./src/themes/presets-base.css",
       "default": "./src/themes/presets-base.css"
+    },
+    "./themes/data-palette": {
+      "style": "./src/themes/data-palette.css",
+      "default": "./src/themes/data-palette.css"
+    },
+    "./themes/data-palette.css": {
+      "style": "./src/themes/data-palette.css",
+      "default": "./src/themes/data-palette.css"
     }
   },
   "files": [

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 */
@@ -118,6 +174,53 @@
   -webkit-backdrop-filter: var(--glass-blur, none);
 }
 
+/*
+ * Corner-bracket hover/focus affordance — drop `corner-hint` on a button,
+ * anchor, or list item directly (no wrapper element needed). Brackets float
+ * just outside the box and fade in on hover/focus, standing in for a solid
+ * highlight background.
+ */
+@utility corner-hint {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+    background-repeat: no-repeat;
+    background-image:
+      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
+      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
+      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
+      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7));
+  }
+
+  &::before {
+    background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px;
+    background-position: top left, top left, top right, top right;
+  }
+
+  &::after {
+    background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px;
+    background-position: bottom left, bottom left, bottom right, bottom right;
+  }
+
+  &:hover::before,
+  &:hover::after,
+  &:focus-visible::before,
+  &:focus-visible::after,
+  &:focus-within::before,
+  &:focus-within::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes accordion-down {
   from {
     height: 0;

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/data-palette.css

@@ -0,0 +1,72 @@
+/*
+ * The categorical data palette.
+ *
+ * Node and edge types, chart series, legends and list dots all read this one
+ * scale, so a colour means the same thing wherever it appears — the dot beside
+ * `Observation` in a panel is the colour the canvas paints that node
+ * (design-kit-coverage.md D2).
+ *
+ * **Both modes are selected, not flipped.** The dark column is the same eight
+ * hues re-stepped for a dark surface. Validated with the dataviz validator
+ * against the kit's own card surfaces (`#fffdf7` light, `#1a1a1a` dark): the
+ * lightness band, chroma floor, adjacent-pair CVD separation and normal-vision
+ * floor all pass in both modes.
+ *
+ * Light mode carries a contrast WARN on aqua, yellow and magenta (below 3:1 on
+ * a near-white card). That is admissible **only** because every use in this
+ * system names the thing beside its swatch — a legend row has its type name, a
+ * chart series has a legend, a canvas node has its label. Colour is never the
+ * only carrier of identity here. Do not use these as a lone status colour, and
+ * do not put a value on a chart in series colour: text wears text tokens.
+ *
+ * Deliberately eight, in a fixed order. Slot 1 is the first series on every
+ * chart, not "whichever came back first from the query" — colour follows the
+ * entity, never its rank.
+ */
+
+@theme {
+  /* Light — the default, matching the base tokens in index.css. */
+  --color-data-1: #2a78d6; /* blue */
+  --color-data-2: #eb6834; /* orange */
+  --color-data-3: #1baf7a; /* aqua */
+  --color-data-4: #eda100; /* yellow */
+  --color-data-5: #e87ba4; /* magenta */
+  --color-data-6: #008300; /* green */
+  --color-data-7: #4a3aa7; /* violet */
+  --color-data-8: #e34948; /* red */
+}
+
+/*
+ * Dark — every dark theme, whatever its brand accent. The data palette is not a
+ * brand palette: a chart series does not change hue because the shell went from
+ * Gold to Ocean, or the same data would look like different data.
+ */
+[data-theme="default-dark"],
+[data-theme="tailwind-dark"],
+[data-theme="vite-dark"],
+[data-theme="gold-dark"],
+[data-theme="ocean-dark"],
+[data-theme="forest-dark"],
+[data-theme="rose-dark"],
+[data-theme="minimal-dark"],
+/* The generic hook every dark theme also stamps — this is what catches a theme
+   added after this file was written. The explicit ids above stay so the palette
+   works even where the class is not applied. */
+.dark,
+.theme-default-dark,
+.theme-tailwind-dark,
+.theme-vite-dark,
+.theme-gold-dark,
+.theme-ocean-dark,
+.theme-forest-dark,
+.theme-rose-dark,
+.theme-minimal-dark {
+  --color-data-1: #3987e5;
+  --color-data-2: #d95926;
+  --color-data-3: #199e70;
+  --color-data-4: #c98500;
+  --color-data-5: #d55181;
+  --color-data-6: #008300;
+  --color-data-7: #9085e9;
+  --color-data-8: #e66767;
+}

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%);
 }