@aortl/admin-css 0.0.1 → 0.2.0

package/src/components/tabs.css

@@ -0,0 +1,172 @@
+@layer components {
+  .tabs {
+    @apply flex flex-col;
+  }
+
+  /* List + tab buttons. Same classes are produced by Base UI (React) and the
+     vanilla radio-input markup, so styling is shared. All selectors are
+     scoped under `.tabs` so generic `class="tab"` markup elsewhere on the
+     page (e.g. Starlight's own <Tabs> component) doesn't pick them up. */
+  .tabs .tab-list {
+    @apply inline-flex items-center gap-1 border-b border-border;
+    /* Anchor for the optional .tab-indicator */
+    position: relative;
+  }
+
+  .tabs .tab {
+    @apply inline-flex items-center gap-1.5
+           px-3 h-9
+           text-sm leading-none font-medium
+           text-text-muted bg-transparent
+           border-0 cursor-pointer select-none
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           hover:text-text
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .tabs .tab[data-selected],
+  .tabs .tab[aria-selected="true"] {
+    @apply text-text;
+  }
+
+  /* Vanilla radio-input pattern: hide the inputs visually, treat the following
+     <label class="tab"> as the selected tab when the radio is :checked.
+     Pairs with `:has(input:checked)` below to show the right panel. */
+  .tabs .tab-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .tabs .tab-input:checked + .tab {
+    @apply text-text;
+  }
+
+  .tabs .tab-input:focus-visible + .tab {
+    @apply outline-2 outline-offset-2 outline-primary;
+  }
+
+  /* Bordered (default) — underline marker on the active tab. The pseudo sits
+     below the .tab, overlapping the .tab-list bottom border. */
+  .tabs-bordered .tab,
+  .tabs:not(.tabs-boxed) .tab {
+    position: relative;
+  }
+
+  .tabs-bordered .tab::after,
+  .tabs:not(.tabs-boxed) .tab::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: -1px;
+    block-size: 2px;
+    background-color: var(--color-primary);
+    transform: scaleX(0);
+    transition: transform 150ms ease;
+  }
+
+  .tabs-bordered .tab[data-selected]::after,
+  .tabs-bordered .tab[aria-selected="true"]::after,
+  .tabs-bordered .tab-input:checked + .tab::after,
+  .tabs:not(.tabs-boxed) .tab[data-selected]::after,
+  .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after,
+  .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
+    transform: scaleX(1);
+  }
+
+  /* Boxed (segmented control) — adjacent tabs share borders. */
+  .tabs-boxed .tab-list {
+    @apply gap-0 p-0.5 border border-border rounded-md bg-surface-muted;
+  }
+
+  .tabs-boxed .tab {
+    @apply rounded;
+  }
+
+  .tabs-boxed .tab[data-selected],
+  .tabs-boxed .tab[aria-selected="true"],
+  .tabs-boxed .tab-input:checked + .tab {
+    @apply bg-surface text-text shadow-sm;
+  }
+
+  /* Full width — list stretches across the container, tabs share space evenly. */
+  .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
+    @apply flex w-full;
+  }
+
+  .tabs-full-width:not([data-orientation="vertical"]) .tab {
+    @apply flex-1 justify-center;
+  }
+
+  /* Sizes — cascade to nested tabs. */
+  .tabs-sm .tab {
+    @apply px-2 h-7 text-xs;
+  }
+
+  .tabs-lg .tab {
+    @apply px-4 h-11 text-base;
+  }
+
+  /* Panels — Base UI handles hidden state via data-hidden / hidden attr. */
+  .tabs .tab-panel {
+    @apply pt-3 outline-none;
+  }
+
+  /* Vanilla radio-input pattern: only the panel whose data-for matches the
+     checked input is shown. Each .tabs root scopes its own selectors. */
+  .tabs .tab-panel {
+    display: none;
+  }
+
+  .tabs:has(.tab-input[value="1"]:checked) .tab-panel[data-value="1"],
+  .tabs:has(.tab-input[value="2"]:checked) .tab-panel[data-value="2"],
+  .tabs:has(.tab-input[value="3"]:checked) .tab-panel[data-value="3"],
+  .tabs:has(.tab-input[value="4"]:checked) .tab-panel[data-value="4"],
+  .tabs:has(.tab-input[value="5"]:checked) .tab-panel[data-value="5"],
+  .tabs:has(.tab-input[value="6"]:checked) .tab-panel[data-value="6"] {
+    display: block;
+  }
+
+  /* Base UI path: it renders the panel and applies `hidden`, so the rule
+     above is a no-op there. Reinstate display when the panel is shown by
+     Base UI. */
+  .tabs .tab-panel:not([hidden]):not([data-value]) {
+    display: block;
+  }
+
+  /* Vertical orientation. */
+  .tabs[data-orientation="vertical"] {
+    @apply flex-row gap-3;
+  }
+
+  .tabs[data-orientation="vertical"] .tab-list {
+    @apply flex-col items-stretch border-b-0 border-r border-border;
+  }
+
+  .tabs[data-orientation="vertical"] .tab {
+    @apply w-full justify-start;
+  }
+
+  .tabs[data-orientation="vertical"].tabs-bordered .tab::after,
+  .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
+    inset-inline: auto;
+    inset-inline-end: -1px;
+    inset-block: 0;
+    inline-size: 2px;
+    block-size: auto;
+    transform: scaleY(0);
+  }
+
+  .tabs[data-orientation="vertical"].tabs-bordered .tab[data-selected]::after,
+  .tabs[data-orientation="vertical"].tabs-bordered .tab[aria-selected="true"]::after,
+  .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after,
+  .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
+    transform: scaleY(1);
+  }
+}

