@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.10

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 (85) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +6 -3
  3. package/dist/index.cjs.mjs +11 -36
  4. package/dist/index.d.ts +248 -268
  5. package/dist/index.esm.js +494 -354
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +503 -567
  8. package/dist/index.js.map +1 -1
  9. package/dist/theme.cjs.mjs +1 -1
  10. package/dist/theme.d.ts +81 -114
  11. package/dist/theme.esm.js +299 -252
  12. package/dist/theme.esm.js.map +1 -1
  13. package/dist/theme.js +299 -252
  14. package/dist/theme.js.map +1 -1
  15. package/package.json +6 -3
  16. package/src/core/__workshop__/constants.ts +3 -2
  17. package/src/core/_compat.ts +236 -87
  18. package/src/core/components/menu/__workshop__/selectedItem.tsx +7 -2
  19. package/src/core/components/menu/menuButton.tsx +12 -1
  20. package/src/core/constants.ts +18 -0
  21. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +6 -3
  22. package/src/core/middleware/origin.ts +47 -0
  23. package/src/core/primitives/avatar/__workshop__/asButton.tsx +1 -1
  24. package/src/core/primitives/avatar/__workshop__/stack.tsx +1 -1
  25. package/src/core/primitives/avatar/avatar.tsx +14 -4
  26. package/src/core/primitives/avatar/avatarCounter.tsx +16 -5
  27. package/src/core/primitives/avatar/avatarStack.tsx +2 -2
  28. package/src/core/primitives/badge/badge.tsx +1 -3
  29. package/src/core/primitives/kbd/kbd.tsx +2 -0
  30. package/src/core/primitives/popover/popover.tsx +67 -13
  31. package/src/core/primitives/popover/popoverCard.tsx +26 -15
  32. package/src/core/primitives/select/select.tsx +1 -1
  33. package/src/core/primitives/switch/styles.ts +6 -1
  34. package/src/core/primitives/tooltip/tooltip.tsx +47 -57
  35. package/src/core/primitives/tooltip/tooltipCard.tsx +104 -0
  36. package/src/core/styles/card/_cardColorStyle.ts +2 -0
  37. package/src/core/styles/margin/marginsStyle.test.ts +2 -2
  38. package/src/core/styles/padding/paddingStyle.test.ts +2 -2
  39. package/src/core/theme/__workshop__/build/Root.tsx +20 -3
  40. package/src/core/theme/__workshop__/build/story.tsx +16 -10
  41. package/src/core/theme/__workshop__/canvas.tsx +7 -7
  42. package/src/core/theme/__workshop__/debug/story.tsx +159 -0
  43. package/src/core/theme/__workshop__/index.ts +5 -0
  44. package/src/core/theme/theme.test.tsx +2 -2
  45. package/src/core/types/avatar.ts +1 -1
  46. package/src/core/types/button.ts +1 -2
  47. package/src/core/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx +3 -0
  48. package/src/core/utils/conditionalWrapper/index.ts +1 -0
  49. package/src/core/utils/index.ts +1 -0
  50. package/src/theme/build/_deprecated/color/factory.ts +3 -3
  51. package/src/theme/build/buildColorTheme.ts +16 -16
  52. package/src/theme/build/colorToken/colorToken.ts +19 -0
  53. package/src/theme/build/colorToken/compileColorToken.ts +21 -0
  54. package/src/theme/build/colorToken/index.ts +2 -0
  55. package/src/theme/build/colorToken/types.ts +6 -0
  56. package/src/theme/build/renderColorTheme.ts +14 -15
  57. package/src/theme/build/renderColorValue.ts +9 -2
  58. package/src/theme/config/system.ts +12 -10
  59. package/src/theme/config/tokens/color/types.ts +12 -1
  60. package/src/theme/config/tokens/parseTokenKey.ts +1 -0
  61. package/src/theme/config/tokens/parseTokenValue.test.ts +13 -16
  62. package/src/theme/config/tokens/parseTokenValue.ts +45 -14
  63. package/src/theme/config/tokens/types.ts +3 -2
  64. package/src/theme/defaults/colorTokens.ts +219 -211
  65. package/src/theme/defaults/config.ts +2 -1
  66. package/src/theme/defaults/fonts.ts +13 -5
  67. package/src/theme/index.ts +0 -7
  68. package/src/theme/system/color/_constants.ts +5 -2
  69. package/src/theme/system/color/_system.ts +2 -1
  70. package/src/theme/system/color/avatar.ts +2 -12
  71. package/src/theme/system/color/button.ts +4 -20
  72. package/src/theme/system/color/input.ts +3 -11
  73. package/src/theme/system/color/selectable.ts +3 -14
  74. package/src/theme/system/shadow.ts +0 -6
  75. package/src/theme/system/styles.ts +0 -6
  76. package/src/theme/system/theme.ts +2 -0
  77. package/src/theme/system/v0/avatar.ts +1 -1
  78. package/src/theme/system/v0/color/button.ts +4 -4
  79. package/src/theme/system/v0/color/card.ts +2 -2
  80. package/src/theme/system/v0/color/input.ts +3 -3
  81. package/src/theme/system/v0/color/muted.ts +2 -2
  82. package/src/theme/system/v0/color/solid.ts +2 -2
  83. package/src/theme/versioning/themeColor_v0_v2.ts +2 -2
  84. package/src/theme/versioning/v2_v0.ts +2 -2
  85. package/src/theme/build/colorToken.ts +0 -39
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Sanity.io
3
+ Copyright (c) 2023–2024 Sanity.io
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -6,7 +6,7 @@ The Sanity UI components.
6
6
  npm install @sanity/ui
