@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/core/shorthands.d.ts

@@ -0,0 +1,187 @@
+import type { DimensionValue, TextStyle, ViewStyle } from 'react-native';
+import type { Responsive } from '#ui/core/breakpoint';
+import { type ColorValue } from '#ui/core/color';
+import type { RingToken, Theme } from '#ui/core/theme';
+import type { ShadowToken } from '#ui/core/tokens/effects';
+import { type CornerValue } from '#ui/core/tokens/layout';
+export type Spacing = Responsive<DimensionValue>;
+export type Size = Responsive<DimensionValue>;
+export type Flag = Responsive<boolean>;
+export type Align = Responsive<NonNullable<ViewStyle['alignItems']>>;
+export type Justify = Responsive<NonNullable<ViewStyle['justifyContent']>>;
+export interface BoxStyleProps {
+    flex?: Responsive<boolean | number>;
+    row?: Flag;
+    wrap?: Flag;
+    center?: Flag;
+    align?: Align;
+    justify?: Justify;
+    self?: Responsive<NonNullable<ViewStyle['alignSelf']>>;
+    shrink?: Responsive<number>;
+    grow?: Responsive<number>;
+    basis?: Size;
+    gap?: Spacing;
+    /** The gap along one axis only, for a wrapping row whose columns and rows
+     *  breathe differently. Both are real React Native style keys, so they mean
+     *  the same thing on every target. */
+    gapX?: Spacing;
+    gapY?: Spacing;
+    /** How WRAPPED lines are packed against the cross axis. `align` positions the
+     *  items inside their line; this positions the lines. */
+    alignContent?: Responsive<NonNullable<ViewStyle['alignContent']>>;
+    between?: Flag;
+    w?: Size;
+    h?: Size;
+    minW?: Size;
+    minH?: Size;
+    maxW?: Size;
+    maxH?: Size;
+    aspect?: Responsive<number>;
+    fill?: Flag;
+    absolute?: Flag;
+    top?: Size;
+    right?: Size;
+    bottom?: Size;
+    left?: Size;
+    z?: Responsive<number>;
+    p?: Spacing;
+    px?: Spacing;
+    py?: Spacing;
+    pt?: Spacing;
+    pr?: Spacing;
+    pb?: Spacing;
+    pl?: Spacing;
+    m?: Spacing;
+    mx?: Spacing;
+    my?: Spacing;
+    mt?: Spacing;
+    mr?: Spacing;
+    mb?: Spacing;
+    ml?: Spacing;
+    bg?: Responsive<ColorValue>;
+    /** A radius token, a raw px value, or `'circle'`; see {@link CornerValue}. */
+    radius?: Responsive<CornerValue>;
+    border?: Responsive<ColorValue>;
+    borderWidth?: Responsive<number>;
+    shadow?: Responsive<ShadowToken>;
+    /** The focus treatment, derived from the theme's accent. */
+    ring?: Responsive<RingToken>;
+    opacity?: Responsive<number>;
+    overflow?: Responsive<NonNullable<ViewStyle['overflow']>>;
+    /** Paints into its own stacking context, so a blend or a z-index inside cannot
+     *  reach the page behind it. Browser targets only; native has no equivalent. */
+    isolate?: Flag;
+}
+/** The rows a React Native <Text> honours: it lays ITSELF out, so the container
+ *  rows (`row`, `gap`, `align`) and the surface paints (`bg`, `radius`, `border`)
+ *  stay on <Box>. */
+declare const TEXT_LAYOUT_ROWS: readonly ["flex", "self", "shrink", "grow", "basis", "w", "h", "minW", "minH", "maxW", "maxH", "absolute", "top", "right", "bottom", "left", "z", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "opacity"];
+/**
+ * The text half of the layout vocabulary: what <Text> takes as props.
+ *
+ * `textAlign` is spelled in full because `align` already means `alignItems` on
+ * <Box>, and one name means one role across the kit.
+ */
+export interface TextLayoutProps extends Pick<BoxStyleProps, (typeof TEXT_LAYOUT_ROWS)[number]> {
+    textAlign?: Responsive<NonNullable<TextStyle['textAlign']>>;
+}
+export type Rule = string | readonly string[] | Readonly<Record<string, unknown>> | ((value: unknown, theme: Theme) => Readonly<Record<string, unknown>>);
+/**
+ * The `satisfies` below is what makes the interfaces and the table one source of
+ * truth: a prop added to `BoxStyleProps` or `TextLayoutProps` and forgotten here
+ * is a compile error. Without that link they drift silently and in two different
+ * ways - <Box> and <Text> forward the unknown name to the host node as a DOM
+ * attribute, and a recipe emits it verbatim as a bogus style key.
+ */
+export declare const RULES: {
+    readonly fill: {
+        readonly position: 'absolute';
+        readonly top: 0;
+        readonly left: 0;
+        readonly right: 0;
+        readonly bottom: 0;
+    };
+    readonly flex: (v: unknown) => {
+        flex: unknown;
+    };
+    readonly row: {
+        readonly flexDirection: 'row';
+    };
+    readonly wrap: {
+        readonly flexWrap: 'wrap';
+    };
+    readonly center: {
+        readonly alignItems: 'center';
+        readonly justifyContent: 'center';
+    };
+    readonly between: {
+        readonly justifyContent: 'space-between';
+    };
+    readonly align: 'alignItems';
+    readonly justify: 'justifyContent';
+    readonly self: 'alignSelf';
+    readonly shrink: 'flexShrink';
+    readonly grow: 'flexGrow';
+    readonly basis: 'flexBasis';
+    readonly gap: 'gap';
+    readonly gapX: 'columnGap';
+    readonly gapY: 'rowGap';
+    readonly alignContent: 'alignContent';
+    readonly w: 'width';
+    readonly h: 'height';
+    readonly minW: 'minWidth';
+    readonly minH: 'minHeight';
+    readonly maxW: 'maxWidth';
+    readonly maxH: 'maxHeight';
+    readonly aspect: 'aspectRatio';
+    readonly absolute: {
+        readonly position: 'absolute';
+    };
+    readonly top: 'top';
+    readonly right: 'right';
+    readonly bottom: 'bottom';
+    readonly left: 'left';
+    readonly z: 'zIndex';
+    readonly p: readonly ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
+    readonly px: readonly ["paddingLeft", "paddingRight"];
+    readonly py: readonly ["paddingTop", "paddingBottom"];
+    readonly pt: 'paddingTop';
+    readonly pr: 'paddingRight';
+    readonly pb: 'paddingBottom';
+    readonly pl: 'paddingLeft';
+    readonly m: readonly ["marginTop", "marginRight", "marginBottom", "marginLeft"];
+    readonly mx: readonly ["marginLeft", "marginRight"];
+    readonly my: readonly ["marginTop", "marginBottom"];
+    readonly mt: 'marginTop';
+    readonly mr: 'marginRight';
+    readonly mb: 'marginBottom';
+    readonly ml: 'marginLeft';
+    readonly bg: (v: unknown, theme: Theme) => {
+        backgroundColor: string;
+    };
+    readonly radius: (v: unknown, theme: Theme) => {
+        borderRadius: import("#ui/core/tokens/layout").Radius;
+    };
+    readonly border: (v: unknown, theme: Theme) => {
+        borderColor: string;
+        borderWidth: number;
+    };
+    readonly borderWidth: 'borderWidth';
+    readonly shadow: (v: unknown, theme: Theme) => {
+        boxShadow: string;
+    };
+    readonly ring: (v: unknown, theme: Theme) => {};
+    readonly opacity: 'opacity';
+    readonly overflow: 'overflow';
+    readonly isolate: {
+        readonly isolation: 'isolate';
+    };
+    readonly textAlign: 'textAlign';
+};
+export declare const RULE_KEYS: (keyof typeof RULES)[];
+/** The shorthand names as a lookup, shared by <Box>'s prop split and the
+ *  resolver. */
+export declare const BOX_STYLE_PROPS: ReadonlySet<string>;
+/** The subset <Text> speaks, in the table's own cascade order. */
+export declare const TEXT_STYLE_PROPS: ReadonlySet<string>;
+export {};

