@invana/styling 0.0.20 → 0.0.21

package/package.json

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

@@ -174,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/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;
+}