@refineui/tokens 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,1049 @@
+/**
+ * Theme / context keys supported today and reserved for future extension.
+ * CSS currently emits `light` + `dark`; additional keys map to attribute selectors when adopted.
+ */
+type ThemeContextKey = "light" | "dark" | "highContrast" | "forcedColors" | "brand";
+/** Foundation Alias/Color — per-theme CSS values (`var(--refineui-color-*)`, etc.) */
+type SemanticColorModePair = Readonly<{
+    light: string;
+    dark: string;
+}>;
+/**
+ * Extensible theme map — `light`/`dark` required; other contexts optional until CSS adopts them.
+ *
+ * @example
+ * { light: "primaryBlack", dark: "primaryGray", highContrast: "primaryWhite" }
+ */
+type SemanticThemeMap<TValue extends string = string> = Readonly<Partial<Record<ThemeContextKey, TValue>> & Pick<Record<ThemeContextKey, TValue>, "light" | "dark">>;
+/** Token lifecycle for spec / MCP / Doctor metadata. */
+type TokenStatus = "experimental" | "stable" | "deprecated" | "internal";
+/** Minimal token metadata for generated spec and AI tooling. */
+type TokenMeta = Readonly<{
+    description?: string;
+    category: string;
+    status?: TokenStatus;
+    deprecated?: boolean;
+    references?: readonly string[];
+}>;
+/**
+ * Design tokens for Palettet Color
+ */
+type PaletteColors = {
+    primaryLightGray: string;
+    primaryGray: string;
+    primaryDarkGray: string;
+    primaryBlack: string;
+    neutralWhite: string;
+    neutral100: string;
+    neutral150: string;
+    neutral200: string;
+    neutral250: string;
+    neutral300: string;
+    neutral350: string;
+    neutral400: string;
+    neutral450: string;
+    neutral500: string;
+    neutral550: string;
+    neutral600: string;
+    neutral650: string;
+    neutral700: string;
+    neutral750: string;
+    neutral800: string;
+    neutral850: string;
+    neutral900: string;
+    neutral950: string;
+    neutralBlack: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    red600: string;
+    red700: string;
+    red800: string;
+    red900: string;
+    red1000: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    orange600: string;
+    orange700: string;
+    orange800: string;
+    orange900: string;
+    orange1000: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    yellow900: string;
+    yellow1000: string;
+    lime100: string;
+    lime200: string;
+    lime300: string;
+    lime400: string;
+    lime500: string;
+    lime600: string;
+    lime700: string;
+    lime800: string;
+    lime900: string;
+    lime1000: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    green900: string;
+    green1000: string;
+    teal100: string;
+    teal200: string;
+    teal300: string;
+    teal400: string;
+    teal500: string;
+    teal600: string;
+    teal700: string;
+    teal800: string;
+    teal900: string;
+    teal1000: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    blue1000: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    purple400: string;
+    purple500: string;
+    purple600: string;
+    purple700: string;
+    purple800: string;
+    purple900: string;
+    purple1000: string;
+    magenta100: string;
+    magenta200: string;
+    magenta300: string;
+    magenta400: string;
+    magenta500: string;
+    magenta600: string;
+    magenta700: string;
+    magenta800: string;
+    magenta900: string;
+    magenta1000: string;
+};
+/**
+ * Foundation Alias/Color — palette token names for Light and Dark.
+ * @typeParam P — palette map type (defaults align with `PaletteColors` / `global/colors`)
+ */
+type SemanticPalettePairFor<P extends Record<string, string>> = {
+    light: keyof P;
+    dark: keyof P;
+};
+/** Alias name → full map of Light/Dark pairs */
+type SemanticPalettePairsOf<P extends Record<string, string>> = Readonly<Record<string, SemanticPalettePairFor<P>>>;
+/** Single alias pair for `PaletteColors` (most common in implementations) */
+type SemanticPalettePair = SemanticPalettePairFor<PaletteColors>;
+/**
+ * Shadow color (Figma Variables — Lighter ~ Darker, per Key/Ambient)
+ * Foundation: ambient lighter, ambient light, ambient, ambient dark, ambient darker
+ */
+type ShadowColorTokens = {
+    shadowColorKeyLighter: string;
+    shadowColorKeyLight: string;
+    shadowColorKey: string;
+    shadowColorKeyDark: string;
+    shadowColorKeyDarker: string;
+    shadowColorAmbientLighter: string;
+    shadowColorAmbientLight: string;
+    shadowColorAmbient: string;
+    shadowColorAmbientDark: string;
+    shadowColorAmbientDarker: string;
+};
+/**
+ * Key + Ambient shadow pair (Material Design 3 / Figma Variables shape)
+ * - key: directional shadow (y offset, smaller blur)
+ * - ambient: soft diffuse shadow (larger blur)
+ */
+type ShadowLevel = {
+    key: string;
+    ambient: string;
+};
+/**
+ * Elevation shadows — 1:1 with Figma `Elevation/Light/Shadow N` · `Elevation/Dark/Shadow N`.
+ * Two tokens per step only (`*Light` / `*Dark`); no intermediate `shadow2` / Lighter / Darker expansion.
+ * Color ramps live in `shadowColors` (`Global/Shadows/Key *`, `Ambient *`).
+ * Usage: box-shadow: ${toBoxShadow(level)}
+ */
+type ShadowTokens = {
+    shadow2Light: ShadowLevel;
+    shadow2Dark: ShadowLevel;
+    shadow4Light: ShadowLevel;
+    shadow4Dark: ShadowLevel;
+    shadow8Light: ShadowLevel;
+    shadow8Dark: ShadowLevel;
+    shadow16Light: ShadowLevel;
+    shadow16Dark: ShadowLevel;
+    shadow24Light: ShadowLevel;
+    shadow24Dark: ShadowLevel;
+    shadow32Light: ShadowLevel;
+    shadow32Dark: ShadowLevel;
+    shadow64Light: ShadowLevel;
+    shadow64Dark: ShadowLevel;
+};
+/**
+ * Semantic elevation shadows — `ShadowLevel` per UI theme (Light/Dark).
+ * Foundation: Elevation/Light and Elevation/Dark map to `shadowNLight` / `shadowNDark` globals.
+ */
+type SemanticShadowElevationPair = {
+    light: ShadowLevel;
+    dark: ShadowLevel;
+};
+/** Semantic elevation steps (Figma Shadow 2 / 4 / … / 64) */
+type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
+/** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
+type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
+/**
+ * Design tokens for stroke width
+ */
+type StrokeWidthTokens = {
+    strokeWidthNone: string;
+    strokeWidthHairline: string;
+    strokeWidthThin: string;
+    strokeWidthThick: string;
+    strokeWidthThicker: string;
+    strokeWidthThickest: string;
+};
+/**
+ * Design tokens for border radius
+ */
+type BorderRadiusTokens = {
+    roundedNone: string;
+    roundedXSmall: string;
+    roundedSmall: string;
+    roundedMedium: string;
+    roundedLarge: string;
+    roundedXLarge: string;
+    roundedXXLarge: string;
+    roundedCircle: string;
+};
+/**
+ * Design tokens for spacing size
+ */
+type SpacingTokens = {
+    sizeNone: string;
+    sizeXXXSmall: string;
+    sizeXXSmall: string;
+    sizeXSmall: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
+    sizeXLarge: string;
+    sizeXXLarge: string;
+    sizeXXXLarge: string;
+};
+/**
+ * Foundation motion primitives (`global/motion.ts`).
+ * Value-based steps only — no UI role names.
+ */
+type FoundationMotionTokens = {
+    duration: {
+        duration0: string;
+        duration150: string;
+        duration180: string;
+        duration200: string;
+        duration240: string;
+        duration260: string;
+        duration280: string;
+        duration320: string;
+        duration380: string;
+        duration800: string;
+        duration1500: string;
+    };
+    easing: {
+        easingStandard: string;
+        easingEmphasized: string;
+        easingPanel: string;
+        easingContent: string;
+        easingLinear: string;
+        easingEaseOut: string;
+        easingEaseInOut: string;
+    };
+    scale: {
+        scale96: string;
+        scale98: string;
+        scale115: string;
+    };
+    distance: {
+        distance4: string;
+    };
+};
+/**
+ * Semantic motion roles (`semantic/interaction.ts`) — resolved Foundation strings.
+ * Prefer role keys (`press`, `fast`, `panel`) in new code; component scale aliases
+ * (`buttonActive`, …) mirror the same Foundation steps for existing CSS vars.
+ */
+type SemanticInteractionTokens = {
+    duration: {
+        instant: string;
+        fast: string;
+        normal: string;
+        medium: string;
+        slow: string;
+        overlay: string;
+        panel: string;
+        accordionPanel: string;
+        accordionContent: string;
+        toastEnter: string;
+        toastLeave: string;
+        skeleton: string;
+        spinner: string;
+    };
+    easing: {
+        standard: string;
+        emphasized: string;
+        panel: string;
+        content: string;
+        linear: string;
+        easeOut: string;
+        easeInOut: string;
+    };
+    scale: {
+        enter: string;
+        press: string;
+        hoverGrow: string;
+        dialogEnter: string;
+        buttonActive: string;
+        sliderThumbHover: string;
+    };
+    distance: {
+        float: string;
+    };
+};
+/** @deprecated Use `FoundationMotionTokens` — kept for older imports. */
+type MotionTokens = FoundationMotionTokens;
+/**
+ * Design tokens for font
+ */
+type FontSizeTokens = {
+    fontSize100: string;
+    fontSize200: string;
+    fontSize300: string;
+    fontSize400: string;
+    fontSize500: string;
+    fontSize600: string;
+    fontSize700: string;
+    fontSize800: string;
+    fontSize900: string;
+    fontSize1000: string;
+};
+type LineHeightTokens = {
+    lineHeight100: string;
+    lineHeight200: string;
+    lineHeight300: string;
+    lineHeight400: string;
+    lineHeight500: string;
+    lineHeight600: string;
+    lineHeight700: string;
+    lineHeight800: string;
+    lineHeight900: string;
+    lineHeight1000: string;
+};
+type FontWeightTokens = {
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightSemibold: string;
+    fontWeightBold: string;
+    fontWeightHeavy: string;
+};
+type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
+type FontFamilyTokens = {
+    fontFamily: string;
+};
+type TypographyStyle = {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+/**
+ * Design tokens for typography
+ */
+type TypographyStyles = {
+    heading1: TypographyStyle;
+    heading2: TypographyStyle;
+    heading3: TypographyStyle;
+    heading4: TypographyStyle;
+    title1: TypographyStyle;
+    title2: TypographyStyle;
+    title3: TypographyStyle;
+    subTitle1: TypographyStyle;
+    subTitle2: TypographyStyle;
+    body1: TypographyStyle;
+    body2: TypographyStyle;
+    body3: TypographyStyle;
+    body4: TypographyStyle;
+    caption1: TypographyStyle;
+    caption2: TypographyStyle;
+    caption3: TypographyStyle;
+};
+/**
+ * Design tokens for z-index groups and levels
+ */
+type ZIndexTokens = {
+    zIndexBackground?: string;
+    zIndexContent?: string;
+    zIndexOverlay?: string;
+    zIndexPopup?: string;
+    zIndexMessages?: string;
+    zIndexFloating?: string;
+    zIndexPriority?: string;
+    zIndexDebug?: string;
+};
+type Theme = FontSizeTokens & FontFamilyTokens & FontWeightTokens & LineHeightTokens & PaletteColors & ShadowColorTokens & ShadowTokens & StrokeWidthTokens & BorderRadiusTokens & SpacingTokens & TypographyStyles & ZIndexTokens;
+
+declare const colors: PaletteColors;
+
+declare const SEMANTIC_PALETTE_PAIRS: {
+    readonly backgroundBrandActive: {
+        readonly light: "neutralBlack";
+        readonly dark: "primaryLightGray";
+    };
+    readonly backgroundBrandDisabled: {
+        readonly light: "neutral150";
+        readonly dark: "neutral650";
+    };
+    readonly backgroundBrandHover: {
+        readonly light: "primaryDarkGray";
+        readonly dark: "primaryLightGray";
+    };
+    readonly backgroundBrandStrong: {
+        readonly light: "primaryDarkGray";
+        readonly dark: "primaryGray";
+    };
+    readonly backgroundBrandSubtle: {
+        readonly light: "primaryLightGray";
+        readonly dark: "neutral800";
+    };
+    readonly backgroundBrand: {
+        readonly light: "primaryBlack";
+        readonly dark: "primaryGray";
+    };
+    readonly backgroundDiscoveryHover: {
+        readonly light: "purple700";
+        readonly dark: "purple300";
+    };
+    readonly backgroundDiscoverySubtle: {
+        readonly light: "purple100";
+        readonly dark: "purple900";
+    };
+    readonly backgroundDiscovery: {
+        readonly light: "purple500";
+        readonly dark: "purple500";
+    };
+    readonly backgroundErrorHover: {
+        readonly light: "red700";
+        readonly dark: "red300";
+    };
+    readonly backgroundErrorSubtle: {
+        readonly light: "red100";
+        readonly dark: "red900";
+    };
+    readonly backgroundError: {
+        readonly light: "red500";
+        readonly dark: "red500";
+    };
+    readonly backgroundInfoHover: {
+        readonly light: "blue700";
+        readonly dark: "blue300";
+    };
+    readonly backgroundInfoSubtle: {
+        readonly light: "blue100";
+        readonly dark: "blue900";
+    };
+    readonly backgroundInfo: {
+        readonly light: "blue500";
+        readonly dark: "blue500";
+    };
+    readonly backgroundPrimaryActive: {
+        readonly light: "neutral150";
+        readonly dark: "neutral800";
+    };
+    readonly backgroundPrimaryHover: {
+        readonly light: "neutral100";
+        readonly dark: "neutral850";
+    };
+    readonly backgroundPrimary: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutral900";
+    };
+    readonly backgroundSuccessHover: {
+        readonly light: "green700";
+        readonly dark: "green300";
+    };
+    readonly backgroundSuccessSubtle: {
+        readonly light: "green100";
+        readonly dark: "green900";
+    };
+    readonly backgroundSuccess: {
+        readonly light: "green500";
+        readonly dark: "green500";
+    };
+    readonly backgroundSurfaceActive: {
+        readonly light: "neutral150";
+        readonly dark: "neutral700";
+    };
+    readonly backgroundSurfaceDisabled: {
+        readonly light: "neutral150";
+        readonly dark: "neutral850";
+    };
+    readonly backgroundSurfaceHover: {
+        readonly light: "neutral100";
+        readonly dark: "neutral750";
+    };
+    readonly backgroundSurfaceSelected: {
+        readonly light: "neutral200";
+        readonly dark: "neutral650";
+    };
+    readonly backgroundSurface: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutral800";
+    };
+    readonly backgroundWarningHover: {
+        readonly light: "yellow500";
+        readonly dark: "yellow200";
+    };
+    readonly backgroundWarningSubtle: {
+        readonly light: "yellow100";
+        readonly dark: "yellow900";
+    };
+    readonly backgroundWarning: {
+        readonly light: "yellow300";
+        readonly dark: "yellow300";
+    };
+    readonly borderDefault: {
+        readonly light: "neutral300";
+        readonly dark: "neutral650";
+    };
+    readonly borderDisabled: {
+        readonly light: "neutral250";
+        readonly dark: "neutral700";
+    };
+    readonly borderDiscovery: {
+        readonly light: "purple500";
+        readonly dark: "purple500";
+    };
+    readonly borderError: {
+        readonly light: "red500";
+        readonly dark: "red500";
+    };
+    readonly borderFocus: {
+        readonly light: "neutral750";
+        readonly dark: "neutral350";
+    };
+    readonly borderHover: {
+        readonly light: "neutral500";
+        readonly dark: "neutral500";
+    };
+    readonly borderInfo: {
+        readonly light: "blue500";
+        readonly dark: "blue500";
+    };
+    readonly borderStrong: {
+        readonly light: "neutral450";
+        readonly dark: "neutral550";
+    };
+    readonly borderSubtle: {
+        readonly light: "neutral200";
+        readonly dark: "neutral750";
+    };
+    readonly borderSuccess: {
+        readonly light: "green500";
+        readonly dark: "green500";
+    };
+    readonly borderWarning: {
+        readonly light: "yellow300";
+        readonly dark: "yellow300";
+    };
+    readonly foregroundBrandStrong: {
+        readonly light: "neutralBlack";
+        readonly dark: "primaryLightGray";
+    };
+    readonly foregroundBrand: {
+        readonly light: "primaryBlack";
+        readonly dark: "primaryGray";
+    };
+    readonly foregroundDisabled: {
+        readonly light: "neutral400";
+        readonly dark: "neutral600";
+    };
+    readonly foregroundDiscovery: {
+        readonly light: "purple700";
+        readonly dark: "purple200";
+    };
+    readonly foregroundError: {
+        readonly light: "red700";
+        readonly dark: "red200";
+    };
+    readonly foregroundInfo: {
+        readonly light: "blue700";
+        readonly dark: "blue200";
+    };
+    readonly foregroundInversed: {
+        readonly light: "neutralWhite";
+        readonly dark: "primaryBlack";
+    };
+    readonly foregroundLinkActive: {
+        readonly light: "blue900";
+        readonly dark: "blue200";
+    };
+    readonly foregroundLinkHover: {
+        readonly light: "blue800";
+        readonly dark: "blue300";
+    };
+    readonly foregroundLinkVisited: {
+        readonly light: "blue500";
+        readonly dark: "blue100";
+    };
+    readonly foregroundLink: {
+        readonly light: "blue700";
+        readonly dark: "blue400";
+    };
+    readonly foregroundOnBrand: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundOnDiscovery: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundOnError: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundOnInfo: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundOnSuccess: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundOnWarning: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutralBlack";
+    };
+    readonly foregroundPlaceholder: {
+        readonly light: "neutral450";
+        readonly dark: "neutral500";
+    };
+    readonly foregroundPrimaryHover: {
+        readonly light: "neutralBlack";
+        readonly dark: "neutral100";
+    };
+    readonly foregroundPrimary: {
+        readonly light: "primaryBlack";
+        readonly dark: "neutralWhite";
+    };
+    readonly foregroundSecondary: {
+        readonly light: "neutral600";
+        readonly dark: "neutral350";
+    };
+    readonly foregroundSuccess: {
+        readonly light: "green700";
+        readonly dark: "green200";
+    };
+    readonly foregroundTertiary: {
+        readonly light: "neutral500";
+        readonly dark: "neutral450";
+    };
+    readonly foregroundWarning: {
+        readonly light: "yellow700";
+        readonly dark: "yellow200";
+    };
+    readonly surfaceElevated: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutral700";
+    };
+    readonly surfaceInverse: {
+        readonly light: "neutralBlack";
+        readonly dark: "neutralWhite";
+    };
+    readonly surfacePopover: {
+        readonly light: "neutralWhite";
+        readonly dark: "neutral750";
+    };
+    readonly surfaceSunken: {
+        readonly light: "neutral150";
+        readonly dark: "neutral800";
+    };
+    readonly surfaceTooltip: {
+        readonly light: "neutral750";
+        readonly dark: "neutral300";
+    };
+};
+type SemanticPaletteName = keyof typeof SEMANTIC_PALETTE_PAIRS;
+/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (surfaceOverlay only) */
+declare const SEMANTIC_COLOR_ROWS: readonly [...(readonly ["backgroundBrandActive" | "backgroundBrandDisabled" | "backgroundBrandHover" | "backgroundBrandStrong" | "backgroundBrandSubtle" | "backgroundBrand" | "backgroundDiscoveryHover" | "backgroundDiscoverySubtle" | "backgroundDiscovery" | "backgroundErrorHover" | "backgroundErrorSubtle" | "backgroundError" | "backgroundInfoHover" | "backgroundInfoSubtle" | "backgroundInfo" | "backgroundPrimaryActive" | "backgroundPrimaryHover" | "backgroundPrimary" | "backgroundSuccessHover" | "backgroundSuccessSubtle" | "backgroundSuccess" | "backgroundSurfaceActive" | "backgroundSurfaceDisabled" | "backgroundSurfaceHover" | "backgroundSurfaceSelected" | "backgroundSurface" | "backgroundWarningHover" | "backgroundWarningSubtle" | "backgroundWarning" | "borderDefault" | "borderDisabled" | "borderDiscovery" | "borderError" | "borderFocus" | "borderHover" | "borderInfo" | "borderStrong" | "borderSubtle" | "borderSuccess" | "borderWarning" | "foregroundBrandStrong" | "foregroundBrand" | "foregroundDisabled" | "foregroundDiscovery" | "foregroundError" | "foregroundInfo" | "foregroundInversed" | "foregroundLinkActive" | "foregroundLinkHover" | "foregroundLinkVisited" | "foregroundLink" | "foregroundOnBrand" | "foregroundOnDiscovery" | "foregroundOnError" | "foregroundOnInfo" | "foregroundOnSuccess" | "foregroundOnWarning" | "foregroundPlaceholder" | "foregroundPrimaryHover" | "foregroundPrimary" | "foregroundSecondary" | "foregroundSuccess" | "foregroundTertiary" | "foregroundWarning" | "surfaceElevated" | "surfaceInverse" | "surfacePopover" | "surfaceSunken" | "surfaceTooltip", keyof PaletteColors, keyof PaletteColors])[], readonly ["surfaceOverlay", "__RGBA__", "__RGBA__"]];
+type SemanticColorName = SemanticPaletteName | "surfaceOverlay";
+/** Foundation surfaceOverlay (Overlay and Modal) — raw RGBA */
+declare const surfaceOverlayRgba: {
+    readonly light: "rgba(0, 0, 0, 0.2)";
+    readonly dark: "rgba(0, 0, 0, 0.6)";
+};
+/** Semantic colors — values are CSS var(--refineui-color-*) or rgba(...) */
+declare const semanticColors: Record<SemanticColorName, SemanticColorModePair>;
+
+/**
+ * Semantic motion roles — meaning layer over Foundation `motion`.
+ *
+ * UI, `@refineui/utilities` CSS helpers, and `refineui.css` should prefer these
+ * role names (fast / press / panel…), not raw Foundation steps.
+ *
+ * Flow: Foundation `motion` → `semanticInteraction` → CSS `--refineui-motion-*`
+ *       (and component JS that reads resolved ms strings).
+ */
+declare const semanticInteraction: SemanticInteractionTokens;
+
+/** Focus ring palette pairs — `:focus-visible` contract (not `:focus`). */
+declare const SEMANTIC_FOCUS_PAIRS: {
+    readonly ringColor: {
+        readonly light: "neutral750";
+        readonly dark: "neutral350";
+    };
+};
+type SemanticFocusName = keyof typeof SEMANTIC_FOCUS_PAIRS;
+declare const semanticFocus: {
+    readonly ring: {
+        readonly color: {
+            readonly light: string;
+            readonly dark: string;
+        };
+        readonly width: string;
+        readonly offset: string;
+        readonly style: "solid";
+    };
+};
+
+/** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
+declare const semanticShadows: SemanticShadowElevationTokens;
+
+/**
+ * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
+ * UI and component tokens reference these names, not raw Foundation keys.
+ */
+declare const SEMANTIC_TEXT: {
+    /** Display / marketing hero */
+    readonly displayLg: "heading1";
+    readonly displayMd: "heading2";
+    readonly displaySm: "heading3";
+    /** Page & section headings */
+    readonly headingLg: "heading2";
+    readonly headingMd: "heading3";
+    readonly headingSm: "heading4";
+    /** Component titles (Card, Dialog header) */
+    readonly titleLg: "title1";
+    readonly titleMd: "title2";
+    readonly titleSm: "title3";
+    /** Emphasized subtitles */
+    readonly subtitleLg: "subTitle1";
+    readonly subtitleMd: "subTitle2";
+    /** Primary reading text */
+    readonly bodyLg: "body1";
+    readonly bodyMd: "body2";
+    readonly bodySm: "body3";
+    readonly bodyXs: "body4";
+    /** Form labels, menu row labels */
+    readonly labelLg: "body1";
+    readonly labelMd: "body2";
+    readonly labelSm: "caption1";
+    /** Metadata, helpers, shortcuts */
+    readonly captionLg: "caption1";
+    readonly captionMd: "caption2";
+    readonly captionSm: "caption3";
+};
+type SemanticTextName = keyof typeof SEMANTIC_TEXT;
+type FoundationTypographyName = keyof TypographyStyles;
+
+declare const fontFamilies: FontFamilyTokens;
+declare const fontSizes: FontSizeTokens;
+declare const fontWeights: FontWeightTokens;
+declare const lineHeights: LineHeightTokens;
+
+/**
+ * Spacing scale — T-shirt sizes.
+ * Values: 0 · 2 · 4 · 6 · 8 · 10 · 16 · 20 · 24 · 32
+ */
+declare const spacings: SpacingTokens;
+
+/**
+ * Icon glyph sizes (px) — **not tied to font/typography tokens** (explicit values only).
+ */
+declare const iconSizes: {
+    readonly xxsmall: 12;
+    readonly xsmall: 16;
+    readonly small: 20;
+    readonly medium: 24;
+    readonly large: 28;
+    readonly xlarge: 32;
+    readonly xxlarge: 48;
+};
+
+/**
+ * Foundation layout size steps — digits ×0.1 → px (e.g. `320` → 32px, `3250` → 325px).
+ * Emitted as `--refineui-size-foundation-size-*` and Tailwind `size-refineui-foundation-size-*`.
+ *
+ * Includes Web Kit component steps that must stay linked here (not invented in `componentSizes`).
+ */
+declare const foundationSizes: {
+    readonly foundationSize10: "1px";
+    readonly foundationSize20: "2px";
+    readonly foundationSize30: "3px";
+    readonly foundationSize40: "4px";
+    readonly foundationSize60: "6px";
+    readonly foundationSize80: "8px";
+    readonly foundationSize100: "10px";
+    readonly foundationSize120: "12px";
+    /** Divider icon inner circle — Web Kit ≈ 40/3 */
+    readonly foundationSize133: "13.33px";
+    readonly foundationSize140: "14px";
+    readonly foundationSize160: "16px";
+    readonly foundationSize200: "20px";
+    readonly foundationSize240: "24px";
+    readonly foundationSize280: "28px";
+    readonly foundationSize300: "30px";
+    readonly foundationSize320: "32px";
+    readonly foundationSize340: "34px";
+    readonly foundationSize360: "36px";
+    readonly foundationSize400: "40px";
+    readonly foundationSize440: "44px";
+    readonly foundationSize480: "48px";
+    readonly foundationSize520: "52px";
+    readonly foundationSize540: "54px";
+    readonly foundationSize600: "60px";
+    readonly foundationSize800: "80px";
+    readonly foundationSize2000: "200px";
+    readonly foundationSize2440: "244px";
+    readonly foundationSize2560: "256px";
+    readonly foundationSize3000: "300px";
+    readonly foundationSize3200: "320px";
+    readonly foundationSize3250: "325px";
+    readonly foundationSize4500: "450px";
+    readonly foundationSize5750: "575px";
+    readonly foundationSize6000: "600px";
+    readonly foundationSize8500: "850px";
+};
+type FoundationSizeName = keyof typeof foundationSizes;
+
+/**
+ * Maps each component size key → Foundation size key for CSS
+ * `--refineui-size-*` → `var(--refineui-size-foundation-size-*)`.
+ */
+declare const componentSizeFoundationKeys: {
+    readonly avatarStatusXxxlarge: "foundationSize140";
+    readonly buttonMinHeightSm: "foundationSize280";
+    readonly buttonMinHeightMd: "foundationSize360";
+    readonly buttonMinHeightLg: "foundationSize480";
+    readonly chipMinHeightSm: "foundationSize200";
+    readonly chipMinHeightMd: "foundationSize240";
+    readonly chipMinHeightLg: "foundationSize320";
+    readonly controlHeightSm: "foundationSize360";
+    readonly controlHeightMd: "foundationSize440";
+    readonly controlHeightLg: "foundationSize520";
+    readonly controlTouchMin: "foundationSize440";
+    readonly controlCheckbox: "foundationSize200";
+    readonly controlCheckboxRadio: "foundationSize200";
+    readonly controlTextareaMin: "foundationSize800";
+    readonly popoverPanelWidth: "foundationSize3250";
+    readonly popoverBeakInsetFromStartEdge: "foundationSize340";
+    readonly popoverBeakInsetFromEndEdge: "foundationSize300";
+    readonly menuPanelWidth: "foundationSize2440";
+    readonly dropdownMenuWidth: "foundationSize2440";
+    readonly sidebarWidth: "foundationSize2560";
+    readonly toastMinWidth: "foundationSize3250";
+    readonly toastMaxWidth: "foundationSize3250";
+    readonly dialogMaxWidth: "foundationSize6000";
+    readonly dialogWidthSm: "foundationSize3000";
+    readonly drawerWidthSm: "foundationSize3200";
+    readonly drawerWidthMd: "foundationSize5750";
+    readonly drawerWidthLg: "foundationSize8500";
+    readonly calendarMinWidth: "foundationSize2560";
+    readonly calendarDaySize: "foundationSize320";
+    readonly tooltipMaxWidth: "foundationSize2000";
+    readonly spinStepperWidth: "foundationSize320";
+    readonly spinFieldPaddingInlineStart: "foundationSize120";
+    readonly switchWidth: "foundationSize440";
+    readonly switchHeight: "foundationSize240";
+    readonly switchThumb: "foundationSize200";
+    readonly switchPadding: "foundationSize20";
+    readonly progressTrackHeightSm: "foundationSize20";
+    readonly progressTrackHeightLg: "foundationSize40";
+    readonly sliderTrackHeightSm: "foundationSize20";
+    readonly sliderTrackHeightMd: "foundationSize40";
+    readonly sliderInteractionHeight: "foundationSize280";
+    readonly paginationButtonMinWidth: "foundationSize400";
+    readonly skeletonDefaultHeight: "foundationSize200";
+    readonly dividerShortEnd: "foundationSize80";
+    readonly dividerIconSlot: "foundationSize200";
+    readonly dividerIconCircleDiameter: "foundationSize133";
+    readonly dividerIconCircleInset: "foundationSize30";
+    readonly accessibleClip: "foundationSize10";
+    readonly spinnerSizeXSmall: "foundationSize160";
+    readonly spinnerSizeSmall: "foundationSize200";
+    readonly spinnerSizeMedium: "foundationSize240";
+    readonly spinnerSizeLarge: "foundationSize280";
+    readonly spinnerSizeXLarge: "foundationSize320";
+    readonly spinnerSizeXXLarge: "foundationSize480";
+    readonly spinnerRingWidthXSmall: "foundationSize20";
+    readonly spinnerRingWidthSmall: "foundationSize20";
+    readonly spinnerRingWidthMedium: "foundationSize20";
+    readonly spinnerRingWidthLarge: "foundationSize30";
+    readonly spinnerRingWidthXLarge: "foundationSize30";
+    readonly spinnerRingWidthXXLarge: "foundationSize40";
+};
+type ComponentSizeName = keyof typeof componentSizeFoundationKeys;
+/**
+ * Resolved px strings for JS layout math (`parseFloat`, inline styles).
+ * Source of truth is Foundation via `componentSizeFoundationKeys`.
+ */
+declare const componentSizes: {
+    readonly avatarStatusXxxlarge: "14px";
+    readonly buttonMinHeightSm: "28px";
+    readonly buttonMinHeightMd: "36px";
+    readonly buttonMinHeightLg: "48px";
+    readonly chipMinHeightSm: "20px";
+    readonly chipMinHeightMd: "24px";
+    readonly chipMinHeightLg: "32px";
+    readonly controlHeightSm: "36px";
+    readonly controlHeightMd: "44px";
+    readonly controlHeightLg: "52px";
+    readonly controlTouchMin: "44px";
+    readonly controlCheckbox: "20px";
+    readonly controlCheckboxRadio: "20px";
+    readonly controlTextareaMin: "80px";
+    readonly popoverPanelWidth: "325px";
+    readonly popoverBeakInsetFromStartEdge: "34px";
+    readonly popoverBeakInsetFromEndEdge: "30px";
+    readonly menuPanelWidth: "244px";
+    /** @deprecated Same as `menuPanelWidth` */
+    readonly dropdownMenuWidth: "244px";
+    readonly sidebarWidth: "256px";
+    readonly toastMinWidth: "325px";
+    readonly toastMaxWidth: "325px";
+    readonly dialogMaxWidth: "600px";
+    /** Viewport-relative — not a Foundation px step */
+    readonly dialogMaxHeightViewport: "90vh";
+    readonly dialogWidthSm: "300px";
+    readonly drawerWidthSm: "320px";
+    readonly drawerWidthMd: "575px";
+    readonly drawerWidthLg: "850px";
+    readonly calendarMinWidth: "256px";
+    readonly calendarDaySize: "32px";
+    readonly tooltipMaxWidth: "200px";
+    readonly spinStepperWidth: "32px";
+    readonly spinFieldPaddingInlineStart: "12px";
+    readonly switchWidth: "44px";
+    readonly switchHeight: "24px";
+    readonly switchThumb: "20px";
+    readonly switchPadding: "2px";
+    readonly progressTrackHeightSm: "2px";
+    readonly progressTrackHeightLg: "4px";
+    readonly sliderTrackHeightSm: "2px";
+    readonly sliderTrackHeightMd: "4px";
+    readonly sliderInteractionHeight: "28px";
+    readonly paginationButtonMinWidth: "40px";
+    readonly skeletonDefaultHeight: "20px";
+    readonly dividerShortEnd: "8px";
+    readonly dividerIconSlot: "20px";
+    readonly dividerIconCircleDiameter: "13.33px";
+    readonly dividerIconCircleInset: "3px";
+    readonly accessibleClip: "1px";
+    readonly spinnerSizeXSmall: "16px";
+    readonly spinnerSizeSmall: "20px";
+    readonly spinnerSizeMedium: "24px";
+    readonly spinnerSizeLarge: "28px";
+    readonly spinnerSizeXLarge: "32px";
+    readonly spinnerSizeXXLarge: "48px";
+    readonly spinnerRingWidthXSmall: "2px";
+    readonly spinnerRingWidthSmall: "2px";
+    readonly spinnerRingWidthMedium: "2px";
+    readonly spinnerRingWidthLarge: "3px";
+    readonly spinnerRingWidthXLarge: "3px";
+    readonly spinnerRingWidthXXLarge: "4px";
+};
+
+/**
+ * Shared opacity scale — keys follow `strokeWidth*` / `size*` prefix style.
+ */
+declare const opacities: {
+    readonly opacityFull: "1";
+    readonly opacityDisabled: "0.5";
+    /** Ghost button hover wash (dark) — same alpha as `overlays.ghostButtonHoverDark` */
+    readonly opacityGhostHover: "0.08";
+};
+
+/**
+ * Overlay helpers (static snapshots for JS).
+ * In CSS, `--refineui-overlay-backdrop` tracks `var(--refineui-color-alias-surface-overlay)`.
+ */
+declare const overlays: {
+    /** Light-mode scrim snapshot — keep in sync with `surfaceOverlayRgba.light` */
+    readonly backdrop: "rgba(0, 0, 0, 0.2)";
+    /** Dark Ghost button hover */
+    readonly ghostButtonHoverDark: "rgba(255, 255, 255, 0.08)";
+};
+
+/**
+ * Foundation motion primitives — raw duration / easing / scale / distance steps.
+ * Semantic roles live in `semantic/interaction.ts` and must reference these values
+ * (do not invent ms, curves, or scales at the semantic or component layer).
+ *
+ * Naming: value-based keys (`duration150`, `scale98`), same idea as `foundationSize160`.
+ */
+declare const motion: FoundationMotionTokens;
+
+declare const strokeWidths: StrokeWidthTokens;
+
+declare const borderRadii: BorderRadiusTokens;
+
+/**
+ * Shadow color — Figma `Global/Shadows/Key *` · `Ambient *` (lighter → darker ramp).
+ * Elevation usually pairs Key light + Ambient light (light theme) / Key dark + Ambient dark (dark theme).
+ */
+declare const shadowColors: ShadowColorTokens;
+/** Concatenate key + ambient into one box-shadow string */
+declare function toBoxShadow(level: ShadowLevel): string;
+/**
+ * Elevation shadows — Figma `Elevation/Light` → `shadowNLight`, `Elevation/Dark` → `shadowNDark`
+ * Foundation: https://www.figma.com/design/GOLyxZSkzbRIuMNBvxeqr3/Pelagornis-RefineUI-Foundation?node-id=1-5785
+ */
+declare const shadows: ShadowTokens;
+/** Softest elevation-2 (slider thumb halo) — Key/Ambient lighter ramp */
+declare const shadow2Lighter: ShadowLevel;
+
+/** Foundation Typography — https://www.figma.com/design/GOLyxZSkzbRIuMNBvxeqr3/Pelagornis-RefineUI-Foundation?node-id=1-650 */
+declare const typographys: TypographyStyles;
+
+declare const zIndex: ZIndexTokens;
+
+declare const textAlignments: TextAlignments;
+
+export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticColorModePair, type SemanticColorName, type SemanticFocusName, type SemanticInteractionTokens, type SemanticPaletteName, type SemanticPalettePair, type SemanticPalettePairFor, type SemanticPalettePairsOf, type SemanticShadowElevationName, type SemanticShadowElevationPair, type SemanticShadowElevationTokens, type SemanticTextName, type SemanticThemeMap, type ShadowColorTokens, type ShadowLevel, type ShadowTokens, type SpacingTokens, type StrokeWidthTokens, type TextAlignment, type TextAlignments, type Theme, type ThemeContextKey, type TokenMeta, type TokenStatus, type TypographyStyle, type TypographyStyles, type ZIndexTokens, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticColors, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };