ReCloudStudio/WebHooker
1
0
Fork 0
mirror of https://github.com/ReCloudStudio/WebHooker.git synced 2026-09-22 16:11:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: migrate to Tailwind CSS v4

Browse source 
Replace @nuxtjs/tailwindcss with @tailwindcss/vite, move theme
tokens into @theme inline in main.css, drop tailwind.config.ts.
This commit is contained in:
RhenCloud 2026-08-27 00:26:17 +08:00
parent 32a8c2ce4e
commit c75567cf15
No known key found for this signature in database
GPG key ID: A574A617378C4E0B
8 changed files with 264 additions and 530 deletions
Download patch file Download diff file Expand all files Collapse all files

57
app/assets/css/main.css
View file

@ -1,14 +1,61 @@
@import "tailwindcss";
/* ---------------------------------------------------------------------------
* Theme tokens — RGB triplets so Tailwind opacity modifiers (bg-accent/10)
* work against them; values switch automatically with prefers-color-scheme
* (unless an explicit data-theme="light" is set on <html>).
* ------------------------------------------------------------------------- */
:root {
color-scheme: light;
@theme inline {
--font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--radius: 12px;
--radius-sm: 8px;
--radius: 12px;
--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
--shadow-card-hover: 0 8px 24px -12px rgba(15, 23, 42, 0.25);
--shadow-accent-lg: 0 12px 28px -10px rgb(var(--accent));
--shadow-drawer: -16px 0 48px rgba(15, 23, 42, 0.12);
--shadow-modal: 0 12px 40px rgba(15, 23, 42, 0.25);
--animate-rise: rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
--color-bg: rgb(var(--bg));
--color-surface: rgb(var(--surface));
--color-surface-2: rgb(var(--surface-2));
--color-surface-3: rgb(var(--surface-3));
--color-border: rgb(var(--border));
--color-border-strong: rgb(var(--border-strong));
--color-text: rgb(var(--text));
--color-muted: rgb(var(--muted));
--color-faint: rgb(var(--faint));
--color-accent: rgb(var(--accent));
--color-accent-strong: rgb(var(--accent-strong));
--color-accent-dim: rgb(var(--accent-dim));
--color-accent-text: rgb(var(--accent-text));
--color-accent-border: rgb(var(--accent-border));
--color-ok: rgb(var(--ok));
--color-ok-dim: rgb(var(--ok-dim));
--color-warn: rgb(var(--warn));
--color-warn-dim: rgb(var(--warn-dim));
--color-bad: rgb(var(--bad));
--color-bad-dim: rgb(var(--bad-dim));
--color-info: rgb(var(--info));
--color-info-dim: rgb(var(--info-dim));
--color-body-text: rgb(var(--body-text));
--color-code-bg: rgb(var(--code-bg));
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:root {
color-scheme: light;
--header-bg: rgba(255, 255, 255, 0.82);
--scrim: rgba(15, 23, 42, 0.4);
--knob: #ffffff;
@ -77,10 +124,6 @@
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html,
body {