cogita/packages/ui/tailwind.config.ts at main · wu9o/cogita · GitHub

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
import type { Config } from 'tailwindcss';

export default {
  prefix: 'rp-',
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    backgroundColor: (ctx) => ({
      ...ctx.theme('colors'),
      white: 'var(--rp-c-bg)',
      soft: 'var(--rp-c-bg-soft)',
      mute: 'var(--rp-c-bg-mute)',
    }),
    extend: {
      fontSize: {
        '3xl': '2rem',
        '2xl': '1.625rem',
        xl: '1.375rem',
        lg: '1.25rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      breakpoints: {
        xs: '640px',
        sm: '768px',
        md: '960px',
        lg: '1280px',
      },
      maxWidth: {
        '60': '15rem',
      },
      maxHeight: {
        '60': '15rem',
      },
      colors: {
        brand: {
          DEFAULT: 'var(--rp-c-brand)',
          light: 'var(--rp-c-brand-light)',
          dark: 'var(--rp-c-brand-dark)',
          lighter: 'var(--rp-c-brand-lighter)',
          darker: 'var(--rp-c-brand-darker)',
        },
        text: {
          1: 'var(--rp-c-text-1)',
          2: 'var(--rp-c-text-2)',
          3: 'var(--rp-c-text-3)',
          4: 'var(--rp-c-text-4)',
        },
        divider: {
          DEFAULT: 'var(--rp-c-divider)',
          light: 'var(--rp-c-divider-light)',
          dark: 'var(--rp-c-divider-dark)',
        },
        gray: {
          light: {
            1: 'var(--rp-c-gray-light-1)',
            2: 'var(--rp-c-gray-light-2)',
            3: 'var(--rp-c-gray-light-3)',
            4: 'var(--rp-c-gray-light-4)',
            5: 'var(--rp-c-gray-light-5)',
          },
        },
        dark: {
          light: {
            1: 'var(--rp-c-dark-light-1)',
            2: 'var(--rp-c-dark-light-2)',
            3: 'var(--rp-c-dark-light-3)',
            4: 'var(--rp-c-dark-light-4)',
            5: 'var(--rp-c-dark-light-5)',
          },
        },
      },
    },
  },
} satisfies Config;