arcade/tailwind.config.js at main · sb185296/arcade · 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
/* (c) Copyright Frontify Ltd., all rights reserved. */

module.exports = {
    presets: [require("@frontify/arcade-tokens/tailwind")],
    content: ["./src/**/*.{js,ts,tsx}"],
    theme: {
        extend: {
            outline: {
                violet: "1px solid #825fff",
            },
            boxShadow: {
                large: "0 25px 80px 0 rgba(45, 50, 50, 0.4)",
                mid: "0 3px 10px 0 rgba(45, 50, 50, 0.1)",
                "mid-top": "0 -10px 10px -5px rgba(45, 50, 50, 0.1)",
                "mid-bottom": "0 10px 10px -5px rgba(45, 50, 50, 0.1)",
                none: "none",
            },
            ringColor: {
                blue: "#5e9ed6",
            },
            colors: {
                transparent: "transparent",
                current: "currentColor",
                white: "#ffffff",
                black: {
                    DEFAULT: "#2d3232",

                    // Solids
                    superdark: "#1a1d1d",
                    100: "#2d3232",
                    95: "#424747",
                    90: "#575b5b",
                    85: "#5f6363",
                    80: "#6c7070",
                    70: "#818484",
                    60: "#969898",
                    50: "#abadad",
                    40: "#b3b5b5",
                    30: "#c0c2c2",
                    20: "#d5d6d6",
                    10: "#eaebeb",
                    5: "#f7f7f7",
                    0: "#fafafa",
                    warm: "#e6dcdc",
                },
                violet: {
                    // Solids
                    90: "#443185",
                    70: "#6449c4",
                    60: "#825fff",
                    50: "#9088ff",
                    40: "#c8d1ed",
                    20: "#e3e8f6",
                },
                green: {
                    90: "#006452",
                    75: "#00866E",
                    70: "#00a084",
                    60: "#00c8a5",
                    50: "#80dbb7",
                    40: "#bee1d4",
                    20: "#def0e9",
                },

                yellow: {
                    90: "#cc9000",
                    70: "#e6a200",
                    60: "#ffb400",
                    50: "#eec779",
                    40: "#e1d4be",
                    20: "#f0e9de",
                },

                red: {
                    90: "#992136",
                    70: "#cc2c48",
                    65: "#E52144",
                    60: "#ff375a",
                    50: "#ff8066",
                    40: "#e1c4be",
                    20: "#f0e1de",
                },
            },
            fontFamily: {
                sans: [
                    '"Space Grotesk Frontify"',
                    "Arial",
                    "-apple-system",
                    "BlinkMacSystemFont",
                    "Segoe UI",
                    "Roboto",
                    "Helvetica",
                    "sans-serif",
                    '"Apple Color Emoji"',
                    '"Segoe UI Emoji"',
                    '"Segoe UI Symbol"',
                ],
                mono: ["Menlo", "Courier", "monospace"],
            },
            fontSize: {
                xxs: ["0.75rem", { letterSpacing: "0.02rem", lineHeight: "1rem" }],
                xs: ["0.813rem", "1rem"],
                s: ["0.875rem", "1rem"],
                m: ["1rem", "1.25rem"],
                l: ["1.125rem", "1.5rem"],
                xl: ["1.5rem", "2rem"],
                xxl: ["2rem", "2.5rem"],
                xxxl: ["3rem", "3.5rem"],
            },
            transitionProperty: {
                height: "height",
            },
        },
    },
};