a tool for shared writing and social publishing
changed our color-mix profile to produce more intuitive interpolated colors
+14
-19
+14
-19
tailwind.config.js
+14
-19
tailwind.config.js
···
18
18
current: "currentColor",
19
19
20
20
//TEXT COLORS.
21
-
"primary" : "rgb(var(--primary))",
22
-
"secondary": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 15%)",
23
-
"tertiary": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 55%)",
24
-
"border": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
25
-
"border-light": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 85%)",
21
+
primary: "rgb(var(--primary))",
22
+
secondary: "color-mix(in oklab, rgb(var(--primary)), white 15%)",
23
+
tertiary:
24
+
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 55%)",
25
+
border:
26
+
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
27
+
"border-light":
28
+
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 85%)",
26
29
27
30
white: "#FFFFFF",
28
31
29
32
//ACCENT COLORS
30
-
"accent": "rgb(var(--accent))",
31
-
"accentText": "rgb(var(--accent-text))",
32
-
33
+
accent: "rgb(var(--accent))",
34
+
accentText: "rgb(var(--accent-text))",
33
35
34
36
//BG COLORS (defined as css variables in global.css)
35
37
"bg-page": "rgb(var(--bg-page))",
36
38
"bg-card": "rgb(var(--bg-card))",
37
39
38
40
//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
39
-
"test": "#E18181",
41
+
test: "#E18181",
40
42
"test-blue": "#48D1EF",
41
-
42
-
43
43
},
44
44
fontSize: {
45
45
xs: ".75rem",
···
52
52
53
53
extend: {
54
54
boxShadow: {
55
-
56
-
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);",
57
-
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);"
58
-
59
-
60
-
61
-
55
+
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);",
56
+
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);",
62
57
},
63
58
64
59
fontFamily: {
65
-
sans: ['var(--font-quattro)'],
60
+
sans: ["var(--font-quattro)"],
66
61
},
67
62
},
68
63
},