Skip to content

Converted CSS variables to Tailwind 4 theme variables #432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maurer2 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Converted CSS variables to Tailwind 4 theme variables #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export default function Footer() {
const year = new Date().getFullYear()

return (
<footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
<footer className="mt-20 border-t border-line px-4 pb-14 pt-10 text-sea-ink-soft">
<div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
<p className="m-0 text-sm">&copy; {year} Your name here. All rights reserved.</p>
<p className="island-kicker m-0">Built with TanStack Start</p>
Expand All @@ -12,7 +12,7 @@ export default function Footer() {
href="https://x.com/tan_stack"
target="_blank"
rel="noreferrer"
className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
className="rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink"
>
<span className="sr-only">Follow TanStack on X</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
Expand All @@ -26,7 +26,7 @@ export default function Footer() {
href="https://github.com/TanStack"
target="_blank"
rel="noreferrer"
className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
className="rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink"
>
<span className="sr-only">Go to TanStack GitHub</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
Expand Down
12 changes: 6 additions & 6 deletions packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ const userHeaders = integrations.filter((i) => i.type === 'header-user');

export default function Header() {
return (
<header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
<header className="sticky top-0 z-50 border-b border-line bg-header-bg px-4 backdrop-blur-lg">
<nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
<h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
<Link
to="/"
className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
className="inline-flex items-center gap-2 rounded-full border border-chip-line bg-chip-bg px-3 py-1.5 text-sm text-sea-ink no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
>
<span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
TanStack Start
Expand All @@ -36,7 +36,7 @@ export default function Header() {
href="https://x.com/tan_stack"
target="_blank"
rel="noreferrer"
className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
className="hidden rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink sm:block"
>
<span className="sr-only">Follow TanStack on X</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
Expand All @@ -50,7 +50,7 @@ export default function Header() {
href="https://github.com/TanStack"
target="_blank"
rel="noreferrer"
className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
className="hidden rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink sm:block"
>
<span className="sr-only">Go to TanStack GitHub</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
Expand Down Expand Up @@ -86,10 +86,10 @@ export default function Header() {
</a>
<% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
<summary className="nav-link list-none cursor-pointer">Demos</summary>
<div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
<div className="mt-2 min-w-56 rounded-xl border border-line bg-header-bg p-2 shadow-lg sm:absolute sm:right-0">
<% for (const route of demoRoutes) { %><a
href="<%= route.url %>"
className="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
className="block rounded-lg px-3 py-2 text-sm text-sea-ink-soft no-underline transition hover:bg-link-bg-hover hover:text-sea-ink"
>
<%= route.name %>
</a>
Expand Down
2 changes: 1 addition & 1 deletion packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function ThemeToggle() {
onClick={toggleMode}
aria-label={label}
title={label}
className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
className="rounded-full border border-chip-line bg-chip-bg px-3 py-1.5 text-sm font-semibold text-sea-ink shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
>
{mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
</button>
Expand Down
4 changes: 2 additions & 2 deletions packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ function About() {
<main className="page-wrap px-4 py-12">
<section className="island-shell rounded-2xl p-6 sm:p-8">
<p className="island-kicker mb-2">About</p>
<h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
<h1 className="display-title mb-3 text-4xl font-bold text-sea-ink sm:text-5xl">
A small starter with room to grow.
</h1>
<p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
<p className="m-0 max-w-3xl text-base leading-8 text-sea-ink-soft">
TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
</p>
Expand Down
14 changes: 7 additions & 7 deletions packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ function App() {
<div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
<div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
<p className="island-kicker mb-3">TanStack Start Base Template</p>
<h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
<h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-sea-ink sm:text-6xl">
Start simple, ship quickly.
</h1>
<p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
<p className="mb-8 max-w-2xl text-base text-sea-ink-soft sm:text-lg">
This base starter intentionally keeps things light: two routes, clean structure,
and the essentials you need to build from scratch.
</p>
<div className="flex flex-wrap gap-3">
<a
href="/about"
className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-lagoon-deep no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
>
About This Starter
</a>
<a
href="https://tanstack.com/router"
target="_blank"
rel="noopener noreferrer"
className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-sea-ink no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
>
Router Guide
</a>
Expand All @@ -46,15 +46,15 @@ function App() {
className="island-shell feature-card rise-in rounded-2xl p-5"
style={{ animationDelay: `${index * 90 + 80}ms` }}
>
<h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
<p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
<h2 className="mb-2 text-base font-semibold text-sea-ink">{title}</h2>
<p className="m-0 text-sm text-sea-ink-soft">{desc}</p>
</article>
))}
</section>

<section className="island-shell mt-8 rounded-2xl p-6">
<p className="island-kicker mb-2">Quick Start</p>
<ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
<ul className="m-0 list-disc space-y-2 pl-5 text-sm text-sea-ink-soft">
<li>
Edit <code>src/routes/index.tsx</code> to customize the home page.
</li>
Expand Down
157 changes: 77 additions & 80 deletions packages/create/src/frameworks/react/project/base/src/styles.css.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,73 +4,70 @@

@theme {
--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

:root {
--sea-ink: #173a40;
--sea-ink-soft: #416166;
--lagoon: #4fb8b2;
--lagoon-deep: #328f97;
--palm: #2f6a4a;
--sand: #e7f0e8;
--foam: #f3faf5;
--surface: rgba(255, 255, 255, 0.74);
--surface-strong: rgba(255, 255, 255, 0.9);
--line: rgba(23, 58, 64, 0.14);
--inset-glint: rgba(255, 255, 255, 0.82);
--kicker: rgba(47, 106, 74, 0.9);
--bg-base: #e7f3ec;
--header-bg: rgba(251, 255, 248, 0.84);
--chip-bg: rgba(255, 255, 255, 0.8);
--chip-line: rgba(47, 106, 74, 0.18);
--link-bg-hover: rgba(255, 255, 255, 0.9);
--hero-a: rgba(79, 184, 178, 0.36);
--hero-b: rgba(47, 106, 74, 0.2);
--color-sea-ink: #173a40;
--color-sea-ink-soft: #416166;
--color-lagoon: #4fb8b2;
--color-lagoon-deep: #328f97;
--color-palm: #2f6a4a;
--color-sand: #e7f0e8;
--color-foam: #f3faf5;
--color-surface: rgba(255, 255, 255, 0.74);
--color-surface-strong: rgba(255, 255, 255, 0.9);
--color-line: rgba(23, 58, 64, 0.14);
--color-inset-glint: rgba(255, 255, 255, 0.82);
--color-kicker: rgba(47, 106, 74, 0.9);
--color-bg-base: #e7f3ec;
--color-header-bg: rgba(251, 255, 248, 0.84);
--color-chip-bg: rgba(255, 255, 255, 0.8);
--color-chip-line: rgba(47, 106, 74, 0.18);
--color-link-bg-hover: rgba(255, 255, 255, 0.9);
--color-hero-a: rgba(79, 184, 178, 0.36);
--color-hero-b: rgba(47, 106, 74, 0.2);
}

:root[data-theme="dark"] {
--sea-ink: #d7ece8;
--sea-ink-soft: #afcdc8;
--lagoon: #60d7cf;
--lagoon-deep: #8de5db;
--palm: #6ec89a;
--sand: #0f1a1e;
--foam: #101d22;
--surface: rgba(16, 30, 34, 0.8);
--surface-strong: rgba(15, 27, 31, 0.92);
--line: rgba(141, 229, 219, 0.18);
--inset-glint: rgba(194, 247, 238, 0.14);
--kicker: #b8efe5;
--bg-base: #0a1418;
--header-bg: rgba(10, 20, 24, 0.8);
--chip-bg: rgba(13, 28, 32, 0.9);
--chip-line: rgba(141, 229, 219, 0.24);
--link-bg-hover: rgba(24, 44, 49, 0.8);
--hero-a: rgba(96, 215, 207, 0.18);
--hero-b: rgba(110, 200, 154, 0.12);
--color-sea-ink: #d7ece8;
--color-sea-ink-soft: #afcdc8;
--color-lagoon: #60d7cf;
--color-lagoon-deep: #8de5db;
--color-palm: #6ec89a;
--color-sand: #0f1a1e;
--color-foam: #101d22;
--color-surface: rgba(16, 30, 34, 0.8);
--color-surface-strong: rgba(15, 27, 31, 0.92);
--color-line: rgba(141, 229, 219, 0.18);
--color-inset-glint: rgba(194, 247, 238, 0.14);
--color-kicker: #b8efe5;
--color-bg-base: #0a1418;
--color-header-bg: rgba(10, 20, 24, 0.8);
--color-chip-bg: rgba(13, 28, 32, 0.9);
--color-chip-line: rgba(141, 229, 219, 0.24);
--color-link-bg-hover: rgba(24, 44, 49, 0.8);
--color-hero-a: rgba(96, 215, 207, 0.18);
--color-hero-b: rgba(110, 200, 154, 0.12);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--sea-ink: #d7ece8;
--sea-ink-soft: #afcdc8;
--lagoon: #60d7cf;
--lagoon-deep: #8de5db;
--palm: #6ec89a;
--sand: #0f1a1e;
--foam: #101d22;
--surface: rgba(16, 30, 34, 0.8);
--surface-strong: rgba(15, 27, 31, 0.92);
--line: rgba(141, 229, 219, 0.18);
--inset-glint: rgba(194, 247, 238, 0.14);
--kicker: #b8efe5;
--bg-base: #0a1418;
--header-bg: rgba(10, 20, 24, 0.8);
--chip-bg: rgba(13, 28, 32, 0.9);
--chip-line: rgba(141, 229, 219, 0.24);
--link-bg-hover: rgba(24, 44, 49, 0.8);
--hero-a: rgba(96, 215, 207, 0.18);
--hero-b: rgba(110, 200, 154, 0.12);
--color-sea-ink: #d7ece8;
--color-sea-ink-soft: #afcdc8;
--color-lagoon: #60d7cf;
--color-lagoon-deep: #8de5db;
--color-palm: #6ec89a;
--color-sand: #0f1a1e;
--color-foam: #101d22;
--color-surface: rgba(16, 30, 34, 0.8);
--color-surface-strong: rgba(15, 27, 31, 0.92);
--color-line: rgba(141, 229, 219, 0.18);
--color-inset-glint: rgba(194, 247, 238, 0.14);
--color-kicker: #b8efe5;
--color-bg-base: #0a1418;
--color-header-bg: rgba(10, 20, 24, 0.8);
--color-chip-bg: rgba(13, 28, 32, 0.9);
--color-chip-line: rgba(141, 229, 219, 0.24);
--color-link-bg-hover: rgba(24, 44, 49, 0.8);
--color-hero-a: rgba(96, 215, 207, 0.18);
--color-hero-b: rgba(110, 200, 154, 0.12);
}
}

Expand All @@ -86,14 +83,14 @@ body,

body {
margin: 0;
color: var(--sea-ink);
color: var(--color-sea-ink);
font-family: var(--font-sans);
background-color: var(--bg-base);
background-color: var(--color-bg-base);
background:
radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
radial-gradient(1100px 620px at -8% -10%, var(--color-hero-a), transparent 58%),
radial-gradient(1050px 620px at 112% -12%, var(--color-hero-b), transparent 62%),
radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
linear-gradient(180deg, color-mix(in oklab, var(--color-sand) 68%, white) 0%, var(--color-foam) 44%, var(--color-bg-base) 100%);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand Down Expand Up @@ -127,7 +124,7 @@ body::after {
}

a {
color: var(--lagoon-deep);
color: var(--color-lagoon-deep);
text-decoration-color: rgba(50, 143, 151, 0.4);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
Expand All @@ -139,8 +136,8 @@ a:hover {

code {
font-size: 0.9em;
border: 1px solid var(--line);
background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
border: 1px solid var(--color-line);
background: color-mix(in oklab, var(--color-surface-strong) 82%, white 18%);
border-radius: 7px;
padding: 2px 7px;
}
Expand All @@ -164,26 +161,26 @@ pre code {
}

.island-shell {
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
border: 1px solid var(--color-line);
background: linear-gradient(165deg, var(--color-surface-strong), var(--color-surface));
box-shadow:
0 1px 0 var(--inset-glint) inset,
0 1px 0 var(--color-inset-glint) inset,
0 22px 44px rgba(30, 90, 72, 0.1),
0 6px 18px rgba(23, 58, 64, 0.08);
backdrop-filter: blur(4px);
}

.feature-card {
background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
background: linear-gradient(165deg, color-mix(in oklab, var(--color-surface-strong) 93%, white 7%), var(--color-surface));
box-shadow:
0 1px 0 var(--inset-glint) inset,
0 1px 0 var(--color-inset-glint) inset,
0 18px 34px rgba(30, 90, 72, 0.1),
0 4px 14px rgba(23, 58, 64, 0.06);
}

.feature-card:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
border-color: color-mix(in oklab, var(--color-lagoon-deep) 35%, var(--color-line));
}

button,
Expand All @@ -198,15 +195,15 @@ a {
text-transform: uppercase;
font-weight: 700;
font-size: 0.69rem;
color: var(--kicker);
color: var(--color-kicker);
}

.nav-link {
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--sea-ink-soft);
color: var(--color-sea-ink-soft);
}

.nav-link::after {
Expand All @@ -218,13 +215,13 @@ a {
height: 2px;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
background: linear-gradient(90deg, var(--color-lagoon), #7ed3bf);
transition: transform 170ms ease;
}

.nav-link:hover,
.nav-link.is-active {
color: var(--sea-ink);
color: var(--color-sea-ink);
}

.nav-link:hover::after,
Expand All @@ -239,8 +236,8 @@ a {
}

.site-footer {
border-top: 1px solid var(--line);
background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
border-top: 1px solid var(--color-line);
background: color-mix(in oklab, var(--color-header-bg) 84%, transparent 16%);
}

.rise-in {
Expand Down