@mortenbrudvik/waveui 0.16.0 → 0.17.1

package/dist/index.d.cts

@@ -714,6 +714,33 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * A full brand ramp: a hex colour (`#rgb` or `#rrggbb`) for each of the 16 stops, darkest first.
+ * The shape of Fluent's `BrandVariants`, which `createLightTheme(brand)` and
+ * `createDarkTheme(brand)` take. The themes read the light primary from stop 80 (hover 70, pressed
+ * 40, focus ring 80), the light selection from stops 160, 150 and 140 with its text at 60, the
+ * dark primary from stop 110 (hover 120, pressed 90, focus ring 100) and the dark selection from
+ * stops 20, 40 and 10 with its text at 110. A ramp whose stops have the luminance of the default
+ * ramp's keeps the contrast of the light and dark themes; the high-contrast theme reads no stop.
+ */
+export declare type BrandRamp = Readonly<Record<BrandStop, string>>;
+
+/**
+ * A stop of the brand ramp, from 10 (the darkest) to 160 (the lightest) in steps of 10: the stops
+ * of Fluent's `BrandVariants` and of the `--wave-brand-N` tokens.
+ */
+export declare type BrandStop = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;
+
+/**
+ * The 16 brand tokens, `brand10` to `brand160`: the overrides of `--wave-brand-10` to
+ * `--wave-brand-160`, in the shape `WaveProvider tokens` and `getTokenStyle` take. Where Fluent's
+ * `createLightTheme(brand)` builds a whole theme from a `BrandVariants` ramp, Wave applies the
+ * ramp as these tokens over its named themes; the high-contrast theme reads none of them.
+ */
+export declare type BrandTokens = {
+    [K in `brand${BrandStop}`]: string;
+};
+
 /**
  * A breadcrumb trail: a `<nav aria-label="Breadcrumb">` landmark with an ordered list. Each child
  * is placed in its own list item (Fragments are opened, so each of their items gets one too); from
@@ -1887,6 +1914,25 @@ export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivEle
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * The 12 palette fills as token names, in the order a categorical chart gives them to its series.
+ * The order keeps neighbouring series as far apart as the palette allows, for colour vision and
+ * for hue: in the light and dark themes, every two neighbours (the first and second, the second
+ * and third, up to the eleventh and twelfth) differ by at least 6.3 (OKLab ΔE ×100) under
+ * simulated protanopia, deuteranopia and tritanopia and by at least 15.7 for full colour vision,
+ * and their hues are at least 49° apart. The first six are the six fills that stay furthest apart
+ * as a set, yet no six fills of the palette keep every pair apart for colour-vision deficiencies:
+ * two series that are not neighbours can differ by only about 3.2 among the first six, and by
+ * less further on. So colour never identifies a series on its own: every chart needs a second
+ * encoding (a pattern, a marker shape or a direct label), whatever its number of series, and in
+ * high contrast every palette fill is white. Read each colour through `waveTokens`
+ * (`waveTokens[chartPalette[index]]`), so the series follow the theme. Frozen and server-safe.
+ *
+ * @example
+ * const color = waveTokens[chartPalette[index % chartPalette.length]];
+ */
+export declare const chartPalette: readonly WaveTokenName[];
+
 /**
  * A checkbox for a boolean (or mixed) choice, drawn as a `role="checkbox"` button inside a
  * `<label>`.
@@ -3240,6 +3286,48 @@ export declare interface CounterBadgeProps extends React_2.HTMLAttributes<HTMLSp
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * The brand tokens of a brand colour or of a full ramp, to pass as `WaveProvider tokens` (alone or
+ * spread with other overrides) or to `getTokenStyle`. Wave's counterpart of Fluent's
+ * `createLightTheme(brand)` and `createDarkTheme(brand)`, which take a full `BrandVariants` ramp;
+ * Wave also builds the ramp from one colour. The high-contrast theme ignores the brand: its colours
+ * are fixed.
+ *
+ * From a seed (`#rgb` or `#rrggbb`, any case, with the `#`), each stop keeps the **luminance of the
+ * default ramp's stop** and takes its hue and colourfulness from the seed: the seed's OKLCH chroma
+ * and hue, shaped per stop like the default ramp (less colourful toward both ends, the hue
+ * drifting a few degrees as the default's does), reduced where the colour would leave sRGB, and
+ * rounded to a neighbouring 8-bit colour on the side that keeps its contrast. Contrast depends
+ * only on luminance, so every text, fill, stroke and focus-ring pair of the light and dark themes
+ * keeps, to within 8-bit rounding, the contrast it has with the default ramp, and stays above the
+ * floor the themes are held to (4.5:1 for text, 3:1 for strokes, graphics and focus rings, 1.15:1
+ * between the states of a fill), whatever the seed. The cost: the seed sets hue and
+ * colourfulness, not lightness, so the primary fill (stop 80) is the seed's hue at the default's
+ * lightness, and a light seed gives a darker button than itself. For a brand whose exact colours
+ * matter, pass a full `BrandRamp`. The default seed `#0f6cbd` gives the default ramp, and a grey
+ * seed (black, white or any grey) a grey ramp.
+ *
+ * A full `BrandRamp` is returned as tokens with its colours unchanged; a stop that is missing or
+ * not a hex colour takes the default ramp's colour, with a development warning. In development the
+ * ramp is also checked against the pairs the light and dark themes read from it (the primary
+ * colour as text and as a fill under its text, the hover and pressed fills, the selection fills
+ * and their text, the focus ring): each pair below its minimum (4.5:1 for text, 3:1 for the focus
+ * ring, 1.15:1 between the states of a fill) logs one warning naming the theme, the tokens, the
+ * stops and the ratio. The check is advisory: the ramp applies as given. Any other seed returns
+ * the default ramp, with a development warning.
+ *
+ * Pure and server-safe; it returns a new object on each call, so compute it once (at module scope,
+ * or memoised) rather than on every render.
+ *
+ * @example
+ * const brand = createBrandTokens('#c43e00');
+ * <WaveProvider tokens={brand}>…</WaveProvider>
+ *
+ * @example
+ * <WaveProvider tokens={{ ...createBrandTokens('#c43e00'), fontFamily: 'Inter, sans-serif' }}>
+ */
+export declare function createBrandTokens(seed: string | BrandRamp): BrandTokens;
+
 /**
  * Creates a column for DataGrid's `columns`, typed by the grid's items, with `sortable` resolved
  * (`true` when the column has `compare`, unless `sortable` says otherwise). Returns a new object
@@ -6750,6 +6838,33 @@ export declare function getTabbableElements(container: Element, options?: {
  */
 export declare function getThemeClassName(theme: WaveTheme): string;
 
