@a4ui/core 0.3.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1220 -881
- package/dist/layout/ThemedScenery.d.ts +22 -0
- package/dist/layout/sceneEffects.d.ts +1 -0
- package/dist/styles.css +82 -11
- package/dist/themes/index.d.ts +34 -0
- package/dist/themes/palettes.d.ts +42 -0
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -68,6 +68,26 @@ scope it to `:root` (or `:root[data-theme='light']`) after importing the styles:
|
|
|
68
68
|
Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
|
|
69
69
|
`toggleTheme()` / `<ThemeToggle />`) for the light palette.
|
|
70
70
|
|
|
71
|
+
### Themes
|
|
72
|
+
|
|
73
|
+
A **theme** is a full color palette (all 15 tokens, dark + light). A4ui ships
|
|
74
|
+
several — `space` (the default), `dino`, `doctor`, `scientist`, `soccer` — and
|
|
75
|
+
you can swap them at runtime; the whole UI recolors instantly and the choice is
|
|
76
|
+
remembered:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { initTheme, selectTheme, themes } from '@a4ui/core'
|
|
80
|
+
|
|
81
|
+
initTheme() // once at startup — restores the saved theme (or Space)
|
|
82
|
+
selectTheme('dino') // switch by name; also accepts a ThemeDefinition
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Build your own in the **[docs](https://a4uikit.github.io/a4ui/)** — open the ⚙︎
|
|
86
|
+
theme-settings drawer (top bar), pick a color for any token and the whole site
|
|
87
|
+
recolors live, then copy the exported CSS or JSON and apply it as a
|
|
88
|
+
`ThemeDefinition`. This is separate from the light/dark `setTheme`/`toggleTheme`
|
|
89
|
+
mode switch — a theme recolors underneath either mode.
|
|
90
|
+
|
|
71
91
|
## Server rendering
|
|
72
92
|
|
|
73
93
|
A4ui is **client-first** — the components render in the browser (the glass,
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const A4UI_VERSION = "0.
|
|
1
|
+
export declare const A4UI_VERSION = "0.4.1";
|
|
2
2
|
export { cn } from './lib/cn';
|
|
3
3
|
export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
|
|
4
4
|
export { useEffects, isCalm, setEffects } from './lib/effects';
|
|
@@ -48,6 +48,8 @@ export { ContextMenu, type ContextMenuItem } from './ui/ContextMenu';
|
|
|
48
48
|
export { Combobox } from './ui/Combobox';
|
|
49
49
|
export { AppShell } from './layout/AppShell';
|
|
50
50
|
export { SpaceBackground } from './layout/SpaceBackground';
|
|
51
|
+
export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery';
|
|
51
52
|
export { ThemeToggle } from './layout/ThemeToggle';
|
|
52
53
|
export { EffectsToggle } from './layout/EffectsToggle';
|
|
53
54
|
export { NavGroup } from './layout/NavGroup';
|
|
55
|
+
export { themes, space, dino, doctor, scientist, soccer, activeTheme, selectTheme, applyThemeDefinition, initTheme, themeToCss, themeToJson, TOKEN_ORDER, type ThemeDefinition, type Palette, } from './themes';
|