@refineui/tokens 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @refineui/tokens
 
+## 1.0.3
+
+### Patch Changes
+
+- Add Collapsible and Context Menu, frosted floating panels with blur tokens, SidebarPeek glass, and control polish (SegmentedControl, Breadcrumb, InputOTP).
+
 ## 1.0.2
 
 ### Patch Changes

package/README.md

@@ -30,8 +30,8 @@ bun run build   # or npm/yarn/pnpm run build — builds utilities → tokens →
 
 ## Layers
 
-1. **Primitive / Foundation** (`src/global`) — palette, spacing, radius, shadows, foundation sizes, opacities, icon sizes, **`typographys`**, **`motion`** (raw duration / easing / scale / distance steps)
-2. **Semantic** (`src/semantic`) — color aliases, **`semanticInteraction`** (motion roles → Foundation steps), elevation pairs, **`SEMANTIC_TEXT`** (bodyMd, labelSm, … → Foundation keys)
+1. **Primitive / Foundation** (`src/global`) — palette, spacing, radius, **blurs**, shadows, foundation sizes, opacities, icon sizes, **`typographys`**, **`motion`** (raw duration / easing / scale / distance steps)
+2. **Semantic** (`src/semantic`) — color aliases, **`semanticInteraction`** (motion roles → Foundation steps), **`semanticBlur`** (overlay/surface blur roles → Foundation steps), elevation pairs, **`SEMANTIC_TEXT`** (bodyMd, labelSm, … → Foundation keys)
 3. **Component** — colors/sizes/typography/state role maps in `@refineui/react` (`componentColorTokens`, `componentTypographyTokens`)
 4. **Recipe** — `packages/react/src/recipes/` (base, variants, compoundVariants; slot recipes for Alert/Dialog/…)
 5. **Interaction** — `refineui.css` + `data-state` contract

package/dist/css-variables.css

@@ -197,8 +197,8 @@
   --refineui-size-popover-beak-inset-from-start-edge: var(--refineui-size-foundation-size-340);
   --refineui-size-popover-beak-inset-from-end-edge: var(--refineui-size-foundation-size-300);
   --refineui-size-navigation-menu-item-min-width: var(--refineui-size-foundation-size-400);
-  --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2440);
-  --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2440);
+  --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2000);
+  --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2000);
   --refineui-size-sidebar-width: var(--refineui-size-foundation-size-2560);
   --refineui-size-toast-min-width: var(--refineui-size-foundation-size-2000);
   --refineui-size-toast-max-width: var(--refineui-size-foundation-size-3250);
@@ -253,6 +253,15 @@
   --refineui-opacity-full: 1;
   --refineui-opacity-disabled: 0.5;
   --refineui-opacity-ghost-hover: 0.08;
+  /* Blur — Foundation steps + Semantic role aliases */
+  --refineui-foundation-blur-none: 0;
+  --refineui-foundation-blur-2: 2px;
+  --refineui-foundation-blur-4: 4px;
+  --refineui-foundation-blur-8: 8px;
+  --refineui-foundation-blur-12: 12px;
+  --refineui-foundation-blur-16: 16px;
+  --refineui-blur-overlay-scrim: var(--refineui-foundation-blur-2);
+  --refineui-blur-surface-frost: var(--refineui-foundation-blur-16);
   /* Motion — Foundation steps + Semantic role aliases */
   --refineui-foundation-motion-duration-0: 0ms;
   --refineui-foundation-motion-duration-150: 150ms;
@@ -565,6 +574,7 @@
   --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-150);
   --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-750);
   --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.2);
+  --refineui-color-alias-surface-frosted: rgba(255, 255, 255, 0.55);
   /* Focus ring — :focus-visible contract */
   --refineui-focus-ring-color: var(--refineui-color-neutral-750);
   --refineui-focus-ring-width: 2px;
@@ -645,6 +655,7 @@
   --refineui-color-alias-surface-sunken: var(--refineui-color-neutral-800);
   --refineui-color-alias-surface-tooltip: var(--refineui-color-neutral-300);
   --refineui-color-alias-surface-overlay: rgba(0, 0, 0, 0.6);
+  --refineui-color-alias-surface-frosted: rgba(26, 26, 26, 0.55);
   /* Theme-aware elevation */
   --refineui-elevation-2: var(--refineui-elevation-2dark);
   --refineui-elevation-4: var(--refineui-elevation-4dark);

package/dist/index.d.mts

@@ -246,6 +246,27 @@ type BorderRadiusTokens = {
     roundedXXLarge: string;
     roundedCircle: string;
 };
