@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.
- package/dist/index.cjs.mjs +10 -36
- package/dist/index.d.ts +179 -238
- package/dist/index.esm.js +13 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +21 -217
- package/dist/index.js.map +1 -1
- package/dist/theme.cjs.mjs +1 -1
- package/dist/theme.d.ts +75 -111
- package/dist/theme.esm.js +154 -92
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +154 -92
- package/dist/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/core/_compat.ts +236 -87
- package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +6 -3
- package/src/core/primitives/kbd/kbd.tsx +2 -0
- package/src/core/styles/margin/marginsStyle.test.ts +2 -2
- package/src/core/styles/padding/paddingStyle.test.ts +2 -2
- package/src/core/theme/__workshop__/build/Root.tsx +20 -3
- package/src/core/theme/__workshop__/build/story.tsx +16 -10
- package/src/core/theme/__workshop__/canvas.tsx +7 -7
- package/src/core/theme/__workshop__/debug/story.tsx +159 -0
- package/src/core/theme/__workshop__/index.ts +5 -0
- package/src/core/theme/theme.test.tsx +2 -2
- package/src/core/types/button.ts +1 -2
- package/src/theme/build/_deprecated/color/factory.ts +3 -3
- package/src/theme/build/buildColorTheme.ts +16 -16
- package/src/theme/build/colorToken/colorToken.ts +19 -0
- package/src/theme/build/colorToken/compileColorToken.ts +17 -0
- package/src/theme/build/colorToken/index.ts +2 -0
- package/src/theme/build/colorToken/types.ts +6 -0
- package/src/theme/build/renderColorTheme.ts +14 -15
- package/src/theme/build/renderColorValue.ts +1 -1
- package/src/theme/config/system.ts +9 -9
- package/src/theme/config/tokens/color/types.ts +12 -1
- package/src/theme/config/tokens/parseTokenKey.ts +1 -0
- package/src/theme/config/tokens/parseTokenValue.ts +1 -0
- package/src/theme/defaults/colorTokens.ts +127 -66
- package/src/theme/index.ts +0 -7
- package/src/theme/system/color/_constants.ts +5 -2
- package/src/theme/system/color/_system.ts +2 -1
- package/src/theme/system/color/avatar.ts +2 -12
- package/src/theme/system/color/button.ts +4 -20
- package/src/theme/system/color/input.ts +3 -11
- package/src/theme/system/color/selectable.ts +3 -14
- package/src/theme/system/shadow.ts +0 -6
- package/src/theme/system/styles.ts +0 -6
- package/src/theme/system/theme.ts +2 -0
- package/src/theme/system/v0/avatar.ts +1 -1
- package/src/theme/system/v0/color/button.ts +4 -4
- package/src/theme/system/v0/color/card.ts +2 -2
- package/src/theme/system/v0/color/input.ts +3 -3
- package/src/theme/system/v0/color/muted.ts +2 -2
- package/src/theme/system/v0/color/solid.ts +2 -2
- package/src/theme/versioning/themeColor_v0_v2.ts +2 -2
- package/src/theme/versioning/v2_v0.ts +2 -2
- 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;
|