@blueprint-chart/ui 1.3.0 → 1.5.0

package/dist/styles/tokens.scss

@@ -44,17 +44,22 @@ $info:    $prussian-300 !default;
 $warning: #D4A63A !default;
 $danger:  #C94044 !default;
 
+// Accent - the marker. One hex, two gestures (pen on dark, ground on light).
+// No darkened-for-white variant: chartreuse on white is forbidden, not missing.
+$chartreuse-400: #DDF247 !default;
+$accent: $chartreuse-400 !default;
+
 // Borders
 $border-color:      #dcdce0 !default;
 $border-color-dark: #2e2e2e !default;
 
 // Surface hierarchy (void > tile > elevated)
 $body-bg:                 #f3f3f4 !default;
-$body-bg-dark:            #0a0a0a !default;
+$body-bg-dark:            #000000 !default;
 $body-secondary-bg:       #ffffff !default;
-$body-secondary-bg-dark:  #141414 !default;
+$body-secondary-bg-dark:  #0e0e0e !default;
 $body-tertiary-bg:        #f8f8fa !default;
-$body-tertiary-bg-dark:   #1a1a1a !default;
+$body-tertiary-bg-dark:   #161616 !default;
 
 // Links
 $link-color:            $primary !default;
@@ -127,7 +132,7 @@ $spacer-xs: 0.25rem !default;
   --bc-canvas-dimension-color: rgba(255, 255, 255, 0.55);
 
   --bc-chrome-bg: #ffffff;
-  --bc-content-bg: #f5f5f7;
+  --bc-content-bg: #E9EBEF;
   --bc-tile-bg: #ffffff;
   --bc-tile-bg-elevated: #f5f5f7;
   --bc-canvas-glow: none;
@@ -140,6 +145,53 @@ $spacer-xs: 0.25rem !default;
   --bc-hairline: rgba(0, 0, 0, 0.08);
   --bc-hairline-strong: rgba(0, 0, 0, 0.14);
 
+  // The marker. Interactive emphasis (CTA/hover/selection/focus expression) and
+  // editorial emphasis. Always rides a non-color signal (fill/shape/pool). ~4%.
+  --bc-accent: #{$accent};
+  --bc-accent-ink: #{$prussian-600};   // only text color on accent fills
+
+  // Grid pool (see _effects.scss). Ink reads on any surface, not just canvas.
+  --bc-pool-r: 100px;
+  --bc-pool-ink: #{rgba($prussian-300, 0.33)}; // drafting-blue grid on light
+
+  // Light ink for forced-dark marketing islands (hero, closing band). These are
+  // island constants: the same value in both themes, so they are not overridden
+  // in the dark block.
+  --bc-marketing-ink: #EAF2FA;
+  --bc-marketing-ink-dim: #{$prussian-100};
+
+  // Island constant: the default Prussian focus ring is only ~1.4:1 on the
+  // #000000 marketing field, below the 3:1 focus-indicator floor. This
+  // brighter Prussian tint reads at roughly 3.5:1+ on black and is used only
+  // on the dark marketing islands (see .btn-bc-primary:focus-visible below).
+  --bc-focus-ring-marketing: 0 0 0 3px #{rgba($prussian-300, 0.9)};
+
+  // Editorial mark ink: chartreuse can't be a thin figure on white, so small
+  // marks (eyebrow #/dot) fall back to Prussian on light, chartreuse on dark.
+  --bc-mark: #{$prussian-500};
+  --bc-mark-quiet: #{rgba($prussian-500, 0.14)};
+
+  // Primary button fill/ink pair. Flips per theme so .btn-bc-primary always
+  // resolves at the nearest theme (see _effects.scss), instead of a
+  // theme-scoped selector outranking the base rule inside a forced-dark
+  // island. Light: navy fill on paper. Dark: chartreuse fill on the field.
+  --bc-btn-primary-bg: #{$prussian-600};
+  --bc-btn-primary-fg: #{$accent};
+
+  // Highlighter swipe (FIG.03). Defined once here so .bc-highlight and the
+  // landing emphasis rules share one gradient (DRY). Ground on light.
+  --bc-swipe: linear-gradient(
+    180deg,
+    transparent 45%,
+    var(--bc-accent) 45%,
+    var(--bc-accent) 92%,
+    transparent 92%
+  );
+
+  // Framed-canvas system (flat: hairline border, no shadow).
+  --bc-frame-border: var(--bc-hairline);
+  --bc-frame-radius: var(--bc-radius-lg);
+
   --bc-radius-pill: 999px;
   --bc-radius-xs: 4px;
   --bc-radius-sm: 6px;
@@ -191,19 +243,16 @@ $spacer-xs: 0.25rem !default;
   --bc-grid-color: #444;
   --bc-text-color: #aaa;
 
