@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/src/theme/system/color/badge.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import {ThemeColorStateToneKey} from './_system'
2
+
1
3
  /**
2
4
  * @public
3
5
  */
@@ -11,10 +13,4 @@ export interface ThemeColorBadgeTone_v2 {
11
13
  /**
12
14
  * @public
13
15
  */
14
- export interface ThemeColorBadge_v2 {
15
- default: ThemeColorBadgeTone_v2
16
- primary: ThemeColorBadgeTone_v2
17
- positive: ThemeColorBadgeTone_v2
18
- caution: ThemeColorBadgeTone_v2
19
- critical: ThemeColorBadgeTone_v2
20
- }
16
+ export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
package/src/theme/system/v0/color/_system.ts CHANGED
@@ -1,13 +1,17 @@
1
- import {ThemeColorCardToneKey} from '../../color/_system'
2
-
3
1
  /**
4
2
  * @public
5
3
  * @deprecated Use `ThemeColorCardToneKey` instead.
6
4
  */
7
- export type ThemeColorName = ThemeColorCardToneKey
5
+ export type ThemeColorName =
6
+ | 'transparent'
7
+ | 'default'
8
+ | 'primary'
9
+ | 'positive'
10
+ | 'caution'
11
+ | 'critical'
8
12
 
9
13
  /**
10
14
  * @public
11
15
  * @deprecated Use `ThemeColorCardToneKey` instead.
12
16
  */
13
- export type ThemeColorToneKey = ThemeColorCardToneKey
17
+ export type ThemeColorToneKey = ThemeColorName
package/src/theme/system/v0/color/color.ts CHANGED
@@ -1,5 +1,6 @@
1
- import {ThemeColorCardToneKey, ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
1
+ import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
2
2
  import {ThemeColorGenericState} from './_generic'
3
+ import {ThemeColorName} from './_system'
3
4
  import {ThemeColorBase} from './base'
4
5
  import {ThemeColorButton} from './button'
5
6
  import {ThemeColorCard} from './card'
@@ -30,7 +31,7 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
30
31
  * @public
31
32
  * @deprecated Use `ThemeColorScheme_v2` instead.
32
33
  */
33
- export type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
34
+ export type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
34
35
 
35
36
  /**
36
37
  * @public
package/src/theme/versioning/themeColor_v0_v2.ts CHANGED
@@ -75,6 +75,13 @@ function stateTonesThemeColor_v0_v2(
75
75
  selected: stateThemeColor_v0_v2(v0, t.default.selected),
76
76
  disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
77
77
  },
78
+ neutral: {
79
+ enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
80
+ hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
81
+ pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
82
+ selected: stateThemeColor_v0_v2(v0, t.default.selected),
83
+ disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
84
+ },
78
85
  primary: {
79
86
  enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
80
87
  hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
@@ -82,6 +89,13 @@ function stateTonesThemeColor_v0_v2(
82
89
  selected: stateThemeColor_v0_v2(v0, t.primary.selected),
83
90
  disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
84
91
  },
92
+ suggest: {
93
+ enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
94
+ hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
95
+ pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
96
+ selected: stateThemeColor_v0_v2(v0, t.primary.selected),
97
+ disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
98
+ },
85
99
  positive: {
86
100
  enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
87
101
  hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
@@ -154,12 +168,24 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
154
168
  dot: v0.muted.default.enabled.muted.fg,
155
169
  icon: v0.muted.default.enabled.muted.fg,
156
170
  },
171
+ neutral: {
172
+ bg: v0.muted.transparent.enabled.bg,
173
+ fg: v0.muted.transparent.enabled.fg,
174
+ dot: v0.muted.transparent.enabled.muted.fg,
175
+ icon: v0.muted.transparent.enabled.muted.fg,
176
+ },
157
177
  primary: {
158
178
  bg: v0.muted.primary.enabled.bg,
159
179
  fg: v0.muted.primary.enabled.fg,
160
180
  dot: v0.muted.primary.enabled.muted.fg,
161
181
  icon: v0.muted.primary.enabled.muted.fg,
162
182
  },
183
+ suggest: {
184
+ bg: v0.muted.primary.enabled.bg,
185
+ fg: v0.muted.primary.enabled.fg,
186
+ dot: v0.muted.primary.enabled.muted.fg,
187
+ icon: v0.muted.primary.enabled.muted.fg,
188
+ },
163
189
  positive: {
164
190
  bg: v0.muted.positive.enabled.bg,
165
191
  fg: v0.muted.positive.enabled.fg,
package/src/theme/versioning/v0_v2.ts CHANGED
@@ -44,7 +44,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
44
44
  light: {
45
45
  transparent: themeColor_v0_v2(color.light.transparent),
46
46
  default: themeColor_v0_v2(color.light.default),
47
+ neutral: themeColor_v0_v2(color.light.transparent),
47
48
  primary: themeColor_v0_v2(color.light.primary),
49
+ suggest: themeColor_v0_v2(color.light.primary),
48
50
  positive: themeColor_v0_v2(color.light.positive),
49
51
  caution: themeColor_v0_v2(color.light.caution),
50
52
  critical: themeColor_v0_v2(color.light.critical),
@@ -52,7 +54,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
52
54
  dark: {
53
55
  transparent: themeColor_v0_v2(color.dark.transparent),
54
56
  default: themeColor_v0_v2(color.dark.default),
57
+ neutral: themeColor_v0_v2(color.dark.transparent),
55
58
  primary: themeColor_v0_v2(color.dark.primary),
59
+ suggest: themeColor_v0_v2(color.dark.primary),
56
60
  positive: themeColor_v0_v2(color.dark.positive),
57
61
  caution: themeColor_v0_v2(color.dark.caution),
58
62
  critical: themeColor_v0_v2(color.dark.critical),
package/src/core/primitives/textInput/__workshop__/multipleTones.tsx DELETED
@@ -1,20 +0,0 @@
1
- import {Card, Stack, TextInput} from '@sanity/ui'
2
-
3
- export default function MultipleTonesStory() {
4
- return (
5
- <Stack>
6
- <Card padding={3} tone="primary">
7
- <TextInput />
8
- </Card>
9
- <Card padding={3} tone="positive">
10
- <TextInput />
11
- </Card>
12
- <Card padding={3} tone="caution">
13
- <TextInput />
14
- </Card>
15
- <Card padding={3} tone="critical">
16
- <TextInput />
17
- </Card>
18
- </Stack>
19
- )
20
- }