release: WRNexusJS 0.2.57
This commit is contained in:
@@ -106,6 +106,7 @@ Tokens are emitted as `--wire-<key>` custom properties, **except** the reserved
|
||||
type ThemeTokens = Record<string, string>;
|
||||
|
||||
interface ThemeConfig {
|
||||
palette?: ThemePaletteName | CustomThemePalette;
|
||||
default?: string; // theme used when no cookie is present
|
||||
themes?: Record<string, ThemeTokens>; // deep-merged over built-in light/dark
|
||||
}
|
||||
@@ -117,7 +118,30 @@ interface ResolvedTheme {
|
||||
}
|
||||
```
|
||||
|
||||
Built-in token keys (both `light` and `dark`): `color-scheme`, `color-bg`, `color-surface`, `color-surface-2`, `color-text`, `color-muted`, `color-border`, `color-primary`, `color-primary-hover`, `color-primary-contrast`, `color-danger`, `color-success`, `color-warning`, `radius`, `radius-sm`, `font-sans`, `shadow-1`.
|
||||
Built-in palettes are `blue`, `indigo`, `violet`, `emerald`, `cyan`, `rose`,
|
||||
`amber`, and `slate`. Each supplies primary, secondary, info, success, warning,
|
||||
danger/error, hover, and contrast colors to every light/dark theme. Built-in
|
||||
token keys also include surfaces, text, borders, radii, fonts, and shadows.
|
||||
|
||||
A custom palette is intentionally complete, so components never fall back to an
|
||||
unrelated blue status or action color:
|
||||
|
||||
```ts
|
||||
theme: {
|
||||
palette: {
|
||||
primary: "#7c3aed",
|
||||
primaryHover: "#6d28d9",
|
||||
primaryContrast: "#ffffff",
|
||||
secondary: "#db2777",
|
||||
secondaryHover: "#be185d",
|
||||
secondaryContrast: "#ffffff",
|
||||
info: "#2563eb",
|
||||
success: "#059669",
|
||||
warning: "#d97706",
|
||||
danger: "#dc2626",
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
The client runtime (`renderThemeRuntime`) exposes `window.wireTheme` with `{ get, set, toggle, bind, themes }`, wires up any `[data-wire-theme-toggle]` and `[data-wire-theme-set]` elements on load, and persists the choice to the `wire-theme` cookie (`max-age` 1 year, `samesite=lax`). `toggle()` cycles through the configured theme names in order.
|
||||
|
||||
@@ -135,6 +159,7 @@ export default {
|
||||
port: 3000,
|
||||
db: { driver: "sqlite", url: "app.db" },
|
||||
theme: {
|
||||
palette: "violet",
|
||||
default: "dark",
|
||||
themes: {
|
||||
light: { "color-primary": "#7c3aed" }, // override one token; rest inherited
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.2.56",
|
||||
"version": "0.2.57",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/styles — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/uploader": "^0.2.56"
|
||||
"@wrnexus/uploader": "^0.2.57"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
Reference in New Issue
Block a user