7
7
 
8
8
  # Install peer dependencies
9
- npm install react react-dom react-is styled-components
9
+ npm install react react-dom styled-components
10
10
  ```
11
11
 
12
12
  [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)
@@ -14,12 +14,15 @@ npm install react react-dom react-is styled-components
14
14
  ## Usage
15
15
 
16
16
  ```jsx
17
- import {Button, ThemeProvider, studioTheme} from '@sanity/ui'
17
+ import {Button, ThemeProvider} from '@sanity/ui'
18
+ import {buildTheme} from '@sanity/ui/theme'
18
19
  import {createRoot} from 'react-dom/client'
19
20
 
20
21
  const root = createRoot(document.getElementById('root'))
22
+ const theme = buildTheme()
23
+
21
24
  root.render(
22
- <ThemeProvider theme={studioTheme}>
25
+ <ThemeProvider theme={theme}>
23
26
  <Button text="Hello, world" />
24
27
  </ThemeProvider>,
25
28
  )
package/dist/index.cjs.mjs CHANGED
@@ -1,41 +1,5 @@
1
1
  import cjs from './index.js';
2
2
 
3
- export const COLOR_CONFIG_BLEND_KEYS = cjs.COLOR_CONFIG_BLEND_KEYS;
4
- export const COLOR_CONFIG_CARD_KEYS = cjs.COLOR_CONFIG_CARD_KEYS;
5
- export const COLOR_CONFIG_CARD_TONES = cjs.COLOR_CONFIG_CARD_TONES;
6
- export const COLOR_CONFIG_STATE_KEYS = cjs.COLOR_CONFIG_STATE_KEYS;
7
- export const COLOR_CONFIG_STATE_TONES = cjs.COLOR_CONFIG_STATE_TONES;
8
- export const THEME_COLOR_BLEND_MODES = cjs.THEME_COLOR_BLEND_MODES;
9
- export const THEME_COLOR_BUTTON_MODES = cjs.THEME_COLOR_BUTTON_MODES;
10
- export const THEME_COLOR_CARD_TONES = cjs.THEME_COLOR_CARD_TONES;
11
- export const THEME_COLOR_STATES = cjs.THEME_COLOR_STATES;
12
- export const THEME_COLOR_STATE_TONES = cjs.THEME_COLOR_STATE_TONES;
13
- export const buildTheme = cjs.buildTheme;
14
- export const createColorTheme = cjs.createColorTheme;
15
- export const hexToRgb = cjs.hexToRgb;
16
- export const hslToRgb = cjs.hslToRgb;
17
- export const isColorBlendModeValue = cjs.isColorBlendModeValue;
18
- export const isColorButtonMode = cjs.isColorButtonMode;
19
- export const isColorConfigBaseKey = cjs.isColorConfigBaseKey;
20
- export const isColorConfigBaseTone = cjs.isColorConfigBaseTone;
21
- export const isColorConfigBlendKey = cjs.isColorConfigBlendKey;
22
- export const isColorConfigStateKey = cjs.isColorConfigStateKey;
23
- export const isColorConfigStateTone = cjs.isColorConfigStateTone;
24
- export const isColorHueKey = cjs.isColorHueKey;
25
- export const isColorOpacityValue = cjs.isColorOpacityValue;
26
- export const isColorTintKey = cjs.isColorTintKey;
27
- export const isColorTokenValue = cjs.isColorTokenValue;
28
- export const isColorValue = cjs.isColorValue;
29
- export const multiply = cjs.multiply;
30
- export const parseColor = cjs.parseColor;
31
- export const parseTokenKey = cjs.parseTokenKey;
32
- export const parseTokenValue = cjs.parseTokenValue;
33
- export const rgbToHex = cjs.rgbToHex;
34
- export const rgbToHsl = cjs.rgbToHsl;
35
- export const rgba = cjs.rgba;
36
- export const rgbaToRGBA = cjs.rgbaToRGBA;
37
- export const screen = cjs.screen;
38
- export const studioTheme = cjs.studioTheme;
39
3
  export const Arrow = cjs.Arrow;
