@invana/styling 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/styling",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "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

@@ -14,18 +14,91 @@
   --container-padding: 2rem;
   --container-screens-2xl: 1400px;
 
-  /* Font sizes */
-  --font-size-default: 1rem;
-  --font-size-xss: 0.6875rem;
-  --font-size-xs: 0.8125rem;
-  --font-size-base: 1rem;
-  --font-size-sm: 1.25rem;
-  --font-size-lg: 1.5rem;
-  --font-size-xl: 2rem;
-  --font-size-2xl: 2.5rem;
-  --font-size-3xl: 3.75rem;
-  --font-size-4xl: 4.375rem;
-  --font-size-5xl: 5.25rem;
+  /*
+   * The type ladder.
+   *
+   * TWO content sizes, and a root that is the only dial.
+   *
+   *   base   1rem       the size of everything, by default
+   *   meta   0.923rem   the one step under it
+   *
+   * `html` below is 13px, so that reads 13px / 12px in an application. A
+   * marketing page setting a 16px root gets 16px / 14.8px from the same
+   * components — which is the point: every step here is a ratio of the root, so
+   * the root is what moves, not 49 class names.
+   *
+   * ── Why `sm` and `xs` are aliases, not rungs ──────────────────────────────
+   *
+   * A block declaring `--font-size-*` used to live here. Tailwind v4's type
+   * namespace is `--text-*`, so none of it generated a utility and `text-xs`,
+   * `text-sm` and friends silently resolved to Tailwind's rem defaults against
+   * a 13px root: xs 9.75px, sm 11.375px. Nobody chose those. They are what you
+   * get when shadcn's ladder — authored for a 16px root, where `text-sm` means
+   * "the UI size" — is dropped onto a 13px one.
+   *
+   * They are re-pointed rather than deleted because 300+ call sites across
+   * design-kit, canvas and invana already say `text-sm` meaning "normal UI
+   * text" and `text-xs` meaning "a step down". That is exactly `base` and
+   * `meta`, so the classes render what their authors meant — but ONLY in a
+   * build that has this @theme block in its source graph.
+   *
+   * That is the catch, and it is not obvious. A consumer importing the
+   * PRECOMPILED `@invana/ui/styles.css` gets plain `:root{--text-…}` custom
+   * properties, not theme tokens — and Tailwind emits a utility only for a
+   * class something uses, so `.text-sm` is not in that file at all now that no
+   * kit component writes it. Such a consumer's own Tailwind therefore generates
+   * `.text-sm` from ITS default (0.875rem) and lands back on 11.375px.
+   *
+   * For the aliases to reach a consumer, that consumer must
+   * `@import "@invana/styling"` (or `@invana/styling/index.css`) so this block
+   * is compiled as part of their build. Studio imports only the prebuilt
+   * `@invana/ui/styles.css` today, so it does NOT yet pick these up.
+   *
+   * New code should not reach for them. Default text declares no size at all
+   * and inherits the root; text that is deliberately subordinate — a count, a
+   * timing, a row's subtitle — says `text-meta`, which names the job. `sm` and
+   * `xs` are here so old code is correct, not so new code has options.
+   *
+   * `lg`, `xl` and up keep Tailwind's defaults: they are heading steps, nothing
+   * complained about them, and moving them would re-baseline every title in the
+   * system for no stated reason.
+   *
+   * When adding any `--text-*` token, register it in the `font-size` class
+   * group in `@invana/ui`'s `cn` as well. `text-*` is both the size and the
+   * colour scale, so tailwind-merge reads a size it does not recognise as a
+   * colour and silently strips the real colour class. (`xs` and `sm` are
+   * built-ins and already in that group; `meta` is registered.)
+   */
+
+  /*
+   * The meta step — the one size under the base.
+   *
+   * Stated as a ratio of the root (12/13) rather than the absolute `12px` it
+   * used to be. Absolute was the right call while the ladder around it was
+   * broken; it is the wrong one now, because a px step cannot follow a root
+   * that moves, and following the root is what lets these components render a
+   * website as well as an application.
+   *
+   * `rem`, not `em`: nested subordinate text should not compound down to 11px
+   * and then 10px. One step means one step, wherever it sits.
+   */
+  --text-meta: 0.923rem;
+  --text-meta--line-height: 1.5;
+
+  /*
+   * Compatibility aliases — see the ladder note above. Not for new code.
+   *
+   * The paired `--line-height` matters as much as the size. Tailwind ships one
+   * per step (sm 1.4286, xs 1.3333), and re-pointing only the size leaves two
+   * classes rendering 12px text in rows of different heights — the same
+   * inconsistency one level down. Both aliases take the base ratio, so
+   * `text-xs` and `text-meta` are the same line, and `text-sm` and `text-base`
+   * are the same line.
+   */
+  --text-sm: 1rem;
+  --text-sm--line-height: 1.5;
+  --text-xs: 0.923rem;
+  --text-xs--line-height: 1.5;
 
   /* Font weights */
   --font-weight-regular: 400;
@@ -72,6 +145,12 @@
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(210 10% 20%);
 
+  /* The line between two things on a canvas — a graph edge, a dependency
+     arrow, a connector. Deliberately NOT --color-border: a border separates
+     surfaces and may go invisible against them, while an edge is content and
+     has to stay legible on the canvas it is drawn on. */
+  --color-edge: hsl(210 6% 78%);
+
   /* ------------------------------------------------------------------------
    * Border radius — the design language, decided 01-09-2026.
    *
@@ -163,6 +242,18 @@
   --glass-blur: none; /* no backdrop blur */
 }
 
+/*
+ * Dark: the edge lifts, because the surface it is drawn on went dark. One rule
+ * for every dark theme, whatever its brand accent — an edge is content, and
+ * content does not change colour when the shell does (same reasoning as
+ * themes/data-palette.css). The suffix selector also catches a theme added
+ * after this was written.
+ */
+[data-theme$="-dark"],
+.dark {
+  --color-edge: hsl(210 6% 30%);
+}
+
 [data-glass="true"] {
   --surface-alpha: 0.6;
   --glass-blur: blur(12px);
@@ -174,6 +265,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/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;
+}