package/types/ui/src/core/stabilise.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Registers a merged value, with its keys in a canonical order: React Native's
+ * own shorthands first, then everything else alphabetically.
+ *
+ * Registration is what makes react-native-web compile the declarations into
+ * atomic classes rather than re-serialise them onto every element. It hands the
+ * same object back, so the result is still a plain style a caller can read.
+ *
+ * An order that varied with which layers contributed would mean an unstable
+ * stylesheet between builds. Sorting alone is not enough, see `RN_SHORTHANDS`.
+ *
+ * A value the build compiled is registered already and comes back untouched.
+ */
+export declare function stabilise(merged: object): Record<string, unknown>;

package/types/ui/src/core/states.d.ts

@@ -0,0 +1,16 @@
+/** In cascade order. `active` is deliberately absent: a toggle's pressed-in
+ *  reading is owned by the component's props, not the pointer, so it is a
+ *  variant - which is also what lets it carry its own `_hover`. */
+export declare const SV_STATES: readonly ['hover', 'focus', 'press', 'disabled'];
+export type SvStateName = (typeof SV_STATES)[number];
+export type SvState = Partial<Record<SvStateName, boolean>>;
+export type StateKey = `_${SvStateName}`;
+export declare const STATE_KEYS: ReadonlySet<string>;
+export declare const STATE_BIT: Readonly<Record<SvStateName, number>>;
+/** Which states a recipe declares. A caller always passes all four, so without
+ *  a mask a recipe with no `_hover` mints separate hovered and unhovered cache
+ *  entries holding identical styles. */
+export declare function maskOf(declared: Iterable<SvStateName>): number;
+/** The state half of a cache key. Only states in `mask` contribute, so two calls
+ *  differing solely in a state the recipe ignores share one entry. */
+export declare function stateSuffix(state: SvState | undefined, mask: number): string;

