1  /** @type {import('tailwindcss').Config} */
 2  module.exports = {
 3    content: ['./src/**/*.{html,js,svelte,ts}'],
 4    theme: {
 5      extend: {
 6        screens: {
 7          xs: '440px' /* just above most phones in portrait-mode */,
 8          sm: '540px',
 9          mlg: '896px',
10          '2xl': '1440px',
11          mouse: { raw: '(hover:hover)' }, // targets only browser with mouse hover
12        },
13        spacing: {
14          18: '4.5rem',
15          30: '7.5rem',
16        },
17        colors: {
18          primary: 'var(--color-primary)',
19          'primary-level-1': 'var(--color-primary-level-1)',
20          'primary-level-2': 'var(--color-primary-level-2)',
21          'primary-level-6': 'var(--color-primary-level-6)',
22          positive: 'var(--color-positive)',
23          'positive-level-1': 'var(--color-positive-level-1)',
24          'positive-level-2': 'var(--color-positive-level-2)',
25          'positive-level-6': 'var(--color-positive-level-6)',
26          caution: 'var(--color-caution)',
27          'caution-level-1': 'var(--color-caution-level-1)',
28          'caution-level-2': 'var(--color-caution-level-2)',
29          'caution-level-6': 'var(--color-caution-level-6)',
30          negative: 'var(--color-negative)',
31          'negative-level-1': 'var(--color-negative-level-1)',
32          'negative-level-2': 'var(--color-negative-level-2)',
33          'negative-level-6': 'var(--color-negative-level-6)',
34          foreground: 'var(--color-foreground)',
35          'foreground-level-1': 'var(--color-foreground-level-1)',
36          'foreground-level-2': 'var(--color-foreground-level-2)',
37          'foreground-level-3': 'var(--color-foreground-level-3)',
38          'foreground-level-4': 'var(--color-foreground-level-4)',
39          'foreground-level-5': 'var(--color-foreground-level-5)',
40          'foreground-level-6': 'var(--color-foreground-level-6)',
41          background: 'var(--color-background)',
42        },
43        fontFamily: {
44          mono: 'var(--typeface-mono-regular), monospace',
45          pixelated: '"Redaction 50", Times, serif',
46        },
47        fontSize: {
48          // from typography.css
49          'typo-header-1': '36px',
50          'typo-header-2': '24px',
51          'typo-header-3': '20px',
52          'typo-header-4': '16px',
53          'typo-header-5': '13px',
54          'typo-text': '16px',
55          'typo-text-small': '14px',
56          // 'typo-all-caps': 13px;
57        },
58        borderRadius: {
59          'drip-lg': '1rem 0 1rem 1rem',
60          'drip-xl': '1.5rem 0 1.5rem 1.5rem',
61        },
62        boxShadow: {
63          low: 'var(--elevation-low)',
64          md: 'var(--elevation-medium)',
65          hi: 'var(--elevation-high)',
66        },
67        translate: {
68          '2px': '2px',
69        },
70        animation: {
71          blink: 'blink 1000ms infinite linear',
72        },
73        keyframes: {
74          blink: {
75            '0%, 49%': { opacity: 0 },
76            '50%, 100%': { opacity: 1 },
77          },
78        },
79      },
80    },
81    plugins: [],
82  };