-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.mjs
128 lines (123 loc) · 4.05 KB
/
tailwind.config.mjs
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
import { fontFamily } from "tailwindcss/defaultTheme";
import plugin from "tailwindcss/plugin";
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{astro,html,md,mdx,ts,tsx}"],
// https://tailwindcss.com/docs/configuration#core-plugins
corePlugins: {
animation: false,
aspectRatio: false,
breakAfter: false,
breakBefore: false,
breakInside: false,
container: false,
fontVariantNumeric: false,
scrollMargin: false,
scrollPadding: false,
touchAction: false,
},
plugins: [
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
plugin(function wideWrapperPlugin({ addComponents }) {
addComponents({
".wide-wrapper": {
"--wrap-wide": "100vw",
marginLeft: "calc((min(100vw, var(--wrap-wide)) - 100%) / -2)",
maxWidth: "min(100vw, var(--wrap-wide))",
width: "min(100vw, var(--wrap-wide))",
},
});
}),
],
theme: {
extend: {
colors: {
accent: generateScale("coke-red"),
gray: generateScale("mauve"),
},
fontFamily: {
mono: ["var(--font-mono)", ...fontFamily.mono],
sans: ["var(--font-sans)", ...fontFamily.sans],
},
fontSize: {
xxs: "0.8571428571rem",
xxxs: "0.7142857143rem",
},
// https://carbondesignsystem.com/guidelines/motion/overview/
transitionDuration: {
"fast-01": "70ms",
"fast-02": "110ms",
"moderate-01": "150ms",
"moderate-02": "240ms",
"slow-01": "400ms",
"slow-02": "700ms",
},
// https://carbondesignsystem.com/guidelines/motion/overview/
transitionTimingFunction: {
"expressive-entrance": "cubic-bezier(0, 0, 0.3, 1)",
"expressive-exit": "cubic-bezier(0.4, 0.14, 1, 1)",
"expressive-standard": "cubic-bezier(0.4, 0.14, 0.3, 1)",
"productive-entrance": "cubic-bezier(0, 0, 0.38, 0.9)",
"productive-exit": "cubic-bezier(0.2, 0, 1, 0.9)",
"productive-standard": "cubic-bezier(0.2, 0, 0.38, 0.9)",
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error: remove once Tailwind exposes the type
typography: theme => ({
DEFAULT: {
css: {
"--tw-prose-body": "var(--mauve-11)",
"--tw-prose-bold": "var(--mauve-12)",
"--tw-prose-code": "var(--mauve-11)",
"--tw-prose-headings": "var(--mauve-12)",
"--tw-prose-links": "var(--mauve-12)",
":where(h1, h2, h3, h4, h5, h6):not(:where([class~='not-prose'], [class~='not-prose'] *))":
{
"> a": {
textDecoration: "none",
},
},
a: {
"@apply tracking-tight text-gray-12 underline decoration-gray-6 decoration-wavy underline-offset-2 transition-colors duration-moderate-02 ease-productive-standard sm:text-gray-11 sm:hover:text-gray-12 sm:hover:decoration-gray-7":
{},
},
"p:has(img)": {
"@apply wide-wrapper": {},
"@media (min-width: 640px)": {
"--wrap-wide": "65vw",
},
"> img": {
"@apply sm:rounded-md": {},
aspectRatio: "16 / 9",
marginBottom: theme("spacing.3"),
objectFit: "cover",
width: "100%",
},
},
},
},
}),
},
},
};
function generateScale(name) {
const scale = Array.from({ length: 12 }, (_, i) => {
const id = i + 1;
return [
[id, `var(--${name}-${id})`],
[`a${id}`, `var(--${name}-a${id})`],
];
}).flat();
const contrast = ["contrast", `var(--${name}-contrast)`];
const indicator = ["indicator", `var(--${name}-indicator)`];
const surface = ["surface", `var(--${name}-surface)`];
const track = ["track", `var(--${name}-track)`];
return Object.fromEntries([
[...contrast],
[...indicator],
[...surface],
[...track],
...scale,
]);
}