clientside-containers/tailwind.config.ts at main · reagent-systems/clientside-containers · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./lib/**/*.{ts,tsx}",
  ],
  theme: {
    screens: {
      sm: "401px",
      md: "601px",
      lg: "961px",
      xl: "1200px",
      "2xl": "1400px",
    },
    extend: {
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        tertiary: "var(--color-tertiary)",
        background: {
          100: "var(--color-background-100)",
          200: "var(--color-background-200)",
        },
        gray: {
          100: "var(--color-gray-100)",
          200: "var(--color-gray-200)",
          300: "var(--color-gray-300)",
          400: "var(--color-gray-400)",
          500: "var(--color-gray-500)",
          600: "var(--color-gray-600)",
          700: "var(--color-gray-700)",
          800: "var(--color-gray-800)",
          900: "var(--color-gray-900)",
          1000: "var(--color-gray-1000)",
        },
        "gray-alpha": {
          100: "var(--color-gray-alpha-100)",
          200: "var(--color-gray-alpha-200)",
          300: "var(--color-gray-alpha-300)",
          400: "var(--color-gray-alpha-400)",
          500: "var(--color-gray-alpha-500)",
          600: "var(--color-gray-alpha-600)",
          700: "var(--color-gray-alpha-700)",
          800: "var(--color-gray-alpha-800)",
          900: "var(--color-gray-alpha-900)",
          1000: "var(--color-gray-alpha-1000)",
        },
        blue: {
          100: "var(--color-blue-100)",
          200: "var(--color-blue-200)",
          300: "var(--color-blue-300)",
          400: "var(--color-blue-400)",
          500: "var(--color-blue-500)",
          600: "var(--color-blue-600)",
          700: "var(--color-blue-700)",
          800: "var(--color-blue-800)",
          900: "var(--color-blue-900)",
          1000: "var(--color-blue-1000)",
        },
        red: {
          100: "var(--color-red-100)",
          200: "var(--color-red-200)",
          300: "var(--color-red-300)",
          400: "var(--color-red-400)",
          500: "var(--color-red-500)",
          600: "var(--color-red-600)",
          700: "var(--color-red-700)",
          800: "var(--color-red-800)",
          900: "var(--color-red-900)",
          1000: "var(--color-red-1000)",
        },
        amber: {
          100: "var(--color-amber-100)",
          200: "var(--color-amber-200)",
          300: "var(--color-amber-300)",
          400: "var(--color-amber-400)",
          500: "var(--color-amber-500)",
          600: "var(--color-amber-600)",
          700: "var(--color-amber-700)",
          800: "var(--color-amber-800)",
          900: "var(--color-amber-900)",
          1000: "var(--color-amber-1000)",
        },
        green: {
          100: "var(--color-green-100)",
          200: "var(--color-green-200)",
          300: "var(--color-green-300)",
          400: "var(--color-green-400)",
          500: "var(--color-green-500)",
          600: "var(--color-green-600)",
          700: "var(--color-green-700)",
          800: "var(--color-green-800)",
          900: "var(--color-green-900)",
          1000: "var(--color-green-1000)",
        },
      },
      fontFamily: {
        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
        mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
      },
      fontSize: {
        "heading-20": ["20px", { lineHeight: "26px", letterSpacing: "-0.4px", fontWeight: "600" }],
        "heading-16": ["16px", { lineHeight: "24px", letterSpacing: "-0.32px", fontWeight: "600" }],
        "heading-14": ["14px", { lineHeight: "20px", letterSpacing: "-0.28px", fontWeight: "600" }],
        "button-16": ["16px", { lineHeight: "20px", fontWeight: "500" }],
        "button-14": ["14px", { lineHeight: "20px", fontWeight: "500" }],
        "button-12": ["12px", { lineHeight: "16px", fontWeight: "500" }],
        "label-14": ["14px", { lineHeight: "20px", fontWeight: "400" }],
        "label-13": ["13px", { lineHeight: "16px", fontWeight: "400" }],
        "label-12": ["12px", { lineHeight: "16px", fontWeight: "400" }],
        "copy-16": ["16px", { lineHeight: "24px", fontWeight: "400" }],
        "copy-14": ["14px", { lineHeight: "20px", fontWeight: "400" }],
        "copy-13": ["13px", { lineHeight: "18px", fontWeight: "400" }],
      },
      borderRadius: {
        sm: "6px",
        md: "12px",
        lg: "16px",
      },
      boxShadow: {
        card: "0 2px 2px rgba(0, 0, 0, 0.32)",
        popover:
          "0 1px 1px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.24), 0 16px 24px -8px rgba(0, 0, 0, 0.32)",
        modal:
          "0 1px 1px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.24), 0 24px 32px -8px rgba(0, 0, 0, 0.4)",
      },
      maxWidth: {
        content: "1200px",
      },
      transitionTimingFunction: {
        geist: "cubic-bezier(0.175, 0.885, 0.32, 1.1)",
      },
    },
  },
  plugins: [],
};

export default config;