package/types/ui/src/core/style-context.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { StyleRuntime } from './style-runtime';
+import { type StyleScope } from './style-scope';
+export declare const StyleRuntimeContext: import("react").Context<StyleRuntime | null>;
+/** The root's breakpoint index; -1 outside a root, where the width is read live. */
+export declare const BreakpointIndexContext: import("react").Context<number>;
+export declare const useStyleRuntimeParent: () => StyleRuntime | null;
+/** Hands a styling root's runtime, its scope snapshot and its breakpoint index
+ *  to everything under it. The root subscribes once; a theme swap or a width
+ *  crossing a breakpoint reaches the components through context. */
+export declare function StyleRuntimeProvider({ runtime, children, }: Readonly<{
+    runtime: StyleRuntime;
+    children?: ReactNode;
+}>): ReactElement;
+/** A root-shared immutable snapshot gives the compiler a new identity on a theme swap. */
+export declare function useStyleScope(): StyleScope;
+export declare function useStyleRuntime(): StyleRuntime;

package/types/ui/src/core/style-runtime.d.ts

@@ -0,0 +1,24 @@
+import type { DeviceStore } from '#ui/lib/device-store';
+import { type BreakpointRuntime } from './breakpoint';
+import type { StyleScope } from './style-scope';
+import { type Theme, type ThemeRuntime } from './theme';
+import { type ThemeMode } from './theme-mode';
+export interface StyleRuntime extends StyleScope {
+    readonly theme: ThemeRuntime;
+    readonly breakpoints: BreakpointRuntime;
+    styleScope(): StyleScope;
+    mode(): ThemeMode;
+    /** The mode a server renders with: it reads no visitor storage, so only a
+     *  configured ground reaches it. What hydration must match. */
+    serverMode(): ThemeMode;
+    setMode(mode: ThemeMode): void;
+    onModeChange(listener: () => void): () => void;
+}
+export interface StyleRuntimeOptions {
+    theme?: Theme;
+    ground?: ThemeMode;
+    designWidth?: number;
+    deviceStore?: DeviceStore | null;
+}
+/** One app or an explicit nested theme/width scope owns these stores. */
+export declare function createStyleRuntime(options?: StyleRuntimeOptions, parent?: StyleRuntime): StyleRuntime;

