@skaile/brand 0.6.0 → 0.7.0

package/README.md

@@ -9,6 +9,8 @@ properties, a Tailwind preset, and brand assets (logo, icon, identity).
   marketing/website surface (gradient, persona avatars, spacing/shadow scales).
 - `@skaile/brand/theme.css` — shadcn-semantic CSS variables, light + dark, the
   app surface (platform, store).
+- `@skaile/brand/nuxt-ui.css` — Nuxt UI 4 bridge: imports `theme.css` and maps its variables onto
+  the semantic `--ui-*` tokens Nuxt UI components read (palette, radius, light/dark).
 - `@skaile/brand/tailwind-preset` — Tailwind preset bound to `theme.css` vars.
 - `@skaile/brand/tokens` — canonical `tokens.json`.
 - `@skaile/brand/assets/*` — `skaile-logo.svg`, `skaile-icon.svg`, `favicon.svg`, `identity.md`.
@@ -23,3 +25,26 @@ properties, a Tailwind preset, and brand assets (logo, icon, identity).
 // Marketing (Astro) — plain CSS asset import
 import '@skaile/brand/brand.css'
 ```
+```css
+/* Nuxt UI 4 app (Tailwind v4): import AFTER "@nuxt/ui" — same specificity, source order decides */
+@import "tailwindcss";
+@import "@nuxt/ui";
+@import "@skaile/brand/nuxt-ui.css"; /* includes theme.css */
+```
+
+### Nuxt UI bridge (`nuxt-ui.css`)
+
+Takes the brand palette, radius and light/dark switch into every Nuxt UI component with no
+per-app overrides. Dark mode follows the `.dark` class Nuxt UI's color mode puts on `<html>`.
+It replaces `@ecsplico/brand/nuxt-ui.css` with identical output; migrate by swapping the import
+specifier and the dependency.
+
+| Selector | Effect |
+|---|---|
+| `:root, .light, .dark` | `--ui-primary/secondary/success/warning/error/info`, `--ui-bg-*`, `--ui-text-*`, `--ui-border-*`, `--ui-radius` from the brand variables |
+| `.dark .bg-inverted` | label on solid-neutral surfaces takes the dark page colour |
+| `.dark` | `--ui-primary` switches to `--color-primary-bright`; #7300ff is ~2.3:1 on the dark page |
+
+An app with its own dark selector (forge-common's `.forge-project-dark`) has to repeat the
+`--ui-*` mapping under that selector, because a custom property referencing another is resolved
+where it is declared.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/brand",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Skaile brand: design tokens, CSS custom properties, Tailwind preset, and brand assets",
   "license": "UNLICENSED",
   "type": "module",
@@ -12,6 +12,7 @@
     "./tokens": "./src/tokens.json",
     "./brand.css": "./src/css/brand.css",
     "./theme.css": "./src/css/theme.css",
+    "./nuxt-ui.css": "./src/css/nuxt-ui.css",
     "./tailwind-preset": "./src/tailwind-preset.ts",
     "./assets/*": "./assets/*"
   },

package/src/css/nuxt-ui.css

@@ -0,0 +1,63 @@
+/*
+ * @skaile/brand/nuxt-ui.css: Skaile brand → Nuxt UI 4 bridge.
+ *
+ * Maps the semantic tokens Nuxt UI components read (--ui-*) onto the Skaile
+ * brand variables from ./theme.css, so every Nuxt UI component
+ * takes the brand palette, radius and light/dark switch with no per-app
+ * overrides. Nuxt UI 4 components use semantic tokens only, so overriding the
+ * semantic set is enough.
+ *
+ * Import AFTER "@nuxt/ui" (equal specificity, source order decides):
+ *   @import "tailwindcss";
+ *   @import "@nuxt/ui";
+ *   @import "@skaile/brand/nuxt-ui.css";
+ */
+@import "./theme.css";
+
+:root,
+.light,
+.dark {
+  --ui-primary: var(--primary);
+  --ui-secondary: var(--secondary);
+  --ui-success: var(--color-success);
+  --ui-warning: var(--color-warning);
+  --ui-error: var(--destructive);
+  --ui-info: var(--color-ai-accent); /* brand has no info colour */
+  --ui-bg: var(--background);
+  --ui-bg-muted: var(--muted);
+  --ui-bg-elevated: var(--card);
+  --ui-bg-accented: var(--accent);
+  --ui-bg-inverted: var(--foreground);
+  --ui-text: var(--foreground);
+  --ui-text-highlighted: var(--foreground);
+  --ui-text-toned: var(--foreground);
+  --ui-text-muted: var(--muted-foreground);
+  --ui-text-dimmed: var(--muted-foreground);
+  --ui-text-inverted: var(--primary-foreground);
+  --ui-border: var(--border);
+  --ui-border-muted: var(--border);
+  --ui-border-accented: var(--input);
+  --ui-border-inverted: var(--foreground);
+  --ui-radius: var(--radius);
+}
+
+/*
+ * `--ui-text-inverted` is the label on every solid colour (`bg-primary`, ...)
+ * AND on solid neutral (`bg-inverted`). Brand keeps the saturated #7300ff
+ * primary with a white label in dark, so the label stays white; only surfaces
+ * on `--ui-bg-inverted` (the light --foreground in dark) take the dark page
+ * colour. Descendants (alert titles, icons) inherit it.
+ */
+.dark .bg-inverted {
+  --ui-text-inverted: var(--background);
+}
+
+/*
+ * #7300ff on the dark page is ~2.3:1, too faint for the text and outlines
+ * Nuxt UI draws in `--ui-primary` (soft/outline badges, active tabs, links).
+ * Brand's dark highlight `--color-primary-bright` (#9b40ff) takes over; a
+ * white label on it stays above 4.5:1.
+ */
+.dark {
+  --ui-primary: var(--color-primary-bright);
+}