+/**
+ * The inline style that applies token overrides: one `--wave-*` custom property per entry, the
+ * object `WaveProvider` puts on its root and its portals. Use it where no provider renders, such
+ * as a Server Component's document element. Server-safe.
+ *
+ * Returns `undefined` for `null`, `undefined` or a map with nothing to set. An `undefined` value is
+ * skipped, a number is written as its string, a string is trimmed as React's server renderer trims
+ * it, and the properties keep the order of the input. A key that is not a camelCase identifier is
+ * skipped with a development warning (once per key), and so is a value unless it is a finite
+ * number or CSS text without `;`, `{`, `}` or `url(` whose quotes, parentheses, square brackets and
+ * comments are balanced, with no `!` or backslash outside strings and comments. In a
+ * server-rendered `style` attribute such a character could add a declaration of its own, an open
+ * string, comment or bracket (or an escape that spells `url(` or takes the semicolon after the
+ * value) would swallow the declarations after it, and `!important` would set a priority the client
+ * refuses; the trimmed values that pass are read alike by the attribute and by the client. Names
+ * are not checked against the list of tokens: TypeScript refuses a misspelled one, and in
+ * JavaScript it sets a property nothing reads.
+ *
+ * @example
+ * // app/layout.tsx (a Server Component)
+ * <html style={getTokenStyle({ brand80: '#c43e00' })}>
+ *
+ * @example
+ * <div style={{ ...getTokenStyle(overrides), padding: 16 }} />
+ */
+export declare function getTokenStyle(overrides: WaveTokenOverrides | null | undefined): TokenStyle | undefined;
+
 /**
  * The week number (1–53) of `date`'s calendar day (time of day ignored): days before a year's week
  * 1 belong to the previous year's last week, and days in the next year's week 1 are week 1. ISO 8601
@@ -11956,7 +12071,8 @@ export declare type PopupTargetInput = PopupTarget | {
 
 /**
  * Renders its children into `document.body` (or the WaveProvider `portalContainer`), wrapped in a
- * `<div class="wave-portal …">` that carries the provider's theme classes, direction and font, so
+ * `<div class="wave-portal …">` that carries the provider's theme classes, direction and font, and
+ * its token overrides (WaveProvider `tokens`, unless its `applyStylesToPortals` is `false`), so
  * portaled overlays look like the rest of the themed tree. The wrapper paints no background.
  *
  * - **Client only, first commit**: nothing is rendered on the server or during hydration (no
@@ -16993,13 +17109,20 @@ export declare interface TextOwnProps {
      */
     variant?: TypographyVariant;
     /**
-     * Font weight: `'regular'`, `'semibold'` or `'bold'`. Unset, the variant's own weight applies:
-     * semibold for `'subtitle-2'` and every larger variant (`'subtitle-1'`, the titles,
-     * `'large-title'`, `'display'`), inherited for the caption and body variants. Pass `'regular'`
-     * for a title at regular weight. The numeric 0.4 values `400`, `600` and `700` still work but
-     * are deprecated.
+     * Font weight: `'regular'`, `'medium'`, `'semibold'` or `'bold'`. Unset, the variant's own
+     * weight applies: semibold for `'subtitle-2'` and every larger variant (`'subtitle-1'`, the
+     * titles, `'large-title'`, `'display'`), inherited for the caption and body variants. Pass
+     * `'regular'` for a title at regular weight. The numeric 0.4 values `400`, `600` and `700` still
+     * work but are deprecated.
      */
     weight?: TextWeight | 400 | 600 | 700;