package/types/ui/src/core/style-scope.d.ts

@@ -0,0 +1,8 @@
+import type { BreakpointRuntime } from './breakpoint';
+import type { ThemeRuntime } from './theme';
+/** Identity for versioned style caches; canonical state lives in the root. */
+export interface StyleScope {
+    readonly theme?: ThemeRuntime;
+    readonly breakpoints?: BreakpointRuntime;
+}
+export declare const DEFAULT_STYLE_SCOPE: StyleScope;

package/types/ui/src/core/styles.d.ts

@@ -0,0 +1,35 @@
+import { type StyleScope } from './style-scope';
+import { type StyleProp } from 'react-native';
+import type { AnyStyle, StyleDecl } from '#ui/core/types';
+export type Styles<S> = {
+    readonly [K in keyof S]: AnyStyle;
+};
+export declare function styles<const S extends Record<string, StyleDecl>>(decls: S, owner?: StyleScope): Styles<S>;
+export declare function resolveStyles<S>(definition: Styles<S>, scope: StyleScope): Styles<S>;
+/** Bind a declaration to this root and subscribe only to relevant breakpoint steps. */
+export declare function useStyles<S>(definition: Styles<S>): Styles<S>;
+/** One style, for the handful of places a set of one would be noise. Resolved
+ *  against the theme active at the first read. A caller that must follow a
+ *  swap uses `styles()` and reads at render time. */
+export declare function style<const T extends StyleDecl>(decl: T): AnyStyle;
+/**
+ * A style a third party rebuilt as a plain object, registered again by its
+ * content: a router's link spreads the style the kit hands it into its own
+ * active-state style, and the fresh object it makes is registered by nothing,
+ * so the browser paints every property of it inline. Keyed on the content,
+ * every link carrying the same paint shares one entry and one set of classes.
+ */
+export declare function registered(style: StyleProp<AnyStyle>): AnyStyle;
+/**
+ * A style shared by identity with every caller passing the same `key`, for the
+ * values a render computes rather than declares.
+ *
+ * Registered like `styles`, and shared by identity on top of that: styleq keys
+ * its compiled-style cache on the leaf object, so resolving one per render is a
+ * guaranteed miss even once the declaration compiles to a class.
+ *
+ * The key identifies the DECLARATION, so one stating a value per breakpoint
+ * carries the step it was resolved at (see <Text>); the breakpoint is not part
+ * of the key by itself, which is what keeps a flat declaration at one entry.
+ */
+export declare function sharedStyle(key: string, decl: StyleDecl, scope?: StyleScope): AnyStyle & Record<string, unknown>;

package/types/ui/src/core/theme-create.d.ts