+/**
+ * Foundation blur primitives (`global/blurs.ts`).
+ * Value-based steps only — no UI role names.
+ */
+type FoundationBlurTokens = {
+    blurNone: string;
+    blur2: string;
+    blur4: string;
+    blur8: string;
+    blur12: string;
+    blur16: string;
+};
+type FoundationBlurName = keyof FoundationBlurTokens;
+/**
+ * Semantic blur roles (`semantic/blur.ts`) — resolved Foundation strings.
+ * Prefer role keys (`overlayScrim`, `surfaceFrost`) in component / CSS code.
+ */
+type SemanticBlurTokens = {
+    overlayScrim: string;
+    surfaceFrost: string;
+};
 /**
  * Design tokens for spacing size
  */
@@ -708,14 +729,22 @@ declare const SEMANTIC_PALETTE_PAIRS: {
     };
 };
 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";
+/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (RGBA aliases) */
+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__"], readonly ["surfaceFrosted", "__RGBA__", "__RGBA__"]];
+type SemanticColorName = SemanticPaletteName | "surfaceOverlay" | "surfaceFrosted";
 /** 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)";
 };
+/**
+ * Frosted panel fill (Menu / Dropdown / Select) — translucent so `surfaceFrost` blur shows.
+ * Keep alpha low enough that page content reads through; pair with `--refineui-blur-surface-frost`.
+ */
+declare const surfaceFrostedRgba: {
+    readonly light: string;
+    readonly dark: string;
+};
 /** Semantic colors — values are CSS var(--refineui-color-*) or rgba(...) */
 declare const semanticColors: Record<SemanticColorName, SemanticColorModePair>;
 
