@sanity/ui 2.0.4 → 2.0.5
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.esm.js +1636 -397
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1636 -397
- package/dist/index.js.map +1 -1
- package/dist/theme.esm.js +27 -29
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +27 -29
- package/dist/theme.js.map +1 -1
- package/package.json +21 -21
package/dist/theme.esm.js
CHANGED
|
@@ -1229,7 +1229,7 @@ function inputStateThemeColor_v0_v2(state) {
|
|
|
1229
1229
|
|
|
1230
1230
|
const cache$3 = /* @__PURE__ */ new WeakMap();
|
|
1231
1231
|
function getTheme_v2(theme) {
|
|
1232
|
-
var _a
|
|
1232
|
+
var _a;
|
|
1233
1233
|
if ((_a = theme.sanity.v2) == null ? void 0 : _a._resolved)
|
|
1234
1234
|
return theme.sanity.v2;
|
|
1235
1235
|
const cached_v2 = cache$3.get(theme);
|
|
@@ -1266,7 +1266,7 @@ function getTheme_v2(theme) {
|
|
|
1266
1266
|
...theme.sanity.input.switch
|
|
1267
1267
|
}
|
|
1268
1268
|
},
|
|
1269
|
-
layer:
|
|
1269
|
+
layer: theme.sanity.layer ?? defaultThemeConfig.layer,
|
|
1270
1270
|
media: theme.sanity.media,
|
|
1271
1271
|
radius: theme.sanity.radius,
|
|
1272
1272
|
shadow: theme.sanity.shadows,
|
|
@@ -1355,7 +1355,7 @@ function v0_v2(v0) {
|
|
|
1355
1355
|
...input.switch
|
|
1356
1356
|
}
|
|
1357
1357
|
},
|
|
1358
|
-
layer: layer
|
|
1358
|
+
layer: layer ?? defaultThemeConfig.layer,
|
|
1359
1359
|
media,
|
|
1360
1360
|
radius,
|
|
1361
1361
|
shadow,
|
|
@@ -1727,13 +1727,13 @@ function compileColorTokenValue(node) {
|
|
|
1727
1727
|
if (node.key === "black" || node.key === "white") {
|
|
1728
1728
|
key = node.key;
|
|
1729
1729
|
} else {
|
|
1730
|
-
key =
|
|
1730
|
+
key = `${node.hue}/${node.tint}`;
|
|
1731
1731
|
}
|
|
1732
1732
|
if (node.mix !== void 0) {
|
|
1733
|
-
return
|
|
1733
|
+
return `${key} ${node.mix * 100}%`;
|
|
1734
1734
|
}
|
|
1735
1735
|
if (node.opacity !== void 0) {
|
|
1736
|
-
key +=
|
|
1736
|
+
key += `/${node.opacity}`;
|
|
1737
1737
|
}
|
|
1738
1738
|
return key;
|
|
1739
1739
|
}
|
|
@@ -1743,7 +1743,7 @@ function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
|
|
|
1743
1743
|
const { hue, scheme } = context;
|
|
1744
1744
|
const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
|
|
1745
1745
|
if (!node || node.type !== "color") {
|
|
1746
|
-
throw new Error(
|
|
1746
|
+
throw new Error(`Invalid color token: ${value[0]}`);
|
|
1747
1747
|
}
|
|
1748
1748
|
return compileColorTokenValue({ ...node, hue: node.hue || hue });
|
|
1749
1749
|
}
|
|
@@ -2995,7 +2995,7 @@ function rgbToHex(color) {
|
|
|
2995
2995
|
const g = round(clamp(Math.round(color.g), 0, 255));
|
|
2996
2996
|
const b = round(clamp(Math.round(color.b), 0, 255));
|
|
2997
2997
|
if ("a" in color) {
|
|
2998
|
-
return
|
|
2998
|
+
return `rgba(${r},${g},${b},${color.a})`;
|
|
2999
2999
|
}
|
|
3000
3000
|
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
3001
3001
|
}
|
|
@@ -3087,7 +3087,7 @@ function isHex(str) {
|
|
|
3087
3087
|
function parseHsl(str) {
|
|
3088
3088
|
const res = HSL_RE.exec(str);
|
|
3089
3089
|
if (!res) {
|
|
3090
|
-
throw new Error(
|
|
3090
|
+
throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
|
|
3091
3091
|
}
|
|
3092
3092
|
return { h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5]) };
|
|
3093
3093
|
}
|
|
@@ -3106,7 +3106,7 @@ function parseColor(color) {
|
|
|
3106
3106
|
if (color.startsWith("rgba(")) {
|
|
3107
3107
|
return rgbaToRGBA(color);
|
|
3108
3108
|
}
|
|
3109
|
-
throw new Error(
|
|
3109
|
+
throw new Error(`parseColor: unexpected color format: "${color}"`);
|
|
3110
3110
|
}
|
|
3111
3111
|
|
|
3112
3112
|
function getContrastRatio(bg, fg) {
|
|
@@ -3130,7 +3130,7 @@ function lrgb_luminance([r, g, b]) {
|
|
|
3130
3130
|
|
|
3131
3131
|
function rgba(color, a) {
|
|
3132
3132
|
const rgb = parseColor(color);
|
|
3133
|
-
return
|
|
3133
|
+
return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
|
|
3134
3134
|
}
|
|
3135
3135
|
|
|
3136
3136
|
const RGB_RANGE = [0, 255];
|
|
@@ -3171,7 +3171,7 @@ function renderColorValue(str, options) {
|
|
|
3171
3171
|
}
|
|
3172
3172
|
const node = parseTokenValue(str);
|
|
3173
3173
|
if (!node || node.type !== "color") {
|
|
3174
|
-
throw new Error(
|
|
3174
|
+
throw new Error(`Invalid color token value: ${str}`);
|
|
3175
3175
|
}
|
|
3176
3176
|
let hex = "";
|
|
3177
3177
|
if (node.key === "black") {
|
|
@@ -3184,7 +3184,7 @@ function renderColorValue(str, options) {
|
|
|
3184
3184
|
hex = renderColorHex(colorPalette[node.hue][node.tint]);
|
|
3185
3185
|
}
|
|
3186
3186
|
if (!hex) {
|
|
3187
|
-
throw new Error(
|
|
3187
|
+
throw new Error(`Invalid color token value: ${str}`);
|
|
3188
3188
|
}
|
|
3189
3189
|
const hexBeforeMix = hex;
|
|
3190
3190
|
const mixOptions = {
|
|
@@ -3206,7 +3206,7 @@ function renderColorValue(str, options) {
|
|
|
3206
3206
|
throw err;
|
|
3207
3207
|
}
|
|
3208
3208
|
if (hex === "#aN") {
|
|
3209
|
-
console.warn(
|
|
3209
|
+
console.warn(`invalid color token value: ${str}`);
|
|
3210
3210
|
hex = hexBeforeMix;
|
|
3211
3211
|
}
|
|
3212
3212
|
if (node.opacity !== void 0) {
|
|
@@ -3219,8 +3219,7 @@ function renderColorHex(color) {
|
|
|
3219
3219
|
}
|
|
3220
3220
|
|
|
3221
3221
|
function renderThemeColorSchemes(value, config) {
|
|
3222
|
-
|
|
3223
|
-
const colorPalette = (_a = config == null ? void 0 : config.palette) != null ? _a : defaultColorPalette;
|
|
3222
|
+
const colorPalette = (config == null ? void 0 : config.palette) ?? defaultColorPalette;
|
|
3224
3223
|
return {
|
|
3225
3224
|
light: renderThemeColorScheme(colorPalette, value.light),
|
|
3226
3225
|
dark: renderThemeColorScheme(colorPalette, value.dark)
|
|
@@ -3560,28 +3559,27 @@ function renderSyntaxColorTheme(value, options) {
|
|
|
3560
3559
|
}
|
|
3561
3560
|
|
|
3562
3561
|
function buildTheme(config) {
|
|
3563
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
3564
3562
|
const colorTheme = buildColorTheme(config);
|
|
3565
3563
|
const v2 = {
|
|
3566
3564
|
_version: 2,
|
|
3567
|
-
avatar: (
|
|
3568
|
-
button: (
|
|
3569
|
-
card: (
|
|
3565
|
+
avatar: (config == null ? void 0 : config.avatar) ?? defaultThemeConfig.avatar,
|
|
3566
|
+
button: (config == null ? void 0 : config.button) ?? defaultThemeConfig.button,
|
|
3567
|
+
card: (config == null ? void 0 : config.card) ?? defaultThemeConfig.card,
|
|
3570
3568
|
// How colors are generated:
|
|
3571
3569
|
// 1. Merge custom tokens with default tokens
|
|
3572
3570
|
// 2. Generate tree of color keys (gray/500, black, white, etc.)
|
|
3573
3571
|
// 3. Apply mixing and render to hex values
|
|
3574
3572
|
// render(build(mergeWithDefaults()))
|
|
3575
3573
|
color: renderThemeColorSchemes(colorTheme, config),
|
|
3576
|
-
container: (
|
|
3577
|
-
font: (
|
|
3578
|
-
input: (
|
|
3579
|
-
layer: (
|
|
3580
|
-
media: (
|
|
3581
|
-
radius: (
|
|
3582
|
-
shadow: (
|
|
3583
|
-
space: (
|
|
3584
|
-
style: (
|
|
3574
|
+
container: (config == null ? void 0 : config.container) ?? defaultThemeConfig.container,
|
|
3575
|
+
font: (config == null ? void 0 : config.font) ?? defaultThemeFonts,
|
|
3576
|
+
input: (config == null ? void 0 : config.input) ?? defaultThemeConfig.input,
|
|
3577
|
+
layer: (config == null ? void 0 : config.layer) ?? defaultThemeConfig.layer,
|
|
3578
|
+
media: (config == null ? void 0 : config.media) ?? defaultThemeConfig.media,
|
|
3579
|
+
radius: (config == null ? void 0 : config.radius) ?? defaultThemeConfig.radius,
|
|
3580
|
+
shadow: (config == null ? void 0 : config.shadow) ?? defaultThemeConfig.shadow,
|
|
3581
|
+
space: (config == null ? void 0 : config.space) ?? defaultThemeConfig.space,
|
|
3582
|
+
style: (config == null ? void 0 : config.style) ?? defaultThemeConfig.style
|
|
3585
3583
|
};
|
|
3586
3584
|
return v2_v0(v2);
|
|
3587
3585
|
}
|