@sanity/ui 2.9.0-canary.6 → 2.9.0

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.
Files changed (84) hide show
  1. package/dist/_chunks-cjs/getTheme_v2.js +26 -0
  2. package/dist/_chunks-cjs/getTheme_v2.js.map +1 -1
  3. package/dist/_chunks-es/getTheme_v2.mjs +26 -0
  4. package/dist/_chunks-es/getTheme_v2.mjs.map +1 -1
  5. package/dist/_legacy/getTheme_v2.esm.js +26 -0
  6. package/dist/_legacy/getTheme_v2.esm.js.map +1 -1
  7. package/dist/index.esm.js +652 -1048
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +651 -1047
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +652 -1048
  12. package/dist/index.mjs.map +1 -1
  13. package/dist/theme.d.mts +22 -28
  14. package/dist/theme.d.ts +22 -28
  15. package/dist/theme.esm.js +124 -260
  16. package/dist/theme.esm.js.map +1 -1
  17. package/dist/theme.js +124 -260
  18. package/dist/theme.js.map +1 -1
  19. package/dist/theme.mjs +124 -260
  20. package/dist/theme.mjs.map +1 -1
  21. package/package.json +60 -53
  22. package/src/core/__workshop__/constants.ts +27 -31
  23. package/src/core/components/autocomplete/autocomplete.tsx +31 -42
  24. package/src/core/components/breadcrumbs/breadcrumbs.tsx +47 -35
  25. package/src/core/components/dialog/dialog.tsx +1 -1
  26. package/src/core/components/menu/__workshop__/tones.tsx +5 -6
  27. package/src/core/components/menu/useMenuController.ts +21 -18
  28. package/src/core/components/toast/__workshop__/hook.tsx +1 -1
  29. package/src/core/components/toast/toast.tsx +2 -2
  30. package/src/core/components/tree/treeItem.tsx +15 -18
  31. package/src/core/hooks/useElementRect/__workshop__/example.tsx +2 -2
  32. package/src/core/hooks/useMatchMedia.ts +22 -12
  33. package/src/core/primitives/badge/__workshop__/tones.tsx +6 -13
  34. package/src/core/primitives/button/__workshop__/custom.tsx +4 -3
  35. package/src/core/primitives/card/__workshop__/allTones.tsx +6 -8
  36. package/src/core/primitives/card/__workshop__/asButton.tsx +42 -24
  37. package/src/core/primitives/card/__workshop__/asComponent.tsx +1 -1
  38. package/src/core/primitives/card/__workshop__/checkered.tsx +17 -7
  39. package/src/core/primitives/card/__workshop__/interactive.tsx +10 -3
  40. package/src/core/primitives/card/__workshop__/listNavigation.tsx +5 -3
  41. package/src/core/primitives/card/__workshop__/props.tsx +7 -5
  42. package/src/core/primitives/card/__workshop__/selected.tsx +4 -1
  43. package/src/core/primitives/checkbox/__workshop__/tones.tsx +6 -0
  44. package/src/core/primitives/code/__workshop__/props.tsx +1 -1
  45. package/src/core/primitives/container/__workshop__/example.tsx +1 -1
  46. package/src/core/primitives/flex/__workshop__/example.tsx +3 -3
  47. package/src/core/primitives/grid/__workshop__/responsive.tsx +12 -12
  48. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +13 -25
  49. package/src/core/primitives/inline/__workshop__/plain.tsx +3 -3
  50. package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +6 -6
  51. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +1 -1
  52. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +3 -3
  53. package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +1 -1
  54. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +1 -1
  55. package/src/core/primitives/popover/popover.tsx +140 -74
  56. package/src/core/primitives/popover/popoverCard.tsx +4 -1
  57. package/src/core/primitives/radio/__workshop__/plain.tsx +2 -2
  58. package/src/core/primitives/select/__workshop__/readOnly.tsx +1 -1
  59. package/src/core/primitives/text/__workshop__/example.tsx +6 -6
  60. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +11 -21
  61. package/src/core/primitives/textArea/__workshop__/plain.tsx +1 -1
  62. package/src/core/primitives/textInput/__workshop__/index.ts +0 -5
  63. package/src/core/primitives/textInput/__workshop__/plain.tsx +1 -2
  64. package/src/core/primitives/textInput/__workshop__/readOnly.tsx +6 -2
  65. package/src/core/primitives/textInput/__workshop__/tones.tsx +38 -0
  66. package/src/core/primitives/tooltip/tooltip.tsx +17 -47
  67. package/src/core/styles/card/_cardColorStyle.ts +8 -0
  68. package/src/core/theme/__workshop__/debug/story.tsx +18 -11
  69. package/src/core/utils/portal/portalProvider.tsx +5 -5
  70. package/src/theme/build/_deprecated/color/factory.ts +1 -1
  71. package/src/theme/build/_deprecated/color/muted/createMuted.ts +2 -2
  72. package/src/theme/build/buildColorTheme.ts +47 -37
  73. package/src/theme/build/renderColorTheme.ts +26 -30
  74. package/src/theme/build/resolveColorTokens.ts +51 -115
  75. package/src/theme/config/tokens/color/types.ts +4 -18
  76. package/src/theme/defaults/colorTokens.ts +8 -5
  77. package/src/theme/getScopedTheme.ts +9 -2
  78. package/src/theme/system/color/_constants.ts +6 -2
  79. package/src/theme/system/color/badge.ts +3 -7
  80. package/src/theme/system/v0/color/_system.ts +8 -4
  81. package/src/theme/system/v0/color/color.ts +3 -2
  82. package/src/theme/versioning/themeColor_v0_v2.ts +26 -0
  83. package/src/theme/versioning/v0_v2.ts +4 -0
  84. package/src/core/primitives/textInput/__workshop__/multipleTones.tsx +0 -20
