@heyramzi/ui 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus tasks, charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/brand/index.ts

@@ -29,6 +29,14 @@ export type BrandColors = {
   surfaceLight?: CssColor;
   /** Borders on a light page. */
   lineLight?: CssColor;
+  /** The key button on a light page. Falls back to the near-black neutral. */
+  primary?: CssColor;
+  /** Text on the key button on a light page. */
+  primaryForeground?: CssColor;
+  /** The key button on a dark page. Falls back to paper. */
+  primaryOnDark?: CssColor;
+  /** Text on the key button on a dark page. */
+  primaryForegroundOnDark?: CssColor;
 };
 
 export type BrandFonts = {
@@ -61,6 +69,10 @@ const COLOR_VARS = {
   paper: "--brand-paper",
   surfaceLight: "--brand-surface-light",
   lineLight: "--brand-line-light",
+  primary: "--brand-primary",
+  primaryForeground: "--brand-primary-foreground",
+  primaryOnDark: "--brand-primary-on-dark",
+  primaryForegroundOnDark: "--brand-primary-foreground-on-dark",
 } as const satisfies Record<keyof BrandColors, string>;
 
 const FONT_VARS = {

package/src/canvas/headless/canvas-cleanup.test.ts

@@ -3,7 +3,7 @@ import { sortParentsFirst, stripCallbacks } from "./canvas-cleanup.js";
 import { makeNode } from "../test-utils.js";
 import type { CanvasNode } from "../types.js";
 
-/** Read serialized data as a loose record: these tests exercise old fields
+/** Read serialized data as a loose record: these tests exercise legacy fields
  * that are no longer part of any per-type shape but must survive the denylist. */
 function loose(node: { data: unknown }): Record<string, unknown> {
   return node.data as Record<string, unknown>;

package/src/canvas/ops/ops.ts

@@ -36,7 +36,7 @@ export const patchNodeOp = z.object({
   kind: z.literal("patchNode"),
   nodeId: z.string().min(1),
   data: z.record(z.string(), z.unknown()).optional(),
-  // Merged into the node's style object. A CSS-string style from an old save is replaced
+  // Merged into the node's style object. A legacy CSS-string style is replaced
   // wholesale (there is nothing sane to merge into).
   style: z.record(z.string(), z.unknown()).optional(),
   width: z.number().optional(),

package/src/icons/trades.ts

@@ -15,7 +15,7 @@
  */
 
 /*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
+ * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not legacy ` @tabler/icons-svelte`).
  */
 
 import {

package/src/shadcn/card/card-title.svelte

@@ -2,7 +2,11 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 
-	// WHY: card titles default to a div, so pass `as="h2"` on real section titles or a page of cards has no headings for screen readers (WCAG 2.4.6).
+	// WHY: card titles render as a div by default for backwards compatibility,
+
+	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
+
+	// Pass `as="h2"` on real section titles.
 	let {
 		ref = $bindable(null),
 		class: className,

package/src/tokens/palette.css

@@ -38,6 +38,12 @@
   --brand-surface-light: oklch(0.99 0 0); /* Cards on a light page */
   --brand-line-light: oklch(0.91 0 0); /* Borders on a light page */
 
+  /* The key button. Each theme has its own pair, since a hue lifted for dark needs dark text. */
+  --brand-primary: var(--gray-900);
+  --brand-primary-foreground: var(--gray-50);
+  --brand-primary-on-dark: var(--brand-paper);
+  --brand-primary-foreground-on-dark: var(--gray-900);
+
   /* === Tint scales ===
      Mixed from the three hues so `--brand` alone yields 100 to 800; 400 is the colour lifted
      for dark, 600 the colour itself. */
@@ -220,8 +226,8 @@
   --color-popover: var(--brand-surface-light);
   --color-popover-foreground: var(--gray-900);
 
-  --color-primary: var(--gray-900);
-  --color-primary-foreground: var(--gray-50);
+  --color-primary: var(--brand-primary);
+  --color-primary-foreground: var(--brand-primary-foreground);
 
   --color-secondary: var(--gray-100);
   --color-secondary-foreground: var(--gray-900);
@@ -320,8 +326,8 @@
   --color-popover: var(--brand-surface);
   --color-popover-foreground: var(--brand-paper);
 
-  --color-primary: var(--brand-paper);
-  --color-primary-foreground: var(--gray-900);
+  --color-primary: var(--brand-primary-on-dark);
+  --color-primary-foreground: var(--brand-primary-foreground-on-dark);
 
   --color-secondary: var(--brand-raised);
   --color-secondary-foreground: var(--brand-paper);