@refineui/tokens 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @refineui/tokens
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Skip Segmented Control/Tabs mount animation, align Toast/Tooltip/PopOver with Menu semantic colors, and match Tooltip beak to the PopOver SVG pattern.
8
+
3
9
  ## 1.0.1
4
10
 
5
11
  ### Patch Changes
@@ -146,6 +146,7 @@
146
146
  --refineui-size-foundation-size-20: 2px;
147
147
  --refineui-size-foundation-size-30: 3px;
148
148
  --refineui-size-foundation-size-40: 4px;
149
+ --refineui-size-foundation-size-50: 5px;
149
150
  --refineui-size-foundation-size-60: 6px;
150
151
  --refineui-size-foundation-size-80: 8px;
151
152
  --refineui-size-foundation-size-100: 10px;
@@ -195,10 +196,11 @@
195
196
  --refineui-size-popover-panel-width: var(--refineui-size-foundation-size-3250);
196
197
  --refineui-size-popover-beak-inset-from-start-edge: var(--refineui-size-foundation-size-340);
197
198
  --refineui-size-popover-beak-inset-from-end-edge: var(--refineui-size-foundation-size-300);
199
+ --refineui-size-navigation-menu-item-min-width: var(--refineui-size-foundation-size-400);
198
200
  --refineui-size-menu-panel-width: var(--refineui-size-foundation-size-2440);
199
201
  --refineui-size-dropdown-menu-width: var(--refineui-size-foundation-size-2440);
200
202
  --refineui-size-sidebar-width: var(--refineui-size-foundation-size-2560);
201
- --refineui-size-toast-min-width: var(--refineui-size-foundation-size-3250);
203
+ --refineui-size-toast-min-width: var(--refineui-size-foundation-size-2000);
202
204
  --refineui-size-toast-max-width: var(--refineui-size-foundation-size-3250);
203
205
  --refineui-size-dialog-max-width: var(--refineui-size-foundation-size-6000);
204
206
  --refineui-size-dialog-width-sm: var(--refineui-size-foundation-size-3000);
@@ -476,6 +478,12 @@
476
478
  --refineui-elevation-64light: 0 24px 24px 0 rgba(33, 33, 33, 0.05), 0 48px 96px 0 rgba(33, 33, 33, 0.04);
477
479
  --refineui-elevation-64dark: 0 24px 24px 0 rgba(0, 0, 0, 0.2), 0 48px 96px 0 rgba(0, 0, 0, 0.15);
478
480
  --refineui-elevation-64: var(--refineui-elevation-64light);
481
+ --refineui-elevation-surface: 0 1px 2px 0 rgba(33, 33, 33, 0.05), 0 2px 4px 0 rgba(33, 33, 33, 0.04);
482
+ --refineui-elevation-raised: 0 2px 2px 0 rgba(33, 33, 33, 0.05), 0 4px 8px 0 rgba(33, 33, 33, 0.04);
483
+ --refineui-elevation-floating: 0 4px 4px 0 rgba(33, 33, 33, 0.05), 0 8px 16px 0 rgba(33, 33, 33, 0.04);
484
+ --refineui-elevation-overlay: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
485
+ --refineui-elevation-modal: 0 12px 12px 0 rgba(33, 33, 33, 0.05), 0 24px 48px 0 rgba(33, 33, 33, 0.04);
486
+ --refineui-elevation-toast: 0 8px 8px 0 rgba(33, 33, 33, 0.05), 0 16px 32px 0 rgba(33, 33, 33, 0.04);
479
487
  --refineui-elevation-2lighter: 0 1px 2px 0 rgba(33, 33, 33, 0.02), 0 2px 4px 0 rgba(33, 33, 33, 0.02);
480
488
  /* Z-index */
481
489
  --refineui-z-background: 0;
@@ -645,6 +653,12 @@
645
653
  --refineui-elevation-24: var(--refineui-elevation-24dark);
646
654
  --refineui-elevation-32: var(--refineui-elevation-32dark);
647
655
  --refineui-elevation-64: var(--refineui-elevation-64dark);
656
+ --refineui-elevation-surface: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
657
+ --refineui-elevation-raised: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.15);
658
+ --refineui-elevation-floating: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.15);
659
+ --refineui-elevation-overlay: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
660
+ --refineui-elevation-modal: 0 12px 12px 0 rgba(0, 0, 0, 0.2), 0 24px 48px 0 rgba(0, 0, 0, 0.15);
661
+ --refineui-elevation-toast: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0, 0, 0.15);
648
662
  /* Focus ring — dark */
