@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.4

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 (59) hide show
  1. package/dist/index.cjs.mjs +10 -36
  2. package/dist/index.d.ts +179 -238
  3. package/dist/index.esm.js +18 -5
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +26 -218
  6. package/dist/index.js.map +1 -1
  7. package/dist/theme.cjs.mjs +1 -1
  8. package/dist/theme.d.ts +75 -111
  9. package/dist/theme.esm.js +154 -92
  10. package/dist/theme.esm.js.map +1 -1
  11. package/dist/theme.js +154 -92
  12. package/dist/theme.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/core/_compat.ts +236 -87
  15. package/src/core/components/menu/__workshop__/selectedItem.tsx +7 -2
  16. package/src/core/components/menu/menuButton.tsx +12 -1
  17. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +6 -3
  18. package/src/core/primitives/kbd/kbd.tsx +2 -0
  19. package/src/core/styles/margin/marginsStyle.test.ts +2 -2
  20. package/src/core/styles/padding/paddingStyle.test.ts +2 -2
  21. package/src/core/theme/__workshop__/build/Root.tsx +20 -3
  22. package/src/core/theme/__workshop__/build/story.tsx +16 -10
  23. package/src/core/theme/__workshop__/canvas.tsx +7 -7
  24. package/src/core/theme/__workshop__/debug/story.tsx +159 -0
  25. package/src/core/theme/__workshop__/index.ts +5 -0
  26. package/src/core/theme/theme.test.tsx +2 -2
  27. package/src/core/types/button.ts +1 -2
  28. package/src/theme/build/_deprecated/color/factory.ts +3 -3
  29. package/src/theme/build/buildColorTheme.ts +16 -16
  30. package/src/theme/build/colorToken/colorToken.ts +19 -0
  31. package/src/theme/build/colorToken/compileColorToken.ts +17 -0
  32. package/src/theme/build/colorToken/index.ts +2 -0
  33. package/src/theme/build/colorToken/types.ts +6 -0
  34. package/src/theme/build/renderColorTheme.ts +14 -15
  35. package/src/theme/build/renderColorValue.ts +1 -1
  36. package/src/theme/config/system.ts +9 -9
  37. package/src/theme/config/tokens/color/types.ts +12 -1
  38. package/src/theme/config/tokens/parseTokenKey.ts +1 -0
  39. package/src/theme/config/tokens/parseTokenValue.ts +1 -0
  40. package/src/theme/defaults/colorTokens.ts +127 -66
  41. package/src/theme/index.ts +0 -7
  42. package/src/theme/system/color/_constants.ts +5 -2
  43. package/src/theme/system/color/_system.ts +2 -1
  44. package/src/theme/system/color/avatar.ts +2 -12
  45. package/src/theme/system/color/button.ts +4 -20
  46. package/src/theme/system/color/input.ts +3 -11
  47. package/src/theme/system/color/selectable.ts +3 -14
  48. package/src/theme/system/shadow.ts +0 -6
  49. package/src/theme/system/styles.ts +0 -6
  50. package/src/theme/system/theme.ts +2 -0
  51. package/src/theme/system/v0/avatar.ts +1 -1
  52. package/src/theme/system/v0/color/button.ts +4 -4
  53. package/src/theme/system/v0/color/card.ts +2 -2
  54. package/src/theme/system/v0/color/input.ts +3 -3
  55. package/src/theme/system/v0/color/muted.ts +2 -2
  56. package/src/theme/system/v0/color/solid.ts +2 -2
  57. package/src/theme/versioning/themeColor_v0_v2.ts +2 -2
  58. package/src/theme/versioning/v2_v0.ts +2 -2
  59. package/src/theme/build/colorToken.ts +0 -39
package/src/theme/versioning/themeColor_v0_v2.ts CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  ThemeColorState_v2,
7
7
  ThemeColorCard_v2,
8
8
  ThemeColorInputStates,
9
- ThemeColorInputStates_v2,
9
+ ThemeColorInputMode_v2,
10
10
  ThemeColorInputState,
11
11
  ThemeColorInputState_v2,
12
12
  } from '../system'
@@ -195,7 +195,7 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
195
195
  }
196
196
  }
197
197
 
198
- function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputStates_v2 {
198
+ function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputMode_v2 {
199
199
  return {
200
200
  enabled: inputStateThemeColor_v0_v2(states.enabled),
201
201
  disabled: inputStateThemeColor_v0_v2(states.disabled),
package/src/theme/versioning/v2_v0.ts CHANGED
@@ -3,10 +3,10 @@ import {
3
3
  RootTheme_v2,
4
4
  ThemeColor,
5
5
  ThemeColorCard_v2,
6
+ ThemeColorInputMode_v2,
6
7
  ThemeColorInputState,
7
8
  ThemeColorInputState_v2,
8
9
  ThemeColorInputStates,
9
- ThemeColorInputStates_v2,
10
10
  } from '../system'
11
11
 
12
12
  const cache = new WeakMap<RootTheme_v2, RootTheme>()
@@ -106,7 +106,7 @@ function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
106
106
  }
107
107
  }
108
108
 
109
- function inputStatesThemeColor_v2_v0(t: ThemeColorInputStates_v2): ThemeColorInputStates {
109
+ function inputStatesThemeColor_v2_v0(t: ThemeColorInputMode_v2): ThemeColorInputStates {
110
110
  return {
111
111
  enabled: inputStateThemeColor_v2_v0(t.enabled),
112
112
  disabled: inputStateThemeColor_v2_v0(t.disabled),
package/src/theme/build/colorToken.ts DELETED
@@ -1,39 +0,0 @@
1
- import {ColorHueKey} from '@sanity/color'
2
- import {ThemeColorTokenValue, parseTokenValue, TokenColorValueNode} from '../config'
3
-
4
- export interface ColorTokenContext {
5
- hue: ColorHueKey
6
- scheme: 'light' | 'dark'
7
- }
8
-
9
- const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
10
-
11
- export function resolveColorTokenValue(
12
- context: ColorTokenContext,
13
- value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
14
- ): string {
15
- const {hue, scheme} = context
16
- const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
17
-
18
- if (!node || node.type !== 'color') {
19
- throw new Error(`Invalid color token: ${value[0]}`)
20
- }
21
-
22
- return compileColorTokenValue({...node, hue: node.hue || hue})
23
- }
24
-
25
- export function compileColorTokenValue(node: TokenColorValueNode): string {
26
- let key = ''
27
-
28
- if (node.key === 'black' || node.key === 'white') {
29
- key = node.key
30
- } else {
31
- key = `${node.hue}/${node.tint}`
32
- }
33
-
34
- if (node.opacity !== undefined) {
35
- key += `/${node.opacity}`
36
- }
37
-
38
- return key
39
- }