-
Notifications
You must be signed in to change notification settings - Fork 3
/
theme.js
96 lines (95 loc) · 2.52 KB
/
theme.js
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const theme = {
breakpoints: [32, 48, 64],
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fontSizes: [12, 14, 16, 20, 24, 36, 48, 80, 96],
fontWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
lineHeights: {
solid: 1,
title: 1.25,
copy: 1.5,
},
letterSpacings: {
normal: 'normal',
tracked: '0.1em',
tight: '-0.05em',
mega: '0.25em',
},
fonts: {
serif: 'athelas, georgia, times, serif',
sansSerif:
'-apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif',
},
borders: [0, '1px solid', '2px solid', '4px solid', '8px solid', '16px solid', '32px solid'],
radii: [0, 2, 4, 16, 9999, '100%'],
width: [16, 32, 64, 128, 256],
heights: [16, 32, 64, 128, 256],
maxWidths: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
colors: {
black: '#000',
'near-black': '#111',
'dark-gray': '#333',
'mid-gray': '#555',
gray: ' #777',
silver: '#999',
'light-silver': '#aaa',
'moon-gray': '#ccc',
'light-gray': '#eee',
'near-white': '#f4f4f4',
'pure-white': '#fff',
transparent: 'transparent',
blacks: [
'rgba(0,0,0,.0125)',
'rgba(0,0,0,.025)',
'rgba(0,0,0,.05)',
'rgba(0,0,0,.1)',
'rgba(0,0,0,.2)',
'rgba(0,0,0,.3)',
'rgba(0,0,0,.4)',
'rgba(0,0,0,.5)',
'rgba(0,0,0,.6)',
'rgba(0,0,0,.7)',
'rgba(0,0,0,.8)',
'rgba(0,0,0,.9)',
],
white: [
'rgba(255,255,255,.0125)',
'rgba(255,255,255,.025)',
'rgba(255,255,255,.05)',
'rgba(255,255,255,.1)',
'rgba(255,255,255,.2)',
'rgba(255,255,255,.3)',
'rgba(255,255,255,.4)',
'rgba(255,255,255,.5)',
'rgba(255,255,255,.6)',
'rgba(255,255,255,.7)',
'rgba(255,255,255,.8)',
'rgba(255,255,255,.9)',
],
'dark-red': '#e7040f',
red: '#ff4136',
'light-red': '#ff725c',
orange: '#ff6300',
gold: '#ffb700',
yellow: '#ffd700',
'light-yellow': '#fbf1a9',
purple: '#5e2ca5',
'light-purple': '#a463f2',
'dark-pink': '#d5008f',
'hot-pink': ' #ff41b4',
pink: '#ff80cc',
'light-pink': '#ffa3d7',
'dark-green': '#137752',
green: '#19a974',
'light-green': '#9eebcf',
navy: '#001b44',
'dark-blue': '#00449e',
blue: '#357edd',
'light-blue': '#96ccff',
'lightest-blue': '#cdecff',
'washed-blue': '#f6fffe',
'washed-green': '#e8fdf5',
'washed-yellow': '#fffceb',
'washed-red': '#ffdfdf',
},
};
export default theme;