Skip to content

Commit 9ee27fc

Browse files
kkomelinkkomelin
committed
Further tailwind-related updates.
1 parent 12eea35 commit 9ee27fc

3 files changed

Lines changed: 291 additions & 68 deletions

File tree

‎packages/kit/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
129129
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
130130
"format": "prettier --write './src/**/*.{js,jsx,ts,tsx}'",
131-
"styles": "tailwindcss -c ./tailwind.config.mjs -i ./src/styles/main.css -o ./dist/main.css --minify"
131+
"styles": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --minify"
132132
},
133133
"devDependencies": {
134134
"@mysten/dapp-kit": "^0.19.11",
@@ -138,6 +138,7 @@
138138
"@radix-ui/colors": "^3.0.0",
139139
"@repo/eslint-config": "workspace:*",
140140
"@repo/typescript-config": "workspace:*",
141+
"@tailwindcss/cli": "^4.1.17",
141142
"@tailwindcss/postcss": "^4.1.17",
142143
"@tanstack/react-query": "^5.90.11",
143144
"@types/lodash.debounce": "^4.0.9",

‎packages/kit/src/styles/main.css‎

Lines changed: 118 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,136 @@
1-
@import 'tailwindcss';
1+
@import "tailwindcss";
22

3-
@config '../../tailwind.config.mjs';
3+
/* Radix UI Colors - Generated from @radix-ui/colors */
4+
@theme {
5+
/* Light mode colors */
6+
--color-slate1: #fcfcfd;
7+
--color-slate2: #f9f9fb;
8+
--color-slate3: #f0f0f3;
9+
--color-slate4: #e8e8ec;
10+
--color-slate5: #e0e1e6;
11+
--color-slate6: #d9d9e0;
12+
--color-slate7: #cdced6;
13+
--color-slate8: #b9bbc6;
14+
--color-slate9: #8b8d98;
15+
--color-slate10: #80838d;
16+
--color-slate11: #60646c;
17+
--color-slate12: #1c2024;
18+
--color-blue1: #fbfdff;
19+
--color-blue2: #f4faff;
20+
--color-blue3: #e6f4fe;
21+
--color-blue4: #d5efff;
22+
--color-blue5: #c2e5ff;
23+
--color-blue6: #acd8fc;
24+
--color-blue7: #8ec8f6;
25+
--color-blue8: #5eb1ef;
26+
--color-blue9: #0090ff;
27+
--color-blue10: #0588f0;
28+
--color-blue11: #0d74ce;
29+
--color-blue12: #113264;
30+
--color-red1: #fffcfc;
31+
--color-red2: #fff7f7;
32+
--color-red3: #feebec;
33+
--color-red4: #ffdbdc;
34+
--color-red5: #ffcdce;
35+
--color-red6: #fdbdbe;
36+
--color-red7: #f4a9aa;
37+
--color-red8: #eb8e90;
38+
--color-red9: #e5484d;
39+
--color-red10: #dc3e42;
40+
--color-red11: #ce2c31;
41+
--color-red12: #641723;
442

5-
/*
6-
The default border color has changed to `currentcolor` in Tailwind CSS v4,
7-
so we've added these compatibility styles to make sure everything still
8-
looks the same as it did with Tailwind CSS v3.
43+
/* Dark mode colors */
44+
--color-slateDark1: #111113;
45+
--color-slateDark2: #18191b;
46+
--color-slateDark3: #212225;
47+
--color-slateDark4: #272a2d;
48+
--color-slateDark5: #2e3135;
49+
--color-slateDark6: #363a3f;
50+
--color-slateDark7: #43484e;
51+
--color-slateDark8: #5a6169;
52+
--color-slateDark9: #696e77;
53+
--color-slateDark10: #777b84;
54+
--color-slateDark11: #b0b4ba;
55+
--color-slateDark12: #edeef0;
56+
--color-blueDark1: #0d1520;
57+
--color-blueDark2: #111927;
58+
--color-blueDark3: #0d2847;
59+
--color-blueDark4: #003362;
60+
--color-blueDark5: #004074;
61+
--color-blueDark6: #104d87;
62+
--color-blueDark7: #205d9e;
63+
--color-blueDark8: #2870bd;
64+
--color-blueDark9: #0090ff;
65+
--color-blueDark10: #3b9eff;
66+
--color-blueDark11: #70b8ff;
67+
--color-blueDark12: #c2e6ff;
68+
--color-redDark1: #191111;
69+
--color-redDark2: #201314;
70+
--color-redDark3: #3b1219;
71+
--color-redDark4: #500f1c;
72+
--color-redDark5: #611623;
73+
--color-redDark6: #72232d;
74+
--color-redDark7: #8c333a;
75+
--color-redDark8: #b54548;
76+
--color-redDark9: #e5484d;
77+
--color-redDark10: #ec5d5e;
78+
--color-redDark11: #ff9592;
79+
--color-redDark12: #ffd1d9;
80+
}
981

10-
If we ever want to remove these styles, we need to add an explicit border
11-
color utility to any element that depends on these defaults.
82+
/* Custom dark mode variants
83+
Supports both:
84+
1. Manual class: .dark ancestor
85+
2. System preference: @media (prefers-color-scheme: dark) without .light override
1286
*/
87+
@variant dark (&:where(.dark, .dark *));
88+
@variant dark (@media (prefers-color-scheme: dark));
89+
90+
/* Disable preflight (Tailwind's base styles) */
1391
@layer base {
14-
*,
15-
::after,
16-
::before,
17-
::backdrop,
18-
::file-selector-button {
19-
border-color: var(--color-gray-200, currentcolor);
92+
* {
93+
all: revert;
2094
}
2195
}
2296

23-
@utility sk-balance-badge {
24-
@apply rounded-lg px-3 py-1.5;
25-
}
26-
27-
@utility sk-faucet-button {
28-
@apply cursor-pointer rounded-lg px-3 py-1.5;
29-
}
30-
31-
@utility sk-network-badge {
32-
@apply rounded-lg px-3 py-1.5;
33-
}
97+
/* Component styles using Tailwind utilities */
98+
@layer components {
99+
.sk-balance-badge {
100+
@apply rounded-lg px-3 py-1.5;
101+
}
34102

35-
@utility sk-address-input {
36-
@apply flex flex-col gap-1;
37-
& input {
38-
@apply w-full rounded-lg border px-3 py-1.5
39-
border-slate3 bg-slate1 text-slate12
40-
focus:outline-hidden focus:ring-2 focus:ring-blue7
41-
dark:border-slate-dark3 dark:bg-slate-dark1 dark:text-slate-dark12;
42-
&:hover {
43-
@apply border-slate7
44-
dark:border-slate-dark7;
45-
}
46-
&:focus {
47-
@apply border-blue7
48-
dark:border-blue-dark7 dark:ring-blue-dark7;
49-
}
50-
&.error {
51-
@apply border-red7 bg-red3 focus:ring-red7
52-
dark:border-red-dark7 dark:bg-red-dark3 dark:ring-red-dark7;
53-
}
103+
.sk-faucet-button {
104+
@apply cursor-pointer rounded-lg px-3 py-1.5;
54105
}
55-
& span {
56-
@apply text-sm text-red9
57-
dark:text-red-dark8;
106+
107+
.sk-network-badge {
108+
@apply rounded-lg px-3 py-1.5;
58109
}
59-
}
60110

61-
@utility sk-amount-input {
62-
@apply flex flex-col gap-1;
63-
& input {
64-
@apply w-full rounded-lg border px-3 py-1.5
111+
.sk-address-input, .sk-amount-input {
112+
@apply flex flex-col gap-1;
113+
& input {
114+
@apply w-full rounded-lg border px-3 py-1.5
65115
border-slate3 bg-slate1 text-slate12
66116
focus:outline-hidden focus:ring-2 focus:ring-blue7
67-
dark:border-slate-dark3 dark:bg-slate-dark1 dark:text-slate-dark12;
68-
&:hover {
69-
@apply border-slate7
70-
dark:border-slate-dark7;
117+
dark:border-slateDark3 dark:bg-slateDark1 dark:text-slateDark12;
118+
&:hover {
119+
@apply border-slate7
120+
dark:border-slateDark7;
121+
}
122+
&:focus {
123+
@apply border-blue7
124+
dark:border-blueDark7 dark:ring-blueDark7;
125+
}
126+
&.error {
127+
@apply border-red7 bg-red3 focus:ring-red7
128+
dark:border-redDark7 dark:bg-redDark3 dark:ring-redDark7;
129+
}
71130
}
72-
&:focus {
73-
@apply border-blue7
74-
dark:border-blue-dark7 dark:ring-blue-dark7;
131+
& span {
132+
@apply text-sm text-red9
133+
dark:text-redDark8;
75134
}
76-
&.error {
77-
@apply border-red7 bg-red3 focus:ring-red7
78-
dark:border-red-dark7 dark:bg-red-dark3 dark:ring-red-dark7;
79-
}
80-
}
81-
& span {
82-
@apply text-sm text-red9
83-
dark:text-red-dark8;
84135
}
85136
}

0 commit comments

Comments
 (0)