@prenta/admin 2.6.1 → 2.8.0

package/src/styles/theme.css

@@ -1,11 +1,47 @@
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Layout tiers (SHELL.md §8, cms-layouts.css): `mobile:`, `tablet:`,
+ * `laptop:`, `wide:` and `4k:`, plus `narrow:` for tablet and mobile together
+ * (the kit's "Tablet + Mobile: shared" block). `not-mobile:` and
+ * `not-narrow:` are their complements.
+ *
+ * Half-open ranges, so a fractional width at a zoom level (768.5px, 1024.5px)
+ * falls in exactly one tier. `lib/tiers.ts` holds the same queries for
+ * matchMedia; `tiers.test.ts` keeps the two in step.
+ *
+ * Custom variants rather than `--breakpoint-*`: Tailwind 4.2 sorts
+ * breakpoints with parseInt() on the value (see breakpoint-order.test.ts),
+ * while custom variants are emitted after every stock variant in the order
+ * they are declared here. `narrow` comes first so a tier variant on the same
+ * element (`narrow:px-5 mobile:px-4`) wins.
+ */
+@custom-variant narrow (@media (width < 1025px));
+@custom-variant mobile (@media (width < 769px));
+@custom-variant tablet (@media (769px <= width < 1025px));
+@custom-variant laptop (@media (1025px <= width < 1441px));
+@custom-variant wide (@media (1441px <= width < 2200px));
+@custom-variant 4k (@media (width >= 2200px));
+
+@import '@fontsource/dm-sans/latin-400.css';
+@import '@fontsource/dm-sans/latin-ext-400.css';
+@import '@fontsource/dm-sans/latin-500.css';
+@import '@fontsource/dm-sans/latin-ext-500.css';
+@import '@fontsource/dm-sans/latin-600.css';
+@import '@fontsource/dm-sans/latin-ext-600.css';
+@import '@fontsource/dm-sans/latin-700.css';
+@import '@fontsource/dm-sans/latin-ext-700.css';
+@import '@fontsource/dm-mono/latin-400.css';
+@import '@fontsource/dm-mono/latin-ext-400.css';
+@import '@fontsource/dm-mono/latin-500.css';
+@import '@fontsource/dm-mono/latin-ext-500.css';
 @import './prenta-tokens.css';
 
 /*
  * Semantic Tailwind tokens mapped from the PrentaCMS design system.
- * Raw tokens live in prenta-tokens.css; Appearance accent overrides
- * mutate --acc, --primary, --sidebar-primary, etc. at runtime.
+ * Raw tokens live in prenta-tokens.css. The ThemeProvider writes the picked
+ * accent (--acc-base, --acc-lt, --acc-dk) on the admin root; --primary,
+ * --sidebar-primary and the rest follow it through --acc.
  */
 .prenta-admin {
   --font-size: var(--fs-body);
@@ -16,9 +52,10 @@
   --popover: var(--card);
   --popover-foreground: var(--txt);
   --primary: var(--acc);
-  --primary-foreground: #ffffff;
+  /* Text on every solid fill: white on Porcelain/Linen, near-black on Graphite. */
+  --primary-foreground: var(--on-acc);
   --secondary: var(--acc-l);
-  --secondary-foreground: var(--txt);
+  --secondary-foreground: var(--acc);
   /*
    * IMPORTANT: never redefine --muted here. The raw design token --muted
    * (prenta-tokens.css) is a faint TEXT color used by design-parity
@@ -30,17 +67,16 @@
   --accent: var(--acc-l);
   --accent-foreground: var(--acc);
   --destructive: var(--err);
-  --destructive-foreground: #ffffff;
+  --destructive-foreground: var(--on-acc);
   --success: var(--suc);
-  --success-foreground: #ffffff;
+  --success-foreground: var(--on-acc);
   --warning: var(--warn);
-  /* Solid `bg-warning` fills (buttons, chips). Light --warn is amber-700 so
-   * `text-warning` on tint passes AA; the paired foreground must be light. */
-  --warning-foreground: #ffffff;
-  --info: var(--info);
-  --info-foreground: #ffffff;
+  --warning-foreground: var(--on-acc);
+  /* --info is the kit token itself (prenta-tokens.css). Redeclaring it as
+     var(--info) here was a cycle that left it unset in light mode. */
+  --info-foreground: var(--on-acc);
   --brand: var(--acc);
-  --brand-foreground: #ffffff;
+  --brand-foreground: var(--on-acc);
   --border: var(--bdr);
   --input: transparent;
   --input-background: var(--card);
@@ -53,7 +89,7 @@
   --chart-3: var(--suc);
   --chart-4: var(--warn);
   --chart-5: var(--err);
-  --radius: var(--r);
+  --radius: var(--r-10);
   /*
    * Repeat the Tailwind radius theme keys as runtime tokens on the shell.
    * Custom properties resolve by INHERITANCE, not by specificity against the
@@ -66,14 +102,14 @@
    * collide, the consumer re-scopes their site values under
    * `.prenta-admin .prenta-canvas { --accent: …; --radius-sm: …; }`.
    */
-  --radius-sm: var(--r-sm);
+  --radius-sm: var(--r-6);
   --radius-md: var(--r-control);
-  --radius-lg: var(--r);
-  --radius-xl: calc(var(--r) + 2px);
+  --radius-lg: var(--r-10);
+  --radius-xl: var(--r-12);
   --sidebar: var(--sb);
   --sidebar-foreground: var(--txt);
   --sidebar-primary: var(--acc);
-  --sidebar-primary-foreground: #ffffff;
+  --sidebar-primary-foreground: var(--on-acc);
   --sidebar-accent: var(--acc-l);
   --sidebar-accent-foreground: var(--acc);
   --sidebar-border: var(--bdr);
@@ -84,17 +120,20 @@
 
 .dark .prenta-admin,
 .prenta-admin.dark {
-  --primary-foreground: #0d0c18;
-  --secondary-foreground: var(--txt);
-  --warning-foreground: #0d0c18;
-  --brand-foreground: #0d0c18;
-  --success-foreground: #0d0c18;
-  --info-foreground: #0d0c18;
-  --destructive-foreground: #0d0c18;
-  --sidebar-primary-foreground: #0d0c18;
   --surface-muted: color-mix(in srgb, var(--bdr) 40%, var(--card));
 }
 
+/* Native scrollbars and form controls follow the base, as in the kit's tokens.css. */
+.prenta-admin {
+  color-scheme: light;
+}
+
+.dark .prenta-admin,
+.prenta-admin.dark,
+.prenta-admin[data-theme='dark'] {
+  color-scheme: dark;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -144,10 +183,10 @@
   --color-tag-pink-soft: var(--tag-pink-soft);
   --color-tag-gray: var(--tag-gray);
   --color-tag-gray-soft: var(--tag-gray-soft);
-  --radius-sm: var(--r-sm);
+  --radius-sm: var(--r-6);
   --radius-md: var(--r-control);
-  --radius-lg: var(--r);
-  --radius-xl: calc(var(--r) + 2px);
+  --radius-lg: var(--r-10);
+  --radius-xl: var(--r-12);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -162,6 +201,131 @@
   --text-base: var(--fs-body);
   --text-sm: var(--fs-sub);
   --text-xs: var(--fs-hint);
+
+  /*
+   * October 2026 kit utilities. The kit ships a Tailwind v3 preset
+   * (docs/design/prenta/prenta.tailwind.preset.js); these are its names as v4
+   * aliases, so `bg-card text-sub border-bdr rounded-12 shadow-shd` resolve to
+   * the tokens. Two names differ from the preset: the kit's `muted` is a text
+   * color, but `muted` here is the shadcn surface (`bg-muted`), so kit muted
+   * text is `text-faint`; and the card heading size is `text-card-title`.
+   */
+  --color-bg: var(--bg);
+  --color-sb: var(--sb);
+  --color-bdr: var(--bdr);
+  --color-txt: var(--txt);
+  --color-sub: var(--sub);
+  --color-faint: var(--muted);
+  --color-acc: var(--acc);
+  --color-acc-l: var(--acc-l);
+  --color-acc-m: var(--acc-m);
+  --color-acc-on: var(--on-acc);
+  --color-suc: var(--suc);
+  --color-suc-l: var(--suc-l);
+  --color-warn: var(--warn);
+  --color-warn-l: var(--warn-l);
+  --color-err: var(--err);
+  --color-err-l: var(--err-l);
+  --color-info-l: var(--info-l);
+  --color-notify-dot: var(--notify-dot);
+  --color-scrim: var(--scrim);
+  --color-scrim-drawer: var(--scrim-drawer);
+  --color-code-bg: var(--code-bg);
+  --color-code-txt: var(--code-txt);
+  --color-code-cmt: var(--code-cmt);
+  --color-code-str: var(--code-str);
+  --color-code-kw: var(--code-kw);
+  --color-code-err: var(--code-err);
+  --color-code-btn-bg: var(--code-btn-bg);
+  --color-code-btn-bdr: var(--code-btn-bdr);
+  --color-code-btn-txt: var(--code-btn-txt);
+  --color-code-file: var(--code-file);
+  --color-site-bg: var(--site-bg);
+  --color-site-txt: var(--site-txt);
+  --color-site-sub: var(--site-sub);
+  --color-site-muted: var(--site-muted);
+  --color-site-bdr: var(--site-bdr);
+  --color-site-alt: var(--site-alt);
+  --color-site-alt2: var(--site-alt2);
+  --color-site-chip: var(--site-chip);
+  --color-site-foot-txt: var(--site-foot-txt);
+  --color-site-alert: var(--site-alert);
+  --color-site-thumb: var(--site-thumb);
+  --color-site-thumb-bar: var(--site-thumb-bar);
+
+  --text-page: var(--fs-page);
+  --text-page--letter-spacing: -0.5px;
+  --text-page--font-weight: 700;
+  --text-drawer: var(--fs-drawer);
+  --text-drawer--letter-spacing: -0.2px;
+  --text-drawer--font-weight: 700;
+  --text-stat: var(--fs-stat);
+  --text-stat--letter-spacing: -0.4px;
+  --text-stat--font-weight: 700;
+  --text-figure: var(--fs-figure);
+  --text-figure--font-weight: 700;
+  /* The kit's `text-card` would collide with the card color, which wins in v4. */
+  --text-card-title: var(--fs-card);
+  --text-body: var(--fs-body);
+  --text-sm2: var(--fs-sm);
+  --text-meta: var(--fs-sub);
+  --text-hint: var(--fs-hint);
+  --text-count: var(--fs-count);
+  --text-badge: var(--fs-badge);
+  --text-tab: var(--fs-tab);
+  --text-micro: var(--fs-micro);
+  --text-label: var(--fs-label);
+
+  --radius-4: var(--r-xs);
+  --radius-5: var(--r-sm);
+  --radius-6: var(--r-6);
+  --radius-7: var(--r-7);
+  --radius-8: var(--r-8);
+  --radius-9: var(--r-9);
+  --radius-10: var(--r-10);
+  --radius-12: var(--r-12);
+  --radius-14: var(--r-14);
+  --radius-pill: var(--r-pill);
+
+  --shadow-shd: var(--shd);
+  --shadow-shd2: var(--shd2);
+  --shadow-bar: var(--shd-bar);
+  --shadow-knob: var(--shd-knob);
+  --shadow-save: var(--shd-save);
+  --shadow-tabbar: var(--shd-tabbar);
+  /* Not var(--ring): this file redefines --ring as the shadcn ring COLOR. */
+  --shadow-ring: 0 0 0 3px var(--acc-m);
+
+  --spacing-sbw: var(--sbw);
+  --spacing-sbw-col: var(--sbw-col);
+  --spacing-tbh: var(--tbh);
+  --spacing-gut: var(--gut);
+
+  --ease-prenta: var(--ease);
+
+  --z-index-bar: var(--z-bar);
+  --z-index-tabbar: var(--z-tabbar);
+  --z-index-menu: var(--z-menu);
+  --z-index-drawer-scrim: var(--z-drawer-scrim);
+  --z-index-drawer: var(--z-drawer);
+  --z-index-modal: var(--z-modal);
+  --z-index-toast: var(--z-toast);
+
+  /*
+   * No kit tier breakpoints here: Tailwind 4.2 orders breakpoints by
+   * parseInt() of their value, so 64.0625rem ties with lg's 64rem and the
+   * order falls back to the name. The tiers are the custom variants at the top
+   * of this file; see breakpoint-order.test.ts.
+   */
+
+  --animate-live: prenta-live 1.2s ease-in-out infinite;
+  --animate-spin: spin 0.7s linear infinite;
+
+  @keyframes prenta-live {
+    50% {
+      opacity: 0.25;
+    }
+  }
 }
 
 /*

package/src/views/ApiKeys.tsx

@@ -205,7 +205,7 @@ export function ApiKeys({ embedded = false, onNavigate }: ApiKeysProps = {}) {
                         </td>
                         <td className="px-4 py-3">
                           {expired ? (
-                            <span className="bg-warning/10 text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
+                            <span className="bg-warn-l text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
                               Expired
                             </span>
                           ) : (
@@ -501,7 +501,7 @@ function RevealKeyDialog({
             Copy this key now — it will not be shown again. Treat it like a password.
           </Dialog.Description>
 
-          <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-4">
+          <div className="border-warning/30 bg-warn-l mb-4 flex items-start gap-2 rounded-lg border p-4">
             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
             <p className="text-foreground text-xs">
               We only store a hash of this key. If you lose it, you&apos;ll need to delete it and