a tool for shared writing and social publishing
leaflet.pub
1module.exports = {
2 content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
3 theme: {
4 screens: {
5 sm: "640px",
6 md: "960px",
7 lg: "1280px",
8 },
9 borderRadius: {
10 none: "0",
11 md: "0.25rem",
12 lg: "0.5rem",
13 full: "9999px",
14 },
15
16 colors: {
17 inherit: "inherit",
18 transparent: "transparent",
19 current: "currentColor",
20
21 //TEXT COLORS.
22 primary: "rgb(var(--primary))",
23 secondary:
24 "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 25%)",
25 tertiary:
26 "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 55%)",
27 border:
28 "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 75%)",
29 "border-light":
30 "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 85%)",
31
32 white: "#FFFFFF",
33
34 //ACCENT COLORS
35 "accent-1": "rgb(var(--accent-1))",
36 "accent-2": "rgb(var(--accent-2))",
37 "accent-contrast": "rgb(var(--accent-contrast))",
38
39 //BG COLORS (defined as css variables in global.css)
40 "bg-leaflet": "rgb(var(--bg-leaflet))",
41 "bg-page": "rgb(var(--bg-page))",
42
43 // HIGHLIGHT COLORS
44 "highlight-1": "var(--highlight-1)",
45 "highlight-2": "rgb(var(--highlight-2))",
46 "highlight-3": "rgb(var(--highlight-3))",
47
48 //DO NOT USE IN PRODUCTION. Test colors to aid development, ie, setting bg color on element to see edges of div. DO. NOT. USE. IN. PRODUCTION
49 test: "#E18181",
50 "test-blue": "#48D1EF",
51 },
52 fontSize: {
53 xs: ".75rem",
54 sm: ".875rem",
55 base: "1rem",
56 lg: "1.125rem",
57 xl: "1.625rem",
58 "2xl": "2rem",
59 },
60
61 extend: {
62 boxShadow: {
63 sm: "0.9px 1.5px 1.7px -1.8px rgba(var(--primary), 0.2), 4.2px 6.9px 7.8px -3.5px rgba(var(--primary), 0.15);",
64 md: "1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1), 5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15);",
65 },
66
67 fontFamily: {
68 sans: ["var(--font-quattro)"],
69 serif: ["Garamond"],
70 },
71 },
72 },
73 plugins: [],
74};