649
663
  --refineui-focus-ring-color: var(--refineui-color-neutral-350);
650
664
  }
package/dist/index.d.mts CHANGED
@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
215
215
  type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
216
216
  /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
217
217
  type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
218
+ /**
219
+ * Intent-level elevation roles. Components consume these names rather than
220
+ * choosing a numbered shadow step, while the mapping remains traceable to the
221
+ * Foundation elevation scale.
222
+ */
223
+ type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
224
+ type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
218
225
  /**
219
226
  * Design tokens for stroke width
220
227
  */
@@ -745,6 +752,11 @@ declare const semanticFocus: {
745
752
 
746
753
  /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
747
754
  declare const semanticShadows: SemanticShadowElevationTokens;
755
+ /**
756
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
757
+ * for Foundation traceability; use these roles in component recipes and CSS.
758
+ */
759
+ declare const semanticElevations: SemanticElevationTokens;
748
760
 
749
761
  /**
750
762
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +830,7 @@ declare const foundationSizes: {
818
830
  readonly foundationSize20: "2px";
819
831
  readonly foundationSize30: "3px";
820
832
  readonly foundationSize40: "4px";
833
+ readonly foundationSize50: "5px";
821
834
  readonly foundationSize60: "6px";
822
835
  readonly foundationSize80: "8px";
823
836
  readonly foundationSize100: "10px";
@@ -875,10 +888,11 @@ declare const componentSizeFoundationKeys: {
875
888
  readonly popoverPanelWidth: "foundationSize3250";
876
889
  readonly popoverBeakInsetFromStartEdge: "foundationSize340";
877
890
  readonly popoverBeakInsetFromEndEdge: "foundationSize300";
891
+ readonly navigationMenuItemMinWidth: "foundationSize400";
878
892
  readonly menuPanelWidth: "foundationSize2440";
879
893
  readonly dropdownMenuWidth: "foundationSize2440";
880
894
  readonly sidebarWidth: "foundationSize2560";
881
- readonly toastMinWidth: "foundationSize3250";
895
+ readonly toastMinWidth: "foundationSize2000";
882
896
  readonly toastMaxWidth: "foundationSize3250";
883
897
  readonly dialogMaxWidth: "foundationSize6000";
884
898
  readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +956,12 @@ declare const componentSizes: {
942
956
  readonly popoverPanelWidth: "325px";
943
957
  readonly popoverBeakInsetFromStartEdge: "34px";
944
958
  readonly popoverBeakInsetFromEndEdge: "30px";
959
+ readonly navigationMenuItemMinWidth: "40px";
945
960
  readonly menuPanelWidth: "244px";
946
961
  /** @deprecated Same as `menuPanelWidth` */
947
962
  readonly dropdownMenuWidth: "244px";
948
963
  readonly sidebarWidth: "256px";
949
- readonly toastMinWidth: "325px";
964
+ readonly toastMinWidth: "200px";
950
965
  readonly toastMaxWidth: "325px";
951
966
  readonly dialogMaxWidth: "600px";
952
967
  /** Viewport-relative — not a Foundation px step */
@@ -1046,4 +1061,4 @@ declare const zIndex: ZIndexTokens;
1046
1061
 
1047
1062
  declare const textAlignments: TextAlignments;
1048
1063
 
1049
- 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 };
1064
+ 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 CHANGED
@@ -215,6 +215,13 @@ type SemanticShadowElevationPair = {
215
215
  type SemanticShadowElevationName = "shadow2" | "shadow4" | "shadow8" | "shadow16" | "shadow24" | "shadow32" | "shadow64";
216
216
  /** Semantic elevation name → per-theme ShadowLevel (`semanticShadows`) */
217
217
  type SemanticShadowElevationTokens = Record<SemanticShadowElevationName, SemanticShadowElevationPair>;
218
+ /**
219
+ * Intent-level elevation roles. Components consume these names rather than
220
+ * choosing a numbered shadow step, while the mapping remains traceable to the
221
+ * Foundation elevation scale.
222
+ */
223
+ type SemanticElevationName = "surface" | "raised" | "floating" | "overlay" | "modal" | "toast";
224
+ type SemanticElevationTokens = Record<SemanticElevationName, SemanticShadowElevationPair>;
218
225
  /**
219
226
  * Design tokens for stroke width
220
227
  */
@@ -745,6 +752,11 @@ declare const semanticFocus: {
745
752
 
746
753
  /** `semanticShadows.shadow2.light` / `.dark` — pick global `shadows` per theme */
747
754
  declare const semanticShadows: SemanticShadowElevationTokens;
755
+ /**
756
+ * Component-facing elevation roles. Keep the numeric `semanticShadows` scale
757
+ * for Foundation traceability; use these roles in component recipes and CSS.
758
+ */
759
+ declare const semanticElevations: SemanticElevationTokens;
748
760
 
749
761
  /**
750
762
  * Semantic text roles — M3/Polaris-style meaning layer over Foundation `typographys`.
@@ -818,6 +830,7 @@ declare const foundationSizes: {
818
830
  readonly foundationSize20: "2px";
819
831
  readonly foundationSize30: "3px";
820
832
  readonly foundationSize40: "4px";
833
+ readonly foundationSize50: "5px";
821
834
  readonly foundationSize60: "6px";
822
835
  readonly foundationSize80: "8px";
823
836
  readonly foundationSize100: "10px";
@@ -875,10 +888,11 @@ declare const componentSizeFoundationKeys: {
875
888
  readonly popoverPanelWidth: "foundationSize3250";
876
889
  readonly popoverBeakInsetFromStartEdge: "foundationSize340";
877
890
  readonly popoverBeakInsetFromEndEdge: "foundationSize300";
891
+ readonly navigationMenuItemMinWidth: "foundationSize400";
878
892
  readonly menuPanelWidth: "foundationSize2440";
879
893
  readonly dropdownMenuWidth: "foundationSize2440";
880
894
  readonly sidebarWidth: "foundationSize2560";
881
- readonly toastMinWidth: "foundationSize3250";
895
+ readonly toastMinWidth: "foundationSize2000";
882
896
  readonly toastMaxWidth: "foundationSize3250";
883
897
  readonly dialogMaxWidth: "foundationSize6000";
884
898
  readonly dialogWidthSm: "foundationSize3000";
@@ -942,11 +956,12 @@ declare const componentSizes: {
942
956
  readonly popoverPanelWidth: "325px";
943
957
  readonly popoverBeakInsetFromStartEdge: "34px";
944
958
  readonly popoverBeakInsetFromEndEdge: "30px";
959
+ readonly navigationMenuItemMinWidth: "40px";
945
960
  readonly menuPanelWidth: "244px";
946
961
  /** @deprecated Same as `menuPanelWidth` */
947
962
  readonly dropdownMenuWidth: "244px";
948
963
  readonly sidebarWidth: "256px";
949
- readonly toastMinWidth: "325px";
964
+ readonly toastMinWidth: "200px";
950
965
  readonly toastMaxWidth: "325px";
951
966
  readonly dialogMaxWidth: "600px";
952
967
  /** Viewport-relative — not a Foundation px step */
@@ -1046,4 +1061,4 @@ declare const zIndex: ZIndexTokens;
1046
1061
 
1047
1062
  declare const textAlignments: TextAlignments;
1048
1063
 
1049
- 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 };
1064
+ 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 CHANGED
@@ -38,6 +38,7 @@ __export(index_exports, {
38
38
  opacities: () => opacities,
39
39
  overlays: () => overlays,
40
40
  semanticColors: () => semanticColors,
41
+ semanticElevations: () => semanticElevations,
41
42
  semanticFocus: () => semanticFocus,
42
43
  semanticInteraction: () => semanticInteraction,
43
44
  semanticShadows: () => semanticShadows,
@@ -540,6 +541,14 @@ var semanticShadows = {
540
541
  shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
541
542
  shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
542
543
  };
544
+ var semanticElevations = {
545
+ surface: semanticShadows.shadow2,
546
+ raised: semanticShadows.shadow4,
547
+ floating: semanticShadows.shadow8,
548
+ overlay: semanticShadows.shadow16,
549
+ modal: semanticShadows.shadow24,
550
+ toast: semanticShadows.shadow16
551
+ };
543
552
 
544
553
  // src/semantic/text.ts
545
554
  var SEMANTIC_TEXT = {
@@ -626,6 +635,7 @@ var foundationSizes = {
626
635
  foundationSize20: "2px",
627
636
  foundationSize30: "3px",
628
637
  foundationSize40: "4px",
638
+ foundationSize50: "5px",
629
639
  foundationSize60: "6px",
630
640
  foundationSize80: "8px",
631
641
  foundationSize100: "10px",
@@ -680,10 +690,11 @@ var componentSizeFoundationKeys = {
680
690
  popoverPanelWidth: "foundationSize3250",
681
691
  popoverBeakInsetFromStartEdge: "foundationSize340",
682
692
  popoverBeakInsetFromEndEdge: "foundationSize300",
693
+ navigationMenuItemMinWidth: "foundationSize400",
683
694
  menuPanelWidth: "foundationSize2440",
684
695
  dropdownMenuWidth: "foundationSize2440",
685
696
  sidebarWidth: "foundationSize2560",
686
- toastMinWidth: "foundationSize3250",
697
+ toastMinWidth: "foundationSize2000",
687
698
  toastMaxWidth: "foundationSize3250",
688
699
  dialogMaxWidth: "foundationSize6000",
689
700
  dialogWidthSm: "foundationSize3000",
@@ -745,6 +756,7 @@ var componentSizes = {
745
756
  popoverPanelWidth: fromFoundation("popoverPanelWidth"),
746
757
  popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
747
758
  popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
759
+ navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
748
760
  menuPanelWidth: fromFoundation("menuPanelWidth"),
749
761
  /** @deprecated Same as `menuPanelWidth` */
750
762
  dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -962,6 +974,7 @@ var textAlignments = {
962
974
  opacities,
963
975
  overlays,
964
976
  semanticColors,
977
+ semanticElevations,
965
978
  semanticFocus,
966
979
  semanticInteraction,
967
980
  semanticShadows,
package/dist/index.mjs CHANGED
@@ -484,6 +484,14 @@ var semanticShadows = {
484
484
  shadow32: { light: shadows.shadow32Light, dark: shadows.shadow32Dark },
485
485
  shadow64: { light: shadows.shadow64Light, dark: shadows.shadow64Dark }
486
486
  };
487
+ var semanticElevations = {
488
+ surface: semanticShadows.shadow2,
489
+ raised: semanticShadows.shadow4,
490
+ floating: semanticShadows.shadow8,
491
+ overlay: semanticShadows.shadow16,
492
+ modal: semanticShadows.shadow24,
493
+ toast: semanticShadows.shadow16
494
+ };
487
495
 
488
496
  // src/semantic/text.ts
489
497
  var SEMANTIC_TEXT = {
@@ -570,6 +578,7 @@ var foundationSizes = {
570
578
  foundationSize20: "2px",
571
579
  foundationSize30: "3px",
572
580
  foundationSize40: "4px",
581
+ foundationSize50: "5px",
573
582
  foundationSize60: "6px",
574
583
  foundationSize80: "8px",
575
584
  foundationSize100: "10px",
@@ -624,10 +633,11 @@ var componentSizeFoundationKeys = {
624
633
  popoverPanelWidth: "foundationSize3250",
625
634
  popoverBeakInsetFromStartEdge: "foundationSize340",
626
635
  popoverBeakInsetFromEndEdge: "foundationSize300",
636
+ navigationMenuItemMinWidth: "foundationSize400",
627
637
  menuPanelWidth: "foundationSize2440",
628
638
  dropdownMenuWidth: "foundationSize2440",
629
639
  sidebarWidth: "foundationSize2560",
630
- toastMinWidth: "foundationSize3250",
640
+ toastMinWidth: "foundationSize2000",
631
641
  toastMaxWidth: "foundationSize3250",
632
642
  dialogMaxWidth: "foundationSize6000",
633
643
  dialogWidthSm: "foundationSize3000",
@@ -689,6 +699,7 @@ var componentSizes = {
689
699
  popoverPanelWidth: fromFoundation("popoverPanelWidth"),
690
700
  popoverBeakInsetFromStartEdge: fromFoundation("popoverBeakInsetFromStartEdge"),
691
701
  popoverBeakInsetFromEndEdge: fromFoundation("popoverBeakInsetFromEndEdge"),
702
+ navigationMenuItemMinWidth: fromFoundation("navigationMenuItemMinWidth"),
692
703
  menuPanelWidth: fromFoundation("menuPanelWidth"),
693
704
  /** @deprecated Same as `menuPanelWidth` */
694
705
  dropdownMenuWidth: fromFoundation("dropdownMenuWidth"),
@@ -905,6 +916,7 @@ export {
905
916
  opacities,
906
917
  overlays,
907
918
  semanticColors,
919
+ semanticElevations,
908
920
  semanticFocus,
909
921
  semanticInteraction,
910
922
  semanticShadows,
@@ -137,6 +137,14 @@
137
137
  ],
138
138
  "status": "stable"
139
139
  },
140
+ {
141
+ "name": "navigationMenuItemMinWidth",
142
+ "cssVar": "--refineui-size-navigation-menu-item-min-width",
143
+ "references": [
144
+ "foundation.foundationSize400"
145
+ ],
146
+ "status": "stable"
147
+ },
140
148
  {
141
149
  "name": "menuPanelWidth",
142
150
  "cssVar": "--refineui-size-menu-panel-width",
@@ -165,7 +173,7 @@
165
173
  "name": "toastMinWidth",
166
174
  "cssVar": "--refineui-size-toast-min-width",
167
175
  "references": [
168
- "foundation.foundationSize3250"
176
+ "foundation.foundationSize2000"
169
177
  ],
170
178
  "status": "stable"
171
179
  },
@@ -23,6 +23,7 @@
23
23
  "foundationSize20": "2px",
24
24
  "foundationSize30": "3px",
25
25
  "foundationSize40": "4px",
26
+ "foundationSize50": "5px",
26
27
  "foundationSize60": "6px",
27
28
  "foundationSize80": "8px",
28
29
  "foundationSize100": "10px",
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "generatedAt": "2026-09-08T17:24:28.239Z",
3
+ "generatedAt": "2026-09-17T18:54:05.896Z",
4
4
  "files": {
5
5
  "foundation": "./foundation.json",
6
6
  "semanticColors": "./semantic-colors.json",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": 2,
3
3
  "contractLayer": "semantic-token-trace",
4
- "generatedAt": "2026-09-08T17:24:28.244Z",
4
+ "generatedAt": "2026-09-17T18:54:05.899Z",
5
5
  "tokens": {
6
6
  "backgroundBrandActive": {
7
7
  "type": "semantic",
@@ -224,6 +224,12 @@
224
224
  --shadow-refineui-8: var(--refineui-elevation-8);
225
225
  --shadow-refineui-8dark: var(--refineui-elevation-8dark);
226
226
  --shadow-refineui-8light: var(--refineui-elevation-8light);
227
+ --shadow-refineui-floating: var(--refineui-elevation-floating);
228
+ --shadow-refineui-modal: var(--refineui-elevation-modal);
229
+ --shadow-refineui-overlay: var(--refineui-elevation-overlay);
230
+ --shadow-refineui-raised: var(--refineui-elevation-raised);
231
+ --shadow-refineui-surface: var(--refineui-elevation-surface);
232
+ --shadow-refineui-toast: var(--refineui-elevation-toast);
227
233
  --spacing-refineui-accessible-clip: var(--refineui-size-accessible-clip);
228
234
  --spacing-refineui-avatar-status-xxxlarge: var(--refineui-size-avatar-status-xxxlarge);
229
235
  --spacing-refineui-button-min-height-lg: var(--refineui-size-button-min-height-lg);
@@ -278,6 +284,7 @@
278
284
  --spacing-refineui-foundation-size-440: var(--refineui-size-foundation-size-440);
279
285
  --spacing-refineui-foundation-size-4500: var(--refineui-size-foundation-size-4500);
280
286
  --spacing-refineui-foundation-size-480: var(--refineui-size-foundation-size-480);
287
+ --spacing-refineui-foundation-size-50: var(--refineui-size-foundation-size-50);
281
288
  --spacing-refineui-foundation-size-520: var(--refineui-size-foundation-size-520);
282
289
  --spacing-refineui-foundation-size-540: var(--refineui-size-foundation-size-540);
283
290
  --spacing-refineui-foundation-size-5750: var(--refineui-size-foundation-size-5750);
@@ -295,6 +302,7 @@
295
302
  --spacing-refineui-icon-xxlarge: var(--refineui-icon-size-xxlarge);
296
303
  --spacing-refineui-icon-xxsmall: var(--refineui-icon-size-xxsmall);
297
304
  --spacing-refineui-menu-panel-width: var(--refineui-size-menu-panel-width);
305
+ --spacing-refineui-navigation-menu-item-min-width: var(--refineui-size-navigation-menu-item-min-width);
298
306
  --spacing-refineui-pagination-button-min-width: var(--refineui-size-pagination-button-min-width);
299
307
  --spacing-refineui-popover-beak-inset-from-end-edge: var(--refineui-size-popover-beak-inset-from-end-edge);
300
308
  --spacing-refineui-popover-beak-inset-from-start-edge: var(--refineui-size-popover-beak-inset-from-start-edge);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refineui/tokens",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "RefineUI Theme Tokens",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",