astryx-dracula 0.3.0 → 0.3.1

package/USAGE.md

@@ -145,11 +145,12 @@ README. Not required for this kit.
 - Never override `--color-*` in app `:root`. Brand changes live in `astryx-theme.ts` via `defineTheme`, then `bun run theme:build`.
 - Tokens for every value: `var(--color-*|--space-*|--radius-*)`. No raw hex or px in components.
 - Component styling: props first, then theme `components` overrides in `astryx-theme.ts`. No per-app CSS wars.
-- A chart mark takes a `--color-data-*` role token, never a `--dracula-*` primitive. The `chart-hues` / `chart-legend` / `data-bar` types reject anything else at compile time.
+- A chart mark takes a `--color-data-*` role token, never a `--dracula-*` primitive. The `chart-hues` / `chart-legend` / `data-bar` types reject anything else at compile time, and `bun run audit` tree-walks the chart modules. Values are byte-identical to the primitives, so this is vocabulary, not appearance. Scene ART is exempt and deliberately so: `SCENE_HUES` is a separate remit where purple is banned as a series identity but legitimate as pigment.
 - `--dracula-comment` is legal on a **graphical** mark (3.36:1 clears WCAG 1.4.11) and illegal on **text** (fails 4.5:1). Any `fillOpacity` under 0.9 makes it worse. Text in a scene uses `--color-text-paragraph`.
 - A `Layout height="fill"` needs `style={{height: '100dvh'}}` or it silently degrades to document scroll. `minHeight: '100%'` computes to 0 against an indefinite parent, so it is a no-op.
 - Derive any count a page prints from its data. Hardcoded numerals are how `documentation.tsx` came to say "twenty-eight components" over 31 entries.
 - A `.tsx` exports components only; shared data lives in a sibling `.ts`, so React Fast Refresh works.
+- **Do not add your own Tooltip override.** Core's `useTooltip` paints `background-color: var(--color-text-primary)` with `color: var(--color-background-surface)` — an inversion that only reads correctly on a light theme, and on dark it is a near-white box with light-grey text. This theme already overrides it (`components.tooltip.base` in `astryx-theme.ts`, shipping as `.astryx-tooltip` in `theme.css`) onto the popover tier with `--shadow-low`, at 9.06:1. Core renders the Tooltip internally, so this reaches `Selector`, `TimeInput`, `Typeahead`, `CheckboxInput`, `CheckboxList`, `Tokenizer`, `DateRangeInput` and `Tooltip` whether or not you use one. If you are carrying your own `.astryx-tooltip` rule, it is computing the same two values and can be deleted.
 
 ## Release checklist
 

package/package.json

@@ -106,5 +106,5 @@
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.3.0"
+  "version": "0.3.1"
 }

package/shared/revenue-chart.tsx

