Skip to content

Commit ad3b9fb

Browse files
igorwesseligorwessel
committed
feat: defaultTheme for react-native
1 parent d41f223 commit ad3b9fb

File tree

2 files changed

+387
-0
lines changed

2 files changed

+387
-0
lines changed

‎packages/styled-components-native/src/defaultTheme.ts‎

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
const space = {
2+
0: '0px',
3+
1: '4px',
4+
2: '8px',
5+
3: '16px',
6+
4: '24px',
7+
}
8+
9+
const colors = {
10+
black: '#000000',
11+
white: '#ffffff',
12+
13+
'blue-gray-50': '#f8fafc',
14+
'blue-gray-100': '#f1f5f9',
15+
'blue-gray-200': '#e2e8f0',
16+
'blue-gray-300': '#cbd5e1',
17+
'blue-gray-400': '#94a3b8',
18+
'blue-gray-500': '#64748b',
19+
'blue-gray-600': '#475569',
20+
'blue-gray-700': '#334155',
21+
'blue-gray-800': '#1e293b',
22+
'blue-gray-900': '#0f172a',
23+
24+
'cool-gray-50': '#f9fafb',
25+
'cool-gray-100': '#f3f4f6',
26+
'cool-gray-200': '#e5e7eb',
27+
'cool-gray-300': '#d1d5db',
28+
'cool-gray-400': '#9ca3af',
29+
'cool-gray-500': '#6b7280',
30+
'cool-gray-600': '#4b5563',
31+
'cool-gray-700': '#374151',
32+
'cool-gray-800': '#1f2937',
33+
'cool-gray-900': '#111827',
34+
35+
'gray-50': '#fafafa',
36+
'gray-100': '#f4f4f5',
37+
'gray-200': '#e4e4e7',
38+
'gray-300': '#d4d4d8',
39+
'gray-400': '#a1a1aa',
40+
'gray-500': '#71717a',
41+
'gray-600': '#52525b',
42+
'gray-700': '#3f3f46',
43+
'gray-800': '#27272a',
44+
'gray-900': '#18181b',
45+
46+
'true-gray-50': '#fafafa',
47+
'true-gray-100': '#f5f5f5',
48+
'true-gray-200': '#e5e5e5',
49+
'true-gray-300': '#d4d4d4',
50+
'true-gray-400': '#a3a3a3',
51+
'true-gray-500': '#737373',
52+
'true-gray-600': '#525252',
53+
'true-gray-700': '#404040',
54+
'true-gray-800': '#262626',
55+
'true-gray-900': '#171717',
56+
57+
'warm-gray-50': '#fafaf9',
58+
'warm-gray-100': '#f5f5f4',
59+
'warm-gray-200': '#e7e5e4',
60+
'warm-gray-300': '#d6d3d1',
61+
'warm-gray-400': '#a8a29e',
62+
'warm-gray-500': '#78716c',
63+
'warm-gray-600': '#57534e',
64+
'warm-gray-700': '#44403c',
65+
'warm-gray-800': '#292524',
66+
'warm-gray-900': '#1c1917',
67+
68+
'red-50': '#fef2f2',
69+
'red-100': '#fee2e2',
70+
'red-200': '#fecaca',
71+
'red-300': '#fca5a5',
72+
'red-400': '#f87171',
73+
'red-500': '#ef4444',
74+
'red-600': '#dc2626',
75+
'red-700': '#b91c1c',
76+
'red-800': '#991b1b',
77+
'red-900': '#7f1d1d',
78+
79+
'orange-50': '#fff7ed',
80+
'orange-100': '#ffedd5',
81+
'orange-200': '#fed7aa',
82+
'orange-300': '#fdba74',
83+
'orange-400': '#fb923c',
84+
'orange-500': '#f97316',
85+
'orange-600': '#ea580c',
86+
'orange-700': '#c2410c',
87+
'orange-800': '#9a3412',
88+
'orange-900': '#7c2d12',
89+
90+
'amber-50': '#fffbeb',
91+
'amber-100': '#fef3c7',
92+
'amber-200': '#fde68a',
93+
'amber-300': '#fcd34d',
94+
'amber-400': '#fbbf24',
95+
'amber-500': '#f59e0b',
96+
'amber-600': '#d97706',
97+
'amber-700': '#b45309',
98+
'amber-800': '#92400e',
99+
'amber-900': '#78350f',
100+
101+
'yellow-50': '#fefce8',
102+
'yellow-100': '#fef9c3',
103+
'yellow-200': '#fef08a',
104+
'yellow-300': '#fde047',
105+
'yellow-400': '#facc15',
106+
'yellow-500': '#eab308',
107+
'yellow-600': '#ca8a04',
108+
'yellow-700': '#a16207',
109+
'yellow-800': '#854d0e',
110+
'yellow-900': '#713f12',
111+
112+
'lime-50': '#f7fee7',
113+
'lime-100': '#ecfccb',
114+
'lime-200': '#d9f99d',
115+
'lime-300': '#bef264',
116+
'lime-400': '#a3e635',
117+
'lime-500': '#84cc16',
118+
'lime-600': '#65a30d',
119+
'lime-700': '#4d7c0f',
120+
'lime-800': '#3f6212',
121+
'lime-900': '#365314',
122+
123+
'green-50': '#f0fdf4',
124+
'green-100': '#dcfce7',
125+
'green-200': '#bbf7d0',
126+
'green-300': '#86efac',
127+
'green-400': '#4ade80',
128+
'green-500': '#22c55e',
129+
'green-600': '#16a34a',
130+
'green-700': '#15803d',
131+
'green-800': '#166534',
132+
'green-900': '#14532d',
133+
134+
'emerald-50': '#ecfdf5',
135+
'emerald-100': '#d1fae5',
136+
'emerald-200': '#a7f3d0',
137+
'emerald-300': '#6ee7b7',
138+
'emerald-400': '#34d399',
139+
'emerald-500': '#10b981',
140+
'emerald-600': '#059669',
141+
'emerald-700': '#047857',
142+
'emerald-800': '#065f46',
143+
'emerald-900': '#064e3b',
144+
145+
'teal-50': '#f0fdfa',
146+
'teal-100': '#ccfbf1',
147+
'teal-200': '#99f6e4',
148+
'teal-300': '#5eead4',
149+
'teal-400': '#2dd4bf',
150+
'teal-500': '#14b8a6',
151+
'teal-600': '#0d9488',
152+
'teal-700': '#0f766e',
153+
'teal-800': '#115e59',
154+
'teal-900': '#134e4a',
155+
156+
'cyan-50': '#ecfeff',
157+
'cyan-100': '#cffafe',
158+
'cyan-200': '#a5f3fc',
159+
'cyan-300': '#67e8f9',
160+
'cyan-400': '#22d3ee',
161+
'cyan-500': '#06b6d4',
162+
'cyan-600': '#0891b2',
163+
'cyan-700': '#0e7490',
164+
'cyan-800': '#155e75',
165+
'cyan-900': '#164e63',
166+
167+
'light-blue-50': '#f0f9ff',
168+
'light-blue-100': '#e0f2fe',
169+
'light-blue-200': '#bae6fd',
170+
'light-blue-300': '#7dd3fc',
171+
'light-blue-400': '#38bdf8',
172+
'light-blue-500': '#0ea5e9',
173+
'light-blue-600': '#0284c7',
174+
'light-blue-700': '#0369a1',
175+
'light-blue-800': '#075985',
176+
'light-blue-900': '#0c4a6e',
177+
178+
'blue-50': '#eff6ff',
179+
'blue-100': '#dbeafe',
180+
'blue-200': '#bfdbfe',
181+
'blue-300': '#93c5fd',
182+
'blue-400': '#60a5fa',
183+
'blue-500': '#3b82f6',
184+
'blue-600': '#2563eb',
185+
'blue-700': '#1d4ed8',
186+
'blue-800': '#1e40af',
187+
'blue-900': '#1e3a8a',
188+
189+
'indigo-50': '#eef2ff',
190+
'indigo-100': '#e0e7ff',
191+
'indigo-200': '#c7d2fe',
192+
'indigo-300': '#a5b4fc',
193+
'indigo-400': '#818cf8',
194+
'indigo-500': '#6366f1',
195+
'indigo-600': '#4f46e5',
196+
'indigo-700': '#4338ca',
197+
'indigo-800': '#3730a3',
198+
'indigo-900': '#312e81',
199+
200+
'violet-50': '#f5f3ff',
201+
'violet-100': '#ede9fe',
202+
'violet-200': '#ddd6fe',
203+
'violet-300': '#c4b5fd',
204+
'violet-400': '#a78bfa',
205+
'violet-500': '#8b5cf6',
206+
'violet-600': '#7c3aed',
207+
'violet-700': '#6d28d9',
208+
'violet-800': '#5b21b6',
209+
'violet-900': '#4c1d95',
210+
211+
'purple-50': '#faf5ff',
212+
'purple-100': '#f3e8ff',
213+
'purple-200': '#e9d5ff',
214+
'purple-300': '#d8b4fe',
215+
'purple-400': '#c084fc',
216+
'purple-500': '#a855f7',
217+
'purple-600': '#9333ea',
218+
'purple-700': '#7e22ce',
219+
'purple-800': '#6b21a8',
220+
'purple-900': '#581c87',
221+
222+
'fuchsia-50': '#fdf4ff',
223+
'fuchsia-100': '#fae8ff',
224+
'fuchsia-200': '#f5d0fe',
225+
'fuchsia-300': '#f0abfc',
226+
'fuchsia-400': '#e879f9',
227+
'fuchsia-500': '#d946ef',
228+
'fuchsia-600': '#c026d3',
229+
'fuchsia-700': '#a21caf',
230+
'fuchsia-800': '#86198f',
231+
'fuchsia-900': '#701a75',
232+
233+
'pink-50': '#fdf2f8',
234+
'pink-100': '#fce7f3',
235+
'pink-200': '#fbcfe8',
236+
'pink-300': '#f9a8d4',
237+
'pink-400': '#f472b6',
238+
'pink-500': '#ec4899',
239+
'pink-600': '#db2777',
240+
'pink-700': '#be185d',
241+
'pink-800': '#9d174d',
242+
'pink-900': '#831843',
243+
244+
'rose-50': '#fff1f2',
245+
'rose-100': '#ffe4e6',
246+
'rose-200': '#fecdd3',
247+
'rose-300': '#fda4af',
248+
'rose-400': '#fb7185',
249+
'rose-500': '#f43f5e',
250+
'rose-600': '#e11d48',
251+
'rose-700': '#be123c',
252+
'rose-800': '#9f1239',
253+
'rose-900': '#881337',
254+
}
255+
256+
const fontSizes = {
257+
xs: '10px',
258+
sm: '12px',
259+
default: '14px',
260+
lg: '16px',
261+
xl: '18px',
262+
'2xl': '24px',
263+
'3xl': '32px',
264+
'4xl': '40px',
265+
'5xl': '52px',
266+
}
267+
268+
export const defaultTheme = {
269+
colors,
270+
space,
271+
screens: {
272+
xs: 0,
273+
sm: 640,
274+
md: 768,
275+
lg: 1024,
276+
xl: 1280,
277+
'2xl': 1536,
278+
},
279+
280+
sizes: {
281+
...space,
282+
},
283+
radii: {
284+
none: '0',
285+
sm: '2px',
286+
default: '4px',
287+
md: '8px',
288+
lg: '12px',
289+
xl: '16px',
290+
'2xl': '20px',
291+
'3xl': '24px',
292+
full: '9999px',
293+
},
294+
fontSizes,
295+
fontWeights: {
296+
hairline: '100',
297+
thin: '200',
298+
light: '300',
299+
normal: '400',
300+
medium: '500',
301+
semibold: '600',
302+
bold: '700',
303+
extrabold: '800',
304+
black: '900',
305+
},
306+
307+
letterSpacings: {
308+
tighter: '0px',
309+
tight: '0px',
310+
normal: '0px',
311+
wide: '2px',
312+
wider: '4px',
313+
widest: '8px',
314+
},
315+
lineHeights: {
316+
none: 1,
317+
tight: 1.25,
318+
snug: 1.375,
319+
normal: 1.5,
320+
relaxed: 1.625,
321+
loose: 2,
322+
3: '4px',
323+
4: '8px',
324+
5: '12px',
325+
6: '16px',
326+
7: '20px',
327+
8: '24px',
328+
9: '28px',
329+
10: '32px',
330+
},
331+
borderWidths: {
332+
default: 1,
333+
},
334+
ringWidths: {
335+
default: 3,
336+
},
337+
borders: {
338+
default: '1px solid transparent',
339+
},
340+
}

