kitten.sh
1import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
2import './theme.css';
3
4const systemFonts = [
5 '-apple-system',
6 'BlinkMacSystemFont',
7 'Segoe UI',
8 'Roboto',
9 'Helvetica Neue',
10 'Arial',
11 'Noto Sans',
12 'sans-serif',
13 'Apple Color Emoji',
14 'Segoe UI Emoji',
15 'Segoe UI Symbol',
16 'Noto Color Emoji'
17];
18
19export const fonts = {
20 header: ['phantom-sans', ...systemFonts],
21 code: ['space-mono', 'monospace'],
22 body: systemFonts
23};
24
25export const colors = {
26 bg: '#ffffff',
27 bgPassive: '#f0f0f2',
28 bgActive: '#fcfafe',
29 fg: '#36313d',
30 fgHeading: '#000000',
31 fgPassive: '#78757a',
32 fgActive: '#f5735f'
33};
34
35export const prismTheme = nightOwlLight;
36export const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 96];
37export const fontWeights = ['300', '400', '500', '700', '800'];
38export const letterSpacings = ['normal', '0.01em', '0.05em', '0.1em'];
39export const borderWidths = ['1px', '0.1rem', '0.25rem'];
40export const space = [0, 4, 8, 16, 32, 64];
41export const sizes = [0, 64, 260, 430, 540, 650, 870, 980, 1400];
42export const breakpoints = ['55em', '70em'];
43export const radii = [4, 8, 16];
44export const zIndices = [0, 1, 2, 3];
45
46export const borders = [
47 `${borderWidths[0]} solid ${colors.bgPassive}`,
48 `${borderWidths[1]} solid ${colors.bgPassive}`,
49 `${borderWidths[2]} solid ${colors.bgPassive}`
50];