mirror of
https://github.com/luxfi/help.git
synced 2026-09-24 00:24:29 +00:00
zeekayandHanzo Dev
40b1764d59
Tailwind 4 out — the engine import, the `@custom-variant`, and the `@theme inline` wrapper. The tokens inside it were always plain custom properties and are untouched; what goes is the thing that was reading them. Every class attribute now reaches a converter rather than the document: Box for an element, css for an icon, the component itself for anything from @hanzo/ui. The body's ground moves into the sheet, since <body> sits outside the provider and reads no classes. The library's sheets are imported from the LAYOUT rather than @import-ed from the app's CSS: a bare package specifier does not resolve in this pipeline and the failure is silent — the whole file is dropped, so every token goes missing and the page renders on browser defaults. Also on the current toolchain: React 19.2.8, Next 16.3.3, TypeScript 7. Measured at 390px and 1280px: 4/4 page-widths clean, nothing unread. Co-authored-by: Hanzo Dev <[email protected]>
112 lines
2.8 KiB
CSS
112 lines
2.8 KiB
CSS
/**
|
|
* Lux Help Center Theme
|
|
* No utility engine: tokens and rules, read straight by the browser
|
|
*/
|
|
|
|
/* The library's sheets are imported from the LAYOUT, not here: a bare package
|
|
specifier in a plain @import does not resolve in this pipeline, and the
|
|
failure is silent — the whole file is dropped, so the tokens below never
|
|
reach the document and every link renders browser-default blue. */
|
|
|
|
|
|
:root {
|
|
--font-sans: var(--font-inter), system-ui, sans-serif;
|
|
--font-mono: ui-monospace, monospace;
|
|
--radius: 0.5rem;
|
|
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-primary: hsl(var(--primary));
|
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
--color-secondary: hsl(var(--secondary));
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
--color-muted: hsl(var(--muted));
|
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
--color-accent: hsl(var(--accent));
|
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
--color-border: hsl(var(--border));
|
|
--color-input: hsl(var(--input));
|
|
--color-ring: hsl(var(--ring));
|
|
}
|
|
|
|
/* Light mode */
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 9%;
|
|
--primary: 0 0% 9%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 0 0% 96%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--muted: 0 0% 96%;
|
|
--muted-foreground: 0 0% 45%;
|
|
--accent: 0 0% 96%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 90%;
|
|
--input: 0 0% 90%;
|
|
--ring: 0 0% 64%;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 4%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 4%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 0 0% 4%;
|
|
--secondary: 0 0% 10%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 8%;
|
|
--muted-foreground: 0 0% 55%;
|
|
--accent: 0 0% 12%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 15%;
|
|
--input: 0 0% 15%;
|
|
--ring: 0 0% 36%;
|
|
}
|
|
|
|
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body {
|
|
font-synthesis-weight: none;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.dark ::selection {
|
|
background: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
|
|
/* The body's ground. Stated here rather than as classes on <body>, which sits
|
|
outside the provider and so reads none of them. */
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|