40
4
  export const Autocomplete = cjs.Autocomplete;
41
5
  export const Avatar = cjs.Avatar;
@@ -50,6 +14,7 @@ export const Card = cjs.Card;
50
14
  export const Checkbox = cjs.Checkbox;
51
15
  export const Code = cjs.Code;
52
16
  export const CodeSkeleton = cjs.CodeSkeleton;
17
+ export const ConditionalWrapper = cjs.ConditionalWrapper;
53
18
  export const Container = cjs.Container;
54
19
  export const Dialog = cjs.Dialog;
55
20
  export const DialogContext = cjs.DialogContext;
@@ -112,8 +77,11 @@ export const _raf2 = cjs._raf2;
112
77
  export const _responsive = cjs._responsive;
113
78
  export const attemptFocus = cjs.attemptFocus;
114
79
  export const containsOrEqualsElement = cjs.containsOrEqualsElement;
80
+ export const createColorTheme = cjs.createColorTheme;
115
81
  export const focusFirstDescendant = cjs.focusFirstDescendant;
116
82
  export const focusLastDescendant = cjs.focusLastDescendant;
83
+ export const hexToRgb = cjs.hexToRgb;
84
+ export const hslToRgb = cjs.hslToRgb;
117
85
  export const isFocusable = cjs.isFocusable;
118
86
  export const isHTMLAnchorElement = cjs.isHTMLAnchorElement;
119
87
  export const isHTMLButtonElement = cjs.isHTMLButtonElement;
@@ -121,12 +89,19 @@ export const isHTMLElement = cjs.isHTMLElement;
121
89
  export const isHTMLInputElement = cjs.isHTMLInputElement;
122
90
  export const isHTMLSelectElement = cjs.isHTMLSelectElement;
123
91
  export const isHTMLTextAreaElement = cjs.isHTMLTextAreaElement;
92
+ export const multiply = cjs.multiply;
93
+ export const parseColor = cjs.parseColor;
124
94
  export const rem = cjs.rem;
125
95
  export const responsiveCodeFontStyle = cjs.responsiveCodeFontStyle;
126
96
  export const responsiveHeadingFont = cjs.responsiveHeadingFont;
127
97
  export const responsiveLabelFont = cjs.responsiveLabelFont;
128
98
  export const responsiveTextAlignStyle = cjs.responsiveTextAlignStyle;
129
99
  export const responsiveTextFont = cjs.responsiveTextFont;
100
+ export const rgbToHex = cjs.rgbToHex;
101
+ export const rgbToHsl = cjs.rgbToHsl;
102
+ export const rgba = cjs.rgba;
103
+ export const screen = cjs.screen;
104
+ export const studioTheme = cjs.studioTheme;
130
105
  export const useArrayProp = cjs.useArrayProp;
131
106
  export const useBoundaryElement = cjs.useBoundaryElement;
132
107
  export const useClickOutside = cjs.useClickOutside;