package/src/components/textarea.css

@@ -0,0 +1,33 @@
+@layer components {
+  .textarea {
+    @apply block w-full px-3 py-2 min-h-20 resize-y
+           rounded-lg text-sm
+           bg-surface text-text
+           border border-transparent
+           transition-colors duration-150
+           placeholder:text-text-muted
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .textarea-bordered {
+    @apply border-border hover:border-border-strong;
+  }
+
+  .textarea-ghost {
+    @apply bg-transparent hover:bg-surface-muted;
+  }
+
+  .textarea-danger {
+    @apply border-danger focus-visible:outline-danger;
+  }
+
+  /* Sizes */
+  .textarea-sm {
+    @apply text-xs px-2.5 py-1.5 min-h-16;
+  }
+
+  .textarea-lg {
+    @apply text-base px-4 py-2.5 min-h-24;
+  }
+}

package/src/fonts.css

@@ -0,0 +1,88 @@
+/*
+ * IBM Plex Sans + Mono — the default UI typeface for this design system.
+ *
+ * Hosted on Google's CDN (fonts.gstatic.com), latin + latin-ext subsets
+ * only. Plex Sans is served as a variable font (one file covers weights
+ * 400–600 via the wght axis); Plex Mono ships as discrete weight files.
+ *
+ * `font-display: optional` — the browser uses the fallback stack from
+ * `--font-sans` / `--font-mono` if Plex isn't ready in ~100ms, then
+ * caches it for the next page load. No FOUT, no layout shift, and on
+ * fast networks the typeface still wins on first paint.
+ *
+ * Opt out by overriding `--font-sans` / `--font-mono`, or by importing
+ * admin-css's source files individually and skipping this one.
+ */
+
+/* IBM Plex Sans — variable, weights 400–600 */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2)
+    format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2)
+    format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* IBM Plex Mono — discrete weights 400, 500 */
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2)
+    format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2)
+    format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2)
+    format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: optional;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2)
+    format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+@import "./fonts.css";
 @import "./theme.css";
 @import "./base.css";
 @import "./components/index.css";

package/src/theme.css

