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

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 (57) hide show
  1. package/dist/index.cjs.mjs +10 -36
  2. package/dist/index.d.ts +179 -238
  3. package/dist/index.esm.js +13 -4
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +21 -217
  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/hooks/useMediaIndex/useMediaIndex.test.tsx +6 -3
  16. package/src/core/primitives/kbd/kbd.tsx +2 -0
  17. package/src/core/styles/margin/marginsStyle.test.ts +2 -2
  18. package/src/core/styles/padding/paddingStyle.test.ts +2 -2
  19. package/src/core/theme/__workshop__/build/Root.tsx +20 -3
  20. package/src/core/theme/__workshop__/build/story.tsx +16 -10
  21. package/src/core/theme/__workshop__/canvas.tsx +7 -7
  22. package/src/core/theme/__workshop__/debug/story.tsx +159 -0
  23. package/src/core/theme/__workshop__/index.ts +5 -0
  24. package/src/core/theme/theme.test.tsx +2 -2
  25. package/src/core/types/button.ts +1 -2
  26. package/src/theme/build/_deprecated/color/factory.ts +3 -3
  27. package/src/theme/build/buildColorTheme.ts +16 -16
  28. package/src/theme/build/colorToken/colorToken.ts +19 -0
  29. package/src/theme/build/colorToken/compileColorToken.ts +17 -0
  30. package/src/theme/build/colorToken/index.ts +2 -0
  31. package/src/theme/build/colorToken/types.ts +6 -0
  32. package/src/theme/build/renderColorTheme.ts +14 -15
  33. package/src/theme/build/renderColorValue.ts +1 -1
  34. package/src/theme/config/system.ts +9 -9
  35. package/src/theme/config/tokens/color/types.ts +12 -1
  36. package/src/theme/config/tokens/parseTokenKey.ts +1 -0
  37. package/src/theme/config/tokens/parseTokenValue.ts +1 -0
  38. package/src/theme/defaults/colorTokens.ts +127 -66
  39. package/src/theme/index.ts +0 -7
  40. package/src/theme/system/color/_constants.ts +5 -2
  41. package/src/theme/system/color/_system.ts +2 -1
  42. package/src/theme/system/color/avatar.ts +2 -12
  43. package/src/theme/system/color/button.ts +4 -20
  44. package/src/theme/system/color/input.ts +3 -11
  45. package/src/theme/system/color/selectable.ts +3 -14
  46. package/src/theme/system/shadow.ts +0 -6
  47. package/src/theme/system/styles.ts +0 -6
  48. package/src/theme/system/theme.ts +2 -0
  49. package/src/theme/system/v0/avatar.ts +1 -1
  50. package/src/theme/system/v0/color/button.ts +4 -4
  51. package/src/theme/system/v0/color/card.ts +2 -2
  52. package/src/theme/system/v0/color/input.ts +3 -3
  53. package/src/theme/system/v0/color/muted.ts +2 -2
  54. package/src/theme/system/v0/color/solid.ts +2 -2
  55. package/src/theme/versioning/themeColor_v0_v2.ts +2 -2
  56. package/src/theme/versioning/v2_v0.ts +2 -2
  57. package/src/theme/build/colorToken.ts +0 -39
package/dist/index.js CHANGED
@@ -21,6 +21,16 @@ function _interopDefaultCompat(e) {
21
21
  var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
22
22
  var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
23
23
  var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
24
+ const createColorTheme = theme.createColorTheme;
25
+ const hexToRgb = theme.hexToRgb;
26
+ const hslToRgb = theme.hslToRgb;
27
+ const multiply = theme.multiply;
28
+ const parseColor = theme.parseColor;
29
+ const rgbToHex = theme.rgbToHex;
30
+ const rgbToHsl = theme.rgbToHsl;
31
+ const rgba = theme.rgba;
32
+ const screen = theme.screen;
33
+ const studioTheme = theme.buildTheme();
24
34
  const EMPTY_ARRAY = [];
25
35
  const EMPTY_RECORD = {};
26
36
  function _fillCSSObject(keys, value) {
@@ -3002,7 +3012,7 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
3002
3012
  }));
3003
3013
  var _a$o;
