Skip to content

Commit 1815887

Browse files
jer3m01jer3m01
committed
migrate tailwind 3 -> 4
1 parent bf4060b commit 1815887

23 files changed

Lines changed: 127 additions & 90 deletions

‎osmium/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"solid": "./src/index.ts",
2424
"import": "./src/index.ts",
2525
"types": "./src/index.ts"
26-
}
26+
},
27+
"./style": "./src/index.css"
2728
},
2829
"license": "MIT",
2930
"dependencies": {
@@ -38,7 +39,10 @@
3839
"@solid-primitives/platform": "^0.2.1",
3940
"@solidjs/router": "0.15.3",
4041
"solid-heroicons": "^3.2.4",
41-
"solid-js": "^1.9.11"
42+
"solid-js": "^1.9.11",
43+
"tailwindcss": "^4.2.2",
44+
"@kobalte/tailwindcss": "^0.9.0",
45+
"@tailwindcss/typography": "^0.5.19"
4246
},
4347
"peerDependencies": {
4448
"tailwindcss": "^4.2.2"

‎osmium/src/Layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import { useRouteConfig } from "./utils";
88
import { OsmiumThemeStateProvider } from "./context";
99
import { ParentProps } from "solid-js";
1010

11-
import "./index.css";
12-
1311
export default function (props: ParentProps) {
1412
const config = useRouteConfig();
1513
useThemeListener();

‎osmium/src/index.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "./tailwind.css";
2+
13
@import "./styles/prism.css";
24
@import "./styles/expressive-code.css";
35

@@ -86,7 +88,7 @@
8688

8789
@layer utilities {
8890
a[data-auto-heading] {
89-
@apply text-slate-900 shadow-none dark:text-white !important;
91+
@apply text-slate-900! shadow-none! dark:text-white!;
9092
}
9193

9294
a[data-auto-heading]:hover::after {
@@ -121,7 +123,7 @@
121123

122124
/* pace from solidbase */
123125
:root {
124-
--bprogress-color: theme("colors.blue.500") !important;
126+
--bprogress-color: var(--color-blue-500) !important;
125127

126128
--font-geist: "Geist Variable", sans-serif;
127129
--font-geist-mono: "Geist Mono Variable", monospace;

‎osmium/src/mdx-components.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const EraserLink = (
8080
aria-hidden={true}
8181
tabIndex="-1"
8282
href={props.href}
83-
class="font-semibold text-blue-700 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#38bdf8),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] hover:[--tw-prose-underline-size:4px] dark:text-blue-400 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.800))] dark:[--tw-prose-background:theme(colors.slate.900)] dark:hover:[--tw-prose-underline-size:6px]"
83+
class="font-semibold text-blue-700 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#38bdf8),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,var(--color-blue-400))] hover:[--tw-prose-underline-size:4px] dark:text-blue-400 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-blue-800))] dark:[--tw-prose-background:var(--color-slate-900)] dark:hover:[--tw-prose-underline-size:6px]"
8484
rel="noopener noreferrer"
8585
>
8686
View on Eraser
@@ -94,7 +94,7 @@ export const spa = () => <></>;
9494
export const h1 = (props: ParentProps) => (
9595
<h1
9696
{...props}
97-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
97+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
9898
>
9999
{props.children}
100100
</h1>
@@ -105,7 +105,7 @@ export const h2 = (props: ParentProps) => {
105105
<hr class="my-8 border-slate-400 dark:prose-hr:border-slate-800" />
106106
<h2
107107
{...props}
108-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
108+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
109109
>
110110
{props.children}
111111
</h2>
@@ -116,7 +116,7 @@ export const h3 = (props: ParentProps) => {
116116
return (
117117
<h3
118118
{...props}
119-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
119+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
120120
>
121121
{props.children}
122122
</h3>
@@ -126,7 +126,7 @@ export const h4 = (props: ParentProps) => {
126126
return (
127127
<h4
128128
{...props}
129-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
129+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
130130
>
131131
{props.children}
132132
</h4>
@@ -136,7 +136,7 @@ export const h5 = (props: ParentProps) => {
136136
return (
137137
<h5
138138
{...props}
139-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
139+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
140140
>
141141
{props.children}
142142
</h5>
@@ -145,7 +145,7 @@ export const h5 = (props: ParentProps) => {
145145
export const h6 = (props: ParentProps) => (
146146
<h6
147147
{...props}
148-
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
148+
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-34"
149149
>
150150
{props.children}
151151
</h6>
@@ -180,7 +180,7 @@ export const a = (props: ParentProps & { href: string }) => {
180180
} else {
181181
return (
182182
<a
183-
class="font-semibold text-blue-800 no-underline shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] [--tw-prose-background:theme(colors.slate.50)] hover:[--tw-prose-underline-size:4px] dark:text-blue-300 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.500))] dark:[--tw-prose-background:theme(colors.slate.900)] dark:hover:[--tw-prose-underline-size:6px]"
183+
class="font-semibold text-blue-800 no-underline shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,var(--color-blue-400))] [--tw-prose-background:var(--color-slate-50)] hover:[--tw-prose-underline-size:4px] dark:text-blue-300 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-blue-500))] dark:[--tw-prose-background:var(--color-slate-900)] dark:hover:[--tw-prose-underline-size:6px]"
184184
{...rest}
185185
>
186186
{resolved()}
@@ -216,7 +216,7 @@ export const pre = (props: ParentProps) => {
216216
return (
217217
<pre
218218
{...props}
219-
class="custom-scrollbar [&>code]:bg-white [&>code]:p-0 [&>code]:text-sm [&>code]:leading-normal dark:[&>code]:!bg-slate-950"
219+
class="custom-scrollbar [&>code]:bg-white [&>code]:p-0 [&>code]:text-sm [&>code]:leading-normal dark:[&>code]:bg-slate-950!"
220220
>
221221
{props.children}
222222
</pre>
@@ -225,7 +225,7 @@ export const pre = (props: ParentProps) => {
225225
export const code = (props: ParentProps) => {
226226
return (
227227
<code
228-
class="not-prose inline-flex rounded-lg bg-blue-200 px-1 py-0.5 !font-mono text-[0.8em] font-semibold leading-snug text-slate-900 dark:bg-slate-600/60 dark:text-white"
228+
class="not-prose inline-flex rounded-lg bg-blue-200 px-1 py-0.5 font-mono! text-[0.8em] font-semibold leading-snug text-slate-900 dark:bg-slate-600/60 dark:text-white"
229229
{...props}
230230
>
231231
{props.children}

‎osmium/src/styles/expressive-code.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "../tailwind.css"
2+
13
.expressive-code-overrides .expressive-code {
24
@apply my-4 font-mono;
35
}
@@ -7,7 +9,7 @@
79
}
810

911
.expressive-code-overrides .expressive-code .frame.is-terminal .header {
10-
@apply border-x-0 border-b border-t-0 border-solid border-slate-600/20;
12+
@apply border-x-0 border-t-0 border-b border-solid border-slate-600/20;
1113
}
1214

1315
html .expressive-code-overrides .expressive-code pre {

‎osmium/src/styles/prism.css‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
@reference "../tailwind.css"
2+
13
pre[class*="language-"] {
2-
color: theme("colors.slate.50");
4+
color: var(--color-slate-50);
35
}
46

57
.token.tag,
@@ -8,40 +10,40 @@ pre[class*="language-"] {
810
.token.selector .class,
911
.token.selector.class,
1012
.token.function {
11-
color: theme("colors.pink.400");
13+
color: var(--color-pink-400);
1214
}
1315

1416
.token.attr-name,
1517
.token.keyword,
1618
.token.rule,
1719
.token.pseudo-class,
1820
.token.important {
19-
color: theme("colors.slate.300");
21+
color: var(--color-slate-300);
2022
}
2123

2224
.token.module {
23-
color: theme("colors.pink.400");
25+
color: var(--color-pink-400);
2426
}
2527

2628
.token.attr-value,
2729
.token.class,
2830
.token.string,
2931
.token.property {
30-
color: theme("colors.sky.300");
32+
color: var(--color-sky-300);
3133
}
3234

3335
.token.punctuation,
3436
.token.attr-equals {
35-
color: theme("colors.slate.500");
37+
color: var(--color-slate-500);
3638
}
3739

3840
.token.unit,
3941
.language-css .token.function {
40-
color: theme("colors.teal.200");
42+
color: var(--color-teal-200);
4143
}
4244

4345
.token.comment,
4446
.token.operator,
4547
.token.combinator {
46-
color: theme("colors.slate.400");
48+
color: var(--color-slate-400);
4749
}

‎osmium/src/tailwind.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@plugin "@tailwindcss/typography";
2+
@plugin "@kobalte/tailwindcss" {
3+
prefix: kb;
4+
}
5+
6+
@custom-variant dark (&:where([data-theme*='dark'], [data-theme*='dark'] *));
7+
8+
@theme {
9+
--text-xs: 0.75rem;
10+
--text-xs--line-height: 1rem;
11+
12+
--text-sm: 0.875rem;
13+
--text-sm--line-height: 1.5rem;
14+
15+
--text-base: 1rem;
16+
--text-base--line-height: 2rem;
17+
18+
--text-lg: 1.125rem;
19+
--text-lg--line-height: 1.75rem;
20+
21+
--text-xl: 1.25rem;
22+
--text-xl--line-height: 2rem;
23+
24+
--text-2xl: 1.5rem;
25+
--text-2xl--line-height: 2.5rem;
26+
27+
--text-3xl: 2rem;
28+
--text-3xl--line-height: 2.5rem;
29+
30+
--text-4xl: 2.5rem;
31+
--text-4xl--line-height: 3rem;
32+
33+
--text-5xl: 3rem;
34+
--text-5xl--line-height: 3.5rem;
35+
36+
--text-6xl: 3.75rem;
37+
--text-6xl--line-height: 1;
38+
39+
--text-7xl: 4.5rem;
40+
--text-7xl--line-height: 1;
41+
42+
--text-8xl: 6rem;
43+
--text-8xl--line-height: 1;
44+
45+
--text-9xl: 8rem;
46+
--text-9xl--line-height: 1;
47+
48+
--font-sans: var(--font-geist);
49+
--font-mono: var(--font-geist-mono);
50+
51+
--font-display: var(--font-geist);
52+
53+
--container-8xl: 88rem;
54+
}
55+
56+
@layer utilities {
57+
.font-display {
58+
font-family: var(--font-geist);
59+
font-feature-settings: "ss01";
60+
}
61+
}

‎osmium/src/ui/edit-page-link.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const EditPageLink: Component = () => {
1010
<Show when={data()?.editLink}>
1111
{(editLink) => (
1212
<a
13-
class="flex no-underline hover:text-blue-700 dark:text-slate-300 dark:hover:text-blue-300"
13+
class="not-prose flex no-underline hover:text-blue-700 dark:text-slate-300 dark:hover:text-blue-300"
1414
href={editLink()}
1515
target="_blank"
1616
>

‎osmium/src/ui/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
2020
<Show when={!props.isError}>
2121
<div class="hidden md:relative lg:block lg:flex-none">
2222
<div class="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
23-
<div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
23+
<div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block" />
2424
<div class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
25-
<div class="sticky top-[4.75rem] h-[calc(100vh-7rem)] w-64 pl-0.5 pr-2 xl:w-72">
25+
<div class="sticky top-19 h-[calc(100vh-7rem)] w-64 pl-0.5 pr-2 xl:w-72">
2626
<MainNavigation />
2727
</div>
2828
</div>
@@ -37,7 +37,7 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
3737
</main>
3838
<Show when={!props.isError}>
3939
<div class="prose prose-slate hidden w-56 shrink-0 pr-4 dark:prose-invert xl:block 2xl:w-72 dark:text-slate-300">
40-
<div class="custom-scrollbar sticky top-[4.75rem] h-[calc(100vh-7rem)] overflow-y-auto">
40+
<div class="custom-scrollbar sticky top-19 h-[calc(100vh-7rem)] overflow-y-auto">
4141
<SidePanel />
4242
</div>
4343
</div>

‎osmium/src/ui/layout/hero.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Hero: Component = () => {
3939
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
4040
<div class="relative md:text-center lg:text-left">
4141
<div class="relative">
42-
<h2 class="inline bg-gradient-to-r from-blue-700 via-slate-800 to-blue-700 bg-clip-text text-5xl font-bold tracking-tight text-transparent dark:from-indigo-200 dark:via-blue-400 dark:to-indigo-200">
42+
<h2 class="inline bg-linear-to-r from-blue-700 via-slate-800 to-blue-700 bg-clip-text text-5xl font-bold tracking-tight text-transparent dark:from-indigo-200 dark:via-blue-400 dark:to-indigo-200">
4343
<Switch fallback={i18n.t("hero.title")}>
4444
<Match when={isStart()?.path}>
4545
Solid<span class="font-thin">Start</span>
@@ -74,15 +74,15 @@ export const Hero: Component = () => {
7474
</div>
7575
<div class="relative lg:static xl:pl-10">
7676
<div class="relative">
77-
<div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-blue-500 via-blue-500/70 to-blue-300 opacity-10 blur-lg dark:bg-white dark:from-blue-300 dark:via-blue-300/70" />
78-
<div class="absolute inset-0 rounded-2xl bg-gradient-to-tr from-blue-300 via-blue-300/70 to-blue-300 opacity-10" />
77+
<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-blue-500 via-blue-500/70 to-blue-300 opacity-10 blur-lg dark:bg-white dark:from-blue-300 dark:via-blue-300/70" />
78+
<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-blue-300 via-blue-300/70 to-blue-300 opacity-10" />
7979
<div class="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-blue-200/10 backdrop-blur">
80-
<div class="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-blue-300/0 via-blue-300/70 to-blue-300/0" />
81-
<div class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-800 to-blue-400/0 dark:via-blue-400" />
80+
<div class="absolute -top-px left-20 right-11 h-px bg-linear-to-r from-blue-300/0 via-blue-300/70 to-blue-300/0" />
81+
<div class="absolute -bottom-px left-11 right-20 h-px bg-linear-to-r from-blue-400/0 via-blue-800 to-blue-400/0 dark:via-blue-400" />
8282
<div class="pl-4 pt-4">
8383
<TrafficLightsIcon class="h-2.5 w-auto stroke-slate-500/30" />
8484
<div class="mt-4 flex space-x-2 text-xs">
85-
<div class="flex h-6 rounded-full border border-blue-400 bg-gradient-to-r from-blue-400/30 via-blue-400 to-blue-400/30 p-px font-semibold text-blue-300 shadow-sm dark:border-none">
85+
<div class="flex h-6 rounded-full border border-blue-400 bg-linear-to-r from-blue-400/30 via-blue-400 to-blue-400/30 p-px font-semibold text-blue-300 shadow-sm dark:border-none">
8686
<div class="flex items-center rounded-full bg-slate-800 px-2.5">
8787
Counter.jsx
8888
</div>

0 commit comments

Comments
 (0)