@@ -7,11 +7,19 @@
  *
  *   1. Palette — the Flexoki ramps (paper, black, base, red, orange,
  *      yellow, green, cyan, blue, purple, magenta). Replaces Tailwind's
- *      default colors entirely.
+ *      default colors entirely. Tones are absolute and identical in
+ *      light/dark mode — Flexoki's inverted ramp pairs (paper↔black,
+ *      base-50↔base-950, blue-600↔blue-400, …) live in the semantic
+ *      layer below.
  *
  *   2. Semantic — purpose-named aliases (primary, surface, danger, ...)
- *      pointing at palette tones. Components use these, never the palette
- *      directly, so reskinning means remapping the alias:
+ *      pointing at palette tones via `light-dark()`. The active value
+ *      tracks the cascaded `color-scheme` declared on :root: auto by
+ *      default (system preference), forced via `[data-theme="dark"]` or
+ *      `[data-theme="light"]`. Components only reference these aliases,
+ *      so they pick up dark mode for free.
+ *
+ *      Reskin by remapping the alias:
  *
  *        :root { --color-primary: var(--color-green-600); }
  *
@@ -163,46 +171,131 @@
 }
 
 @theme static {
+  /*
+   * Typography — only the font stack is tokenized. Sizes, weights, and
+   * line-heights compose from Tailwind's default scale at the call site
+   * (`text-sm`, `font-semibold`, `leading-tight`, …) — the system is
+   * dense and small enough that an extra semantic layer would just be
+   * indirection. Override `--font-sans` to swap the entire UI font.
+   */
+  --font-sans:
+    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+}
+
+@theme static {
+  /*
+   * Semantic tokens — each declared once via `light-dark()`. The two
+   * branches are Flexoki's symmetric ramp pairs:
+   *   - paper ↔ black, base-50 ↔ base-950, base-150 ↔ base-850, …
+   *   - accent-600 ↔ accent-400, accent-50 ↔ accent-950
+   *
+   * On accent buttons in dark mode the base shifts to the lighter
+   * accent-400 tone, so `content` (text on top) flips to black for
+   * legibility — the same trade-off `warning` already makes in both
+   * modes against bright yellow.
+   */
+
   /* Surfaces */
-  --color-surface: var(--color-paper);
-  --color-surface-muted: var(--color-base-50);
-  --color-surface-strong: var(--color-base-100);
+  --color-surface: light-dark(var(--color-paper), var(--color-black));
+  --color-surface-muted: light-dark(var(--color-base-50), var(--color-base-950));
+  --color-surface-strong: light-dark(var(--color-base-100), var(--color-base-900));
 
   /* Text */
-  --color-text: var(--color-black);
-  --color-text-muted: var(--color-base-600);
+  --color-text: light-dark(var(--color-black), var(--color-base-200));
+  --color-text-muted: light-dark(var(--color-base-600), var(--color-base-500));
 
   /* Borders */
-  --color-border: var(--color-base-150);
-  --color-border-strong: var(--color-base-300);
+  --color-border: light-dark(var(--color-base-150), var(--color-base-850));
+  --color-border-strong: light-dark(var(--color-base-300), var(--color-base-700));
 
   /* Primary — Flexoki blue */
-  --color-primary: var(--color-blue-600);
-  --color-primary-hover: var(--color-blue-700);
-  --color-primary-muted: var(--color-blue-50);
-  --color-primary-content: var(--color-paper);
+  --color-primary: light-dark(var(--color-blue-600), var(--color-blue-400));
+  --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-primary-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
+  --color-primary-content: light-dark(var(--color-paper), var(--color-black));
+
+  /* System accent — per-app brand signal. Drives the navbar's 2px bottom
+     stripe and the footer's matching top stripe (both always on), plus
+     `.brand-tile` backgrounds. Defaults to a neutral gray so an un-branded
+     shell reads as chrome rather than a brand mark; override at :root (or
+     via inline style on .app-shell) to brand-shift a whole app. The -hover,
+     -muted, and -content siblings derive from the base via `color-mix`,
+     so a single override propagates. Mixing toward `--color-text` and
+     `--color-surface` (themselves `light-dark()` pairs) keeps the
+     derivations in step with light/dark mode without nesting light-dark()
+     inside color-mix(). Bright accents (e.g. yellow) may want a manual
+     -content override for contrast. */
+  --color-system-accent: light-dark(var(--color-base-600), var(--color-base-400));
+  --color-system-accent-hover: color-mix(
+    in oklch,
+    var(--color-system-accent),
+    var(--color-text) 12%
+  );
+  --color-system-accent-muted: color-mix(
+    in oklch,
+    var(--color-system-accent) 12%,
+    var(--color-surface)
+  );
+  --color-system-accent-content: light-dark(var(--color-paper), var(--color-black));
 
   /* Danger — red */
-  --color-danger: var(--color-red-600);
-  --color-danger-hover: var(--color-red-700);
-  --color-danger-muted: var(--color-red-50);
-  --color-danger-content: var(--color-paper);
+  --color-danger: light-dark(var(--color-red-600), var(--color-red-400));
+  --color-danger-hover: light-dark(var(--color-red-700), var(--color-red-300));
+  --color-danger-muted: light-dark(var(--color-red-50), var(--color-red-950));
+  --color-danger-content: light-dark(var(--color-paper), var(--color-black));
 
   /* Success — green */
-  --color-success: var(--color-green-600);
-  --color-success-hover: var(--color-green-700);
-  --color-success-muted: var(--color-green-50);
-  --color-success-content: var(--color-paper);
+  --color-success: light-dark(var(--color-green-600), var(--color-green-400));
+  --color-success-hover: light-dark(var(--color-green-700), var(--color-green-300));
+  --color-success-muted: light-dark(var(--color-green-50), var(--color-green-950));
+  --color-success-content: light-dark(var(--color-paper), var(--color-black));
 
-  /* Warning — yellow (dark text for legibility on the bright base) */
+  /* Warning — yellow (stays bright in both modes; dark text either way) */
   --color-warning: var(--color-yellow-400);
-  --color-warning-hover: var(--color-yellow-500);
-  --color-warning-muted: var(--color-yellow-50);
+  --color-warning-hover: light-dark(var(--color-yellow-500), var(--color-yellow-300));
+  --color-warning-muted: light-dark(var(--color-yellow-50), var(--color-yellow-950));
   --color-warning-content: var(--color-black);
 
   /* Info — cyan */
-  --color-info: var(--color-cyan-600);
-  --color-info-hover: var(--color-cyan-700);
-  --color-info-muted: var(--color-cyan-50);
-  --color-info-content: var(--color-paper);
+  --color-info: light-dark(var(--color-cyan-600), var(--color-cyan-400));
+  --color-info-hover: light-dark(var(--color-cyan-700), var(--color-cyan-300));
+  --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
+  --color-info-content: light-dark(var(--color-paper), var(--color-black));
+}
+
+/*
+ * Activate `light-dark()` resolution. `light dark` follows the OS
+ * preference; the attribute overrides force a specific mode and also
+ * flip native form controls, scrollbars, etc. The attribute selector
+ * isn't scoped to :root so subtrees can opt into a different mode (e.g.
+ * a dark hero section on an otherwise light page).
+ */
+:root {
+  color-scheme: light dark;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+/*
+ * Align Tailwind's `dark:` variant with the same resolution rules so
+ * authored utilities (`dark:shadow-lg`, …) match what the tokens do.
+ * Default v4 uses prefers-color-scheme alone, which would ignore the
+ * [data-theme] override.
+ */
+@custom-variant dark {
+  &:where([data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:not([data-theme="light"], [data-theme="light"] *)) {
+      @slot;
+    }
+  }
 }