@refineui/tokens 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @refineui/tokens
+
+## 1.0.2
+
+### Patch Changes
+
+- Skip Segmented Control/Tabs mount animation, align Toast/Tooltip/PopOver with Menu semantic colors, and match Tooltip beak to the PopOver SVG pattern.
+
+## 1.0.1
+
+### Patch Changes
+
+- b240e67: Scope ScrollArea overflow per axis so a horizontal-only area no longer swallows vertical wheel gestures, and give every published package a README with install steps for npm, yarn, pnpm, and bun.

package/README.md

@@ -2,10 +2,19 @@
 
 Design tokens for RefineUI — TypeScript source of truth plus generated CSS.
 
-## Install / build
+## Install
 
 ```bash
-bun run build   # or pnpm build — builds utilities → tokens → react
+npm install @refineui/tokens
+yarn add @refineui/tokens
+pnpm add @refineui/tokens
+bun add @refineui/tokens
+```
+
+## Build
+
+```bash
+bun run build   # or npm/yarn/pnpm run build — builds utilities → tokens → react
 ```
 
 `@refineui/tokens` `build` runs `tsup` then `scripts/generate-css.mjs` and `scripts/generate-spec.mjs`, writing:

package/dist/css-variables.css

@@ -146,6 +146,7 @@
   --refineui-size-foundation-size-20: 2px;
   --refineui-size-foundation-size-30: 3px;
   --refineui-size-foundation-size-40: 4px;
+  --refineui-size-foundation-size-50: 5px;
   --refineui-size-foundation-size-60: 6px;
   --refineui-size-foundation-size-80: 8px;
   --refineui-size-foundation-size-100: 10px;
@@ -195,10 +196,11 @@
   --refineui-size-popover-panel-width: var(--refineui-size-foundation-size-3250);
   --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-sidebar-width: var(--refineui-size-foundation-size-2560);
-  --refineui-size-toast-min-width: var(--refineui-size-foundation-size-3250);
+  --refineui-size-toast-min-width: var(--refineui-size-foundation-size-2000);
   --refineui-size-toast-max-width: var(--refineui-size-foundation-size-3250);
   --refineui-size-dialog-max-width: var(--refineui-size-foundation-size-6000);
   --refineui-size-dialog-width-sm: var(--refineui-size-foundation-size-3000);
@@ -476,6 +478,12 @@
   --refineui-elevation-64light: 0 24px 24px 0 rgba(33, 33, 33, 0.05), 0 48px 96px 0 rgba(33, 33, 33, 0.04);
   --refineui-elevation-64dark: 0 24px 24px 0 rgba(0, 0, 0, 0.2), 0 48px 96px 0 rgba(0, 0, 0, 0.15);
   --refineui-elevation-64: var(--refineui-elevation-64light);
+  --refineui-elevation-surface: 0 1px 2px 0 rgba(33, 33, 33, 0.05), 0 2px 4px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-raised: 0 2px 2px 0 rgba(33, 33, 33, 0.05), 0 4px 8px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-floating: 0 4px 4px 0 rgba(33, 33, 33, 0.05), 0 8px 16px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-overlay: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-modal: 0 12px 12px 0 rgba(33, 33, 33, 0.05), 0 24px 48px 0 rgba(33, 33, 33, 0.04);
+  --refineui-elevation-toast: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
   --refineui-elevation-2lighter: 0 1px 2px 0 rgba(33, 33, 33, 0.02), 0 2px 4px 0 rgba(33, 33, 33, 0.02);
   /* Z-index */
   --refineui-z-background: 0;
@@ -645,6 +653,12 @@
   --refineui-elevation-24: var(--refineui-elevation-24dark);
   --refineui-elevation-32: var(--refineui-elevation-32dark);
   --refineui-elevation-64: var(--refineui-elevation-64dark);
+  --refineui-elevation-surface: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-raised: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-floating: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-overlay: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-modal: 0 12px 12px 0 rgba(0, 0, 0, 0.2), 0 24px 48px 0 rgba(0, 0, 0, 0.15);
+  --refineui-elevation-toast: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
   /* Focus ring — dark */
   --refineui-focus-ring-color: var(--refineui-color-neutral-350);
 }

package/dist/index.d.mts

@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
 type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
 /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
 type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