+    /**
+     * Font family: `'base'` keeps the inherited family (the Wave sans-serif), `'monospace'` sets the
+     * Wave monospace stack for code and identifiers, `'numeric'` the stack for figures that should
+     * align in columns. Fluent's `font` prop. A `className` that sets a font family replaces it.
+     * @default 'base'
+     */
+    font?: 'base' | 'monospace' | 'numeric';
 }
 
 /**
@@ -17008,8 +17131,8 @@ export declare interface TextOwnProps {
  */
 export declare type TextProps<C extends React_2.ElementType = 'span'> = PolymorphicProps<C, TextOwnProps>;
 
-/** Font weight vocabulary shared by Text and Label (400 / 600 / 700). */
-export declare type TextWeight = 'regular' | 'semibold' | 'bold';
+/** Font weight vocabulary shared by Text and Label (400 / 500 / 600 / 700). */
+export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 /**
  * A time input with a filterable list of times (APG editable combobox with list autocomplete).
@@ -17786,6 +17909,23 @@ export declare interface ToggleButtonProps extends Omit<React_2.ButtonHTMLAttrib
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/**
+ * The inline style that applies token overrides: a React style object whose `--wave-*` custom
+ * properties set the tokens, so it can be merged with other style properties.
+ */
+export declare type TokenStyle = React_2.CSSProperties & {
+    [K in `--wave-${string}`]?: string;
+};
+
+/**
+ * The CSS custom property of a token name at the type level: `TokenVariable<'brand80'>` is
+ * `'--wave-brand-80'`, by the rule of {@link tokenVariable}. It spells out the literal values of
+ * `waveTokens`. It walks the name one character at a time (tail-recursive, so long names stay
+ * within the compiler's depth limit): `AfterLetter` says whether the previous character was a
+ * letter, `Done` holds the converted text so far.
+ */
+declare type TokenVariable<Name extends string, AfterLetter extends boolean = false, Done extends string = ''> = Name extends `${infer Char}${infer Rest}` ? Char extends '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' ? TokenVariable<Rest, false, `${Done}${AfterLetter extends true ? '-' : ''}${Char}`> : Char extends Lowercase<Char> ? TokenVariable<Rest, true, `${Done}${Char}`> : TokenVariable<Rest, true, `${Done}-${Lowercase<Char>}`> : `--wave-${Done}`;
+
 /**
  * A container for a set of controls (APG Toolbar pattern): `role="toolbar"`, one Tab stop, and
  * arrow-key navigation between its controls.
@@ -20532,7 +20672,7 @@ export declare interface UseVirtualWindowOptions {
 }
 
 /**
- * Reads the theme, direction, theme classes and portal container of the nearest
+ * Reads the theme, direction, theme classes, portal container and token overrides of the nearest
  * {@link WaveProvider}. Outside a provider it returns light/ltr defaults with `hasProvider: false`.
  *
  * @returns The {@link WaveContextValue} of the nearest provider.
@@ -20635,6 +20775,12 @@ export declare interface VisibleFlatItem {
     index: number;
 }
 
+/**
+ * The name of every `--wave-*` variable of `tokens.css`, in camelCase, in the file's groups and
+ * order. A test parses `tokens.css` and fails when a variable is missing here or a name has none.
+ */
+declare const WAVE_TOKEN_NAMES: readonly ["fontFamily", "fontFamilyMonospace", "fontFamilyNumeric", "zOverlay", "zToast", "zTooltip", "durationUltraFast", "durationFaster", "durationFast", "durationNormal", "durationGentle", "durationSlow", "durationSlower", "durationUltraSlow", "curveAccelerateMax", "curveAccelerateMid", "curveAccelerateMin", "curveDecelerateMax", "curveDecelerateMid", "curveDecelerateMin", "curveEasyEaseMax", "curveEasyEase", "curveLinear", "brand10", "brand20", "brand30", "brand40", "brand50", "brand60", "brand70", "brand80", "brand90", "brand100", "brand110", "brand120", "brand130", "brand140", "brand150", "brand160", "grey2", "grey4", "grey6", "grey8", "grey10", "grey12", "grey14", "grey16", "grey20", "grey24", "grey26", "grey30", "grey34", "grey38", "grey40", "grey44", "grey50", "grey60", "grey68", "grey74", "grey78", "grey82", "grey86", "grey88", "grey90", "grey92", "grey94", "grey96", "grey98", "background", "foreground", "card", "secondary", "muted", "mutedForeground", "mutedHover", "mutedPressed", "primary", "primaryForeground", "primaryHover", "primaryPressed", "destructive", "destructiveForeground", "error", "errorForeground", "subtle", "subtleHover", "subtlePressed", "subtleSelected", "selected", "selectedForeground", "selectedHover", "selectedPressed", "border", "stroke", "strokeHover", "strokeAccessible", "input", "inputFilledDarker", "inputFilledStroke", "ring", "success", "successForeground", "successTint", "successTintForeground", "warning", "warningForeground", "warningTint", "warningTintForeground", "errorTint", "errorTintForeground", "severe", "severeForeground", "severeTint", "severeTintForeground", "info", "infoForeground", "infoTint", "infoTintForeground", "inverted", "invertedForeground", "invertedBorder", "track", "skeleton", "rating", "presenceAvailable", "presenceBusy", "presenceAway", "presenceOffline", "presenceOof", "presenceGlyph", "backdrop", "paletteRed", "paletteRedForeground", "paletteRedTint", "paletteRedTintForeground", "paletteRedBorder", "palettePumpkin", "palettePumpkinForeground", "palettePumpkinTint", "palettePumpkinTintForeground", "palettePumpkinBorder", "paletteGold", "paletteGoldForeground", "paletteGoldTint", "paletteGoldTintForeground", "paletteGoldBorder", "paletteForest", "paletteForestForeground", "paletteForestTint", "paletteForestTintForeground", "paletteForestBorder", "paletteTeal", "paletteTealForeground", "paletteTealTint", "paletteTealTintForeground", "paletteTealBorder", "paletteBlue", "paletteBlueForeground", "paletteBlueTint", "paletteBlueTintForeground", "paletteBlueBorder", "paletteNavy", "paletteNavyForeground", "paletteNavyTint", "paletteNavyTintForeground", "paletteNavyBorder", "paletteLavender", "paletteLavenderForeground", "paletteLavenderTint", "paletteLavenderTintForeground", "paletteLavenderBorder", "palettePurple", "palettePurpleForeground", "palettePurpleTint", "palettePurpleTintForeground", "palettePurpleBorder", "paletteMagenta", "paletteMagentaForeground", "paletteMagentaTint", "paletteMagentaTintForeground", "paletteMagentaBorder", "paletteBrown", "paletteBrownForeground", "paletteBrownTint", "paletteBrownTintForeground", "paletteBrownBorder", "paletteSteel", "paletteSteelForeground", "paletteSteelTint", "paletteSteelTintForeground", "paletteSteelBorder", "shadow2", "shadow4", "shadow8", "shadow16", "shadow28", "shadow64", "cardForeground", "secondaryForeground", "accent", "accentForeground", "inputFilledLighter"];
+
 /** Value provided by {@link WaveProvider} and returned by {@link useWaveTheme}. */
 export declare interface WaveContextValue {
     /** The active theme. */
@@ -20652,6 +20798,19 @@ export declare interface WaveContextValue {
     inputDefaults: InputDefaults;
     /** The motion preference of the providers above (`'default'` outside a provider). */
     motion: MotionPreference;
+    /**
+     * The merged token overrides of the providers above (`{}` outside a provider), as given: an
+     * entry skipped for a malformed key or value stays in it, and only `tokenStyle` leaves it out.
+     */
+    tokens: WaveTokenOverrides;
+    /**
+     * The inline style that applies `tokens`, as the provider's root and, unless
+     * `applyStylesToPortals` is `false`, its portals carry it; `undefined` when there is nothing to
+     * set (also outside a provider).
+     */
+    tokenStyle: TokenStyle | undefined;
+    /** Whether portals carry `tokenStyle` (`true` outside a provider). */
+    applyStylesToPortals: boolean;
     /** `false` when no {@link WaveProvider} is above the caller (the defaults are returned). */
     hasProvider: boolean;
 }
@@ -20682,9 +20841,21 @@ export declare type WaveDir = 'ltr' | 'rtl';
  *   slots, Carousel's slide, TabList's sliding line, the reveal of Nav item actions; a part's own
  *   `motion` still wins), while transitions without a slot keep running (Accordion's and Tree's
  *   chevron turns, colour changes); a nested provider inherits an omitted `motion` like `theme`.