‎packages/styled-components-native/src/theme.test.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from 'react'
2+
import '@testing-library/jest-native/extend-expect'
3+
import { render, cleanup } from '@testing-library/react-native'
4+
import { ThemeProvider } from 'styled-components/native'
5+
import { useTheme, useFontSize } from '.'
6+
7+
afterEach(cleanup)
8+
9+
describe('#useTheme', () => {
10+
it('returns theme', () => {
11+
const theme = { foo: 'bar' }
12+
const spy = jest.fn()
13+
function ThemeLogger() {
14+
const theme = useTheme()
15+
React.useEffect(() => {
16+
spy(theme)
17+
}, [theme])
18+
return null
19+
}
20+
render(
21+
<ThemeProvider theme={theme}>
22+
<ThemeLogger />
23+
</ThemeProvider>,
24+
)
25+
expect(spy).toHaveBeenCalledWith(theme)
26+
})
27+
})
28+
29+
describe('#useFontSize', () => {
30+
it('gets value from theme', () => {
31+
const theme = { fontSizes: { md: '20px' } }
32+
const spy = jest.fn()
33+
function Logger() {
34+
const fontSize = useFontSize('md')
35+
React.useEffect(() => {
36+
spy(fontSize)
37+
}, [fontSize])
38+
return null
39+
}
40+
render(
41+
<ThemeProvider theme={theme}>
42+
<Logger />
43+
</ThemeProvider>,
44+
)
45+
expect(spy).toHaveBeenCalledWith('20px')
46+
})
47+
})

0 commit comments

Comments
 (0)