@modern-admin/ui 0.1.0

package/src/styles.css

@@ -0,0 +1,242 @@
+/* Tailwind 4 CSS-first config. No tailwind.config.js — tokens live in @theme. */
+@import "tailwindcss";
+/* shadcn-style enter/exit/slide/zoom utilities (animate-in, fade-in-0,
+   slide-in-from-top-2, etc.) used by Radix primitives via data-state. */
+@import "tw-animate-css";
+/* `prose` long-form typography utilities for rendered HTML/Markdown
+   bodies (e.g. richtext fields). */
+@plugin "@tailwindcss/typography";
+
+/* Tailwind 4 only scans files inside the project that imports this CSS by
+   default. Our React components and shadcn primitives live in sibling
+   workspace packages, so we point the scanner at them explicitly. */
+@source "../../react/src/**/*.{ts,tsx}";
+@source "../src/**/*.{ts,tsx}";
+
+@theme {
+  --animate-accordion-down: accordion-down 0.18s ease-out;
+  --animate-accordion-up: accordion-up 0.18s ease-out;
+
+  --color-brand-50: #f5f7ff;
+  --color-brand-100: #e6ebff;
+  --color-brand-500: #4f5af3;
+  --color-brand-600: #3b46d8;
+  --color-brand-700: #2c36b3;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* Semantic colors — bound to the `:root`/`.dark` HSL variables below.
+     Exposing them via @theme makes `bg-background`, `text-foreground`,
+     `border-border`, `bg-primary` work as utilities. */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover, var(--card)));
+  --color-popover-foreground: hsl(var(--popover-foreground, var(--card-foreground)));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --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-accent: hsl(var(--accent, var(--secondary)));
+  --color-accent-foreground: hsl(var(--accent-foreground, var(--secondary-foreground)));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* shadcn-flavoured semantic tokens. Light theme is the default; the
+   `.dark` class flips them. Apps can override any variable for custom
+   themes — see packages/ui/themes for ready-made sets. */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 215 20% 65%;
+  --primary: 222 47% 11%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222 47% 11%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 40% 98%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Near-black neutrals. Very low saturation on a slight zinc hue so the
+     palette reads as black/charcoal instead of navy. */
+  --background: 240 5% 5%;
+  --foreground: 0 0% 98%;
+  --muted: 240 4% 14%;
+  --muted-foreground: 240 5% 65%;
+  --card: 240 5% 7%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 5% 7%;
+  --popover-foreground: 0 0% 98%;
+  --border: 240 4% 18%;
+  --input: 240 4% 12%;
+  --ring: 240 5% 42%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 6% 10%;
+  --secondary: 240 4% 14%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 240 4% 14%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62% 40%;
+  --destructive-foreground: 0 0% 98%;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+
+/* ── Custom scrollbars ─────────────────────────────────────────────────────
+   Themed via the same semantic tokens as the rest of the UI so they adapt
+   to light/dark/custom themes automatically. Firefox uses `scrollbar-*`
+   props; WebKit/Blink uses `::-webkit-scrollbar*`.
+
+   Scoped to actually-scrollable containers (root, body, common overflow
+   utility classes, opt-in `[data-scroll]`, textarea/pre). The previous
+   `*` selector forced WebKit to allocate scrollbar slots on every element,
+   which produced tiny "dot" artifacts at the corners of small controls
+   (buttons, selects) during hover/transition repaints. Firefox is happy
+   with declaring `scrollbar-width` only on `html` — it propagates the
+   styling to descendants automatically. */
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+) {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background-clip: padding-box;
+  transition: background-color 150ms ease;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.6);
+  background-clip: padding-box;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb:active {
+  background-color: hsl(var(--muted-foreground) / 0.85);
+  background-clip: padding-box;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-corner {
+  background: transparent;
+}