@prenta/admin 2.6.1 → 2.7.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,116 @@
   --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);
+
+  --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;
+  /* 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

package/src/views/AppearanceChrome.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import type { RegionSchema } from '@prenta/core'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { UnderlineTabs } from '../components/ui/UnderlineTabs.js'
+
+// Placeholder until P-11 builds the schema-driven screen on `/chrome/*`.
+const NO_REGIONS: RegionSchema[] = []
+
+export function AppearanceChrome({
+  regions = NO_REGIONS,
+}: {
+  regions?: RegionSchema[]
+  onNavigate?: (path: string) => void
+}) {
+  const tabs = useMemo(
+    () => [
+      { id: 'announcement', label: 'Announcement' },
+      ...regions.map((region) => ({ id: region.region, label: region.region })),
+      { id: 'developer', label: 'Developer' },
+    ],
+    [regions],
+  )
+  const [tab, setTab] = useState('announcement')
+  const [text, setText] = useState('')
+  const region = regions.find((item) => item.region === tab)
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <PageHeader
+        flush
+        title="Header & Footer"
+        subtitle="Fields come from the site chrome schema."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              // No Appearance landing screen exists yet, so the section is not a link.
+              { label: 'Appearance' },
+              { label: 'Header & Footer' },
+            ]}
+          />
+        }
+      />
+      <UnderlineTabs tabs={tabs} value={tab} onChange={setTab} label="Header and footer" />
+      {tab === 'announcement' ? (
+        <label className="flex flex-col gap-2 text-base">
+          Announcement
+          <input
+            value={text}
+            maxLength={110}
+            onChange={(event) => setText(event.target.value)}
+            className="border-border bg-card rounded-md border px-3 py-2"
+          />
+          <span className="text-muted-foreground text-sm">{text.length}/110</span>
+        </label>
+      ) : null}
+      {region ? (
+        <ul className="flex flex-col gap-2">
+          {Object.entries(region.fields).map(([key, item]) => (
+            <li key={key} className="text-foreground text-base">
+              {item.label ?? key}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {tab === 'developer' ? (
+        <pre className="bg-muted overflow-x-auto rounded-md p-4 text-sm">{`defineRegion('header', { component, variants, fields: { logo: field.brand('logo') } })`}</pre>
+      ) : null}
+    </div>
+  )
+}