@@ -0,0 +1,63 @@
+import { type ColorToken } from '#ui/core/tokens/colors';
+import { motion, type RingStyle, type ShadowToken } from '#ui/core/tokens/effects';
+import { gutter, type Radius, type RadiusToken, rhythm, space } from '#ui/core/tokens/layout';
+import { type FontToken, type RoleStyle, type TypeRole, type TypeSpec, tracking } from '#ui/core/tokens/typography';
+/** The token modules author values `as const`; a theme's slots take any value
+ *  of the same shape, not only the KROMA literal. */
+type Widen<T> = T extends number ? number : T extends string ? string : T extends readonly (infer U)[] ? readonly Widen<U>[] : {
+    [K in keyof T]: Widen<T[K]>;
+};
+export interface ThemeTokens {
+    colors: Record<ColorToken, string>;
+    radius: Record<RadiusToken, Radius>;
+    shadow: Record<ShadowToken, string>;
+    fonts: Record<FontToken, string>;
+    typeSpec: Record<TypeRole, TypeSpec>;
+    motion: Widen<typeof motion>;
+    gutter: Widen<typeof gutter>;
+    space: Widen<typeof space>;
+    rhythm: Widen<typeof rhythm>;
+    tracking: Widen<typeof tracking>;
+}
+export interface Theme extends ThemeTokens {
+    /** Derived from `typeSpec` + `fonts`; never authored directly. */
+    type: Record<TypeRole, RoleStyle>;
+    /** Derived from the accent; never authored directly. The glow pairs carry the
+     *  accent bloom the player's focus treatment adds to the plain ring. */
+    ring: {
+        focus: RingStyle;
+        focusSm: RingStyle;
+        focusLift: RingStyle;
+        focusGlow: RingStyle;
+        focusGlowSm: RingStyle;
+        /** The soft wide wash, for a control whose focus must read as a glow on a
+         *  thin shape (the seek bar's track) rather than a crisp outline. */
+        focusWash: RingStyle;
+        /** The ring, inward: for a control flush with whatever clips it. */
+        focusInset: RingStyle;
+        /** The ring, on the edge: for a row that abuts its neighbours. */
+        focusEdge: RingStyle;
+    };
+    /** Derived from the accent wash; never authored directly. */
+    glow: {
+        accent: string;
+        play: string;
+    };
+}
+/** What the `ring:` shorthand accepts. */
+export type RingToken = keyof Theme['ring'];
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+/** What `createTheme` accepts: any slice of any group. A name the base does not
+ *  have needs its registry augmented first, which is what keeps it typed at
+ *  every use site rather than only here. */
+export type ThemeOverrides = {
+    [G in keyof ThemeTokens]?: DeepPartial<ThemeTokens[G]>;
+};
+/** The default theme, straight from the token modules. */
+export declare const KROMA: Theme;
+/** KROMA on a warm paper ground. */
+export declare const KROMA_LIGHT: Theme;
+export declare function createTheme(overrides: ThemeOverrides, base?: Theme): Theme;
+export {};

package/types/ui/src/core/theme-host.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeHostProps } from './theme-host.types';
+/** Native roots use context and need no extra layout view. */
+export declare function ThemeHost({ children }: Readonly<ThemeHostProps>): import("react").JSX.Element;

package/types/ui/src/core/theme-host.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { StyleRuntime } from './style-runtime';
+/** The browser publishes this scope; native uses its context without a host view. */
+export interface ThemeHostProps {
+    readonly runtime: StyleRuntime;
+    readonly themeScope?: boolean;
+    readonly children?: ReactNode;
+}

package/types/ui/src/core/theme-host.web.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeHostProps } from './theme-host.types';
+/** Stamps a styling root's theme, ground and breakpoint steps on an element of
+ *  its own, and hands them to whatever renders outside it. The outermost root
+ *  also keeps the document's ground in step: `<html>` paints the canvas
+ *  behind a short page and sets the scrollbars' scheme. */
+export declare function ThemeHost({ runtime, themeScope, children }: Readonly<ThemeHostProps>): import("react").JSX.Element;

package/types/ui/src/core/theme-mode.d.ts