+ * - `tokens` overrides design tokens in the subtree with inline custom properties on the root
+ *   (rendered on the server too) and on every portal of the subtree, unless
+ *   `applyStylesToPortals` is `false`. A nested provider merges its overrides over the enclosing
+ *   provider's key by key, also when it sets another `theme`; `tokens={null}` clears them for the
+ *   tokens the theme declares and for the overlays, while the theme-independent ones of an
+ *   enclosing provider still reach the subtree through the CSS cascade. An override whose key is
+ *   not a camelCase identifier is skipped with a development warning, and so is a value unless it
+ *   is a finite number or CSS text without `;`, `{`, `}` or `url(` with balanced quotes,
+ *   parentheses, square brackets and comments and no `!` or backslash outside strings and
+ *   comments; a value is trimmed as React's server renderer trims it, so the server and the client
+ *   write the same overrides. Without overrides the root renders no `style` attribute unless you
+ *   pass `style`.
  */
 export declare const WaveProvider: {
-    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, motion: motionProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
+    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, motion: motionProp, tokens: tokensProp, applyStylesToPortals: applyStylesToPortalsProp, children, className, style, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -20732,6 +20903,58 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
      * @default the enclosing WaveProvider's motion, else 'default'
      */
     motion?: MotionPreference;
+    /**
+     * Design token overrides for the subtree: CSS values by token name, the CSS variable in camelCase
+     * without its `--wave-` prefix (`brand80` for `--wave-brand-80`, `primaryForeground` for
+     * `--wave-primary-foreground`; a number is written as its string). `theme` still names one of
+     * the three themes, and the overrides apply over it as inline custom properties on the root and
+     * on every portal of the subtree (see `applyStylesToPortals`), so its dialogs, menus, popovers,
+     * tooltips and toasts take them too. Fluent's `theme` prop with a partial theme is the
+     * counterpart.
+     *
+     * A nested provider merges its overrides over the enclosing provider's, key by key: an omitted
+     * `tokens` inherits them all, and a key whose value is `undefined` inherits that key. `null`
+     * clears the inherited overrides of the tokens the theme declares (the semantic colours, shadows,
+     * palette) and of the subtree's overlays; theme-independent tokens (the brand and grey ramps,
+     * font families, stacking order, motion durations and curves) of an enclosing provider still
+     * reach the subtree's own elements through the CSS cascade, and the theme's colours built on the
+     * brand ramp follow them there. A nested provider that sets another `theme` inherits the
+     * overrides too, so set an override of a semantic colour (`primary`) in the provider that sets
+     * the theme it was chosen for. A whole brand ramp is better made with `createBrandTokens` than
+     * written by hand.
+     * A key that is not a camelCase identifier is skipped with a development warning, and so is a
+     * value unless it is a finite number or CSS text without `;`, `{`, `}` or `url(` whose quotes,
+     * parentheses, square brackets and comments are balanced, with no `!` or backslash outside
+     * strings and comments; a well-formed name is not checked against the list of tokens
+     * (TypeScript refuses a misspelled one). In the server-rendered `style` attribute a refused
+     * character could add a declaration of its own, and an open string, comment or bracket, or an
+     * escape that spells `url(` or takes the semicolon after the value, would swallow the
+     * declarations after it (though not in the client), while `!important` would be a priority the
+     * client refuses. A value is trimmed as React's server renderer trims it, so the values that pass
+     * are written and read alike by the server and the client.
+     *
+     * The overrides are rendered on the server too. Under a Content Security Policy that blocks
+     * inline style attributes (`style-src` without `'unsafe-inline'`), the server-rendered overrides
+     * do not apply and hydration does not apply them again: ship them in a stylesheet there, and pass
+     * no `tokens` (nor `getTokenStyle`), since the overlays and the subtrees rendered in the client
+     * would still take them and leave the page half branded.
+     *
+     * @example
+     * <WaveProvider tokens={{ fontFamily: 'Inter, sans-serif', zOverlay: 2000 }}>
+     * @default the enclosing WaveProvider's overrides, else none
+     */
+    tokens?: WaveTokenOverrides | null;
+    /**
+     * Whether the portals of the subtree (dialogs, popovers, menus, tooltips, toasts) carry the
+     * overrides of `tokens`. `false` leaves them out: an overlay then shows its theme's own values
+     * for the tokens the theme declares, and keeps the surrounding cascade (that of the element it
+     * renders into) for the theme-independent ones. The theme classes and the direction are set on
+     * every portal either way, so an overlay of a dark provider is still dark. Fluent's
+     * `applyStylesToPortals` is the counterpart; unlike Fluent's, a nested provider inherits an
+     * omitted value, like `theme`.
+     * @default the enclosing WaveProvider's value, else true
+     */
+    applyStylesToPortals?: boolean;
     /** Content rendered inside the themed container. */
     children: React_2.ReactNode;
     /** Ref to the themed root `<div>`. */
@@ -20747,4 +20970,42 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
 /** Supported visual themes for the Wave design system. */
 export declare type WaveTheme = 'light' | 'dark' | 'high-contrast';
 
+/**
+ * The name of a design token: its CSS custom property without the `--wave-` prefix, in camelCase.
+ * `--wave-primary-foreground` is `primaryForeground`, `--wave-brand-80` is `brand80` and
+ * `--wave-palette-red-tint` is `paletteRedTint`.
+ */
+export declare type WaveTokenName = (typeof WAVE_TOKEN_NAMES)[number];
+
+/**
+ * Token overrides: CSS values by token name, as `WaveProvider tokens` and `getTokenStyle` take
+ * them. A number is written as its string (`zOverlay: 2000`); a key whose value is `undefined`
+ * sets nothing.
+ */
+export declare type WaveTokenOverrides = {
+    [K in WaveTokenName]?: string | number;
+};
+
+/** The shape of `waveTokens`: every token name mapped to the CSS value that reads the token. */
+export declare type WaveTokens = {
+    readonly [K in WaveTokenName]: string;
+};
+
+/**
+ * Every design token as the CSS value that reads it: `waveTokens.primary` is
+ * `'var(--wave-primary)'`, typed as that literal. Use it where a style is written in JavaScript
+ * (an inline style, a CSS-in-JS rule, the colours of an SVG chart), so the value follows the theme
+ * and the provider's token overrides. The counterpart of Fluent's `tokens` object
+ * (`tokens.colorBrandBackground`), with Wave's names: the CSS variable in camelCase without its
+ * `--wave-` prefix. A canvas library cannot read a CSS variable: resolve the value with
+ * `getComputedStyle` on an element inside the provider, and again when the theme changes.
+ * Frozen and server-safe; no component imports it.
+ *
+ * @example
+ * <span style={{ color: waveTokens.primary, boxShadow: waveTokens.shadow8 }} />
+ */
+export declare const waveTokens: {
+    readonly [K in WaveTokenName]: `var(${TokenVariable<K>})`;
+};
+
 export { }