@sviy/ui 0.0.0-stage → 0.0.9

package/theme.css

@@ -0,0 +1,223 @@
+/*
+ * @sviy/ui — house theme.
+ *
+ * Consumers import this ONCE, immediately after Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@sviy/ui/theme.css";
+ *   @source "../node_modules/@sviy/ui";
+ *
+ * This file deliberately does NOT import tailwindcss — the consuming app owns
+ * that, so it controls the Tailwind version and the scan roots.
+ */
+
+/* House typeface, self-hosted. Fonts must not come from a third-party CDN: a
+   Cloudron app should make no external request at runtime, so the faces are
+   vendored via @fontsource and bundled. */
+@import "@fontsource/ibm-plex-sans/latin-400.css";
+@import "@fontsource/ibm-plex-sans/latin-500.css";
+@import "@fontsource/ibm-plex-sans/latin-600.css";
+
+/* Component enter/leave animations (Dialog, Select, ...). Owned by the kit
+   because the kit's components are what depend on it. */
+@import "tw-animate-css";
+
+/* Base stylesheet for the Toaster (sonner). Same reasoning: the kit does not
+   make the app remember a second CSS import for one component. */
+@import "vue-sonner/style.css";
+
+/*
+ * Scan the kit's own component source for utility classes. Tailwind does not
+ * look inside node_modules by default, and this file lives at the package
+ * root, so `./src` resolves to the installed copy wherever it lands. Keeping
+ * the directive here means a consuming app needs only two CSS lines and cannot
+ * forget it.
+ */
+@source "./src";
+
+/* Dark mode is CLASS-based, not `prefers-color-scheme`. One switch, no media
+   queries: an agent editing a component's light styling cannot silently break
+   dark mode, because `dark:` variants sit next to the light classes. The app
+   toggles `.dark` on <html>. */
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Reka attribute variants.
+ *
+ * Tailwind v4 has no bare `data-*` variant: `data-open:` compiles to the
+ * literal attribute selector `[data-open]`. Reka never writes those attribute
+ * names — it signals state through `data-state` and orientation through
+ * `data-orientation`. So without the declarations below, every `data-open:` /
+ * `data-closed:` / `data-checked:` / `data-unchecked:` / `data-horizontal:` /
+ * `data-vertical:` class in the kit is dead styling, and it fails SILENTLY:
+ * the build succeeds and the CSS is simply never matched.
+ *
+ * These registrations cover `group-` / `peer-` forms too, so
+ * `group-data-vertical/tabs:flex-col` resolves as well.
+ *
+ * Every other bare variant the components use (`data-active:`, `data-disabled:`,
+ * `data-inset:`, `data-placeholder:`, `data-slot:`, `data-variant:`, ...) is
+ * backed by an attribute that Reka or the kit's own template actually writes,
+ * which is why those work unregistered. See README §3 before adding one.
+ */
+@custom-variant data-open (&[data-state="open"]);
+@custom-variant data-closed (&[data-state="closed"]);
+@custom-variant data-checked (&[data-state="checked"]);
+@custom-variant data-unchecked (&[data-state="unchecked"]);
+@custom-variant data-horizontal (&[data-orientation="horizontal"]);
+@custom-variant data-vertical (&[data-orientation="vertical"]);
+
+@theme {
+  /* The house typeface. Tailwind v4's preflight sets `font-family` on <html>
+     from `--default-font-family`, which defaults to `var(--font-sans)` — so
+     this single declaration re-fonts every component in the kit. */
+  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, sans-serif;
+}
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/*
+ * Section 1 — house brand. Rebranding is editing these values; nothing else in
+ * the kit or in any app needs to change.
+ */
+:root {
+  --radius: 0.5rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.45 0.06 240);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.45 0.06 240);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+/*
+ * Section 2 — the dark counterparts. Class-based, so these are plain overrides
+ * of the same token names: there is exactly one place to look for any colour.
+ */
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.7 0.07 240);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/*
+ * Section 3 — third-party corrections.
+ *
+ * The Toaster's own stylesheet declares `font-family` on the toaster container.
+ * A declaration beats inheritance, so `<body>` being re-fonted is not enough:
+ * the toast silently falls back to `ui-sans-serif` and every notification looks
+ * like it came from a different product. Re-declaring the token here is the
+ * only override the kit needs — this rule is deliberately unlayered and last,
+ * so it wins on source order against the imported stylesheet without a
+ * specificity fight.
+ *
+ * If a future component ships its own hardcoded colour or font, fix it here
+ * rather than in every app.
+ */
+[data-sonner-toaster] {
+  font-family: var(--font-sans);
+}