@@ -6,6 +6,7 @@
 
 import type {CSSProperties} from 'react';
 import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -40,7 +41,10 @@ export function ProductSwatch({
       style={swatchStyle}
       role="img"
       aria-label={`${label} swatch`}>
-      <rect width={36} height={36} rx={5} fill="var(--dracula-bg-light)" />
+      {/* A surface, not a data mark: the plate behind a product swatch wears the
+          card tier. --color-background-card is byte-identical to the old
+          --dracula-bg-light (#343746). */}
+      <rect width={36} height={36} rx={5} fill="var(--color-background-card)" />
       <rect
         x={1}
         y={1}
@@ -64,7 +68,10 @@ export function ProductSwatch({
 
 // ============= REVENUE CHART =============
 
-const REVENUE_LINE = 'var(--dracula-cyan)';
+// Role token, not a --dracula-* primitive. Byte-identical (--color-data-
+// categorical-cyan IS #8BE9FD) and routed through chart-hues.ts so the line
+// colour is the sanctioned vocabulary rather than a literal decided here.
+const REVENUE_LINE = CHART_HUES.cyan;
 const CHART_W = 540;
 const CHART_H = 200;
 const CHART_PAD_LEFT = 44;

package/shared/sparkline.tsx

@@ -2,6 +2,8 @@
 // geometry and the portfolio range-normalized step geometry behind one mode
 // switch. Purple stays out of the chart so it keeps meaning "interactive".
 
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
+
 export interface SparkPoint {
   id: string;
   value: number;
@@ -28,7 +30,13 @@ export function Sparkline({
   mode = 'max',
   isCompact = false,
 }: SparklineProps) {
-  const fill = positive ? 'var(--dracula-green)' : 'var(--dracula-red)';
+  // Role tokens, not --dracula-* primitives. Byte-identical values
+  // (--color-data-categorical-green IS #50FA7B), so this is a vocabulary
+  // change with no visual delta -- it just means the sparkline agrees with
+  // chart-hues.ts instead of being the one chart module that decided alone.
+  // Reported by a consumer whose test asserted their sparkline fill equalled
+  // their CHART_HUES.green and stopped agreeing across a version bump.
+  const fill = positive ? CHART_HUES.green : CHART_HUES.red;
   if (mode === 'range') {
     const values = data.map(point => point.value);
     const max = Math.max(...values);

package/templates/centered-hero.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.3.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
+//   L > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.3.1"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -52,7 +52,7 @@ export default function CenteredHero() {
                   color="secondary"
                   justify="center"
                   hasTabularNumbers>
-                  astryx-dracula v0.3.0
+                  astryx-dracula v0.3.1
                 </Text>
               </VStack>
               <HStack gap={3} wrap="wrap" justify="center">

package/templates/product-tour.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @sideNav=(SN > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"v0.3.0"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Body"[t=body] + UL + Cd)*2) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next")) + (LP[!scroll] > Outline)
+//   A[cp=0 @sideNav=(SN > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"v0.3.1"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Body"[t=body] + UL + Cd)*2) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next")) + (LP[!scroll] > Outline)
 
 /**
  * Product Tour — a chaptered walkthrough of this theme.
@@ -909,7 +909,7 @@ export default function ProductTour() {
       railHref={SELF_HASH}
       railIcon={<Icon icon={Sparkles} size="sm" />}
       eyebrow="Documentation"
-      badge={() => 'astryx-dracula v0.3.0'}
+      badge={() => 'astryx-dracula v0.3.1'}
       art={chapterId => <ChapterArt chapterId={chapterId} />}
     />
   );

package/tokens.css

@@ -344,13 +344,21 @@ body {
   --color-tag-yellow: #F1FA8C;
   --color-tag-green: #50FA7B;
   --color-tag-purple: #BD93F9;
-  /* The token was named `tag-blue` and held purple. Dracula has no blue; the
-   * closest is Comment/Comment-dim, and Purple is what the rest of the kit
-   * already uses for a fourth accent -- so the VALUE was right and the NAME
-   * was the lie. Renamed, not repinned: a `blue` tag that paints purple is
-   * wrong in a way no contrast number catches, and a future author adding a
-   * real blue tag would have found the slot occupied. Verify no consumer
-   * returned with `grep -rn "tag-blue"` before shipping a rename. */
+  /* Renamed in 0.3.0 from `tag-blue`, which held this same #BD93F9. Dracula
+   * has no blue; Purple is what the rest of the kit already uses for a fourth
+   * accent, so the VALUE was right and the NAME was the lie. Renamed rather
+   * than repinned, because a `blue` tag that paints purple is wrong in a way
+   * no contrast number catches, and a future author adding a real blue tag
+   * would have found the slot occupied.
+   *
+   * Migrating: s/--color-tag-blue/--color-tag-purple/ in your own CSS. The
+   * rename is silent -- a stale reference resolves to nothing rather than
+   * erroring -- and it ships with no deprecated alias, so nothing falls back
+   * for you. Note that `blue` is also the name of six OTHER tokens that really
+   * are Comment #6272A4 (--color-background-blue, -border-, -icon-, -text-,
+   * --color-data-categorical-blue, and the --color-data-blue-1..5 ramp), so a
+   * repo-wide replace on "blue" repoints all six at Purple. Target the tag
+   * token by name. */
 }
 
 /* Dracula scrollbars. The spec defines no scrollbar token, so these follow its