generated from acdh-oeaw/template-app-next
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.ts
89 lines (87 loc) · 3.66 KB
/
tailwind.config.ts
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
import typographyPlugin from "@tailwindcss/typography";
import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
import animatePlugin from "tailwindcss-animate";
import reactAriaComponentsPlugin from "tailwindcss-react-aria-components";
const config = {
content: ["./@(app|components|config|lib|styles)/**/*.@(css|js|ts|tsx)"],
corePlugins: {
container: false,
},
darkMode: ["variant", [':where([data-ui-color-scheme="dark"]) &']],
plugins: [animatePlugin, reactAriaComponentsPlugin, typographyPlugin],
theme: {
extend: {
fontFamily: {
body: "var(--font-body, ui-sans-serif), system-ui, sans-serif",
heading: "var(--font-heading, var(--font-body, ui-sans-serif)), system-ui, sans-serif",
},
colors: {
neutral: {
"0": "white",
...colors.zinc,
"1000": "black",
},
background:
"color-mix(in sRGB, var(--color-background) calc(<alpha-value> * 100%), transparent)",
"on-background":
"color-mix(in sRGB, var(--color-on-background) calc(<alpha-value> * 100%), transparent)",
surface: "color-mix(in sRGB, var(--color-surface) calc(<alpha-value> * 100%), transparent)",
"on-surface":
"color-mix(in sRGB, var(--color-on-surface) calc(<alpha-value> * 100%), transparent)",
overlay: "color-mix(in sRGB, var(--color-overlay) calc(<alpha-value> * 100%), transparent)",
"on-overlay":
"color-mix(in sRGB, var(--color-on-overlay) calc(<alpha-value> * 100%), transparent)",
primary: "color-mix(in sRGB, var(--color-primary) calc(<alpha-value> * 100%), transparent)",
"on-primary":
"color-mix(in sRGB, var(--color-on-primary) calc(<alpha-value> * 100%), transparent)",
secondary:
"color-mix(in sRGB, var(--color-secondary) calc(<alpha-value> * 100%), transparent)",
"on-secondary":
"color-mix(in sRGB, var(--color-on-secondary) calc(<alpha-value> * 100%), transparent)",
muted: "color-mix(in sRGB, var(--color-muted) calc(<alpha-value> * 100%), transparent)",
"on-muted":
"color-mix(in sRGB, var(--color-on-muted) calc(<alpha-value> * 100%), transparent)",
accent: "color-mix(in sRGB, var(--color-accent) calc(<alpha-value> * 100%), transparent)",
"on-accent":
"color-mix(in sRGB, var(--color-on-accent) calc(<alpha-value> * 100%), transparent)",
negative:
"color-mix(in sRGB, var(--color-negative) calc(<alpha-value> * 100%), transparent)",
"on-negative":
"color-mix(in sRGB, var(--color-on-negative) calc(<alpha-value> * 100%), transparent)",
positive:
"color-mix(in sRGB, var(--color-positive) calc(<alpha-value> * 100%), transparent)",
"on-positive":
"color-mix(in sRGB, var(--color-on-positive) calc(<alpha-value> * 100%), transparent)",
notice: "color-mix(in sRGB, var(--color-notice) calc(<alpha-value> * 100%), transparent)",
"on-notice":
"color-mix(in sRGB, var(--color-on-notice) calc(<alpha-value> * 100%), transparent)",
informative:
"color-mix(in sRGB, var(--color-informative) calc(<alpha-value> * 100%), transparent)",
"on-informative":
"color-mix(in sRGB, var(--color-on-informative) calc(<alpha-value> * 100%), transparent)",
border: "color-mix(in sRGB, var(--color-border) calc(<alpha-value> * 100%), transparent)",
input: "color-mix(in sRGB, var(--color-input) calc(<alpha-value> * 100%), transparent)",
"focus-ring":
"color-mix(in sRGB, var(--color-focus-ring) calc(<alpha-value> * 100%), transparent)",
},
typography: {
DEFAULT: {
css: {
maxWidth: null,
},
},
},
},
screens: {
xs: "30rem",
sm: "40rem",
md: "48rem",
lg: "64rem",
xl: "80rem",
"2xl": "96rem",
"3xl": "120rem",
},
},
} satisfies Config;
export default config;