3004
3014
  function kbdStyle() {
3005
- return styled.css(_a$o || (_a$o = __template$o(["\n --card-bg-color: var(--card-kbd-bg-color);\n --card-border-color: var(--card-kbd-border-color);\n --card-fg-color: var(--card-kbd-fg-color);\n\n box-shadow: inset 0 0 0 1px var(--card-border-color);\n background: var(--card-bg-color);\n font: inherit;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
3015
+ return styled.css(_a$o || (_a$o = __template$o(["\n --card-bg-color: var(--card-kbd-bg-color);\n --card-border-color: var(--card-kbd-border-color);\n --card-fg-color: var(--card-kbd-fg-color);\n\n box-shadow: inset 0 0 0 1px var(--card-border-color);\n background: var(--card-bg-color);\n font: inherit;\n\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
3006
3016
  }
3007
3017
  const Root$m = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
3008
3018
  const KBD = react.forwardRef(function KBD2(props, ref) {
@@ -7629,222 +7639,6 @@ const TreeItem = react.memo(function TreeItem2(props) {
7629
7639
  })]
7630
7640
  });
7631
7641
  });
7632
- Object.defineProperty(exports, 'COLOR_CONFIG_BLEND_KEYS', {
7633
- enumerable: true,
7634
- get: function () {
7635
- return theme.COLOR_CONFIG_BLEND_KEYS;
7636
- }
7637
- });
7638
- Object.defineProperty(exports, 'COLOR_CONFIG_CARD_KEYS', {
7639
- enumerable: true,
7640
- get: function () {
7641
- return theme.COLOR_CONFIG_CARD_KEYS;
7642
- }
7643
- });
7644
- Object.defineProperty(exports, 'COLOR_CONFIG_CARD_TONES', {
7645
- enumerable: true,
7646
- get: function () {
7647
- return theme.COLOR_CONFIG_CARD_TONES;
7648
- }
7649
- });
7650
- Object.defineProperty(exports, 'COLOR_CONFIG_STATE_KEYS', {
7651
- enumerable: true,
7652
- get: function () {
7653
- return theme.COLOR_CONFIG_STATE_KEYS;
7654
- }
7655
- });
7656
- Object.defineProperty(exports, 'COLOR_CONFIG_STATE_TONES', {
7657
- enumerable: true,
7658
- get: function () {
7659
- return theme.COLOR_CONFIG_STATE_TONES;
7660
- }
7661
- });
7662
- Object.defineProperty(exports, 'THEME_COLOR_BLEND_MODES', {
7663
- enumerable: true,
7664
- get: function () {
7665
- return theme.THEME_COLOR_BLEND_MODES;
7666
- }
7667
- });
7668
- Object.defineProperty(exports, 'THEME_COLOR_BUTTON_MODES', {
7669
- enumerable: true,
7670
- get: function () {
7671
- return theme.THEME_COLOR_BUTTON_MODES;
7672
- }
7673
- });
7674
- Object.defineProperty(exports, 'THEME_COLOR_CARD_TONES', {
7675
- enumerable: true,
7676
- get: function () {
7677
- return theme.THEME_COLOR_CARD_TONES;
7678
- }
7679
- });
7680
- Object.defineProperty(exports, 'THEME_COLOR_STATES', {
7681
- enumerable: true,
7682
- get: function () {
7683
- return theme.THEME_COLOR_STATES;
7684
- }
7685
- });
7686
- Object.defineProperty(exports, 'THEME_COLOR_STATE_TONES', {
7687
- enumerable: true,
7688
- get: function () {
7689
- return theme.THEME_COLOR_STATE_TONES;
7690
- }
7691
- });
7692
- Object.defineProperty(exports, 'buildTheme', {
7693
- enumerable: true,
7694
- get: function () {
7695
- return theme.buildTheme;
7696
- }
7697
- });
7698
- Object.defineProperty(exports, 'createColorTheme', {
7699
- enumerable: true,
7700
- get: function () {
7701
- return theme.createColorTheme;
7702
- }
7703
- });
7704
- Object.defineProperty(exports, 'hexToRgb', {
7705
- enumerable: true,
7706
- get: function () {
7707
- return theme.hexToRgb;
7708
- }
7709
- });
7710
- Object.defineProperty(exports, 'hslToRgb', {
7711
- enumerable: true,
7712
- get: function () {
7713
- return theme.hslToRgb;
7714
- }
7715
- });
7716
- Object.defineProperty(exports, 'isColorBlendModeValue', {
7717
- enumerable: true,
7718
- get: function () {
7719
- return theme.isColorBlendModeValue;
7720
- }
7721
- });
7722
- Object.defineProperty(exports, 'isColorButtonMode', {
7723
- enumerable: true,
7724
- get: function () {
7725
- return theme.isColorButtonMode;
7726
- }
7727
- });
7728
- Object.defineProperty(exports, 'isColorConfigBaseKey', {
7729
- enumerable: true,
7730
- get: function () {
7731
- return theme.isColorConfigBaseKey;
7732
- }
7733
- });
7734
- Object.defineProperty(exports, 'isColorConfigBaseTone', {
7735
- enumerable: true,
7736
- get: function () {
7737
- return theme.isColorConfigBaseTone;
7738
- }
7739
- });
7740
- Object.defineProperty(exports, 'isColorConfigBlendKey', {
7741
- enumerable: true,
7742
- get: function () {
7743
- return theme.isColorConfigBlendKey;
7744
- }
7745
- });
7746
- Object.defineProperty(exports, 'isColorConfigStateKey', {
7747
- enumerable: true,
7748
- get: function () {
7749
- return theme.isColorConfigStateKey;
7750
- }
7751
- });
7752
- Object.defineProperty(exports, 'isColorConfigStateTone', {
7753
- enumerable: true,
7754
- get: function () {
7755
- return theme.isColorConfigStateTone;
7756
- }
7757
- });
7758
- Object.defineProperty(exports, 'isColorHueKey', {
7759
- enumerable: true,
7760
- get: function () {
7761
- return theme.isColorHueKey;
7762
- }
7763
- });
7764
- Object.defineProperty(exports, 'isColorOpacityValue', {
7765
- enumerable: true,
7766
- get: function () {
7767
- return theme.isColorOpacityValue;
7768
- }
7769
- });
7770
- Object.defineProperty(exports, 'isColorTintKey', {
7771
- enumerable: true,
7772
- get: function () {
7773
- return theme.isColorTintKey;
7774
- }
7775
- });
7776
- Object.defineProperty(exports, 'isColorTokenValue', {
7777
- enumerable: true,
7778
- get: function () {
7779
- return theme.isColorTokenValue;
7780
- }
7781
- });
7782
- Object.defineProperty(exports, 'isColorValue', {
7783
- enumerable: true,
7784
- get: function () {
7785
- return theme.isColorValue;
7786
- }
7787
- });
7788
- Object.defineProperty(exports, 'multiply', {
7789
- enumerable: true,
7790
- get: function () {
7791
- return theme.multiply;
7792
- }
7793
- });
7794
- Object.defineProperty(exports, 'parseColor', {
7795
- enumerable: true,
7796
- get: function () {
7797
- return theme.parseColor;
7798
- }
7799
- });
7800
- Object.defineProperty(exports, 'parseTokenKey', {
7801
- enumerable: true,
7802
- get: function () {
7803
- return theme.parseTokenKey;
7804
- }
7805
- });
7806
- Object.defineProperty(exports, 'parseTokenValue', {
7807
- enumerable: true,
7808
- get: function () {
7809
- return theme.parseTokenValue;
7810
- }
7811
- });
7812
- Object.defineProperty(exports, 'rgbToHex', {
7813
- enumerable: true,
7814
- get: function () {
7815
- return theme.rgbToHex;
7816
- }
7817
- });
7818
- Object.defineProperty(exports, 'rgbToHsl', {
7819
- enumerable: true,
7820
- get: function () {
7821
- return theme.rgbToHsl;
7822
- }
7823
- });
7824
- Object.defineProperty(exports, 'rgba', {
7825
- enumerable: true,
7826
- get: function () {
7827
- return theme.rgba;
7828
- }
7829
- });
7830
- Object.defineProperty(exports, 'rgbaToRGBA', {
7831
- enumerable: true,
7832
- get: function () {
7833
- return theme.rgbaToRGBA;
7834
- }
7835
- });
7836
- Object.defineProperty(exports, 'screen', {
7837
- enumerable: true,
7838
- get: function () {
7839
- return theme.screen;
7840
- }
7841
- });
7842
- Object.defineProperty(exports, 'studioTheme', {
7843
- enumerable: true,
7844
- get: function () {
7845
- return theme.defaultTheme;
7846
- }
7847
- });
7848
7642
  exports.Arrow = Arrow;
7849
7643
  exports.Autocomplete = Autocomplete;
7850
7644
  exports.Avatar = Avatar;
@@ -7921,8 +7715,11 @@ exports._raf2 = _raf2;
7921
7715
  exports._responsive = _responsive;
7922
7716
  exports.attemptFocus = attemptFocus;
7923
7717
  exports.containsOrEqualsElement = containsOrEqualsElement;
7718
+ exports.createColorTheme = createColorTheme;
7924
7719
  exports.focusFirstDescendant = focusFirstDescendant;
7925
7720
  exports.focusLastDescendant = focusLastDescendant;
7721
+ exports.hexToRgb = hexToRgb;
7722
+ exports.hslToRgb = hslToRgb;
7926
7723
  exports.isFocusable = isFocusable;
7927
7724
  exports.isHTMLAnchorElement = isHTMLAnchorElement;
7928
7725
  exports.isHTMLButtonElement = isHTMLButtonElement;
@@ -7930,12 +7727,19 @@ exports.isHTMLElement = isHTMLElement;
7930
7727
  exports.isHTMLInputElement = isHTMLInputElement;
7931
7728
  exports.isHTMLSelectElement = isHTMLSelectElement;
7932
7729
  exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
7730
+ exports.multiply = multiply;
7731
+ exports.parseColor = parseColor;
7933
7732
  exports.rem = rem;
7934
7733
  exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
7935
7734
  exports.responsiveHeadingFont = responsiveHeadingFont;
7936
7735
  exports.responsiveLabelFont = responsiveLabelFont;
7937
7736
  exports.responsiveTextAlignStyle = responsiveTextAlignStyle;
7938
7737
  exports.responsiveTextFont = responsiveTextFont;
7738
+ exports.rgbToHex = rgbToHex;
7739
+ exports.rgbToHsl = rgbToHsl;
7740
+ exports.rgba = rgba;
7741
+ exports.screen = screen;
7742
+ exports.studioTheme = studioTheme;
7939
7743
  exports.useArrayProp = useArrayProp;
7940
7744
  exports.useBoundaryElement = useBoundaryElement;
7941
7745
  exports.useClickOutside = useClickOutside;