-
Notifications
You must be signed in to change notification settings - Fork 18
/
theme.ts
78 lines (77 loc) · 1.87 KB
/
theme.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
71
72
73
74
75
76
77
78
import {RootTheme} from '../types'
import {color} from './color'
import {fonts} from './fonts'
/**
* @public
*/
export const studioTheme: RootTheme = {
avatar: {
sizes: [
{distance: -3, size: 25},
{distance: -6, size: 35},
{distance: -9, size: 55},
],
focusRing: {offset: 1, width: 1},
},
button: {
textWeight: 'medium',
focusRing: {offset: -1, width: 1},
},
card: {
focusRing: {offset: -1, width: 1},
},
color,
container: [320, 640, 960, 1280, 1600, 1920],
fonts,
media: [360, 600, 900, 1200, 1800, 2400],
radius: [0, 1, 3, 6, 9, 12, 21],
shadows: [
null,
{umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
{umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
{umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
{umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
{umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
],
space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
input: {
checkbox: {
size: 17,
focusRing: {offset: -1, width: 1},
},
radio: {
size: 17,
markSize: 9,
focusRing: {offset: -1, width: 1},
},
switch: {
width: 21,
height: 13,
padding: 2,
transitionDurationMs: 150,
transitionTimingFunction: 'ease-out',
focusRing: {offset: 1, width: 1},
},
border: {
width: 1,
},
select: {
focusRing: {offset: -1, width: 1},
},
text: {
focusRing: {offset: -1, width: 1},
},
},
// styles: {
// button: {
// root: {
// transition: 'background-color 100ms,border-color 100ms,color 100ms',
// },
// },
// card: {
// root: {
// transition: 'background-color 100ms,border-color 100ms,color 100ms',
// },
// },
// },
}