package/dist/theme.d.mts CHANGED
@@ -112,7 +112,9 @@ export declare const COLOR_CONFIG_CARD_TONES: readonly [
112
112
  '*',
113
113
  'transparent',
114
114
  'default',
115
+ 'neutral',
115
116
  'primary',
117
+ 'suggest',
116
118
  'positive',
117
119
  'caution',
118
120
  'critical',
@@ -152,7 +154,9 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
152
154
  export declare const COLOR_CONFIG_STATE_TONES: readonly [
153
155
  '*',
154
156
  'default',
157
+ 'neutral',
155
158
  'primary',
159
+ 'suggest',
156
160
  'positive',
157
161
  'caution',
158
162
  'critical',
@@ -450,7 +454,9 @@ export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bl
450
454
  export declare const THEME_COLOR_CARD_TONES: readonly [
451
455
  'transparent',
452
456
  'default',
457
+ 'neutral',
453
458
  'primary',
459
+ 'suggest',
454
460
  'positive',
455
461
  'caution',
456
462
  'critical',
@@ -473,7 +479,9 @@ export declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
473
479
  /** @public */
474
480
  export declare const THEME_COLOR_STATE_TONES: readonly [
475
481
  'default',
482
+ 'neutral',
476
483
  'primary',
484
+ 'suggest',
477
485
  'positive',
478
486
  'caution',
479
487
  'critical',
@@ -589,32 +597,12 @@ export declare interface ThemeColorAvatarTokens {
589
597
  /**
590
598
  * @public
591
599
  */
592
- export declare interface ThemeColorBadge_v2 {
593
- default: ThemeColorBadgeTone_v2
594
- primary: ThemeColorBadgeTone_v2
595
- positive: ThemeColorBadgeTone_v2
596
- caution: ThemeColorBadgeTone_v2
597
- critical: ThemeColorBadgeTone_v2
598
- }
599
-
600
- /** @public */
601
- export declare interface ThemeColorBadgeTokens {
602
- _hue?: ColorHueKey
603
- bg?: ThemeColorTokenValue
604
- fg?: ThemeColorTokenValue
605
- dot?: ThemeColorTokenValue
606
- icon?: ThemeColorTokenValue
607
- }
600
+ export declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
608
601
 
609
602
  /** @public */
610
- export declare interface ThemeColorBadgeTokens {
611
- '*'?: ThemeColorBadgeToneTokens
612
- 'default'?: ThemeColorBadgeToneTokens
613
- 'primary'?: ThemeColorBadgeToneTokens
614
- 'positive'?: ThemeColorBadgeToneTokens
615
- 'caution'?: ThemeColorBadgeToneTokens
616
- 'critical'?: ThemeColorBadgeToneTokens
617
- }
603
+ export declare type ThemeColorBadgeTokens = Partial<
604
+ Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
605
+ >
618
606
 
619
607
  /**
620
608
  * @public
@@ -682,7 +670,7 @@ export declare interface ThemeColorBuilderOpts {
682
670
  solid: (opts: {
683
671
  base: ThemeColorBase
684
672
  dark: boolean
685
- tone: ThemeColorToneKey
673
+ tone: ThemeColorName
686
674
  name: ThemeColorName
687
675
  state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
688
676
  }) => ThemeColorGenericState
@@ -990,7 +978,13 @@ export declare interface ThemeColorMutedTone {
990
978
  * @public
991
979
  * @deprecated Use `ThemeColorCardToneKey` instead.
992
980
  */
993
- export declare type ThemeColorName = ThemeColorCardToneKey
981
+ export declare type ThemeColorName =
982
+ | 'transparent'
983
+ | 'default'
984
+ | 'primary'
985
+ | 'positive'
986
+ | 'caution'
987
+ | 'critical'
994
988
 
995
989
  /** @public */
996
990
  export declare type ThemeColorPalette = {
@@ -1002,7 +996,7 @@ export declare type ThemeColorPalette = {
1002
996
  * @public
1003
997
  * @deprecated Use `ThemeColorScheme_v2` instead.
1004
998
  */
1005
- export declare type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
999
+ export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
1006
1000
 
1007
1001
  /**
1008
1002
  * @public
@@ -1263,7 +1257,7 @@ export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
1263
1257
  * @public
1264
1258
  * @deprecated Use `ThemeColorCardToneKey` instead.
1265
1259
  */
1266
- export declare type ThemeColorToneKey = ThemeColorCardToneKey
1260
+ export declare type ThemeColorToneKey = ThemeColorName
1267
1261
 
1268
1262
  /** @public */
1269
1263
  export declare interface ThemeConfig {
package/dist/theme.d.ts CHANGED
@@ -112,7 +112,9 @@ export declare const COLOR_CONFIG_CARD_TONES: readonly [
112
112
  '*',
113
113
  'transparent',
114
114
  'default',
115
+ 'neutral',
115
116
  'primary',
117
+ 'suggest',
116
118
  'positive',
117
119
  'caution',
118
120
  'critical',
@@ -152,7 +154,9 @@ export declare const COLOR_CONFIG_STATE_KEYS: readonly [
152
154
  export declare const COLOR_CONFIG_STATE_TONES: readonly [
153
155
  '*',
154
156
  'default',
157
+ 'neutral',
155
158
  'primary',
159
+ 'suggest',
156
160
  'positive',
157
161
  'caution',
158
162
  'critical',
@@ -450,7 +454,9 @@ export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bl
450
454
  export declare const THEME_COLOR_CARD_TONES: readonly [
451
455
  'transparent',
452
456
  'default',
457
+ 'neutral',
453
458
  'primary',
459
+ 'suggest',
454
460
  'positive',
455
461
  'caution',
456
462
  'critical',
@@ -473,7 +479,9 @@ export declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
473
479
  /** @public */
474
480
  export declare const THEME_COLOR_STATE_TONES: readonly [
475
481
  'default',
482
+ 'neutral',
476
483
  'primary',
484
+ 'suggest',
477
485
  'positive',
478
486
  'caution',
479
487
  'critical',
@@ -589,32 +597,12 @@ export declare interface ThemeColorAvatarTokens {
589
597
  /**
590
598
  * @public
591
599
  */
592
- export declare interface ThemeColorBadge_v2 {
593
- default: ThemeColorBadgeTone_v2
594
- primary: ThemeColorBadgeTone_v2
595
- positive: ThemeColorBadgeTone_v2
596
- caution: ThemeColorBadgeTone_v2
597
- critical: ThemeColorBadgeTone_v2
598
- }
599
-
600
- /** @public */
601
- export declare interface ThemeColorBadgeTokens {
602
- _hue?: ColorHueKey
603
- bg?: ThemeColorTokenValue
604
- fg?: ThemeColorTokenValue
605
- dot?: ThemeColorTokenValue
606
- icon?: ThemeColorTokenValue
607
- }
600
+ export declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
608
601
 
609
602
  /** @public */
610
- export declare interface ThemeColorBadgeTokens {
611
- '*'?: ThemeColorBadgeToneTokens
612
- 'default'?: ThemeColorBadgeToneTokens
613
- 'primary'?: ThemeColorBadgeToneTokens
614
- 'positive'?: ThemeColorBadgeToneTokens
615
- 'caution'?: ThemeColorBadgeToneTokens
616
- 'critical'?: ThemeColorBadgeToneTokens
617
- }
603
+ export declare type ThemeColorBadgeTokens = Partial<
604
+ Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
605
+ >
618
606
 
619
607
  /**
620
608
  * @public
@@ -682,7 +670,7 @@ export declare interface ThemeColorBuilderOpts {
682
670
  solid: (opts: {
683
671
  base: ThemeColorBase
684
672
  dark: boolean
685
- tone: ThemeColorToneKey
673
+ tone: ThemeColorName
686
674
  name: ThemeColorName
687
675
  state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
688
676
  }) => ThemeColorGenericState
@@ -990,7 +978,13 @@ export declare interface ThemeColorMutedTone {
990
978
  * @public
991
979
  * @deprecated Use `ThemeColorCardToneKey` instead.
992
980
  */
993
- export declare type ThemeColorName = ThemeColorCardToneKey
981
+ export declare type ThemeColorName =
982
+ | 'transparent'
983
+ | 'default'
984
+ | 'primary'
985
+ | 'positive'
986
+ | 'caution'
987
+ | 'critical'
994
988
 
995
989
  /** @public */
996
990
  export declare type ThemeColorPalette = {
@@ -1002,7 +996,7 @@ export declare type ThemeColorPalette = {
1002
996
  * @public
1003
997
  * @deprecated Use `ThemeColorScheme_v2` instead.
1004
998
  */
1005
- export declare type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
999
+ export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
1006
1000
 
1007
1001
  /**
1008
1002
  * @public
@@ -1263,7 +1257,7 @@ export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
1263
1257
  * @public
1264
1258
  * @deprecated Use `ThemeColorCardToneKey` instead.
1265
1259
  */
1266
- export declare type ThemeColorToneKey = ThemeColorCardToneKey
1260
+ export declare type ThemeColorToneKey = ThemeColorName
1267
1261
 
1268
1262
  /** @public */
1269
1263
  export declare interface ThemeConfig {