Skip to content

Commit d506487

Browse files
kuroji-fuskykuroji-fusky
committed
commit migration changes
1 parent 2e93a34 commit d506487

File tree

2 files changed

+110
-72
lines changed

2 files changed

+110
-72
lines changed

‎packages/config/tailwind.config.ts‎

Lines changed: 1 addition & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,6 @@ import type { Config } from "tailwindcss"
22
import forms from "@tailwindcss/forms"
33
import typography from "@tailwindcss/typography"
44

5-
const TW_PREFIX = "mav"
6-
const COLORS = {
7-
GLOBAL: [
8-
"100",
9-
"200",
10-
"300",
11-
"400",
12-
"500",
13-
"600",
14-
"700",
15-
"mute",
16-
"subtext",
17-
"skeleton",
18-
"separator",
19-
"alert",
20-
"warning",
21-
"info",
22-
"success",
23-
"hyperlink",
24-
["alert-hl", "alert-highlight"],
25-
["warning-hl", "warning-highlight"],
26-
["info-hl", "info-highlight"],
27-
["success-hl", "success-highlight"]
28-
],
29-
OVERRIDE: ["context-menu", "active", "active-invert"]
30-
}
31-
32-
const iterateColorVars = (
33-
baseVariable: string,
34-
colors: (string | string[])[]
35-
): { [x: string]: string } => {
36-
const colorTmpl = `"{0}": "hsla(var(--${TW_PREFIX}-{1}), var(${baseVariable}, 1))"`
37-
38-
const fmtColorStr = (...args: string[]) => {
39-
return colorTmpl.replace(/{([0-9]+)}/g, (match, index) => {
40-
return typeof args[index] === "undefined" ? match : args[index]
41-
})
42-
}
43-
44-
const parseCols = colors.map((color) => {
45-
if (Array.isArray(color)) return fmtColorStr(color[0], color[1])
46-
47-
return fmtColorStr(color, color)
48-
})
49-
50-
return JSON.parse(`{${parseCols}}`)
51-
}
52-
53-
const gridResizable = {
54-
resizable: "minmax(0, 1fr) auto"
55-
}
56-
575
export default {
58-
content: [],
59-
darkMode: "class",
60-
theme: {
61-
extend: {
62-
gridTemplateRows: gridResizable,
63-
gridTemplateColumns: gridResizable,
64-
colors: {
65-
current: "currentColor",
66-
...iterateColorVars("--tw-bg-opacity", [...COLORS.GLOBAL, ...COLORS.OVERRIDE])
67-
},
68-
borderColor: {
69-
current: "currentColor",
70-
...iterateColorVars("--tw-border-opacity", COLORS.GLOBAL)
71-
}
72-
}
73-
},
746
plugins: [forms, typography]
75-
} satisfies Config
7+
} satisfies Partial<Config>

‎packages/shared/styles.css‎

Lines changed: 109 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,97 @@
11
/* Global Tailwind CSS for both web and desktop */
2-
@import "tailwindcss";
2+
@import 'tailwindcss';
3+
4+
@plugin '@tailwindcss/forms';
5+
@plugin '@tailwindcss/typography';
6+
7+
@custom-variant dark (&:is(.dark *));
38

