@kromatv/sdk 0.1.40-canary.0

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

@@ -0,0 +1,109 @@
+import type { TokenOf } from './registry';
+export declare const colors: {
+    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 '@kroma/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,19 @@
+import { type ColorToken } from '#ui/core/tokens/colors';
+import { type ShadowToken } from '#ui/core/tokens/effects';
+/** 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>, name: (key: string) => string) => Readonly<Record<K, 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 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;
+}>>;

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;

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

@@ -0,0 +1,103 @@
+import type { TokenOf } from './registry';
+export declare const shadow: {
+    readonly card: '0 10px 28px rgba(0, 0, 0, 0.45)';
+    readonly pop: '0 20px 50px rgba(0, 0, 0, 0.55)';
+    readonly hero: '0 20px 50px rgba(0, 0, 0, 0.6)';
+};
+/** The same elevations on paper: a tight contact shadow under a wide, very
+ *  faint ambient one, where the dark ground's single opaque drop would smear. */
+export declare const lightShadow: Record<keyof typeof shadow, string>;
+/** Shadows a theme adds. Augment it and the name is legal wherever an elevation
+ *  is written: the `shadow:` shorthand, <Box shadow> (see `ColorRegistry`). */
+export interface ShadowRegistry {
+}
+export type ShadowToken = TokenOf<typeof shadow, ShadowRegistry>;
+/** ONE ring width, everywhere. A control's focus visual is how a viewer keeps
+ * their place, so it must not change thickness as focus travels from a button
+ * to a field to a row: three widths across the kit read as three different
+ * kinds of focus. Every ring below, and the field outline the web draws in
+ * CSS, are this number. */
+export declare const RING_WIDTH = 4;
+/** How far the ring stands OFF the control it marks. The ring reads as a frame
+ * around the thing rather than a border on it, which is what keeps it legible
+ * over artwork at ten feet.
+ *
+ * Spent as an outline offset rather than as padding inside each component, and
+ * that is what keeps the corners honest: an outline follows the element's own
+ * radius, so the ring stays concentric with whatever it surrounds for free.
+ * Done with padding, every component owes the same sum by hand - outer = inner
+ * + gap - and gets it wrong (a 6px frame around a 13px corner needs a 19px
+ * radius, not 16). */
+export declare const RING_GAP = 6;
+/** How much room a focused control needs beside it, for anything that clips or
+ * abuts it - a scroll view's edge, the capsule a nav item sits in: the ring and
+ * its gap, and a hair more so the ring never lands on the very pixel that clips
+ * it. */
+export declare const RING_ROOM: number;
+/** A focus ring, as a style: an outline standing `RING_GAP` off the control,
+ * optionally over a shadow. */
+export interface RingStyle {
+    outlineStyle: 'solid';
+    outlineWidth: number;
+    outlineColor: string;
+    outlineOffset: number;
+    boxShadow?: string;
+    borderRadius?: number;
+}
+/** The 10-foot focus treatment: a CLEAN solid amber ring plus a dark drop
+ * shadow for lift, never an amber bloom, so the ring reads as a crisp border. */
+export declare function standoff(color: string, lift?: string): RingStyle;
+/** The same ring, drawn INSIDE the control: for a row that is flush with the
+ * card clipping it (a <ListRow.Group> member), where there is no outside to
+ * stand off into. Same width, same ink, the same gap - measured inward.
+ *
+ * A browser paints an outline's corner at the element's own radius moved by the
+ * offset, and a row flush with a card has no radius of its own to move: without
+ * this the ring is a square drawn inside a round card. */
+export declare function standoffInside(color: string): RingStyle;
+/** The same ring, drawn ON the control's edge: for a row that abuts its
+ * neighbours (a dropdown option), where a gap in EITHER direction lands on
+ * something - the row above outward, the row's own wash inward. Same width,
+ * same ink, no gap, because there is nowhere to put one. */
+export declare function standoffEdge(color: string): RingStyle;
+/** The steps the theme derives from the accent wash, as the `/NN` percentages a
+ *  colour is written with everywhere else. The build emits one property per
+ *  step, so a new one has to be added to the derived list in `vite/tokens.ts`. */
+export declare const WASH_ALPHA: {
+    readonly glow: 40;
+    readonly play: 32;
+    readonly ring: 28;
+};
+export declare const LIFT_SHADOW = "0 10px 28px rgba(0, 0, 0, 0.5)";
+export declare const ring: {
+    readonly focus: RingStyle;
+    /** Kept as a name callers already use; the same width as the rest. */
+    readonly focusSm: RingStyle;
+    /** Ring + lift, the combination every focusable actually renders. */
+    readonly focusLift: RingStyle;
+    /** For a control with no outside: see `standoffInside`. */
+    readonly focusInset: RingStyle;
+    /** For a row with no room either way: see `standoffEdge`. */
+    readonly focusEdge: RingStyle;
+};
+export declare const glow: {
+    readonly accent: '0 6px 22px rgba(242, 180, 66, 0.4)';
+    readonly play: '0 6px 22px rgba(242, 180, 66, 0.32)';
+};
+/** Motion. Durations in milliseconds (React Native's Animated unit); the CSS
+ * generator emits seconds. Easing curves are bezier control points, consumable
+ * by both `Easing.bezier(...)` and `cubic-bezier(...)`. */
+export declare const motion: {
+    readonly bezier: {
+        readonly out: readonly [0.22, 1, 0.36, 1];
+        readonly spring: readonly [0.34, 1.56, 0.64, 1];
+    };
+    readonly duration: {
+        readonly fast: 150;
+        readonly base: 200;
+        readonly slow: 400;
+    };
+    /** Buttons shrink on press; cards lift on focus. */
+    readonly pressScale: 0.95;
+    readonly focusLift: -6;
+};

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

@@ -0,0 +1,10 @@
+export type { ColorRegistry, ColorToken } from './colors';
+export { colors, SERIES_COLORS, SHADE, shade, WHEEL_COLORS } from './colors';
+export type { RingStyle, ShadowRegistry, ShadowToken } from './effects';
+export { glow, motion, RING_GAP, RING_ROOM, RING_WIDTH, ring, shadow } from './effects';
+export type { BreakpointName, CornerValue, RadiusRegistry, RadiusToken } from './layout';
+export { absoluteFill, BREAKPOINTS, breakpoint, CANVAS, CIRCLE_RADIUS, gutter, nestedRadius, radius, rhythm, space, } from './layout';
+export type { MobileTypeRole } from './mobile';
+export { mobileFonts, mobileRadius, mobileSpace, mobileType, mobileTypeSpec } from './mobile';
+export type { FontRegistry, FontToken, TypeRole, TypeRoleRegistry, TypeSpec } from './typography';
+export { BASE_RAMP, fonts, TV_RAMP, toType, tracking, type, typeSpec } from './typography';

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

@@ -0,0 +1,94 @@
+import type { TokenOf } from './registry';
+/** Every TV screen is authored against this fixed canvas and scaled to fit by
+ * `<TvStage>`. It is what makes the layout pixel-identical on a 1080p Tizen
+ * panel, a 4K Apple TV (1920x1080 points) and an Android TV (960x540 dp). */
+export declare const CANVAS: {
+    readonly width: 1920;
+    readonly height: 1080;
+};
+/** The design widths a layout may change at, ascending. `base` is mandatory in
+ *  a breakpoint object and means "no minimum". */
+export declare const BREAKPOINTS: readonly ['base', 'md', 'lg', 'tv'];
+export type BreakpointName = (typeof BREAKPOINTS)[number];
+/**
+ * What each step is for, in the units the target reports (px on a browser,
+ * points or dp natively):
+ *
+ * | `base` | a phone, and anything narrower than the next step |
+ * | `md`   | a tablet in portrait, or a half-screen split view on one |
+ * | `lg`   | a desktop window, or a tablet in landscape |
+ * | `tv`   | the 10-foot stage, which IS `CANVAS.width`, and the widest desktop |
+ *
+ * Deliberately closed, with no registry to augment: an open set would make an
+ * unknown key in `{ base: 16, xl: 40 }` legal rather than a compile error.
+ */
+export declare const breakpoint: {
+    readonly base: 0;
+    readonly md: 600;
+    readonly lg: 1024;
+    readonly tv: 1920;
+};
+export declare const space: {
+    readonly 1: 4;
+    readonly 2: 8;
+    readonly 3: 12;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 8: 32;
+    readonly 10: 40;
+    readonly 14: 56;
+    readonly 16: 64;
+};
+export declare const radius: {
+    readonly xs: 6;
+    readonly sm: 8;
+    readonly md: 10;
+    readonly lg: 13;
+    readonly xl: 16;
+    readonly '2xl': 22;
+    readonly pill: 999;
+};
+/** The radius of a box nested inside another, given the space between their
+ *  edges: corners are concentric only when the inner one is the outer minus
+ *  the inset. */
+export declare function nestedRadius(outer: number, inset: number): number;
+/** Radii a theme adds. Augment it and the name is legal wherever a radius is
+ *  written: the `radius:` shorthand, <Box radius> (see `ColorRegistry`). */
+export interface RadiusRegistry {
+}
+export type RadiusToken = TokenOf<typeof radius, RadiusRegistry>;
+/** What `'circle'` falls back to where the box's own side is not known at style
+ *  time: every target clamps a corner to half the shorter side. */
+export declare const CIRCLE_RADIUS = 9999;
+/**
+ * Everything a corner may be written as: a radius token, a raw px value, or
+ * `'circle'`.
+ *
+ * `'circle'` is GEOMETRY, not corner language, and is not a member of the scale
+ * above: a theme restating every radius may square a button, but it must not
+ * flatten a spinner, a radio or an avatar into a box.
+ */
+export type CornerValue = RadiusToken | 'circle' | number;
+/** Layout gutters. `tv` is the 10-foot side padding (overscan-safe on every
+ * panel we ship to). */
+export declare const gutter: {
+    readonly tv: 64;
+    readonly web: 56;
+    readonly mobile: 20;
+};
+/** Component rhythm shared by the rails. */
+export declare const rhythm: {
+    readonly rowGap: 18;
+    readonly cardWidth: 208;
+};
+/** Stretch to the positioned parent. React Native 0.86 removed
+ * `StyleSheet.absoluteFillObject`, and `StyleSheet.absoluteFill` is an opaque
+ * registered style that cannot be spread, so the plain object lives here. */
+export declare const absoluteFill: {
+    readonly position: 'absolute';
+    readonly top: 0;
+    readonly left: 0;
+    readonly right: 0;
+    readonly bottom: 0;
+};

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

@@ -0,0 +1,91 @@
+import type { TextStyle } from 'react-native';
+/** Rounder than the 10-foot radii: a phone's chrome sits closer to the eye and
+ * a tighter corner reads as sharp rather than crisp. */
+export declare const mobileRadius: {
+    readonly sm: 10;
+    readonly md: 14;
+    readonly lg: 18;
+    readonly xl: 28;
+    readonly pill: 999;
+};
+/** The phone's spacing ramp, named by t-shirt size the way the screens read it. */
+export declare const mobileSpace: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+};
+/**
+ * Type roles for a phone: the same families and weights as the 10-foot ramp, at
+ * the sizes a hand-held screen wants. Colour is applied by the component, not
+ * baked in, so a role can be reused on any surface.
+ *
+ * Authored as SPECS, not as finished styles, for the same reason the 10-foot
+ * ramp is: a spec carries the line-height ratio and the tracking in em, so a
+ * role keeps its proportions at whatever size a call site asks for, and a theme
+ * can restate the families without every role being rewritten.
+ *
+ * The ratios tighten as the size grows, which is what a phone wants: a 34pt
+ * screen title set at body leading looks airy and wastes a third of the fold,
+ * and 13pt caption set at title leading runs together.
+ */
+export declare const mobileTypeSpec: {
+    readonly display: {
+        readonly family: 'display';
+        readonly weight: '800';
+        readonly size: 34;
+        readonly ratio: 1.18;
+        readonly em: -0.0235;
+    };
+    readonly title: {
+        readonly family: 'display';
+        readonly weight: '800';
+        readonly size: 28;
+        readonly ratio: 1.21;
+        readonly em: -0.0179;
+    };
+    readonly heading: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 20;
+        readonly ratio: 1.3;
+        readonly em: -0.015;
+    };
+    readonly section: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 18;
+        readonly ratio: 1.33;
+        readonly em: -0.0167;
+    };
+    readonly body: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 15;
+        readonly ratio: 1.47;
+    };
+    readonly caption: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 13;
+        readonly ratio: 1.38;
+    };
+    readonly small: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 11;
+        readonly ratio: 1.45;
+    };
+};
+/** Exactly the keys `toType` emits, and no wider: these roles are SPREAD into
+ *  `styles({...})` declarations, and a full `TextStyle` there drags two hundred
+ *  optional properties into a shape that only wants five. */
+type MobileRoleStyle = Pick<TextStyle, 'fontFamily' | 'fontWeight' | 'fontSize' | 'lineHeight' | 'letterSpacing'>;
+/** The finished phone roles, derived from the specs above exactly as the
+ *  10-foot ones are (see `toType`), so they carry a line height rather than
+ *  leaving each platform's default leading to decide. */
+export declare const mobileType: Record<MobileTypeRole, MobileRoleStyle>;
+export type MobileTypeRole = keyof typeof mobileTypeSpec;
+/** The display family, for the few places a phone screen wants the title face. */
+export { fonts as mobileFonts } from './typography';

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