+/**
+ * Intent-level elevation roles. Components consume these names rather than
+ * choosing a numbered shadow step, while the mapping remains traceable to the
+ * Foundation elevation scale.
+ */
+type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
+type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
 /**
  * Design tokens for stroke width
  */
@@ -745,6 +752,11 @@ declare const semanticFocus: {
 
 /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
 declare const semanticShadows: SemanticShadowElevationTokens;
+/**
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
+ * for Foundation traceability; use these roles in component recipes and CSS.
+ */
+declare const semanticElevations: SemanticElevationTokens;
 
 /**
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +830,7 @@ declare const foundationSizes: {
     readonly foundationSize20: "2px";
     readonly foundationSize30: "3px";
     readonly foundationSize40: "4px";
+    readonly foundationSize50: "5px";
     readonly foundationSize60: "6px";
     readonly foundationSize80: "8px";
     readonly foundationSize100: "10px";
@@ -875,10 +888,11 @@ declare const componentSizeFoundationKeys: {
     readonly popoverPanelWidth: "foundationSize3250";
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
+    readonly navigationMenuItemMinWidth: "foundationSize400";
     readonly menuPanelWidth: "foundationSize2440";
     readonly dropdownMenuWidth: "foundationSize2440";
     readonly sidebarWidth: "foundationSize2560";
-    readonly toastMinWidth: "foundationSize3250";
+    readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
     readonly dialogMaxWidth: "foundationSize6000";
     readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +956,12 @@ declare const componentSizes: {
     readonly popoverPanelWidth: "325px";
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
+    readonly navigationMenuItemMinWidth: "40px";
     readonly menuPanelWidth: "244px";
     /** @deprecated Same as `menuPanelWidth` */
     readonly dropdownMenuWidth: "244px";
     readonly sidebarWidth: "256px";
-    readonly toastMinWidth: "325px";
+    readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
     readonly dialogMaxWidth: "600px";
     /** Viewport-relative — not a Foundation px step */
@@ -1046,4 +1061,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 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 };
+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 };

package/dist/index.d.ts

@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
 type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
 /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
 type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
+/**
+ * Intent-level elevation roles. Components consume these names rather than
+ * choosing a numbered shadow step, while the mapping remains traceable to the
+ * Foundation elevation scale.
+ */
+type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
+type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
 /**
  * Design tokens for stroke width
  */
@@ -745,6 +752,11 @@ declare const semanticFocus: {
 
 /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
 declare const semanticShadows: SemanticShadowElevationTokens;
+/**
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
+ * for Foundation traceability; use these roles in component recipes and CSS.
+ */
+declare const semanticElevations: SemanticElevationTokens;
 
 /**
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +830,7 @@ declare const foundationSizes: {
     readonly foundationSize20: "2px";
     readonly foundationSize30: "3px";
     readonly foundationSize40: "4px";
+    readonly foundationSize50: "5px";
     readonly foundationSize60: "6px";
     readonly foundationSize80: "8px";
     readonly foundationSize100: "10px";
@@ -875,10 +888,11 @@ declare const componentSizeFoundationKeys: {
     readonly popoverPanelWidth: "foundationSize3250";
     readonly popoverBeakInsetFromStartEdge: "foundationSize340";
     readonly popoverBeakInsetFromEndEdge: "foundationSize300";
+    readonly navigationMenuItemMinWidth: "foundationSize400";
     readonly menuPanelWidth: "foundationSize2440";
     readonly dropdownMenuWidth: "foundationSize2440";
     readonly sidebarWidth: "foundationSize2560";
-    readonly toastMinWidth: "foundationSize3250";
+    readonly toastMinWidth: "foundationSize2000";
     readonly toastMaxWidth: "foundationSize3250";
     readonly dialogMaxWidth: "foundationSize6000";
     readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +956,12 @@ declare const componentSizes: {
     readonly popoverPanelWidth: "325px";
     readonly popoverBeakInsetFromStartEdge: "34px";
     readonly popoverBeakInsetFromEndEdge: "30px";
+    readonly navigationMenuItemMinWidth: "40px";
     readonly menuPanelWidth: "244px";
     /** @deprecated Same as `menuPanelWidth` */
     readonly dropdownMenuWidth: "244px";
     readonly sidebarWidth: "256px";
-    readonly toastMinWidth: "325px";
+    readonly toastMinWidth: "200px";
     readonly toastMaxWidth: "325px";
     readonly dialogMaxWidth: "600px";
     /** Viewport-relative — not a Foundation px step */
@@ -1046,4 +1061,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 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 };
+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 };

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   opacities: () => opacities,
   overlays: () => overlays,
   semanticColors: () => semanticColors,