@@ -889,8 +918,8 @@ declare const componentSizeFoundationKeys: {
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
     readonly navigationMenuItemMinWidth: "foundationSize400";
-    readonly menuPanelWidth: "foundationSize2440";
-    readonly dropdownMenuWidth: "foundationSize2440";
+    readonly menuPanelWidth: "foundationSize2000";
+    readonly dropdownMenuWidth: "foundationSize2000";
     readonly sidebarWidth: "foundationSize2560";
     readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
@@ -957,9 +986,9 @@ declare const componentSizes: {
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
     readonly navigationMenuItemMinWidth: "40px";
-    readonly menuPanelWidth: "244px";
+    readonly menuPanelWidth: "200px";
     /** @deprecated Same as `menuPanelWidth` */
-    readonly dropdownMenuWidth: "244px";
+    readonly dropdownMenuWidth: "200px";
     readonly sidebarWidth: "256px";
     readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
@@ -1026,6 +1055,33 @@ declare const overlays: {
     readonly ghostButtonHoverDark: "rgba(255, 255, 255, 0.08)";
 };
 
+/**
+ * Foundation blur primitives — raw `backdrop-filter` / filter blur steps.
+ * Semantic roles live in `semantic/blur.ts` and must reference these values
+ * (do not invent px at the semantic or component layer).
+ *
+ * Naming: value-based keys (`blur2`, `blur8`), same idea as `foundationSize160`.
+ */
+
+declare const blurs: FoundationBlurTokens;
+
+/**
+ * Maps each semantic blur role → Foundation blur key for CSS
+ * `--refineui-blur-*` → `var(--refineui-foundation-blur-*)`.
+ */
+declare const semanticBlurFoundationKeys: {
+    /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+    readonly overlayScrim: "blur2";
+    /** Frosted glass surfaces (menus, toast plate, …) */
+    readonly surfaceFrost: "blur16";
+};
+type SemanticBlurName = keyof typeof semanticBlurFoundationKeys;
+/** Resolved blur strings for JS layout math. Source of truth is Foundation. */
+declare const semanticBlur: {
+    readonly overlayScrim: string;
+    readonly surfaceFrost: string;
+};
+
 /**
  * Foundation motion primitives — raw duration / easing / scale / distance steps.
  * Semantic roles live in `semantic/interaction.ts` and must reference these values
@@ -1061,4 +1117,4 @@ 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 SemanticElevationName, type SemanticElevationTokens, 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, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };
+export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationBlurName, type FoundationBlurTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticBlurName, type SemanticBlurTokens, type SemanticColorModePair, type SemanticColorName, type SemanticElevationName, type SemanticElevationTokens, 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, blurs, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticBlur, semanticBlurFoundationKeys, semanticColors, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceFrostedRgba, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };

package/dist/index.d.ts

@@ -246,6 +246,27 @@ type BorderRadiusTokens = {
     roundedXXLarge: string;
     roundedCircle: string;
 };
+/**
+ * Foundation blur primitives (`global/blurs.ts`).
+ * Value-based steps only — no UI role names.
+ */
+type FoundationBlurTokens = {
+    blurNone: string;
+    blur2: string;
+    blur4: string;
+    blur8: string;
+    blur12: string;
+    blur16: string;
+};
+type FoundationBlurName = keyof FoundationBlurTokens;
+/**
+ * Semantic blur roles (`semantic/blur.ts`) — resolved Foundation strings.
+ * Prefer role keys (`overlayScrim`, `surfaceFrost`) in component / CSS code.
+ */
+type SemanticBlurTokens = {
+    overlayScrim: string;
+    surfaceFrost: string;
+};
 /**
  * Design tokens for spacing size
  */
@@ -708,14 +729,22 @@ declare const SEMANTIC_PALETTE_PAIRS: {
     };
 };
 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";
+/** Legacy row shape: [aliasTail, lightKey, darkKey | "__RGBA__"] (RGBA aliases) */
+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__"], readonly ["surfaceFrosted", "__RGBA__", "__RGBA__"]];
+type SemanticColorName = SemanticPaletteName | "surfaceOverlay" | "surfaceFrosted";
 /** 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)";
 };
+/**
+ * Frosted panel fill (Menu / Dropdown / Select) — translucent so `surfaceFrost` blur shows.
+ * Keep alpha low enough that page content reads through; pair with `--refineui-blur-surface-frost`.
+ */
+declare const surfaceFrostedRgba: {
+    readonly light: string;
+    readonly dark: string;
+};
 /** Semantic colors — values are CSS var(--refineui-color-*) or rgba(...) */
 declare const semanticColors: Record<SemanticColorName, SemanticColorModePair>;
 
@@ -889,8 +918,8 @@ declare const componentSizeFoundationKeys: {
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
     readonly navigationMenuItemMinWidth: "foundationSize400";
-    readonly menuPanelWidth: "foundationSize2440";
-    readonly dropdownMenuWidth: "foundationSize2440";
+    readonly menuPanelWidth: "foundationSize2000";
+    readonly dropdownMenuWidth: "foundationSize2000";
     readonly sidebarWidth: "foundationSize2560";
     readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
@@ -957,9 +986,9 @@ declare const componentSizes: {
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
     readonly navigationMenuItemMinWidth: "40px";
-    readonly menuPanelWidth: "244px";
+    readonly menuPanelWidth: "200px";
     /** @deprecated Same as `menuPanelWidth` */
-    readonly dropdownMenuWidth: "244px";
+    readonly dropdownMenuWidth: "200px";
     readonly sidebarWidth: "256px";
     readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
@@ -1026,6 +1055,33 @@ declare const overlays: {
     readonly ghostButtonHoverDark: "rgba(255, 255, 255, 0.08)";
 };
 
+/**
+ * Foundation blur primitives — raw `backdrop-filter` / filter blur steps.
+ * Semantic roles live in `semantic/blur.ts` and must reference these values
+ * (do not invent px at the semantic or component layer).
+ *
+ * Naming: value-based keys (`blur2`, `blur8`), same idea as `foundationSize160`.
+ */
+
+declare const blurs: FoundationBlurTokens;
+
+/**
+ * Maps each semantic blur role → Foundation blur key for CSS
+ * `--refineui-blur-*` → `var(--refineui-foundation-blur-*)`.
+ */
+declare const semanticBlurFoundationKeys: {
+    /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+    readonly overlayScrim: "blur2";
+    /** Frosted glass surfaces (menus, toast plate, …) */
+    readonly surfaceFrost: "blur16";
+};
+type SemanticBlurName = keyof typeof semanticBlurFoundationKeys;
+/** Resolved blur strings for JS layout math. Source of truth is Foundation. */
+declare const semanticBlur: {
+    readonly overlayScrim: string;
+    readonly surfaceFrost: string;
+};
+
 /**
  * Foundation motion primitives — raw duration / easing / scale / distance steps.
  * Semantic roles live in `semantic/interaction.ts` and must reference these values
@@ -1061,4 +1117,4 @@ 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 SemanticElevationName, type SemanticElevationTokens, 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, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };
+export { type BorderRadiusTokens, type ComponentSizeName, type FontFamilyTokens, type FontSizeTokens, type FontWeightTokens, type FoundationBlurName, type FoundationBlurTokens, type FoundationMotionTokens, type FoundationSizeName, type FoundationTypographyName, type LineHeightTokens, type MotionTokens, type PaletteColors, SEMANTIC_COLOR_ROWS, SEMANTIC_FOCUS_PAIRS, SEMANTIC_PALETTE_PAIRS, SEMANTIC_TEXT, type SemanticBlurName, type SemanticBlurTokens, type SemanticColorModePair, type SemanticColorName, type SemanticElevationName, type SemanticElevationTokens, 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, blurs, borderRadii, colors, componentSizeFoundationKeys, componentSizes, fontFamilies, fontSizes, fontWeights, foundationSizes, iconSizes, lineHeights, motion, opacities, overlays, semanticBlur, semanticBlurFoundationKeys, semanticColors, semanticElevations, semanticFocus, semanticInteraction, semanticShadows, shadow2Lighter, shadowColors, shadows, spacings, strokeWidths, surfaceFrostedRgba, surfaceOverlayRgba, textAlignments, toBoxShadow, typographys, zIndex };

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   SEMANTIC_FOCUS_PAIRS: () => SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS: () => SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT: () => SEMANTIC_TEXT,
+  blurs: () => blurs,
   borderRadii: () => borderRadii,
   colors: () => colors,
   componentSizeFoundationKeys: () => componentSizeFoundationKeys,
@@ -37,6 +38,8 @@ __export(index_exports, {
   motion: () => motion,
   opacities: () => opacities,
   overlays: () => overlays,
+  semanticBlur: () => semanticBlur,
+  semanticBlurFoundationKeys: () => semanticBlurFoundationKeys,
   semanticColors: () => semanticColors,
   semanticElevations: () => semanticElevations,
   semanticFocus: () => semanticFocus,
@@ -47,6 +50,7 @@ __export(index_exports, {
   shadows: () => shadows,
   spacings: () => spacings,
   strokeWidths: () => strokeWidths,
+  surfaceFrostedRgba: () => surfaceFrostedRgba,
   surfaceOverlayRgba: () => surfaceOverlayRgba,
   textAlignments: () => textAlignments,
   toBoxShadow: () => toBoxShadow,
@@ -262,12 +266,17 @@ var SEMANTIC_PALETTE_PAIRS = {
 };
 var SEMANTIC_COLOR_ROWS = [
   ...Object.entries(SEMANTIC_PALETTE_PAIRS).map(([name, { light, dark }]) => [name, light, dark]),
-  ["surfaceOverlay", "__RGBA__", "__RGBA__"]
+  ["surfaceOverlay", "__RGBA__", "__RGBA__"],
+  ["surfaceFrosted", "__RGBA__", "__RGBA__"]
 ];
 var surfaceOverlayRgba = {
   light: "rgba(0, 0, 0, 0.2)",
   dark: "rgba(0, 0, 0, 0.6)"
 };
+var surfaceFrostedRgba = {
+  light: hexToRgba(colors.neutralWhite, 0.55),
+  dark: hexToRgba(colors.neutral900, 0.55)
+};
 function buildSemanticColors() {
   const out = {};
   for (const name of Object.keys(SEMANTIC_PALETTE_PAIRS)) {
@@ -278,6 +287,7 @@ function buildSemanticColors() {
     };
   }
   out.surfaceOverlay = { light: surfaceOverlayRgba.light, dark: surfaceOverlayRgba.dark };
+  out.surfaceFrosted = { light: surfaceFrostedRgba.light, dark: surfaceFrostedRgba.dark };
   return out;
 }
 var semanticColors = buildSemanticColors();
@@ -691,8 +701,8 @@ var componentSizeFoundationKeys = {
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
   navigationMenuItemMinWidth: "foundationSize400",
-  menuPanelWidth: "foundationSize2440",
-  dropdownMenuWidth: "foundationSize2440",
+  menuPanelWidth: "foundationSize2000",
+  dropdownMenuWidth: "foundationSize2000",
   sidebarWidth: "foundationSize2560",
   toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
@@ -821,6 +831,31 @@ var overlays = {
   ghostButtonHoverDark: `rgba(255, 255, 255, ${opacities.opacityGhostHover})`
 };
 
+// src/global/blurs.ts
+var blurs = {
+  blurNone: "0",
+  blur2: "2px",
+  blur4: "4px",
+  blur8: "8px",
+  blur12: "12px",
+  blur16: "16px"
+};
+
+// src/semantic/blur.ts
+var semanticBlurFoundationKeys = {
+  /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+  overlayScrim: "blur2",
+  /** Frosted glass surfaces (menus, toast plate, …) */
+  surfaceFrost: "blur16"
+};
+function fromFoundation2(key) {
+  return blurs[semanticBlurFoundationKeys[key]];
+}
+var semanticBlur = {
+  overlayScrim: fromFoundation2("overlayScrim"),
+  surfaceFrost: fromFoundation2("surfaceFrost")
+};
+
 // src/global/borderRadii.ts
 var borderRadii = {
   roundedNone: "0",
@@ -960,6 +995,7 @@ var textAlignments = {
   SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT,
+  blurs,
   borderRadii,
   colors,
   componentSizeFoundationKeys,
@@ -973,6 +1009,8 @@ var textAlignments = {
   motion,
   opacities,
   overlays,
+  semanticBlur,
+  semanticBlurFoundationKeys,
   semanticColors,
   semanticElevations,
   semanticFocus,
@@ -983,6 +1021,7 @@ var textAlignments = {
   shadows,
   spacings,
   strokeWidths,
+  surfaceFrostedRgba,
   surfaceOverlayRgba,
   textAlignments,
   toBoxShadow,

package/dist/index.mjs

@@ -205,12 +205,17 @@ var SEMANTIC_PALETTE_PAIRS = {
 };
 var SEMANTIC_COLOR_ROWS = [
   ...Object.entries(SEMANTIC_PALETTE_PAIRS).map(([name, { light, dark }]) => [name, light, dark]),
-  ["surfaceOverlay", "__RGBA__", "__RGBA__"]
+  ["surfaceOverlay", "__RGBA__", "__RGBA__"],
+  ["surfaceFrosted", "__RGBA__", "__RGBA__"]
 ];
 var surfaceOverlayRgba = {
   light: "rgba(0, 0, 0, 0.2)",
   dark: "rgba(0, 0, 0, 0.6)"
 };
+var surfaceFrostedRgba = {
+  light: hexToRgba(colors.neutralWhite, 0.55),
+  dark: hexToRgba(colors.neutral900, 0.55)
+};
 function buildSemanticColors() {
   const out = {};
   for (const name of Object.keys(SEMANTIC_PALETTE_PAIRS)) {
@@ -221,6 +226,7 @@ function buildSemanticColors() {
     };
   }
   out.surfaceOverlay = { light: surfaceOverlayRgba.light, dark: surfaceOverlayRgba.dark };
+  out.surfaceFrosted = { light: surfaceFrostedRgba.light, dark: surfaceFrostedRgba.dark };
   return out;
 }
 var semanticColors = buildSemanticColors();
@@ -634,8 +640,8 @@ var componentSizeFoundationKeys = {
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
   navigationMenuItemMinWidth: "foundationSize400",
-  menuPanelWidth: "foundationSize2440",
-  dropdownMenuWidth: "foundationSize2440",
+  menuPanelWidth: "foundationSize2000",
+  dropdownMenuWidth: "foundationSize2000",
   sidebarWidth: "foundationSize2560",
   toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
@@ -764,6 +770,31 @@ var overlays = {
   ghostButtonHoverDark: `rgba(255, 255, 255, ${opacities.opacityGhostHover})`
 };
 
+// src/global/blurs.ts
+var blurs = {
+  blurNone: "0",
+  blur2: "2px",
+  blur4: "4px",
+  blur8: "8px",
+  blur12: "12px",
+  blur16: "16px"
+};
+
+// src/semantic/blur.ts
+var semanticBlurFoundationKeys = {
+  /** Dialog / Drawer scrim — light frosted dim behind modal chrome */
+  overlayScrim: "blur2",
+  /** Frosted glass surfaces (menus, toast plate, …) */
+  surfaceFrost: "blur16"
+};
+function fromFoundation2(key) {
+  return blurs[semanticBlurFoundationKeys[key]];
+}
+var semanticBlur = {
+  overlayScrim: fromFoundation2("overlayScrim"),
+  surfaceFrost: fromFoundation2("surfaceFrost")
+};
+
 // src/global/borderRadii.ts
 var borderRadii = {
   roundedNone: "0",
@@ -902,6 +933,7 @@ export {
   SEMANTIC_FOCUS_PAIRS,
   SEMANTIC_PALETTE_PAIRS,
   SEMANTIC_TEXT,
+  blurs,
   borderRadii,
   colors,
   componentSizeFoundationKeys,
@@ -915,6 +947,8 @@ export {
   motion,
   opacities,
   overlays,
+  semanticBlur,
+  semanticBlurFoundationKeys,
   semanticColors,
   semanticElevations,
   semanticFocus,
@@ -925,6 +959,7 @@ export {
   shadows,
   spacings,
   strokeWidths,
+  surfaceFrostedRgba,
   surfaceOverlayRgba,
   textAlignments,
   toBoxShadow,

package/dist/spec/blur.json

@@ -0,0 +1,29 @@
+{
+  "schemaVersion": 1,
+  "foundation": {
+    "blurNone": "0",
+    "blur2": "2px",
+    "blur4": "4px",
+    "blur8": "8px",
+    "blur12": "12px",
+    "blur16": "16px"
+  },
+  "semantic": {
+    "overlayScrim": {
+      "foundation": "blur2",
+      "resolved": "2px",
+      "cssVar": "--refineui-blur-overlay-scrim"
+    },
+    "surfaceFrost": {
+      "foundation": "blur16",
+      "resolved": "16px",
+      "cssVar": "--refineui-blur-surface-frost"
+    }
+  },
+  "accessibility": {
+    "reducedTransparency": {
+      "mediaQuery": "(prefers-reduced-transparency: reduce)",
+      "contract": "Backdrop-filter blur collapses to none on Dialog/Drawer scrims (refineui.css)."
+    }
+  }
+}

package/dist/spec/component-sizes.json

@@ -149,7 +149,7 @@
       "name": "menuPanelWidth",
       "cssVar": "--refineui-size-menu-panel-width",
       "references": [
-        "foundation.foundationSize2440"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },
@@ -157,7 +157,7 @@
       "name": "dropdownMenuWidth",
       "cssVar": "--refineui-size-dropdown-menu-width",
       "references": [
-        "foundation.foundationSize2440"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },

package/dist/spec/foundation.json

@@ -4,7 +4,8 @@
     "colors",
     "spacings",
     "foundationSizes",
-    "motion"
+    "motion",
+    "blurs"
   ],
   "spacings": {
     "sizeNone": "0",
@@ -87,5 +88,13 @@
     "distance": {
       "distance4": "4px"
     }
+  },
+  "blurs": {
+    "blurNone": "0",
+    "blur2": "2px",
+    "blur4": "4px",
+    "blur8": "8px",
+    "blur12": "12px",
+    "blur16": "16px"
   }
 }

package/dist/spec/index.json

@@ -1,11 +1,12 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-09-17T18:54:05.896Z",
+  "generatedAt": "2026-09-23T05:49:28.780Z",
   "files": {
     "foundation": "./foundation.json",
     "semanticColors": "./semantic-colors.json",
     "semanticText": "./semantic-text.json",
     "motion": "./motion.json",
+    "blur": "./blur.json",
     "componentSizes": "./component-sizes.json",
     "focus": "./focus.json",
     "traceV2": "./trace-v2.json",

package/dist/spec/trace-v2.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "contractLayer": "semantic-token-trace",
-  "generatedAt": "2026-09-17T18:54:05.899Z",
+  "generatedAt": "2026-09-23T05:49:28.785Z",
   "tokens": {
     "backgroundBrandActive": {
       "type": "semantic",

package/dist/tailwind-theme.css

@@ -1,4 +1,6 @@
 @theme {
+  --blur-refineui-overlay-scrim: var(--refineui-blur-overlay-scrim);
+  --blur-refineui-surface-frost: var(--refineui-blur-surface-frost);
   --border-width-refineui-hairline: var(--refineui-stroke-width-hairline);
   --border-width-refineui-none: var(--refineui-stroke-width-none);
   --border-width-refineui-thick: var(--refineui-stroke-width-thick);
@@ -70,6 +72,7 @@
   --color-refineui-alias-foreground-tertiary: var(--refineui-color-alias-foreground-tertiary);
   --color-refineui-alias-foreground-warning: var(--refineui-color-alias-foreground-warning);
   --color-refineui-alias-surface-elevated: var(--refineui-color-alias-surface-elevated);
+  --color-refineui-alias-surface-frosted: var(--refineui-color-alias-surface-frosted);
   --color-refineui-alias-surface-inverse: var(--refineui-color-alias-surface-inverse);
   --color-refineui-alias-surface-overlay: var(--refineui-color-alias-surface-overlay);
   --color-refineui-alias-surface-popover: var(--refineui-color-alias-surface-popover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/tokens",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "RefineUI Theme Tokens",
   "main": "dist/index.js",
   "module": "dist/index.mjs",