@@ -0,0 +1,17 @@
+import type { DeviceStore } from '#ui/lib/device-store';
+import type { StyleRuntime } from './style-runtime';
+export type ThemeMode = 'system' | 'light' | 'dark';
+export declare const THEME_COOKIE = "kroma-theme";
+export declare const isThemeMode: (v: unknown) => v is ThemeMode;
+/** The ground a mode resolves to right now. Anything `system` cannot be told
+ *  about reads as dark, the product's default ground. */
+export declare function resolveMode(mode: ThemeMode): 'light' | 'dark';
+export declare function readMode(cookie?: string, storage?: DeviceStore | null): ThemeMode;
+/**
+ * Stamps the ground on the document, which on a browser is the whole switch:
+ * every colour is a custom property, so `[data-theme]` repaints without a
+ * re-render, and `system` is stamped as ABSENCE for the media query to answer.
+ * React Native has no cascade, so there the store moves instead.
+ */
+export declare function applyMode(mode: ThemeMode, runtime: StyleRuntime): void;
+export declare function writeMode(mode: ThemeMode, runtime: StyleRuntime, storage?: DeviceStore | null): void;

package/types/ui/src/core/theme-restated.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '#ui/core/theme-create';
+export declare function restated(theme: Theme, steps: Map<string, readonly string[]>): readonly (readonly [string, string])[];
+export declare function collectSteps(css: string, found: Map<string, string[]>): void;
+export declare function rulesOf(sheet: CSSStyleSheet): readonly CSSRule[];

package/types/ui/src/core/theme.d.ts

@@ -0,0 +1,16 @@
+import { type Theme } from '#ui/core/theme-create';
+export * from '#ui/core/theme-create';
+/** Mutable theme state belongs to a mounted styling root. */
+export declare function createThemeRuntime(initial?: Theme): {
+    activeTheme: () => Theme;
+    themeVersion: () => number;
+    onThemeChange: (listener: () => void) => () => void;
+    setTheme: (theme: Theme, light?: Theme) => void;
+    applyTheme: (theme: Theme, light?: Theme) => void;
+    attach(host: HTMLElement, id: string): () => void;
+};
+export type ThemeRuntime = ReturnType<typeof createThemeRuntime>;
+export declare function activeTheme(runtime?: ThemeRuntime): Theme;
+export declare function themeVersion(runtime?: ThemeRuntime): number;
+export declare function themedCache<T>(limit: number, runtime?: ThemeRuntime): (key: string, make: () => T) => T;
+export declare function themed<T>(make: (theme: Theme) => T, runtime?: ThemeRuntime): (owner?: ThemeRuntime) => T;

package/types/ui/src/core/tokens/colors.d.ts