-  // Blueprint canvas goes dark in dark theme: the blue surface becomes a deep
-  // neutral well one rung below the void, harmonized with the graphite surface
-  // ramp. The white grid lines below already read on a dark surface, so only
-  // the background color changes — the blueprint grid stays the grid.
-  --bc-canvas-bg: #070707;
-  --bc-canvas-grid-color: rgba(255, 255, 255, 0.04);
-  --bc-canvas-grid-color-major: rgba(255, 255, 255, 0.10);
-  --bc-canvas-dimension-color: rgba(255, 255, 255, 0.4);
-
-  --bc-chrome-bg: #0f0f0f;
-  --bc-content-bg: #0f0f0f;
-  --bc-tile-bg: #1a1a1a;
-  --bc-tile-bg-elevated: #232323;
+  // Dark canvas is true black; the white grid lines carry the blueprint.
+  --bc-canvas-bg: #000000;
+  --bc-canvas-grid-color: rgba(255, 255, 255, 0.05);
+  --bc-canvas-grid-color-major: rgba(255, 255, 255, 0.12);
+  --bc-canvas-dimension-color: rgba(255, 255, 255, 0.45);
+
+  --bc-chrome-bg: #000000;
+  --bc-content-bg: #000000;
+  --bc-tile-bg: #0e0e0e;
+  --bc-tile-bg-elevated: #161616;
   --bc-canvas-glow: none;
 
   --bc-wash-soft: rgba(255, 255, 255, 0.03);
@@ -211,12 +260,39 @@ $spacer-xs: 0.25rem !default;
   --bc-wash-input: rgba(255, 255, 255, 0.03);
   --bc-wash-input-hover: rgba(255, 255, 255, 0.05);
 
-  --bc-hairline: rgba(255, 255, 255, 0.06);
-  --bc-hairline-strong: rgba(255, 255, 255, 0.12);
+  --bc-hairline: rgba(255, 255, 255, 0.09);
+  --bc-hairline-strong: rgba(255, 255, 255, 0.15);
+
+  --bc-accent: #{$accent};             // same hex; gesture differs, not value
+  --bc-accent-ink: #{$prussian-600};   // navy on chartreuse in both themes
+  --bc-pool-ink: #{rgba($prussian-100, 0.32)}; // paper-blue grid on true black
+  --bc-mark: #{$accent};               // chartreuse is ink on dark
+  --bc-mark-quiet: #{rgba($accent, 0.18)};
+
+  // On dark, chartreuse is ink (text) so the swipe stays a translucent ground
+  // behind normal text rather than a bold block. Alpha 0.4 makes the band
+  // clearly read on true black while keeping white/near-white text over it
+  // above the 4.5:1 floor (~5.9:1 on #EAF2FA, ~5.1:1 on --bs-body-color).
+  --bc-swipe: linear-gradient(
+    180deg,
+    transparent 45%,
+    #{rgba($chartreuse-400, 0.4)} 45%,
+    #{rgba($chartreuse-400, 0.4)} 92%,
+    transparent 92%
+  );
+
+  // Primary button fill/ink pair, flipped: chartreuse fill on the field,
+  // navy ink. See the light block above for the pairing rationale.
+  --bc-btn-primary-bg: #{$accent};
+  --bc-btn-primary-fg: #{$prussian-600};
+
+  // Brighter Prussian so the focus ring clears the 3:1 floor on the #000 field
+  // (mirrors what --bc-focus-ring-marketing already does for primary buttons).
+  --bc-focus-ring: 0 0 0 2px #{rgba($prussian-300, 0.6)};
 
   --bc-shadow-overlay:
-    0 8px 24px rgba(0, 0, 0, 0.4),
-    0 1px 2px rgba(0, 0, 0, 0.3);
+    0 8px 24px rgba(0, 0, 0, 0.6),
+    0 1px 2px rgba(0, 0, 0, 0.4);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Vue 3 component library for Blueprint Chart editors and apps.",
   "keywords": [
     "vue",
@@ -33,6 +33,10 @@
     },
     "./styles/tokens.css": "./dist/styles/tokens.css",
     "./styles/tokens.scss": "./dist/styles/tokens.scss",
+    "./styles/eyebrow.css": "./dist/styles/eyebrow.css",
+    "./styles/eyebrow.scss": "./dist/styles/eyebrow.scss",
+    "./styles/effects.css": "./dist/styles/effects.css",
+    "./styles/effects.scss": "./dist/styles/effects.scss",
     "./style.css": "./dist/style.css"
   },
   "files": [
@@ -78,7 +82,7 @@
     "vitest": "^3",
     "vue": "^3.5",
     "vue-router": "^4.6.4",
-    "@blueprint-chart/lib": "1.3.0"
+    "@blueprint-chart/lib": "1.5.0"
   },
   "scripts": {
     "build": "vite build",