@@ -0,0 +1,4 @@
+/** A token union that stays open: the base table's names plus whatever its
+ *  registry gains through module augmentation (see `ColorRegistry`). Written
+ *  as one generic so each group's union reads identically. */
+export type TokenOf<Base, Registry> = keyof Base | keyof Registry;

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

@@ -0,0 +1,232 @@
+import type { TextStyle } from 'react-native';
+import type { TokenOf } from './registry';
+export declare const fonts: {
+    readonly display: 'Bricolage Grotesque';
+    readonly ui: 'Hanken Grotesk';
+    readonly mono: 'ui-monospace, SFMono-Regular, Menlo, monospace';
+};
+/** The families KROMA serves as woff2. `mono` is absent on purpose: it is a
+ *  system stack, so there is no file to name, fingerprint or preload. */
+export declare const SELF_HOSTED: readonly string[];
+/** Families a theme adds. Augment it and the name is legal wherever a family is
+ *  written: a `font:` shorthand, a role's `family` (see `ColorRegistry`). */
+export interface FontRegistry {
+}
+export type FontToken = TokenOf<typeof fonts, FontRegistry>;
+/** Tracking as authored, in em. */
+export declare const tracking: {
+    readonly overline: 0.12;
+    readonly overlineTv: 0.22;
+    readonly display: -0.02;
+    readonly section: 0.04;
+    readonly footnote: 0.02;
+    readonly code: 0.0833;
+};
+export interface TypeSpec {
+    family: FontToken;
+    weight: '400' | '500' | '600' | '700' | '800';
+    size: number;
+    /** Line height as a multiple of `size`. */
+    ratio: number;
+    em?: number;
+    uppercase?: boolean;
+}
+export declare const typeSpec: {
+    readonly hero: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 66;
+        readonly ratio: 0.98;
+        readonly em: -0.02;
+    };
+    readonly h1: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 38;
+        readonly ratio: 1;
+        readonly em: -0.02;
+    };
+    readonly heading: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 30;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly subheading: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 26;
+        readonly ratio: 1.07;
+        readonly em: -0.02;
+    };
+    readonly h2: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 22;
+        readonly ratio: 1.1;
+        readonly em: -0.02;
+    };
+    readonly title: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 20;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly cardTitle: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 17;
+        readonly ratio: 1.2;
+        readonly em: -0.02;
+    };
+    readonly body: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 16;
+        readonly ratio: 1.55;
+    };
+    readonly label: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 15;
+        readonly ratio: 1.3;
+    };
+    readonly meta: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 13;
+        readonly ratio: 1.4;
+    };
+    readonly overline: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 11;
+        readonly ratio: 1;
+        readonly em: 0.12;
+        readonly uppercase: true;
+    };
+    readonly codeTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 96;
+        readonly ratio: 1;
+        readonly em: 0.0833;
+    };
+    readonly heroTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 82;
+        readonly ratio: 0.96;
+        readonly em: -0.02;
+    };
+    readonly bannerTv: {
+        readonly family: 'display';
+        readonly weight: '700';
+        readonly size: 59;
+        readonly ratio: 0.98;
+        readonly em: -0.02;
+    };
+    readonly titleTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 44;
+        readonly ratio: 1;
+        readonly em: -0.02;
+    };
+    readonly headingTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 32;
+        readonly ratio: 1.05;
+        readonly em: -0.02;
+    };
+    readonly subheadingTv: {
+        readonly family: 'display';
+        readonly weight: '600';
+        readonly size: 28;
+        readonly ratio: 1.07;
+        readonly em: -0.02;
+    };
+    readonly bodyTv: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 20;
+        readonly ratio: 1.5;
+    };
+    readonly leadTv: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 17;
+        readonly ratio: 1.4;
+    };
+    readonly labelTv: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 17;
+        readonly ratio: 1.3;
+    };
+    readonly strongTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 17;
+        readonly ratio: 1.3;
+    };
+    readonly captionTv: {
+        readonly family: 'ui';
+        readonly weight: '400';
+        readonly size: 15;
+        readonly ratio: 1.47;
+    };
+    readonly metaTv: {
+        readonly family: 'ui';
+        readonly weight: '500';
+        readonly size: 15;
+        readonly ratio: 1.4;
+    };
+    readonly sectionTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 15;
+        readonly ratio: 1.2;
+        readonly em: 0.04;
+    };
+    readonly footnoteTv: {
+        readonly family: 'ui';
+        readonly weight: '600';
+        readonly size: 13;
+        readonly ratio: 1.23;
+        readonly em: 0.02;
+    };
+    /** The eyebrow at 10-foot distance: authored wider, not the phone's tracking
+     * scaled up. `fontSize` may be overridden - <Text> re-derives from the em. */
+    readonly overlineTv: {
+        readonly family: 'ui';
+        readonly weight: '700';
+        readonly size: 13;
+        readonly ratio: 1.23;
+        readonly em: 0.22;
+        readonly uppercase: true;
+    };
+};
+/** The base tier, largest first: what the web client, the desktop shell and the
+ *  phone-facing components read. Same order and the same purpose as
+ *  {@link TV_RAMP}. */
+export declare const BASE_RAMP: readonly ["hero", "h1", "heading", "subheading", "h2", "title", "cardTitle", "body", "label", "meta", "overline"];
+/** The 10-foot tier, largest first. The ramp's own order, so a caller reaching
+ *  for "one step down" reads it off rather than guessing, and so the invariants
+ *  that keep it a ramp have something to run over. */
+export declare const TV_RAMP: readonly ["codeTv", "heroTv", "bannerTv", "titleTv", "headingTv", "subheadingTv", "bodyTv", "leadTv", "labelTv", "strongTv", "captionTv", "metaTv", "sectionTv", "footnoteTv", "overlineTv"];
+/** Roles a theme adds. Augment it and the name is legal wherever a role is
+ *  written: a recipe's `text:` shorthand, <Text variant> (see `ColorRegistry`). */
+export interface TypeRoleRegistry {
+}
+export type TypeRole = TokenOf<typeof typeSpec, TypeRoleRegistry>;
+/**
+ * Derives the finished text styles from the authored specs against a set of
+ * families. Parameterised because a theme can restate either side: `createTheme`
+ * re-derives, so a swapped display font reaches every role that names it.
+ */
+export declare function toType(spec: Readonly<Record<string, TypeSpec>>, families: Readonly<Record<string, string>>): Record<string, TextStyle>;
+export declare const type: Record<TypeRole, TextStyle>;