@nubisco/ui 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubisco/ui",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Vue 3 UI component library",
   "packageManager": "pnpm@11.0.8",
   "repository": {

package/src/styles/_theme.scss

@@ -182,6 +182,33 @@
     --nb-c-danger-active: var(--nb-c-chicken-comb-700);
     --nb-c-danger-active-a11y: var(--nb-c-chicken-comb-700-a11y);
 
+    // ── Status SURFACES ───────────────────────────────────────────────────
+    // The semantic colours above are inks: strong enough to draw a border or
+    // set a word in, far too strong to fill a block with. A notification that
+    // fills its background needs a quiet ground and an ink that stays legible
+    // ON that ground, which is a different pair, not a lighter version of the
+    // same one. Named semantically so a component never has to know that
+    // "warning" happens to be phoenix-flames.
+    --nb-c-info-surface: var(--nb-c-the-blues-brothers-100);
+    --nb-c-on-info-surface: var(--nb-c-the-blues-brothers-800);
+    --nb-c-info-surface-border: var(--nb-c-the-blues-brothers-200);
+
+    --nb-c-success-surface: var(--nb-c-emerald-reflection-100);
+    --nb-c-on-success-surface: var(--nb-c-emerald-reflection-800);
+    --nb-c-success-surface-border: var(--nb-c-emerald-reflection-200);
+
+    --nb-c-warning-surface: var(--nb-c-phoenix-flames-100);
+    --nb-c-on-warning-surface: var(--nb-c-phoenix-flames-800);
+    --nb-c-warning-surface-border: var(--nb-c-phoenix-flames-200);
+
+    --nb-c-danger-surface: var(--nb-c-chicken-comb-100);
+    --nb-c-on-danger-surface: var(--nb-c-chicken-comb-800);
+    --nb-c-danger-surface-border: var(--nb-c-chicken-comb-200);
+
+    --nb-c-neutral-surface: var(--nb-c-nouveau-gray-100);
+    --nb-c-on-neutral-surface: var(--nb-c-nouveau-gray-800);
+    --nb-c-neutral-surface-border: var(--nb-c-nouveau-gray-200);
+
     --nb-c-component-plain: var(--nb-c-nouveau-gray-500);
     --nb-c-component-plain-a11y: var(--nb-c-nouveau-gray-500-a11y);
     --nb-c-component-inactive: var(--nb-c-nouveau-gray-700);
@@ -210,6 +237,29 @@
     // Form field tokens: heights and padding relative to --nb-base-unit (8px)
     --nb-c-field-bg: #{layers.token(layers.$light, field-bg)};
     --nb-c-field-border: #{layers.token(layers.$light, field-border)};
+
+    // ── Status foregrounds ────────────────────────────────────────────────
+    // Drawn as glyphs and outlines directly on a layer surface, so they are
+    // held to WCAG 1.4.11 (3:1) against every surface a card paints. These
+    // are deliberately separate from --nb-c-success / -warning / -danger,
+    // which are FILL colours sized for buttons and carry white text.
+    // Measured here against layer-1 / layer-2: 5.19 / 4.42, 5.20 / 4.43,
+    // 6.64 / 5.66. Verify any change with scripts/audit-contrast.mjs.
+    --nb-c-status-valid: var(--nb-c-emerald-reflection-700);
+    --nb-c-status-warning: var(--nb-c-phoenix-flames-700);
+    --nb-c-status-error: var(--nb-c-chicken-comb-600);
+
+    // ── Node graph (NbBlueprint) ──────────────────────────────────────────
+    // A port is a control, and it sits OUTSIDE the card on the canvas
+    // ground, so its outline is measured against layer-0 rather than the
+    // card: field-border gives 5.03 here. port-bg follows the card surface
+    // so an unwired pin reads as an empty socket cut into the card.
+    --nb-c-port-bg: var(--nb-c-surface);
+    --nb-c-port-border: var(--nb-c-field-border);
+    // The discrete-event ping. Theme-aware, unlike the #38e0ff it replaces.
+    --nb-c-port-signal: var(--nb-c-info);
+    // Parameter rows inside a card: one layer deeper than the card itself.
+    --nb-c-node-row-bg: var(--nb-c-layer-2);
     // xs is the compact size for dense surfaces (inspectors, toolbars).
     // Distinctly smaller than sm; pair with a 13px field font. See the
     // "Building an inspector" guide in the docs before reaching for it.
@@ -250,6 +300,20 @@
     // ── Radii ─────────────────────────────────────────────────────────────
     // Corner scale, expressed against the 8px base unit so a change to
     // --nb-base-unit rescales rounding with everything else.
+    //
+    // Which step to reach for. A pill means the thing slides along a track or
+    // represents a person. `xs` means a control the user manipulates directly.
+    // Anything larger is a container they do not. Under that rule a node card
+    // and its ports are controls, not containers, which is why NbBlueprint
+    // sits on `xs` rather than on the 10px it used to hard-code.
+    //
+    //   none  full-bleed rails, meters, table cells, canvas edges
+    //   xs    buttons, fields, tags, blueprint cards and their ports
+    //   sm    popovers, menus, tooltips, minimap frame
+    //   md    modals, media thumbnails
+    //   lg    inspector panels, coach marks
+    //   pill  toggle tracks and thumbs, avatars, status pills
+    --nb-radius-none: 0;
     --nb-radius-xs: calc(var(--nb-base-unit) / 4); // 2px
     --nb-radius-sm: calc(var(--nb-base-unit) / 2); // 4px
     --nb-radius-md: var(--nb-base-unit); // 8px
@@ -454,6 +518,71 @@
     --nb-c-danger: #{colors.get-color('chicken-comb', 400)};
     --nb-c-component-plain: #{colors.get-color('nouveau-gray', 400)};
 
+    // Status surfaces, inverted. A 100-tint ground is a lamp on a dark page, so
+    // dark mode fills with a translucent wash of the status colour over
+    // whatever layer is behind it and takes the ink from the light tints. The
+    // wash keeps the banner sitting ON the page rather than punching a hole in
+    // it, which a flat dark tint does.
+    --nb-c-info-surface: color-mix(
+      in srgb,
+      #{colors.get-color('the-blues-brothers', 400)} 16%,
+      transparent
+    );
+    --nb-c-on-info-surface: #{colors.get-color('the-blues-brothers', 200)};
+    --nb-c-info-surface-border: color-mix(
+      in srgb,
+      #{colors.get-color('the-blues-brothers', 400)} 32%,
+      transparent
+    );
+
+    --nb-c-success-surface: color-mix(
+      in srgb,
+      #{colors.get-color('emerald-reflection', 400)} 16%,
+      transparent
+    );
+    --nb-c-on-success-surface: #{colors.get-color('emerald-reflection', 200)};
+    --nb-c-success-surface-border: color-mix(
+      in srgb,
+      #{colors.get-color('emerald-reflection', 400)} 32%,
+      transparent
+    );
+
+    --nb-c-warning-surface: color-mix(
+      in srgb,
+      #{colors.get-color('phoenix-flames', 400)} 16%,
+      transparent
+    );
+    --nb-c-on-warning-surface: #{colors.get-color('phoenix-flames', 200)};
+    --nb-c-warning-surface-border: color-mix(
+      in srgb,
+      #{colors.get-color('phoenix-flames', 400)} 32%,
+      transparent
+    );
+
+    --nb-c-danger-surface: color-mix(
+      in srgb,
+      #{colors.get-color('chicken-comb', 400)} 16%,
+      transparent
+    );
+    --nb-c-on-danger-surface: #{colors.get-color('chicken-comb', 200)};
+    --nb-c-danger-surface-border: color-mix(
+      in srgb,
+      #{colors.get-color('chicken-comb', 400)} 32%,
+      transparent
+    );
+
+    --nb-c-neutral-surface: color-mix(
+      in srgb,
+      #{colors.get-color('nouveau-gray', 400)} 16%,
+      transparent
+    );
+    --nb-c-on-neutral-surface: #{colors.get-color('nouveau-gray', 200)};
+    --nb-c-neutral-surface-border: color-mix(
+      in srgb,
+      #{colors.get-color('nouveau-gray', 400)} 32%,
+      transparent
+    );
+
     // ── Layer system (dark) ───────────────────────────────────────────────
     // In dark mode, layers get progressively lighter as elevation increases
     --nb-c-layer-0: #{layers.level(layers.$dark, surface, 0)};
@@ -496,6 +625,16 @@
     --nb-c-field-bg: #{layers.token(layers.$dark, field-bg)};
     --nb-c-field-border: #{layers.token(layers.$dark, field-border)};
 
+    // Status foregrounds. The light values are mid-ramp fills that fall to
+    // ~3:1 or below on the dark surfaces, so the dark theme steps up the
+    // ramp instead: 8.26 / 6.80, 8.89 / 7.33, 5.99 / 4.94 against
+    // layer-1 / layer-2. --nb-c-port-bg, -port-border, -port-signal and
+    // -node-row-bg are aliases of tokens that already flip, so they need no
+    // override here.
+    --nb-c-status-valid: #{colors.get-color('emerald-reflection', 400)};
+    --nb-c-status-warning: #{colors.get-color('phoenix-flames', 400)};
+    --nb-c-status-error: #{colors.get-color('chicken-comb', 300)};
+
     // Discrete
     --nb-c-discrete: #{colors.get-color('nouveau-gray', 700)};
     --nb-c-component-discrete-text: #{colors.get-color('nouveau-gray', 300)};