49
@theme {
5-
--font-inter: "Inter", var(--default-font-family);
6-
--font-code: "JetBrains Mono", var(--default-mono-font-family);
10+
--grid-template-rows-resizable: minmax(0, 1fr) auto;
11+
12+
--grid-template-columns-resizable: minmax(0, 1fr) auto;
13+
14+
--color-100: hsla(var(--mav-100), var(--tw-bg-opacity, 1));
15+
--color-200: hsla(var(--mav-200), var(--tw-bg-opacity, 1));
16+
--color-300: hsla(var(--mav-300), var(--tw-bg-opacity, 1));
17+
--color-400: hsla(var(--mav-400), var(--tw-bg-opacity, 1));
18+
--color-500: hsla(var(--mav-500), var(--tw-bg-opacity, 1));
19+
--color-600: hsla(var(--mav-600), var(--tw-bg-opacity, 1));
20+
--color-700: hsla(var(--mav-700), var(--tw-bg-opacity, 1));
21+
--color-current: currentColor;
22+
--color-mute: hsla(var(--mav-mute), var(--tw-bg-opacity, 1));
23+
--color-subtext: hsla(var(--mav-subtext), var(--tw-bg-opacity, 1));
24+
--color-skeleton: hsla(var(--mav-skeleton), var(--tw-bg-opacity, 1));
25+
--color-separator: hsla(var(--mav-separator), var(--tw-bg-opacity, 1));
26+
--color-alert: hsla(var(--mav-alert), var(--tw-bg-opacity, 1));
27+
--color-warning: hsla(var(--mav-warning), var(--tw-bg-opacity, 1));
28+
--color-info: hsla(var(--mav-info), var(--tw-bg-opacity, 1));
29+
--color-success: hsla(var(--mav-success), var(--tw-bg-opacity, 1));
30+
--color-hyperlink: hsla(var(--mav-hyperlink), var(--tw-bg-opacity, 1));
31+
--color-alert-hl: hsla(var(--mav-alert-highlight), var(--tw-bg-opacity, 1));
32+
--color-warning-hl: hsla(
33+
var(--mav-warning-highlight),
34+
var(--tw-bg-opacity, 1)
35+
);
36+
--color-info-hl: hsla(var(--mav-info-highlight), var(--tw-bg-opacity, 1));
37+
--color-success-hl: hsla(
38+
var(--mav-success-highlight),
39+
var(--tw-bg-opacity, 1)
40+
);
41+
--color-context-menu: hsla(var(--mav-context-menu), var(--tw-bg-opacity, 1));
42+
--color-active: hsla(var(--mav-active), var(--tw-bg-opacity, 1));
43+
--color-active-invert: hsla(
44+
var(--mav-active-invert),
45+
var(--tw-bg-opacity, 1)
46+
);
47+
48+
--border-color-100: hsla(var(--mav-100), var(--tw-border-opacity, 1));
49+
--border-color-200: hsla(var(--mav-200), var(--tw-border-opacity, 1));
50+
--border-color-300: hsla(var(--mav-300), var(--tw-border-opacity, 1));
51+
--border-color-400: hsla(var(--mav-400), var(--tw-border-opacity, 1));
52+
--border-color-500: hsla(var(--mav-500), var(--tw-border-opacity, 1));
53+
--border-color-600: hsla(var(--mav-600), var(--tw-border-opacity, 1));
54+
--border-color-700: hsla(var(--mav-700), var(--tw-border-opacity, 1));
55+
--border-color-current: currentColor;
56+
--border-color-mute: hsla(var(--mav-mute), var(--tw-border-opacity, 1));
57+
--border-color-subtext: hsla(var(--mav-subtext), var(--tw-border-opacity, 1));
58+
--border-color-skeleton: hsla(
59+
var(--mav-skeleton),
60+
var(--tw-border-opacity, 1)
61+
);
62+
--border-color-separator: hsla(
63+
var(--mav-separator),
64+
var(--tw-border-opacity, 1)
65+
);
66+
--border-color-alert: hsla(var(--mav-alert), var(--tw-border-opacity, 1));
67+
--border-color-warning: hsla(var(--mav-warning), var(--tw-border-opacity, 1));
68+
--border-color-info: hsla(var(--mav-info), var(--tw-border-opacity, 1));
69+
--border-color-success: hsla(var(--mav-success), var(--tw-border-opacity, 1));
70+
--border-color-hyperlink: hsla(
71+
var(--mav-hyperlink),
72+
var(--tw-border-opacity, 1)
73+
);
74+
--border-color-alert-hl: hsla(
75+
var(--mav-alert-highlight),
76+
var(--tw-border-opacity, 1)
77+
);
78+
--border-color-warning-hl: hsla(
79+
var(--mav-warning-highlight),
80+
var(--tw-border-opacity, 1)
81+
);
82+
--border-color-info-hl: hsla(
83+
var(--mav-info-highlight),
84+
var(--tw-border-opacity, 1)
85+
);
86+
--border-color-success-hl: hsla(
87+
var(--mav-success-highlight),
88+
var(--tw-border-opacity, 1)
89+
);
90+
}
91+
92+
@theme {
93+
--font-inter: 'Inter', var(--default-font-family);
94+
--font-code: 'JetBrains Mono', var(--default-mono-font-family);
795

896
--color-warning: 46, 99.3%, 54.6%;
997
--color-info: 212, 95.4%, 46.3%;
@@ -55,3 +143,21 @@
55143
--color-dark-active: var(--color-dark-700);
56144
--color-dark-active-invert: var(--color-dark-100);
57145
}
146+
147+
/*
148+
The default border color has changed to `currentColor` in Tailwind CSS v4,
149+
so we've added these compatibility styles to make sure everything still
150+
looks the same as it did with Tailwind CSS v3.
151+
152+
If we ever want to remove these styles, we need to add an explicit border
153+
color utility to any element that depends on these defaults.
154+
*/
155+
@layer base {
156+
*,
157+
::after,
158+
::before,
159+
::backdrop,
160+
::file-selector-button {
161+
border-color: var(--color-gray-200, currentColor);
162+
}
163+
}

0 commit comments

Comments
 (0)