Skip to content

Commit aab23d8

Browse files
gn-t-kgn-t-k
authored
Merge pull request #280 from gn-t-k/refactor/centralize-tailwind-config
refactor: Tailwind設定をtailwind-configパッケージに集約
2 parents 1bf79e5 + fc5a11a commit aab23d8

File tree

10 files changed

+441
-484
lines changed

10 files changed

+441
-484
lines changed

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"dependencies": {
1414
"@heroicons/react": "2.2.0",
1515
"@next-lift/react-components": "workspace:*",
16+
"@next-lift/tailwind-config": "workspace:*",
1617
"next": "16.0.1",
1718
"next-themes": "0.4.6",
1819
"react": "19.2.0",

‎apps/web/src/app/globals.css‎

Lines changed: 3 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -1,242 +1,4 @@
1-
@import "tailwindcss";
2-
@import "tw-animate-css";
1+
@import "@next-lift/tailwind-config/tailwind.css";
32

4-
@plugin "tailwindcss-react-aria-components";
5-
6-
@custom-variant dark (&:is(.dark *));
7-
8-
:root {
9-
--background: #ffffff;
10-
--foreground: #171717;
11-
--bg: oklch(1 0 0);
12-
--fg: oklch(0.21 0.006 285.885);
13-
--primary: oklch(0.546 0.245 262.881);
14-
--primary-fg: oklch(1 0 0);
15-
--primary-subtle: oklch(0.623 0.214 259.815 / 0.15);
16-
--primary-subtle-fg: oklch(0.488 0.243 264.376);
17-
--secondary: oklch(0.92 0.004 286.32);
18-
--secondary-fg: oklch(0.141 0.005 285.823);
19-
--overlay: oklch(1 0 0);
20-
--overlay-fg: oklch(0.141 0.005 285.823);
21-
--accent: oklch(0.92 0.004 286.32);
22-
--accent-fg: oklch(0.141 0.005 285.823);
23-
--muted: oklch(0.967 0.001 286.375);
24-
--muted-fg: oklch(0.552 0.016 285.938);
25-
--success: oklch(0.596 0.145 163.225);
26-
--success-fg: oklch(1 0 0);
27-
--success-subtle: oklch(0.696 0.17 162.48 / 0.15);
28-
--success-subtle-fg: oklch(0.508 0.118 165.612);
29-
--info-subtle: oklch(0.685 0.169 237.323 / 0.15);
30-
--info-subtle-fg: oklch(0.5 0.134 242.749);
31-
--warning: oklch(0.828 0.189 84.429);
32-
--warning-fg: oklch(0.279 0.077 45.635);
33-
--warning-subtle: oklch(0.828 0.189 84.429 / 0.2);
34-
--warning-subtle-fg: oklch(0.555 0.163 48.998);
35-
--danger: oklch(0.577 0.245 27.325);
36-
--danger-fg: oklch(0.971 0.013 17.38);
37-
--danger-subtle: oklch(0.637 0.237 25.331 / 0.15);
38-
--danger-subtle-fg: oklch(0.505 0.213 27.518);
39-
--border: oklch(0.911 0.006 286.286);
40-
--input: oklch(0.871 0.006 286.286);
41-
--ring: oklch(0.546 0.245 262.881);
42-
--navbar: oklch(0.995 0 0);
43-
--navbar-fg: oklch(0.141 0.005 285.823);
44-
--sidebar: oklch(0.985 0 0);
45-
--sidebar-fg: oklch(0.141 0.005 285.823);
46-
--sidebar-primary: oklch(0.546 0.245 262.881);
47-
--sidebar-primary-fg: oklch(1 0 0);
48-
--sidebar-accent: oklch(0.92 0.004 286.32);
49-
--sidebar-accent-fg: oklch(0.141 0.005 285.823);
50-
--sidebar-border: oklch(0.901 0.006 286.286);
51-
--sidebar-ring: oklch(0.546 0.245 262.881);
52-
--chart-1: oklch(0.546 0.245 262.881);
53-
--chart-2: oklch(0.623 0.214 259.815);
54-
--chart-3: oklch(0.707 0.165 254.624);
55-
--chart-4: oklch(0.809 0.105 251.813);
56-
--chart-5: oklch(0.882 0.059 254.128);
57-
--radius-lg: 0.5rem;
58-
--radius-xs: calc(var(--radius-lg) * 0.5);
59-
--radius-sm: calc(var(--radius-lg) * 0.75);
60-
--radius-md: calc(var(--radius-lg) * 0.9);
61-
--radius-xl: calc(var(--radius-lg) * 1.25);
62-
--radius-2xl: calc(var(--radius-lg) * 1.5);
63-
--radius-3xl: calc(var(--radius-lg) * 2);
64-
--radius-4xl: calc(var(--radius-lg) * 3);
65-
}
66-
67-
@media (prefers-color-scheme: dark) {
68-
:root {
69-
--background: #0a0a0a;
70-
--foreground: #ededed;
71-
}
72-
}
73-
74-
body {
75-
background: var(--background);
76-
color: var(--foreground);
77-
font-family: Arial, Helvetica, sans-serif;
78-
}
79-
80-
@theme inline {
81-
--font-sans:
82-
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
83-
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
84-
--font-mono:
85-
"Geist Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco",
86-
"Consolas", '"Liberation Mono"', '"Courier New"', "monospace";
87-
--font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
88-
--font-mono--font-feature-settings: "ss02", "zero";
89-
--color-border: var(--border);
90-
--color-input: var(--input);
91-
--color-ring: var(--ring);
92-
--color-bg: var(--bg);
93-
--color-fg: var(--fg);
94-
--color-primary: var(--primary);
95-
--color-primary-fg: var(--primary-fg);
96-
--color-primary-subtle: var(--primary-subtle);
97-
--color-primary-subtle-fg: var(--primary-subtle-fg);
98-
--color-secondary: var(--secondary);
99-
--color-secondary-fg: var(--secondary-fg);
100-
--color-accent: var(--accent);
101-
--color-accent-fg: var(--accent-fg);
102-
--color-success: var(--success);
103-
--color-success-fg: var(--success-fg);
104-
--color-success-subtle: var(--success-subtle);
105-
--color-success-subtle-fg: var(--success-subtle-fg);
106-
--color-danger: var(--danger);
107-
--color-danger-fg: var(--danger-fg);
108-
--color-danger-subtle: var(--danger-subtle);
109-
--color-danger-subtle-fg: var(--danger-subtle-fg);
110-
--color-warning: var(--warning);
111-
--color-warning-fg: var(--warning-fg);
112-
--color-warning-subtle: var(--warning-subtle);
113-
--color-warning-subtle-fg: var(--warning-subtle-fg);
114-
--color-info-subtle: var(--info-subtle);
115-
--color-info-subtle-fg: var(--info-subtle-fg);
116-
--color-muted: var(--muted);
117-
--color-muted-fg: var(--muted-fg);
118-
--color-overlay: var(--overlay);
119-
--color-overlay-fg: var(--overlay-fg);
120-
--color-navbar: var(--navbar);
121-
--color-navbar-fg: var(--navbar-fg);
122-
--color-sidebar: var(--sidebar);
123-
--color-sidebar-fg: var(--sidebar-fg);
124-
--color-sidebar-primary: var(--sidebar-primary);
125-
--color-sidebar-primary-fg: var(--sidebar-primary-fg);
126-
--color-sidebar-accent: var(--sidebar-accent);
127-
--color-sidebar-accent-fg: var(--sidebar-accent-fg);
128-
--color-sidebar-border: var(--sidebar-border);
129-
--color-sidebar-ring: var(--sidebar-ring);
130-
--color-chart-1: var(--chart-1);
131-
--color-chart-2: var(--chart-2);
132-
--color-chart-3: var(--chart-3);
133-
--color-chart-4: var(--chart-4);
134-
--color-chart-5: var(--chart-5);
135-
--radius-4xl: var(--radius-4xl);
136-
--radius-3xl: var(--radius-3xl);
137-
--radius-2xl: var(--radius-2xl);
138-
--radius-xl: var(--radius-xl);
139-
--radius-md: var(--radius-md);
140-
--radius-sm: var(--radius-sm);
141-
--radius-xs: var(--radius-xs);
142-
--radius-lg: var(--radius-lg);
143-
}
144-
145-
.dark {
146-
--bg: oklch(0.181 0.005 285.823);
147-
--fg: oklch(0.985 0 0);
148-
--primary: oklch(0.546 0.245 262.881);
149-
--primary-fg: oklch(1 0 0);
150-
--primary-subtle: oklch(0.623 0.214 259.815 / 0.1);
151-
--primary-subtle-fg: oklch(0.707 0.165 254.624);
152-
--secondary: oklch(0.244 0.006 286.033);
153-
--secondary-fg: oklch(0.985 0 0);
154-
--overlay: oklch(0.21 0.006 285.885);
155-
--overlay-fg: oklch(0.985 0 0);
156-
--accent: oklch(0.274 0.006 286.033);
157-
--accent-fg: oklch(0.985 0 0);
158-
--muted: oklch(0.21 0.006 285.885);
159-
--muted-fg: oklch(0.705 0.015 286.067);
160-
--success: oklch(0.596 0.145 163.225);
161-
--success-fg: oklch(1 0 0);
162-
--success-subtle: oklch(0.696 0.17 162.48 / 0.1);
163-
--success-subtle-fg: oklch(0.765 0.177 163.223);
164-
--info-subtle: oklch(0.685 0.169 237.323 / 0.1);
165-
--info-subtle-fg: oklch(0.828 0.111 230.318);
166-
--warning: oklch(0.828 0.189 84.429);
167-
--warning-fg: oklch(0.279 0.077 45.635);
168-
--warning-subtle: oklch(0.828 0.189 84.429 / 0.1);
169-
--warning-subtle-fg: oklch(0.828 0.189 84.429);
170-
--danger: oklch(0.577 0.245 27.325);
171-
--danger-fg: oklch(0.971 0.013 17.38);
172-
--danger-subtle: oklch(0.637 0.237 25.331 / 0.1);
173-
--danger-subtle-fg: oklch(0.704 0.191 22.216);
174-
--border: oklch(0.27 0.013 285.805);
175-
--input: oklch(0.32 0.013 285.805);
176-
--ring: oklch(0.546 0.245 262.881);
177-
--navbar: oklch(0.19 0.006 285.885);
178-
--navbar-fg: oklch(0.985 0 0);
179-
--sidebar: oklch(0.21 0.006 285.885);
180-
--sidebar-fg: oklch(0.985 0 0);
181-
--sidebar-primary: oklch(0.546 0.245 262.881);
182-
--sidebar-primary-fg: oklch(1 0 0);
183-
--sidebar-accent: oklch(0.274 0.006 286.033);
184-
--sidebar-accent-fg: oklch(0.985 0 0);
185-
--sidebar-border: oklch(0.274 0.006 286.033);
186-
--sidebar-ring: oklch(0.546 0.245 262.881);
187-
--chart-1: oklch(0.488 0.243 264.376);
188-
--chart-2: oklch(0.623 0.214 259.815);
189-
--chart-3: oklch(0.707 0.165 254.624);
190-
--chart-4: oklch(0.809 0.105 251.813);
191-
--chart-5: oklch(0.882 0.059 254.128);
192-
}
193-
194-
@layer base {
195-
* {
196-
scrollbar-width: thin;
197-
scrollbar-color: var(--border) transparent;
198-
}
199-
body {
200-
background-color: var(--bg);
201-
color: var(--fg);
202-
}
203-
*,
204-
::after,
205-
::before,
206-
::backdrop,
207-
::file-selector-button {
208-
border-color: var(--border, currentColor);
209-
}
210-
html {
211-
-webkit-font-smoothing: antialiased;
212-
-moz-osx-font-smoothing: grayscale;
213-
-webkit-tap-highlight-color: transparent;
214-
}
215-
::-webkit-scrollbar {
216-
width: 4px;
217-
}
218-
::-webkit-scrollbar-track {
219-
background: transparent;
220-
}
221-
::-webkit-scrollbar-thumb {
222-
background: var(--border);
223-
border-radius: 4px;
224-
}
225-
}
226-
227-
@utility touch-target {
228-
position: relative;
229-
&::before {
230-
content: "";
231-
position: absolute;
232-
display: block;
233-
top: 50%;
234-
left: 50%;
235-
transform: translate(-50%, -50%);
236-
width: 100%;
237-
height: 100%;
238-
min-height: 44px;
239-
min-width: 44px;
240-
z-index: 9999;
241-
}
242-
}
3+
@source "../../**/*.{js,ts,jsx,tsx}";
4+
@source "../../../../packages/react-components/src/**/*.{js,ts,jsx,tsx}";

0 commit comments

Comments
 (0)