@sanity/ui 2.0.0-alpha.1 → 2.0.0-alpha.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.d.ts +9 -4
- package/dist/index.esm.js +4 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/theme/lib/theme/theme.ts +9 -4
- package/src/theme/studioTheme/theme.ts +4 -0
- package/src/theme/studioTheme/tints.ts +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sanity/ui",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.3",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"types": "./dist/index.d.ts",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@floating-ui/react-dom": "2.0.0",
|
|
55
|
-
"@sanity/color": "
|
|
55
|
+
"@sanity/color": "3.0.0-beta.3",
|
|
56
56
|
"@sanity/icons": "^2.4.1",
|
|
57
57
|
"csstype": "^3.1.2",
|
|
58
58
|
"framer-motion": "^10.16.2",
|
|
@@ -18,9 +18,18 @@ export interface BaseTheme<
|
|
|
18
18
|
textWeight: ThemeFontWeightKey
|
|
19
19
|
focusRing: FocusRing
|
|
20
20
|
}
|
|
21
|
+
card: {
|
|
22
|
+
focusRing: FocusRing
|
|
23
|
+
}
|
|
21
24
|
color: ThemeColorSchemes
|
|
22
25
|
container: number[]
|
|
26
|
+
/** @deprecated Use component-specific `focusRing` values instead */
|
|
27
|
+
focusRing: {
|
|
28
|
+
offset: number
|
|
29
|
+
width: number
|
|
30
|
+
}
|
|
23
31
|
fonts: ThemeFonts
|
|
32
|
+
input: ThemeInput
|
|
24
33
|
/**
|
|
25
34
|
* THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
|
|
26
35
|
* @beta
|
|
@@ -30,9 +39,5 @@ export interface BaseTheme<
|
|
|
30
39
|
radius: number[]
|
|
31
40
|
shadows: Array<ThemeShadow | null>
|
|
32
41
|
space: number[]
|
|
33
|
-
input: ThemeInput
|
|
34
|
-
card: {
|
|
35
|
-
focusRing: FocusRing
|
|
36
|
-
}
|
|
37
42
|
styles?: Styles
|
|
38
43
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* e.g. for positive theme: `{"bg_base": "white", "bg_base_hover": "gray/50", "bg_base_active": "cyan/50"}
|
|
5
5
|
* This is not possible in the previous configuration, as each ThemeColor uses only one tint.
|
|
6
6
|
*/
|
|
7
|
-
import {ColorTintKey,
|
|
7
|
+
import {ColorTintKey, ColorTint, ColorTints, black, hues, white} from '@sanity/color'
|
|
8
8
|
import {ThemeColorName, ThemeColorSchemeKey} from '../lib/theme'
|
|
9
9
|
|
|
10
10
|
export const colorKeys = [
|
|
@@ -27,7 +27,7 @@ export const colorKeys = [
|
|
|
27
27
|
|
|
28
28
|
export type ColorKey = (typeof colorKeys)[number]
|
|
29
29
|
|
|
30
|
-
type ColorTintsDictionary = Record<ColorKey,
|
|
30
|
+
type ColorTintsDictionary = Record<ColorKey, ColorTint | ColorTintKey>
|
|
31
31
|
const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
|
|
32
32
|
light: {
|
|
33
33
|
text_primary: '900',
|
|
@@ -132,7 +132,7 @@ export const getColorValue = (
|
|
|
132
132
|
dark: boolean,
|
|
133
133
|
tone: ThemeColorName,
|
|
134
134
|
key: ColorKey,
|
|
135
|
-
):
|
|
135
|
+
): ColorTint => {
|
|
136
136
|
const value = colorTints[dark ? 'dark' : 'light'][tone][key]
|
|
137
137
|
|
|
138
138
|
if (typeof value === 'string') {
|