@@ -0,0 +1,119 @@
+import type { TokenOf } from './registry';
+export declare const colors: {
+    readonly ai: '#7C5CFF';
+    readonly aiLabel: '#B7A6FF';
+    readonly aiIndicator: '#8B7FF0';
+    readonly aiText: '#B3A9F5';
+    readonly aiProgress: '#7C6FF5';
+    readonly accentPale: '#FFE7A8';
+    readonly chromeMuted: '#BDBCC4';
+    readonly playerBlack: '#08080b';
+    readonly playerSurface: '#101014';
+    readonly playerRaised: '#282830';
+    readonly bg: '#0A0A0C';
+    readonly surface1: '#121216';
+    readonly surface2: '#1C1C22';
+    readonly surface3: '#26262E';
+    readonly overlay: 'rgba(18, 18, 22, 0.86)';
+    readonly border: 'rgba(255, 255, 255, 0.08)';
+    /** The wash a loading placeholder pulses between. Named because it is used by
+     *  BOTH skeletons - the kit's (React Native) and the admin contract's (a
+     *  Tailwind div) - and a wash that differs between them is a visible seam. */
+    readonly wash: 'rgba(255, 255, 255, 0.06)';
+    readonly borderStrong: 'rgba(255, 255, 255, 0.14)';
+    /** The direction a wash moves in: lighter on a dark ground, darker on paper. */
+    readonly tint: '#FFFFFF';
+    readonly text: '#F4F3F0';
+    readonly textMuted: 'rgba(244, 243, 240, 0.62)';
+    readonly textDim: 'rgba(244, 243, 240, 0.48)';
+    /** `textMuted` and `textDim` as SOLID ink, already blended over the page
+     *  ground, for anything that must not carry an alpha: a translucent stroke
+     *  composites once per path, so a glyph's crossings come out brighter. */
+    readonly glyph: '#9B9B99';
+    readonly glyphDim: '#7A7A79';
+    readonly accent: '#F4B642';
+    readonly accentHover: '#FFC862';
+    /** The step UNDER the finger: deeper than rest, where hover is lighter. */
+    readonly accentPress: '#DFA436';
+    readonly accentBright: '#FFD262';
+    readonly accentInk: '#0A0A0C';
+    /** The accent as INK rather than as a fill: it has to clear text contrast on
+     *  the page ground, which the fill hue does not on paper. */
+    readonly accentText: '#F4B642';
+    /** The soft-amber base. A different hue from `accent` (244, 182, 66): every
+     *  wash, glow and edge in the accent family is built on this one. */
+    readonly accentWash: '#F2B442';
+    readonly accentSoft: 'rgba(242, 180, 66, 0.16)';
+    /** The lit step of `accentSoft`: a pointer resting on a toggle that is already
+     *  ON. It has to stay AMBER - the white wash the idle controls hover with
+     *  would wipe the accent off and read as the toggle switching itself back
+     *  off - so the ladder is soft → softHover, the same shape as accent →
+     *  accentHover. */
+    readonly accentSoftHover: 'rgba(242, 180, 66, 0.26)';
+    readonly success: '#46D08D';
+    readonly info: '#86A8FF';
+    readonly hdr: '#C792EA';
+    readonly h265: '#5FD3C4';
+    readonly danger: '#E8536A';
+    /** The lit step of `danger`, for the same job `accentHover` does for the
+     *  accent: a pointer resting on a destructive button. A LIGHTER red rather
+     *  than a darker one - a hover has to read as the control coming forward, and
+     *  every other variant's hover brightens too. */
+    readonly dangerHover: '#EF8091';
+    /** See `accentPress`. */
+    readonly dangerPress: '#D43E55';
+};
+export declare const lightColors: Record<keyof typeof colors, string>;
+/**
+ * Names a theme adds to the palette, Tailwind-4 style: augment it once and the
+ * name is legal everywhere a colour is written (`bg`, `border`, `color`, the
+ * `/NN` alpha suffix) with the value supplied through `createTheme`.
+ *
+ *   declare module '@kromatv/ui/tokens/colors' {
+ *     interface ColorRegistry { brand: string }
+ *   }
+ */
+export interface ColorRegistry {
+}
+export type ColorToken = TokenOf<typeof colors, ColorRegistry>;
+/**
+ * Chart series colours, in assignment order.
+ *
+ * A DATA palette: these have to stay tellable apart from each other, including
+ * by a colourblind reader, on the surface they are drawn on.
+ *
+ * Assign by POSITION and never cycle: a reader who learned that blue is
+ * bandwidth must not find it repainted when a series drops out.
+ *
+ * THREE slots is a measured limit: every fourth hue tried collapsed against blue
+ * or against green under deutan/protan (best was ΔE 6.7, inside the 6-8 floor
+ * band). A fourth series gets its own chart, not a fourth colour.
+ */
+export declare const SERIES_COLORS: readonly ['#3B7FD4', '#C08420', '#2E9E6E'];
+/** The chromatic wheel of the KROMA mark, in segment order. */
+export declare const WHEEL_COLORS: readonly ['#F2685C', '#F4B642', '#5FBF8F', '#4F9DE0', '#6366F1', '#A855F7'];
+/** Billboard / poster shade stops (transparent to page background). */
+export declare const SHADE: {
+    readonly transparent: 'rgba(10, 10, 12, 0)';
+    readonly mid: 'rgba(10, 10, 12, 0.55)';
+    readonly full: '#0A0A0C';
+};
+/** The page background (`colors.bg`) at an arbitrary alpha, for the hand-tuned
+ * veil gradients whose stops fall between {@link SHADE}'s three. */
+export declare function shade(alpha: number): string;
+/** A colour that is not `#RGB`/`#RRGGBB` is returned untouched rather than
+ *  guessed at, so `withAlpha('transparent', 0.5)` is a no-op.
+ *
+ * A custom property resolves to the sibling property the build emits for that
+ * step: fading one in place would need `color-mix()`, which neither React
+ * Native nor the legacy webOS tier can parse. */
+export declare function withAlpha(value: string, alpha: number): string;
+/**
+ * The inverse of {@link withAlpha}: a colour split into an opaque paint and the
+ * alpha it carried. Anything not recognisably translucent comes back untouched
+ * at opacity 1.
+ */
+export declare function splitAlpha(value: string): {
+    color: string;
+    opacity: number;
+};

