@kanzo-tech/theme 0.23.1 → 0.25.0
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 +17 -22
- package/dist/index.d.ts +28 -88
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +177 -182
- package/dist/index.js.map +1 -1
- package/dist/obligations.d.ts.map +1 -1
- package/dist/sections.d.ts +8 -0
- package/dist/sections.d.ts.map +1 -1
- package/package.json +1 -1
- package/theme-data.json +4 -94
- package/themes.css +4 -54
- package/tokens.css +5 -6
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @kanzo-tech/theme
|
|
2
2
|
|
|
3
|
-
The themes and the
|
|
3
|
+
The themes, and the preferences a person layers over them. **A theme is one flat block of CSS, and it carries
|
|
4
4
|
one mode.**
|
|
5
5
|
|
|
6
6
|
Four families ship, each a light theme and a dark one — eight themes:
|
|
@@ -13,18 +13,19 @@ Four families ship, each a light theme and a dark one — eight themes:
|
|
|
13
13
|
| `nord` | `nord` | `nord-dark` |
|
|
14
14
|
|
|
15
15
|
A user picks a light theme and a dark theme, and which side to wear — GitHub's
|
|
16
|
-
Appearance model, drawn by
|
|
16
|
+
Appearance model, drawn by `<Preferences />` in `@kanzo-tech/ui`. A product ships its own families beside
|
|
17
17
|
or instead of these.
|
|
18
18
|
|
|
19
|
-
- **Theme** — `packages/theme/themes/<name>.css`, hand-written source. Its colours,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
- **
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
- **
|
|
27
|
-
|
|
19
|
+
- **Theme** — `packages/theme/themes/<name>.css`, hand-written source. Its colours, its three radii
|
|
20
|
+
and the other shape knobs, optionally its faces (`--font-sans`, `--font-heading`, `--font-mono`;
|
|
21
|
+
Geist and Geist Mono when it names none), and its own `color-scheme`. Selected with `data-theme`.
|
|
22
|
+
Radius and typography are the theme's: no preference overrides them.
|
|
23
|
+
- **Appearance** — `light` / `dark`. It starts at the OS's `prefers-color-scheme` while nothing is
|
|
24
|
+
stored; once the person picks, the pick wins. It chooses *which theme* is worn, because a theme is
|
|
25
|
+
a side.
|
|
26
|
+
- **Density** — the root font-size the whole `rem` scale resolves against, as a percentage of the
|
|
27
|
+
browser's own (`87.5%` · `100%` · `112.5%`). Always the person's: a tenant may start it elsewhere
|
|
28
|
+
and may not pin it.
|
|
28
29
|
|
|
29
30
|
This package ships **no components**. It is CSS, the catalogue and the declared axes as data, the
|
|
30
31
|
contrast floors, and the authoring-time colour helpers the theme generator uses.
|
|
@@ -89,17 +90,11 @@ computed where it is used — `bg-destructive/7`, or `color-mix(in oklab, var(--
|
|
|
89
90
|
transparent)` where no utility reaches. The author answers for AA, and guards over the shipped themes
|
|
90
91
|
are what catch a mistake.
|
|
91
92
|
|
|
92
|
-
## How the
|
|
93
|
+
## How the preferences work
|
|
93
94
|
|
|
94
|
-
|
|
95
|
-
`
|
|
96
|
-
|
|
97
|
-
| Axis | Attribute | Sets |
|
|
98
|
-
|---|---|---|
|
|
99
|
-
| radius | `data-radius` | `--radius-box` / `--radius-field` / `--radius-selector` |
|
|
100
|
-
| font | `data-font` | `--font-sans` |
|
|
101
|
-
| monoFont | `data-mono-font` | `--font-mono` |
|
|
102
|
-
| density | `data-font-size` | the root font-size |
|
|
95
|
+
Each is an attribute **on `<html>`**: `data-theme` for the theme worn on the current side, `.dark` for
|
|
96
|
+
the side, and `data-font-size` for density. Change one and every component re-skins, with no
|
|
97
|
+
per-component work. `CORE_PREFS` declares the three, and it is the only list.
|
|
103
98
|
|
|
104
99
|
**The attributes must be on `<html>`, not a wrapper element.** Ark UI's overlays — Dialog,
|
|
105
100
|
Popover, Menu, Select, Tooltip, Toast, HoverCard, Command — portal into `document.body`, outside
|
|
@@ -111,7 +106,7 @@ Writing them is `<KanzoThemeProvider>`'s job, from `@kanzo-tech/ui`:
|
|
|
111
106
|
```tsx
|
|
112
107
|
import { KanzoThemeProvider } from "@kanzo-tech/ui";
|
|
113
108
|
|
|
114
|
-
<KanzoThemeProvider defaults={{
|
|
109
|
+
<KanzoThemeProvider defaults={{ density: "compact" }}>
|
|
115
110
|
{children}
|
|
116
111
|
</KanzoThemeProvider>;
|
|
117
112
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { default as themeDataJson } from '../theme-data.json';
|
|
2
2
|
import { SectionPrefDecl } from './sections.js';
|
|
3
3
|
/**
|
|
4
|
-
* The generated theme tables — the
|
|
4
|
+
* The generated theme tables — the theme catalogue, the density steps and the preference
|
|
5
|
+
* declaration — as a JS module.
|
|
5
6
|
*
|
|
6
7
|
* Consumers must read them through this export rather than importing
|
|
7
8
|
* `@kanzo-tech/theme/theme-data.json` directly. A raw JSON subpath import is an ESM JSON
|
|
@@ -15,23 +16,6 @@ import { SectionPrefDecl } from './sections.js';
|
|
|
15
16
|
* the generator so no second list can drift from it.
|
|
16
17
|
*/
|
|
17
18
|
export declare const themeData: {
|
|
18
|
-
radii: {
|
|
19
|
-
none: string;
|
|
20
|
-
xs: string;
|
|
21
|
-
sm: string;
|
|
22
|
-
md: string;
|
|
23
|
-
lg: string;
|
|
24
|
-
};
|
|
25
|
-
fonts: {
|
|
26
|
-
system: string;
|
|
27
|
-
geist: string;
|
|
28
|
-
inter: string;
|
|
29
|
-
};
|
|
30
|
-
monoFonts: {
|
|
31
|
-
system: string;
|
|
32
|
-
"geist-mono": string;
|
|
33
|
-
"jetbrains-mono": string;
|
|
34
|
-
};
|
|
35
19
|
densities: {
|
|
36
20
|
default: string;
|
|
37
21
|
compact: string;
|
|
@@ -54,42 +38,6 @@ export declare const themeData: {
|
|
|
54
38
|
label: string;
|
|
55
39
|
doc: string;
|
|
56
40
|
};
|
|
57
|
-
radius: {
|
|
58
|
-
kind: string;
|
|
59
|
-
options: {
|
|
60
|
-
value: string;
|
|
61
|
-
label: string;
|
|
62
|
-
}[];
|
|
63
|
-
default: string;
|
|
64
|
-
attr: string;
|
|
65
|
-
source: string;
|
|
66
|
-
label: string;
|
|
67
|
-
doc: string;
|
|
68
|
-
};
|
|
69
|
-
font: {
|
|
70
|
-
kind: string;
|
|
71
|
-
options: {
|
|
72
|
-
value: string;
|
|
73
|
-
label: string;
|
|
74
|
-
}[];
|
|
75
|
-
default: string;
|
|
76
|
-
attr: string;
|
|
77
|
-
source: string;
|
|
78
|
-
label: string;
|
|
79
|
-
doc: string;
|
|
80
|
-
};
|
|
81
|
-
monoFont: {
|
|
82
|
-
kind: string;
|
|
83
|
-
options: {
|
|
84
|
-
value: string;
|
|
85
|
-
label: string;
|
|
86
|
-
}[];
|
|
87
|
-
default: string;
|
|
88
|
-
attr: string;
|
|
89
|
-
source: string;
|
|
90
|
-
label: string;
|
|
91
|
-
doc: string;
|
|
92
|
-
};
|
|
93
41
|
density: {
|
|
94
42
|
kind: string;
|
|
95
43
|
options: {
|
|
@@ -99,6 +47,7 @@ export declare const themeData: {
|
|
|
99
47
|
default: string;
|
|
100
48
|
attr: string;
|
|
101
49
|
source: string;
|
|
50
|
+
personal: boolean;
|
|
102
51
|
label: string;
|
|
103
52
|
doc: string;
|
|
104
53
|
};
|
|
@@ -181,15 +130,15 @@ export declare const CHART_SLOTS = 8;
|
|
|
181
130
|
*
|
|
182
131
|
* **Colour IS an axis now, and it is the same kind of axis as the rest.** A theme is one flat block
|
|
183
132
|
* of CSS under `[data-theme="<name>"]` — about fifty-five declarations somebody writes, pastes and
|
|
184
|
-
* diffs — so applying one is writing an attribute, exactly like
|
|
133
|
+
* diffs — so applying one is writing an attribute, exactly like density. It stopped being
|
|
185
134
|
* special when it stopped being the output of a thirteen-stage derivation.
|
|
186
135
|
*
|
|
187
136
|
* Everything is driven by `data-*` attributes on `<html>`, and the values live in `themes.css`:
|
|
188
|
-
* · `data-theme` — selects a whole theme: its colours, its shape knobs and its fonts.
|
|
189
|
-
* · `data-
|
|
190
|
-
*
|
|
191
|
-
*
|
|
192
|
-
*
|
|
137
|
+
* · `data-theme` — selects a whole theme: its colours, its radii, its shape knobs and its fonts.
|
|
138
|
+
* · `data-font-size` — sets the root font-size relative to the browser's (the rem density scale).
|
|
139
|
+
*
|
|
140
|
+
* Radius and typography are the theme's and have no attribute of their own: a person's preference
|
|
141
|
+
* cannot override what the brand authored, because there is no preference for it.
|
|
193
142
|
*
|
|
194
143
|
* **`data-theme` is `data-palette` and `data-identity` collapsed, and the authority question they
|
|
195
144
|
* modelled has dissolved rather than been decided.** `data-palette` selected from a catalogue the
|
|
@@ -209,25 +158,18 @@ export declare const CHART_SLOTS = 8;
|
|
|
209
158
|
* Requires `@kanzo-tech/ui/tailwind.css` (or the raw token/theme CSS) in the host's Tailwind build.
|
|
210
159
|
*/
|
|
211
160
|
/**
|
|
212
|
-
* A side of the compiled document — and the appearance preference itself.
|
|
213
|
-
*
|
|
161
|
+
* A side of the compiled document — and the appearance preference itself. Two values and no
|
|
162
|
+
* `"system"`: while nothing is stored the OS's `prefers-color-scheme` is where it starts, and once
|
|
163
|
+
* the person picks a side the pick is what is stored.
|
|
214
164
|
*/
|
|
215
165
|
export type Appearance = "light" | "dark";
|
|
216
|
-
/** Radius steps (`md` = 0.5rem default). */
|
|
217
|
-
export type KanzoRadius = "none" | "xs" | "sm" | "md" | "lg";
|
|
218
166
|
/** Density (root font-size rem-scale); `default` omits the attribute. */
|
|
219
167
|
export type KanzoDensity = "default" | "compact" | "comfortable";
|
|
220
|
-
/** Sans font key — host-extensible; the DS ships `system`/`geist`/`inter` stacks, `geist` the default. */
|
|
221
|
-
export type KanzoFont = "system" | "geist" | "inter" | (string & {});
|
|
222
|
-
/** Mono font key — host-extensible; the DS ships `system`/`geist-mono`/`jetbrains-mono`, `geist-mono` the default. */
|
|
223
|
-
export type KanzoMonoFont = "system" | "geist-mono" | "jetbrains-mono" | (string & {});
|
|
224
168
|
/**
|
|
225
169
|
* Theme key — host-extensible; `""` means "defer to the tenant's default".
|
|
226
170
|
*
|
|
227
|
-
*
|
|
228
|
-
*
|
|
229
|
-
* nothing to union here — a tenant authors their own themes, so a literal union would be a list
|
|
230
|
-
* that is wrong for every client.
|
|
171
|
+
* A value is a *host's* string, unknown when this package is built — a tenant authors their own
|
|
172
|
+
* themes, so a literal union would be a list that is wrong for every client.
|
|
231
173
|
*
|
|
232
174
|
* **It replaces `KanzoPalette`, `KanzoIdentity` and `KanzoIdentityMemory`, and the collapse is the
|
|
233
175
|
* point.** Those were three types because a palette CONTAINED identities: a document was a two-mode
|
|
@@ -254,7 +196,11 @@ export interface ThemeOption {
|
|
|
254
196
|
family?: string;
|
|
255
197
|
}
|
|
256
198
|
/**
|
|
257
|
-
* The user's preferences
|
|
199
|
+
* The user's preferences: which side, which theme on it, and how big everything is.
|
|
200
|
+
*
|
|
201
|
+
* Radius and the faces left this table for the theme: they answer what the product looks like, not
|
|
202
|
+
* how a person reads it, and a control for them overrode what every theme authored. See
|
|
203
|
+
* `/docs/design/preferences`.
|
|
258
204
|
*
|
|
259
205
|
* *Free* colour left this table entirely: `palette`, `base`, `accent`, `primary`, `baseTint`,
|
|
260
206
|
* `scheme` and `schemeColors` were seven ways to express *part* of a palette at runtime, and a
|
|
@@ -265,9 +211,6 @@ export interface ThemeOption {
|
|
|
265
211
|
*/
|
|
266
212
|
export interface ThemePrefs {
|
|
267
213
|
appearance: Appearance;
|
|
268
|
-
radius: KanzoRadius;
|
|
269
|
-
font: KanzoFont;
|
|
270
|
-
monoFont: KanzoMonoFont;
|
|
271
214
|
density: KanzoDensity;
|
|
272
215
|
/**
|
|
273
216
|
* Which theme this user wears on each side — `{}` while they have chosen neither.
|
|
@@ -311,10 +254,10 @@ export declare const STORAGE_KEY = "kanzo_theme_prefs";
|
|
|
311
254
|
*
|
|
312
255
|
* **Generated, and that is the point.** `scripts/gen-theme.mjs` authors the values *and* the
|
|
313
256
|
* declaration, so the option list a control offers is the table the CSS was emitted from rather than
|
|
314
|
-
* a hand-copy beside it.
|
|
315
|
-
*
|
|
316
|
-
*
|
|
317
|
-
*
|
|
257
|
+
* a hand-copy beside it.
|
|
258
|
+
*
|
|
259
|
+
* **It lists only preferences.** A value the theme owns — a radius, a face — has no entry, so no
|
|
260
|
+
* provider stores it, no script paints it and no panel draws a control that could override a theme.
|
|
318
261
|
*
|
|
319
262
|
* The rule this installs, and it is the same one the colour half follows: **a configuration is
|
|
320
263
|
* authored once, where its values live.** The declaration, the control, the default and the
|
|
@@ -350,15 +293,12 @@ export type CorePrefKey = Exclude<keyof ThemePrefs, "sections">;
|
|
|
350
293
|
* The namespace the core's own preferences answer to in a tenant's policy.
|
|
351
294
|
*
|
|
352
295
|
* **The core is a section like any other, and this is the whole of what that costs.** A policy is
|
|
353
|
-
* keyed by namespace — `{ theme: {
|
|
354
|
-
* —
|
|
355
|
-
* and one chain answers for colour, geometry and a contributed choice alike.
|
|
296
|
+
* keyed by namespace — `{ theme: { appearance: { pinned: "dark" } }, graph: { look: { hidden: true } } }`
|
|
297
|
+
* — and one chain answers for the core and a contributed choice alike.
|
|
356
298
|
*
|
|
357
|
-
*
|
|
358
|
-
*
|
|
359
|
-
*
|
|
360
|
-
* when a palette became a document; the half not taken was that radius, density and the fonts had no
|
|
361
|
-
* document-level default at all — only a user could move them.
|
|
299
|
+
* What a policy cannot reach is the brand's shape: radius and the faces are authored in the theme,
|
|
300
|
+
* daisyUI's model, so a client shipping *compact and square* publishes a square theme. Density is
|
|
301
|
+
* declared `personal` — a policy may move where it starts and may not pin or withhold it.
|
|
362
302
|
*/
|
|
363
303
|
export declare const CORE_NAMESPACE = "theme";
|
|
364
304
|
/**
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|