@kitlangton/knobs 0.4.0-next.0 → 0.4.0-next.10

package/dist/types/themes/void.d.ts

@@ -0,0 +1,8 @@
+/**
+ * For OLED and video review: true black page and panel with Apple's `#1c1c1e` / `#2c2c2e` raised
+ * surfaces, text capped at `#ededed` to limit halation, a white accent, flat with solid
+ * hairlines, and a black stage behind compared media. Neutral (no tint) so the chrome doesn't
+ * bias colour judgement. The light pair is generated from the same dials, with a neutral
+ * near-black accent.
+ */
+export declare const voidTheme: import("./define.js").Theme;

package/dist/types/tokens/color.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The colour maths the theme generator needs and nothing more: OKLCH ↔ sRGB (Björn Ottosson's
+ * OKLab matrices), hex parsing and formatting with alpha, and APCA 0.0.98G contrast.
+ */
+/** Linear-light sRGB, each channel 0–1, plus straight (not premultiplied) alpha. */
+export type Rgba = readonly [r: number, g: number, b: number, a: number];
+export interface Oklch {
+    /** Perceived lightness, 0–1. */
+    readonly l: number;
+    readonly c: number;
+    /** Hue in degrees. */
+    readonly h: number;
+    readonly alpha?: number;
+}
+export declare const toLinear: (c: number) => number;
+export declare const toGamma: (c: number) => number;
+/** Linear sRGB → OKLCH. */
+export declare function linearToOklch([r, g, b, a]: Rgba): Oklch;
+/** OKLCH → linear sRGB, unclamped (may fall outside the gamut). */
+export declare function oklchToLinear({ l: L, c, h, alpha }: Oklch): Rgba;
+/** OKLCH → linear sRGB inside the gamut, reducing chroma (keeping L and h) when it doesn't fit. */
+export declare function oklchToLinearInGamut(color: Oklch): Rgba;
+/** Parses `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `oklch(L% C H / A)` and `rgb()/rgba()`. */
+export declare function parseColor(input: string): Rgba;
+export declare const toOklch: (input: string) => Oklch;
+/** Linear sRGB → `#rrggbb`, or `#rrggbbaa` when not opaque. */
+export declare function formatHex([r, g, b, a]: Rgba): string;
+export declare const oklchToHex: (color: Oklch) => string;
+/** Rounds to the 8-bit hex grid, so values compare and serialise the same everywhere. */
+export declare const normalize: (input: string) => string;
+/** `color` at `alpha` (multiplying any alpha it already has). */
+export declare function withAlpha(input: string, alpha: number): string;
+/** `top` composited over an opaque `bottom` in gamma-encoded sRGB (what browsers paint). */
+export declare function over(top: string, bottom: string): string;
+/** `a` mixed toward `b` by `t` (0–1) in OKLCH, the hue taking the shorter arc. */
+export declare function mixOklch(a: string, b: string, t: number): string;
+/**
+ * APCA 0.0.98G lightness contrast of `text` on `background`, as an absolute Lc (light text on
+ * dark is negative in APCA; this returns its magnitude). A translucent text colour is composited
+ * over the background first.
+ */
+export declare function apca(text: string, background: string): number;

package/dist/types/tokens/css.d.ts

@@ -0,0 +1,13 @@
+import type { Theme } from "../themes/define.js";
+export declare const APPEARANCE_CSS: string;
+/**
+ * The default token sheet for `theme`, in `@layer knobs.tokens` so any host assignment wins: the
+ * theme's values (inputs, generated colours as `light-dark()` pairs, literals) as public tokens on
+ * `:where(:root,:host)`, every token resolved privately (`--_k-*`) on `:where(.knobs-root)`, and
+ * the appearance rules. Component styles read only the private names.
+ */
+export declare function tokensCss(theme: Theme): string;
+/** One block of everything `theme` declares, under `selector`, to theme part of a page. */
+export declare function themeCss(theme: Theme, selector: string): string;
+/** The README token reference: every public token with its values in `theme`, then the renames. */
+export declare function tokensTable(theme: Theme): string;

package/dist/types/tokens/evaluate.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Evaluates the small CSS colour language the token derivations are written in: `var(--k-…)`
+ * (with fallbacks), `color-mix(in oklch, A p, B q)` (premultiplied, shorter hue, as browsers do),
+ * `calc(N% * var(--k-contrast))` percentages, and plain colours. The same strings are emitted as
+ * CSS, so the TypeScript-resolved maps and the browser agree by construction.
+ */
+export type Lookup = (cssName: string) => string | undefined;
+export declare function evaluate(input: string, lookup: Lookup): string;

package/dist/types/tokens/index.d.ts

@@ -0,0 +1,4 @@
+export { apca, formatHex, mixOklch, normalize, type Oklch, oklchToHex, over, parseColor, type Rgba, toOklch, withAlpha, } from "./color.js";
+export { APPEARANCE_CSS, themeCss, tokensCss, tokensTable } from "./css.js";
+export { evaluate } from "./evaluate.js";
+export { type ColorTokenName, cssName, DEPRECATED, type HookName, type PublicTokenName, RETIRED_INTERNAL, type SemanticTokenName, THEME_DIALS, type ThemeTokenName, type Tier, TOKEN_BY_NAME, TOKENS, type TokenDef, type TokenName, type TokenProperty, type TokenSource, type TokenType, tokenForProperty, } from "./schema.js";