package/types/ui/src/core/tokens/css-palette.d.ts

@@ -0,0 +1,38 @@
+import { type ColorToken } from '#ui/core/tokens/colors';
+import { type ShadowToken } from '#ui/core/tokens/effects';
+import { type Radius, type RadiusToken } from '#ui/core/tokens/layout';
+import { type FontToken, type RoleStyle, type TypeRole, type TypeSpec } from '#ui/core/tokens/typography';
+/** A token group read back through the cascade: every value a `var()` of the
+ *  property `name` gives its key. */
+export declare const customProperties: <K extends string>(group: Record<K, string | number>, name: (key: string) => string) => Readonly<Record<K, `var(${string})`>>;
+/**
+ * The palette as CSS custom properties, or null where there is no cascade: a
+ * browser repaints on `[data-theme]` alone, React Native moves the theme store.
+ */
+export declare const CSS_COLORS: Readonly<Record<ColorToken, string>> | null;
+export declare const CSS_SHADOWS: Readonly<Record<ShadowToken, string>> | null;
+/**
+ * The radius scale as the custom properties the token sheet already publishes,
+ * or null where React Native lays out with the numbers.
+ */
+export declare const CSS_RADIUS: Readonly<Record<RadiusToken, Radius>> | null;
+/** The families as the properties the token sheet publishes them under. */
+export declare const CSS_FONTS: Readonly<Record<FontToken, string>> | null;
+type TypePart = 'family' | 'weight' | 'size' | 'line' | 'spacing';
+/** The custom property one part of a type role is published under:
+ *  `--type-card-title-size`. */
+export declare const typeProperty: (role: string, part: TypePart) => string;
+/** A role as the style that reads every part of it back through the cascade. */
+export declare function typeProperties(role: string, spec: TypeSpec): RoleStyle;
+/** Every role of a spec read through the cascade. */
+export declare const typeCascade: <R extends string>(spec: Readonly<Record<R, TypeSpec>>) => Readonly<Record<R, RoleStyle>>;
+export declare const CSS_TYPE: Readonly<Record<TypeRole, RoleStyle>> | null;
+/**
+ * The translucent tokens, as the two properties the build emits for each. Both
+ * halves stay in the cascade: a token's alpha differs between the grounds.
+ */
+export declare const CSS_FADED: Readonly<Record<string, {
+    color: string;
+    opacity: string;
+}>>;
+export {};

package/types/ui/src/core/tokens/css-var.d.ts

@@ -0,0 +1,8 @@
+/** A colour token's custom-property name, without the leading `--kroma-`. */
+export declare const cssName: (token: string) => string;
+/** A colour token as a custom property, optionally at one alpha step. `2.5` is a
+ *  legal alpha and an illegal ident, so the dot becomes an underscore. */
+export declare const cssVar: (token: string, alpha?: string | number) => string;
+/** A colour token read back, for a value that must name the property rather
+ *  than repeat its literal: `var(--kroma-bg)`. */
+export declare const cssRef: (token: string, alpha?: string | number) => string;