@kanzo-tech/theme 0.18.0 → 0.20.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 +61 -22
- package/dist/contrast.d.ts +34 -0
- package/dist/contrast.d.ts.map +1 -0
- package/dist/index.d.ts +35 -74
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +188 -133
- package/dist/index.js.map +1 -1
- package/dist/ink.d.ts +2 -2
- package/dist/sections.d.ts +0 -7
- package/dist/sections.d.ts.map +1 -1
- package/package.json +1 -1
- package/theme-data.json +35 -107
- package/themes/catppuccin-latte.css +52 -45
- package/themes/catppuccin-mocha.css +55 -47
- package/themes/kanzo-dark.css +55 -55
- package/themes/kanzo.css +53 -50
- package/themes/lofi-dark.css +70 -0
- package/themes/lofi.css +38 -22
- package/themes/nord-dark.css +54 -46
- package/themes/nord.css +55 -47
- package/themes.css +4 -25
- package/tokens.css +49 -35
- package/themes/acid.css +0 -54
- package/themes/bank-dark.css +0 -62
- package/themes/bank-private-dark.css +0 -62
- package/themes/bank-private.css +0 -61
- package/themes/bank.css +0 -61
- package/themes/catppuccin-latte-dark.css +0 -62
- package/themes/catppuccin-mocha-dark.css +0 -62
- package/themes/cmyk.css +0 -54
- package/themes/coffee.css +0 -54
- package/themes/cyberpunk.css +0 -54
- package/themes/dim.css +0 -54
- package/themes/dracula-dark.css +0 -62
- package/themes/dracula.css +0 -61
- package/themes/forest.css +0 -54
- package/themes/lemonade.css +0 -54
- package/themes/luxury.css +0 -54
- package/themes/monochrome-dark.css +0 -62
- package/themes/monochrome.css +0 -61
- package/themes/night.css +0 -54
- package/themes/sunset.css +0 -54
- package/themes/synthwave.css +0 -54
- package/themes/wireframe.css +0 -54
package/README.md
CHANGED
|
@@ -3,25 +3,53 @@
|
|
|
3
3
|
The themes and the axes a user layers over them. **A theme is one flat block of CSS, and it carries
|
|
4
4
|
one mode.**
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
Four families ship, each a light theme and a dark one — eight themes:
|
|
7
|
+
|
|
8
|
+
| Family | Day | Night |
|
|
9
|
+
|---|---|---|
|
|
10
|
+
| `kanzo` — the default, from the kanzo.tech brand | `kanzo` | `kanzo-dark` |
|
|
11
|
+
| `catppuccin` | `catppuccin-latte` | `catppuccin-mocha` |
|
|
12
|
+
| `lofi` | `lofi` | `lofi-dark` |
|
|
13
|
+
| `nord` | `nord` | `nord-dark` |
|
|
14
|
+
|
|
15
|
+
A user picks a light theme and a dark theme, and which side to wear — GitHub's
|
|
16
|
+
Appearance model, drawn by `ThemePicker` in `@kanzo-tech/ui`. A product ships its own families beside
|
|
17
|
+
or instead of these.
|
|
9
18
|
|
|
10
19
|
- **Theme** — `packages/theme/themes/<name>.css`, hand-written source. Its colours, the shape knobs,
|
|
11
20
|
optionally its font stacks, and its own `color-scheme`. Selected with `data-theme`.
|
|
12
21
|
- **Radius** — `none` · `xs` · `sm` · `md` · `lg`, a user preference over the theme's own three
|
|
13
22
|
radius knobs.
|
|
14
|
-
- **Font** / **Mono font** — `--font-sans` / `--font-heading` / `--font-mono
|
|
23
|
+
- **Font** / **Mono font** — `--font-sans` / `--font-heading` / `--font-mono`; Geist and Geist Mono by
|
|
24
|
+
default, falling back to the system faces.
|
|
15
25
|
- **Density** — the root font-size the whole `rem` scale resolves against.
|
|
16
|
-
- **Appearance** — `light` / `dark`, and it chooses *which theme* is worn,
|
|
26
|
+
- **Appearance** — `light` / `dark`, picked by the user (the OS is never asked), and it chooses *which theme* is worn,
|
|
27
|
+
because a theme is a side.
|
|
28
|
+
|
|
29
|
+
This package ships **no components**. It is CSS, the catalogue and the declared axes as data, the
|
|
30
|
+
contrast floors, and the authoring-time colour helpers the theme generator uses.
|
|
31
|
+
|
|
32
|
+
## The catalogue as data
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import { defaultThemePair, themeFamilies, themeIndex } from "@kanzo-tech/theme";
|
|
36
|
+
|
|
37
|
+
themeIndex[0]; // { value: "kanzo", label: "Kanzo", dark: false, family: "kanzo" } — a ThemeOption
|
|
38
|
+
themeFamilies(themeIndex); // [{ family: "kanzo", light, dark }, …]
|
|
39
|
+
defaultThemePair(themeIndex); // { light: "kanzo", dark: "kanzo-dark" }
|
|
40
|
+
```
|
|
17
41
|
|
|
18
|
-
|
|
19
|
-
|
|
42
|
+
`themeIndex` is generated from the `themes/` directory — each file's `color-scheme` and its
|
|
43
|
+
`@family` / `@label` header — so adding a theme is adding a file. It is the default `themes` of
|
|
44
|
+
`KanzoThemeProvider`, and `defaultThemePair` is the default `defaultTheme` of both the provider and
|
|
45
|
+
`themeScript`.
|
|
20
46
|
|
|
21
47
|
## A theme
|
|
22
48
|
|
|
23
49
|
```css
|
|
24
50
|
/* packages/theme/themes/acme.css */
|
|
51
|
+
/* @family acme
|
|
52
|
+
@label Acme */
|
|
25
53
|
[data-theme="acme"] {
|
|
26
54
|
color-scheme: light;
|
|
27
55
|
--background: #fbfcfd; --foreground: #10151c;
|
|
@@ -33,7 +61,20 @@ types.
|
|
|
33
61
|
```
|
|
34
62
|
|
|
35
63
|
That is the whole mechanism: a block somebody writes, an `@import` in `themes.css`, and an attribute
|
|
36
|
-
on `<html>`.
|
|
64
|
+
on `<html>`. The header names the family the theme belongs to and the label a picker shows;
|
|
65
|
+
`scripts/gen-theme.mjs` refuses a family without exactly one light and one dark theme, and
|
|
66
|
+
`themes.test.ts` holds every theme to the floors `CONTRAST_PAIRS` lists — text at 4.5:1, borders,
|
|
67
|
+
the focus ring, the brand fill and chart marks at 3:1, and the eight `--syntax-*` inks on the page and
|
|
68
|
+
on the editor's active line. `auditContrast(resolve)` runs the same list over a theme of your own.
|
|
69
|
+
Adding a client touches no code and needs no deploy.
|
|
70
|
+
|
|
71
|
+
**What a theme writes:** the twenty-one colours (surfaces and ink, three brand fills with their inks,
|
|
72
|
+
four status fills with `-content`, `--border`, `--ring`), the names the components read with no
|
|
73
|
+
fallback (`--input`, `--field`, `--faint`, the four status `-foreground`s), the eight syntax inks
|
|
74
|
+
(`--syntax-keyword`, `-string`, `-number`, `-function`, `-variable`, `-property`, `-type`,
|
|
75
|
+
`-annotation`), the shape knobs, and optionally `--popover` and a categorical set (`--chart-1..8`).
|
|
76
|
+
The [theme generator](https://kanzo-tech.github.io/ui/theme-generator) writes all of it as a light and
|
|
77
|
+
dark pair.
|
|
37
78
|
|
|
38
79
|
**Twenty-one carry a value; everything else uses one.** `--card-foreground`, the sidebar tokens and
|
|
39
80
|
`--popover` are *uses*, bridged once in `tokens.css` through `@theme inline` and never re-declared —
|
|
@@ -82,16 +123,7 @@ Read or change the live preferences with `useKanzoTheme()`, or drop in the ready
|
|
|
82
123
|
|
|
83
124
|
Not owned here. `.dark` on `<html>` says which side is worn: the provider writes the theme chosen for
|
|
84
125
|
that side to `data-theme`, and the `dark:` variant keys off the class. If you already run a theme
|
|
85
|
-
manager,
|
|
86
|
-
|
|
87
|
-
```tsx
|
|
88
|
-
import { useTheme } from "next-themes";
|
|
89
|
-
|
|
90
|
-
const { resolvedTheme, setTheme } = useTheme();
|
|
91
|
-
<KanzoThemeProvider appearance={{ resolvedTheme, setTheme }}>{children}</KanzoThemeProvider>;
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
Omit the prop and the provider's built-in fallback toggles `.dark` itself.
|
|
126
|
+
manager that writes the class, turn its writer off — the provider is the one owner of `.dark`.
|
|
95
127
|
|
|
96
128
|
## SSR
|
|
97
129
|
|
|
@@ -102,10 +134,17 @@ attributes before first paint so there is no flash of the wrong theme. Pair it w
|
|
|
102
134
|
```tsx
|
|
103
135
|
import { themeScript, cookieStorageAdapter } from "@kanzo-tech/ui";
|
|
104
136
|
|
|
105
|
-
<head><script dangerouslySetInnerHTML={{ __html: themeScript() }} /></head>
|
|
106
|
-
<KanzoThemeProvider storage={cookieStorageAdapter()}>
|
|
137
|
+
<head><script dangerouslySetInnerHTML={{ __html: themeScript({ defaultTheme, policy }) }} /></head>
|
|
138
|
+
<KanzoThemeProvider defaultTheme={defaultTheme} policy={policy} storage={cookieStorageAdapter()}>
|
|
139
|
+
{children}
|
|
140
|
+
</KanzoThemeProvider>
|
|
107
141
|
```
|
|
108
142
|
|
|
143
|
+
Give the script the **same** `defaultTheme` pair and `policy` as the provider — both are optional, but
|
|
144
|
+
a mismatch is a flash of one theme followed by another, and a hydration mismatch in any control that
|
|
145
|
+
renders from the resolved theme. A white-label lock is
|
|
146
|
+
`policy = { theme: { themeByAppearance: { hidden: true } } }` with the brand as `defaultTheme`.
|
|
147
|
+
|
|
109
148
|
## What's in the package
|
|
110
149
|
|
|
111
150
|
The Tailwind entry ships with `@kanzo-tech/ui` (`@import "@kanzo-tech/ui/tailwind.css"`), which
|
|
@@ -117,8 +156,8 @@ The non-colour axis tables — and the DECLARATION of every axis, `CORE_PREFS`,
|
|
|
117
156
|
them — are exported from the JS entry as `themeData` / `CORE_PREFS`. Import those, **not**
|
|
118
157
|
`@kanzo-tech/theme/theme-data.json`. A raw JSON subpath import is an ESM JSON import at
|
|
119
158
|
runtime, which Node rejects without `with { type: "json" }`, and Rollup strips that attribute
|
|
120
|
-
when bundling. `
|
|
121
|
-
|
|
159
|
+
when bundling. `themeIndex` is the catalogue, read off the `themes/` directory by the generator,
|
|
160
|
+
so adding a theme is adding a file and nothing lists them twice.
|
|
122
161
|
|
|
123
162
|
`CHART_SLOTS` is a fact about the **sheet** — how many `--chart-*` properties a theme publishes —
|
|
124
163
|
and a chart resolving them off the cascade runs in a browser. It is checked against what actually
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A ground, the ink or mark read on it, and the WCAG floor between them.
|
|
3
|
+
*
|
|
4
|
+
* `4.5` is body text (1.4.3); `3` is a UI component's boundary or a graphical object (1.4.11) — a
|
|
5
|
+
* focus ring, a field's border, a chart mark, and a brand fill that has to stand out from the page.
|
|
6
|
+
*/
|
|
7
|
+
export interface ContrastPair {
|
|
8
|
+
ground: string;
|
|
9
|
+
ink: string;
|
|
10
|
+
min: number;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Every pair a theme owes, by the names the vocabulary gives them.
|
|
14
|
+
*
|
|
15
|
+
* One list for the guard over the shipped files (`themes.test.ts`) and for the generator's live
|
|
16
|
+
* warnings, so the page that authors a theme cannot pass what the build rejects.
|
|
17
|
+
*
|
|
18
|
+
* `--accent` is measured against both inks because it is a SURFACE here — the ground a hovered or
|
|
19
|
+
* selected row wears — not a third brand fill as in daisyUI. A status family's `-content` sits on
|
|
20
|
+
* the fill; its `-foreground` is the same family read on the page. Syntax is read on the editor's
|
|
21
|
+
* paper (`--background`) and on its active line (`--muted`).
|
|
22
|
+
*/
|
|
23
|
+
export declare const CONTRAST_PAIRS: readonly ContrastPair[];
|
|
24
|
+
export interface ContrastFinding extends ContrastPair {
|
|
25
|
+
ratio: number;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* The pairs a theme fails, given a way to resolve a token to its value.
|
|
29
|
+
*
|
|
30
|
+
* A pair whose either side does not resolve to an opaque hex is skipped, not failed: an alpha or a
|
|
31
|
+
* missing token is a different defect, and the guard that resolves the bridge is what reports it.
|
|
32
|
+
*/
|
|
33
|
+
export declare function auditContrast(resolve: (token: string) => string | null | undefined, pairs?: readonly ContrastPair[]): ContrastFinding[];
|
|
34
|
+
//# sourceMappingURL=contrast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../src/contrast.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAOD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EA2BjD,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,EACrD,KAAK,GAAE,SAAS,YAAY,EAAmB,GAC9C,eAAe,EAAE,CASnB"}
|
package/dist/index.d.ts
CHANGED
|
@@ -38,8 +38,10 @@ export declare const themeData: {
|
|
|
38
38
|
comfortable: string;
|
|
39
39
|
};
|
|
40
40
|
themes: {
|
|
41
|
-
|
|
41
|
+
value: string;
|
|
42
|
+
label: string;
|
|
42
43
|
dark: boolean;
|
|
44
|
+
family: string;
|
|
43
45
|
}[];
|
|
44
46
|
prefs: {
|
|
45
47
|
appearance: {
|
|
@@ -130,40 +132,31 @@ export declare const themeData: {
|
|
|
130
132
|
};
|
|
131
133
|
export type ThemeData = typeof themeDataJson;
|
|
132
134
|
/**
|
|
133
|
-
* The themes this package ships, as data a picker can render
|
|
135
|
+
* The themes this package ships, as data a picker can render — daisyUI's `themeOrder`, one entry per
|
|
136
|
+
* theme and nothing a page needs to *paint* one, which is the theme's own stylesheet's job.
|
|
134
137
|
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
* first
|
|
138
|
-
* *paint* one, which is the theme's own stylesheet's job.
|
|
139
|
-
*
|
|
140
|
-
* **It replaces `paletteIndex`, and it is a flat list where that was a tree.** A palette used to
|
|
141
|
-
* contain identities, so an entry had `children` and a picker had two levels. A brand is a theme
|
|
142
|
-
* now, so `bank` and `bank-private` sit side by side and the second level is gone.
|
|
143
|
-
*
|
|
144
|
-
* Generated from the directory, not listed: `scripts/gen-theme.mjs` reads `themes/` and records
|
|
145
|
-
* each file's own `color-scheme`. Adding a theme is adding a file.
|
|
138
|
+
* Generated from the directory, not listed: `scripts/gen-theme.mjs` reads `themes/`, each file's
|
|
139
|
+
* `color-scheme` and its `@family`/`@label` header. The default family comes first, light before dark,
|
|
140
|
+
* so the first entry and its partner are the pair a document wears when nobody has chosen.
|
|
146
141
|
*
|
|
147
142
|
* Read through this export rather than importing `@kanzo-tech/theme/theme-data.json`, for the
|
|
148
|
-
* reason given on {@link themeData}
|
|
149
|
-
* Rollup strips the attribute that would make it legal.
|
|
143
|
+
* reason given on {@link themeData}.
|
|
150
144
|
*/
|
|
151
|
-
export declare const themeIndex:
|
|
145
|
+
export declare const themeIndex: ThemeOption[];
|
|
146
|
+
/** A family: one light theme and one dark one, the pair a day/night choice moves between. */
|
|
147
|
+
export interface ThemeFamily {
|
|
148
|
+
family: string;
|
|
149
|
+
light?: ThemeOption;
|
|
150
|
+
dark?: ThemeOption;
|
|
151
|
+
}
|
|
152
|
+
/** Group a theme list by family, in the order the families first appear. */
|
|
153
|
+
export declare function themeFamilies(themes: readonly ThemeOption[]): ThemeFamily[];
|
|
152
154
|
/**
|
|
153
|
-
*
|
|
154
|
-
*
|
|
155
|
-
*
|
|
156
|
-
* depicts one by *setting the attribute* and letting the cascade answer — which is also why a
|
|
157
|
-
* preview is a `div` and not a strip of swatches. A handful of hexes could not depict a theme
|
|
158
|
-
* anyway; on the default's own, two of the four a picker used to publish were the same value.
|
|
159
|
-
*
|
|
160
|
-
* `dark` is the theme's own `color-scheme`, and it is the whole of what "a theme is one mode"
|
|
161
|
-
* means at this layer: it is a property of the theme, not a second axis crossed with it.
|
|
155
|
+
* The pair a document wears when nobody has chosen: the first light theme listed and its family's
|
|
156
|
+
* dark one. A list with no partner for it falls back to the first dark theme, and a list with no
|
|
157
|
+
* theme of a side answers `""` for that side — the attribute-absent default.
|
|
162
158
|
*/
|
|
163
|
-
export
|
|
164
|
-
name: string;
|
|
165
|
-
dark: boolean;
|
|
166
|
-
}
|
|
159
|
+
export declare function defaultThemePair(themes: readonly ThemeOption[]): Record<Appearance, string>;
|
|
167
160
|
/**
|
|
168
161
|
* How many `--chart-N` custom properties the stylesheet declares. A 9th series folds into "Other" —
|
|
169
162
|
* never cycle, or identity stops meaning anything. (`--chart-capacity` is declared beside them and
|
|
@@ -216,51 +209,17 @@ export declare const CHART_SLOTS = 8;
|
|
|
216
209
|
* Requires `@kanzo-tech/ui/tailwind.css` (or the raw token/theme CSS) in the host's Tailwind build.
|
|
217
210
|
*/
|
|
218
211
|
/**
|
|
219
|
-
* A side of the compiled document
|
|
220
|
-
*
|
|
221
|
-
* **There is no `"system"`, and its absence is the design.** Following the OS is a real behaviour we
|
|
222
|
-
* keep — without it the first visit has to guess, and guessing wrong flashes white at every
|
|
223
|
-
* dark-mode user — but it is the state with *no* value, not a third value.
|
|
224
|
-
*
|
|
225
|
-
* That split is the reference systems', and they divide on which layer they are. The JS
|
|
226
|
-
* theme-switching libraries make it a value: next-themes ships `defaultTheme = "system"` and appends
|
|
227
|
-
* `"system"` to its `themes` array, MUI has `mode: "light" | "dark" | "system"`, Mantine `"auto"`.
|
|
228
|
-
* The *token* layers do not: daisyUI writes `themes: light --default, dark --prefersdark`, where the
|
|
229
|
-
* OS preference is a flag on a theme and `data-theme` overrides it; Tailwind has a media query or a
|
|
230
|
-
* class; Radix Themes declines to model it and delegates to next-themes. And CSS itself has no third
|
|
231
|
-
* keyword — `color-scheme: light dark` means "the OS decides", and an explicit side overrides.
|
|
232
|
-
*
|
|
233
|
-
* We are a token layer: a document with a `:root` block and a `.dark` block. `"system"` arrived here
|
|
234
|
-
* as next-themes vocabulary for a mechanism we do not use, and `themeScript` never believed in it —
|
|
235
|
-
* it has always resolved "anything that is not an explicit side" against `matchMedia`.
|
|
236
|
-
*
|
|
237
|
-
* A host next-themes IS still supported; `KanzoThemeProvider` translates its `"system"` to `null` in
|
|
238
|
-
* one place, the way every other foreign vocabulary enters this system.
|
|
212
|
+
* A side of the compiled document — and the appearance preference itself. The user picks one; the
|
|
213
|
+
* OS is never asked, so there is no third value and no `prefers-color-scheme` anywhere.
|
|
239
214
|
*/
|
|
240
215
|
export type Appearance = "light" | "dark";
|
|
241
|
-
/**
|
|
242
|
-
* The appearance PREFERENCE — an explicit side, or `""` for "ask the OS".
|
|
243
|
-
*
|
|
244
|
-
* A value and not an absent key: the read-time whitelist is built from `Object.keys(DEFAULT_PREFS)`,
|
|
245
|
-
* so a key missing from the default blob is dropped on every read. It also survives
|
|
246
|
-
* `JSON.stringify` into both storage adapters, which an `undefined` would not.
|
|
247
|
-
*
|
|
248
|
-
* **`""` and not `null`, which is what it was.** Unset is the same value here as everywhere else in
|
|
249
|
-
* this package: a theme key stores `""` for "defer to the tenant", and the write rule
|
|
250
|
-
* removes an attribute at the default. Two spellings of one idea is what kept appearance out of the
|
|
251
|
-
* declaration — a `SectionPrefDecl`'s values are strings — and therefore out of the one resolution
|
|
252
|
-
* chain, which is the whole of what {@link CORE_PREFS} exists to end. Declared, "follow the OS" is
|
|
253
|
-
* `{ value: "", label: "System" }`: a thing a control can offer, rather than something reachable
|
|
254
|
-
* only through the panel's Reset button.
|
|
255
|
-
*/
|
|
256
|
-
export type AppearancePref = Appearance | "";
|
|
257
216
|
/** Radius steps (`md` = 0.5rem default). */
|
|
258
217
|
export type KanzoRadius = "none" | "xs" | "sm" | "md" | "lg";
|
|
259
218
|
/** Density (root font-size rem-scale); `default` omits the attribute. */
|
|
260
219
|
export type KanzoDensity = "default" | "compact" | "comfortable";
|
|
261
|
-
/** Sans font key — host-extensible; the DS ships `system`/`geist`/`inter` stacks. */
|
|
220
|
+
/** Sans font key — host-extensible; the DS ships `system`/`geist`/`inter` stacks, `geist` the default. */
|
|
262
221
|
export type KanzoFont = "system" | "geist" | "inter" | (string & {});
|
|
263
|
-
/** Mono font key — host-extensible; the DS ships `system`/`geist-mono`/`jetbrains-mono
|
|
222
|
+
/** Mono font key — host-extensible; the DS ships `system`/`geist-mono`/`jetbrains-mono`, `geist-mono` the default. */
|
|
264
223
|
export type KanzoMonoFont = "system" | "geist-mono" | "jetbrains-mono" | (string & {});
|
|
265
224
|
/**
|
|
266
225
|
* Theme key — host-extensible; `""` means "defer to the tenant's default".
|
|
@@ -281,17 +240,18 @@ export type KanzoThemeName = string;
|
|
|
281
240
|
/**
|
|
282
241
|
* One published theme, as the runtime sees it — the contract between the catalogue and the panel.
|
|
283
242
|
*
|
|
284
|
-
* It carries no colours
|
|
285
|
-
*
|
|
286
|
-
*
|
|
287
|
-
* wrong ones.
|
|
243
|
+
* It carries no colours. A control depicts a theme by setting `data-theme` on an element and letting
|
|
244
|
+
* the cascade paint it: the theme is already in the page, so a depiction copied out of it is a second
|
|
245
|
+
* spelling that can only ever be the same colours or the wrong ones.
|
|
288
246
|
*
|
|
289
|
-
*
|
|
290
|
-
*
|
|
247
|
+
* `dark` is the theme's own `color-scheme` — a theme IS a side, so the picker files it under day or
|
|
248
|
+
* night by this flag. `family` pairs it with its other side; a tenant theme with no partner omits it.
|
|
291
249
|
*/
|
|
292
250
|
export interface ThemeOption {
|
|
293
251
|
value: string;
|
|
294
252
|
label: string;
|
|
253
|
+
dark: boolean;
|
|
254
|
+
family?: string;
|
|
295
255
|
}
|
|
296
256
|
/**
|
|
297
257
|
* The user's preferences. Six, and only one of them is a colour.
|
|
@@ -304,7 +264,7 @@ export interface ThemeOption {
|
|
|
304
264
|
* published, and never between a value they did not.
|
|
305
265
|
*/
|
|
306
266
|
export interface ThemePrefs {
|
|
307
|
-
appearance:
|
|
267
|
+
appearance: Appearance;
|
|
308
268
|
radius: KanzoRadius;
|
|
309
269
|
font: KanzoFont;
|
|
310
270
|
monoFont: KanzoMonoFont;
|
|
@@ -423,5 +383,6 @@ export declare const AXES: {
|
|
|
423
383
|
}[];
|
|
424
384
|
export { fallbackChain, resolvePref, prefBoolean, prefNumber, prefOptions, resolveSectionToken, sectionOf, validatePrefs, validateSection, withSection, type LookDocument, type PrefOption, type PrefOptions, type PrefOrigin, type PrefSource, type PrefSources, type Problem, type ResolvedPref, type SectionManifest, type SectionPolicy, type SectionPrefDecl, type SectionPrefPolicy, type SectionTokenDecl, } from './sections.js';
|
|
425
385
|
export { check as checkDensity, OBLIGATIONS as DENSITY_OBLIGATIONS, type Check as DensityCheck, type Obligation as DensityObligation, } from './obligations.js';
|
|
386
|
+
export { auditContrast, CONTRAST_PAIRS, type ContrastFinding, type ContrastPair, } from './contrast.js';
|
|
426
387
|
export { AA, contrast, hex, inkFor, oklch, pageInk, type Oklch, } from './ink.js';
|
|
427
388
|
//# sourceMappingURL=index.d.ts.map
|
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;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|