+  semanticElevations: () => semanticElevations,
   semanticFocus: () => semanticFocus,
   semanticInteraction: () => semanticInteraction,
   semanticShadows: () => semanticShadows,
@@ -540,6 +541,14 @@ var semanticShadows = {
   shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
   shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
 };
+var semanticElevations = {
+  surface: semanticShadows.shadow2,
+  raised: semanticShadows.shadow4,
+  floating: semanticShadows.shadow8,
+  overlay: semanticShadows.shadow16,
+  modal: semanticShadows.shadow24,
+  toast: semanticShadows.shadow16
+};
 
 // src/semantic/text.ts
 var SEMANTIC_TEXT = {
@@ -626,6 +635,7 @@ var foundationSizes = {
   foundationSize20: "2px",
   foundationSize30: "3px",
   foundationSize40: "4px",
+  foundationSize50: "5px",
   foundationSize60: "6px",
   foundationSize80: "8px",
   foundationSize100: "10px",
@@ -680,10 +690,11 @@ var componentSizeFoundationKeys = {
   popoverPanelWidth: "foundationSize3250",
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
+  navigationMenuItemMinWidth: "foundationSize400",
   menuPanelWidth: "foundationSize2440",
   dropdownMenuWidth: "foundationSize2440",
   sidebarWidth: "foundationSize2560",
-  toastMinWidth: "foundationSize3250",
+  toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
   dialogMaxWidth: "foundationSize6000",
   dialogWidthSm: "foundationSize3000",
@@ -745,6 +756,7 @@ var componentSizes = {
   popoverPanelWidth: fromFoundation("popoverPanelWidth"),
   popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
   popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
+  navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
   menuPanelWidth: fromFoundation("menuPanelWidth"),
   /** @deprecated Same as `menuPanelWidth` */
   dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -962,6 +974,7 @@ var textAlignments = {
   opacities,
   overlays,
   semanticColors,
+  semanticElevations,
   semanticFocus,
   semanticInteraction,
   semanticShadows,

package/dist/index.mjs

@@ -484,6 +484,14 @@ var semanticShadows = {
   shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
   shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
 };
+var semanticElevations = {
+  surface: semanticShadows.shadow2,
+  raised: semanticShadows.shadow4,
+  floating: semanticShadows.shadow8,
+  overlay: semanticShadows.shadow16,
+  modal: semanticShadows.shadow24,
+  toast: semanticShadows.shadow16
+};
 
 // src/semantic/text.ts
 var SEMANTIC_TEXT = {
@@ -570,6 +578,7 @@ var foundationSizes = {
   foundationSize20: "2px",
   foundationSize30: "3px",
   foundationSize40: "4px",
+  foundationSize50: "5px",
   foundationSize60: "6px",
   foundationSize80: "8px",
   foundationSize100: "10px",
@@ -624,10 +633,11 @@ var componentSizeFoundationKeys = {
   popoverPanelWidth: "foundationSize3250",
   popoverBeakInsetFromStartEdge: "foundationSize340",
   popoverBeakInsetFromEndEdge: "foundationSize300",
+  navigationMenuItemMinWidth: "foundationSize400",
   menuPanelWidth: "foundationSize2440",
   dropdownMenuWidth: "foundationSize2440",
   sidebarWidth: "foundationSize2560",
-  toastMinWidth: "foundationSize3250",
+  toastMinWidth: "foundationSize2000",
   toastMaxWidth: "foundationSize3250",
   dialogMaxWidth: "foundationSize6000",
   dialogWidthSm: "foundationSize3000",
@@ -689,6 +699,7 @@ var componentSizes = {
   popoverPanelWidth: fromFoundation("popoverPanelWidth"),
   popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
   popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
+  navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
   menuPanelWidth: fromFoundation("menuPanelWidth"),
   /** @deprecated Same as `menuPanelWidth` */
   dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -905,6 +916,7 @@ export {
   opacities,
   overlays,
   semanticColors,
+  semanticElevations,
   semanticFocus,
   semanticInteraction,
   semanticShadows,

package/dist/spec/component-sizes.json

@@ -137,6 +137,14 @@
       ],
       "status": "stable"
     },
+    {
+      "name": "navigationMenuItemMinWidth",
+      "cssVar": "--refineui-size-navigation-menu-item-min-width",
+      "references": [
+        "foundation.foundationSize400"
+      ],
+      "status": "stable"
+    },
     {
       "name": "menuPanelWidth",
       "cssVar": "--refineui-size-menu-panel-width",
@@ -165,7 +173,7 @@
       "name": "toastMinWidth",
       "cssVar": "--refineui-size-toast-min-width",
       "references": [
-        "foundation.foundationSize3250"
+        "foundation.foundationSize2000"
       ],
       "status": "stable"
     },

package/dist/spec/foundation.json

@@ -23,6 +23,7 @@
     "foundationSize20": "2px",
     "foundationSize30": "3px",
     "foundationSize40": "4px",
+    "foundationSize50": "5px",
     "foundationSize60": "6px",
     "foundationSize80": "8px",
     "foundationSize100": "10px",

package/dist/spec/index.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-09-08T10:52:31.434Z",
+  "generatedAt": "2026-09-17T18:54:05.896Z",
   "files": {
     "foundation": "./foundation.json",
     "semanticColors": "./semantic-colors.json",

package/dist/spec/trace-v2.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "contractLayer": "semantic-token-trace",
-  "generatedAt": "2026-09-08T10:52:31.438Z",
+  "generatedAt": "2026-09-17T18:54:05.899Z",
   "tokens": {
     "backgroundBrandActive": {
       "type": "semantic",

package/dist/tailwind-theme.css

@@ -224,6 +224,12 @@
   --shadow-refineui-8: var(--refineui-elevation-8);
   --shadow-refineui-8dark: var(--refineui-elevation-8dark);
   --shadow-refineui-8light: var(--refineui-elevation-8light);
+  --shadow-refineui-floating: var(--refineui-elevation-floating);
+  --shadow-refineui-modal: var(--refineui-elevation-modal);
+  --shadow-refineui-overlay: var(--refineui-elevation-overlay);
+  --shadow-refineui-raised: var(--refineui-elevation-raised);
+  --shadow-refineui-surface: var(--refineui-elevation-surface);
+  --shadow-refineui-toast: var(--refineui-elevation-toast);
   --spacing-refineui-accessible-clip: var(--refineui-size-accessible-clip);
   --spacing-refineui-avatar-status-xxxlarge: var(--refineui-size-avatar-status-xxxlarge);
   --spacing-refineui-button-min-height-lg: var(--refineui-size-button-min-height-lg);
@@ -278,6 +284,7 @@
   --spacing-refineui-foundation-size-440: var(--refineui-size-foundation-size-440);
   --spacing-refineui-foundation-size-4500: var(--refineui-size-foundation-size-4500);
   --spacing-refineui-foundation-size-480: var(--refineui-size-foundation-size-480);
+  --spacing-refineui-foundation-size-50: var(--refineui-size-foundation-size-50);
   --spacing-refineui-foundation-size-520: var(--refineui-size-foundation-size-520);
   --spacing-refineui-foundation-size-540: var(--refineui-size-foundation-size-540);
   --spacing-refineui-foundation-size-5750: var(--refineui-size-foundation-size-5750);
@@ -295,6 +302,7 @@
   --spacing-refineui-icon-xxlarge: var(--refineui-icon-size-xxlarge);
   --spacing-refineui-icon-xxsmall: var(--refineui-icon-size-xxsmall);
   --spacing-refineui-menu-panel-width: var(--refineui-size-menu-panel-width);
+  --spacing-refineui-navigation-menu-item-min-width: var(--refineui-size-navigation-menu-item-min-width);
   --spacing-refineui-pagination-button-min-width: var(--refineui-size-pagination-button-min-width);
   --spacing-refineui-popover-beak-inset-from-end-edge: var(--refineui-size-popover-beak-inset-from-end-edge);
   --spacing-refineui-popover-beak-inset-from-start-edge: var(--refineui-size-popover-beak-inset-from-start-edge);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/tokens",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "RefineUI Theme Tokens",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -46,5 +46,9 @@
     "./tailwind.css": "./tailwind.css",
     "./package.json": "./package.json"
   },
-  "files": ["*.md", "dist", "tailwind.css"]
+  "files": [
+    "*.md",
+    "dist",
+    "tailwind.css"
+  ]
 }