/
index.ts
70 lines (67 loc) · 2.02 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {RootTheme, studioTheme as defaults, ThemeColorSchemes} from '@sanity/ui'
import legacyTheme from 'sanity:css-custom-properties'
// For debugging purposes
declare global {
interface Window {
__sanityLegacyTheme: Record<string, string>
}
}
window.__sanityLegacyTheme = legacyTheme
// NOTE: This mapping is needed only in a transition period between legacy CSS custom properties,
// and the new Theme API provided by Sanity UI.
const color: ThemeColorSchemes = {
...defaults.color,
light: {
...defaults.color.light,
default: {
...defaults.color.light.default,
base: {
...defaults.color.light.default.base,
bg: legacyTheme['--component-bg'],
fg: legacyTheme['--component-text-color'],
border: legacyTheme['--hairline-color'],
},
card: {
...defaults.color.light.default.card,
enabled: {
...defaults.color.light.default.card.enabled,
bg: legacyTheme['--component-bg'],
fg: legacyTheme['--component-text-color'],
border: legacyTheme['--hairline-color'],
},
},
},
transparent: {
...defaults.color.light.transparent,
base: {
...defaults.color.light.transparent.base,
bg: legacyTheme['--body-bg'],
fg: legacyTheme['--body-text'],
border: legacyTheme['--hairline-color'],
},
card: {
...defaults.color.light.transparent.card,
enabled: {
...defaults.color.light.transparent.card.enabled,
bg: legacyTheme['--body-bg'],
fg: legacyTheme['--body-text'],
border: legacyTheme['--hairline-color'],
},
},
},
},
}
export const theme: RootTheme = {
...defaults,
color,
focusRing: {
offset: -1,
width: 2,
},
media: [
parseInt(legacyTheme['--screen-medium-break'], 10) || 512,
parseInt(legacyTheme['--screen-default-break'], 10) || 640,
parseInt(legacyTheme['--screen-large-break'], 10) || 960,
parseInt(legacyTheme['--screen-xlarge-break'], 10) || 1600,
],
}