rimecms 0.33.0 → 1.0.0

package/dist/panel/pages/dashboard/time.js

@@ -0,0 +1,29 @@
+import { capitalize } from '../../../util/string.js';
+/**
+ * The greeting key for an hour of the day.
+ *
+ * ```ts
+ * greetingKey(9)   // 'common.good_morning'    5 to 11
+ * greetingKey(15)  // 'common.good_afternoon'  12 to 17
+ * greetingKey(22)  // 'common.good_evening'    18 to 4
+ * ```
+ */
+export function greetingKey(hour) {
+    if (hour >= 5 && hour < 12)
+        return 'common.good_morning';
+    if (hour >= 12 && hour < 18)
+        return 'common.good_afternoon';
+    return 'common.good_evening';
+}
+/**
+ * The day, spelled out, capitalized.
+ *
+ * ```ts
+ * formatDay(now, 'en')  // 'Saturday, September 26'
+ * formatDay(now, 'fr')  // 'Samedi 26 septembre'
+ * ```
+ */
+export function formatDay(date, lang) {
+    const day = new Intl.DateTimeFormat(lang, { weekday: 'long', day: 'numeric', month: 'long' });
+    return capitalize(day.format(date));
+}

package/dist/panel/pages/dashboard/types.d.ts

@@ -1,19 +1,26 @@
+import type { ResolvedPathname } from '$app/types';
 import type { AreaSlug, CollectionSlug, GenericDoc } from '../../../core/prototype/types.js';
 export type DashboardEntry = {
     slug: CollectionSlug;
     title: string;
     titleSingular: string;
-    link: string;
+    link: ResolvedPathname;
     canCreate?: boolean;
     layout?: 'rows' | 'grid';
     prototype: 'collection';
     description: string | null;
     lastEdited?: GenericDoc[];
+    /** How many documents it holds, `null` when the count failed. */
+    count?: number | null;
+    /** How many of them are drafts. */
+    drafts?: number;
 } | {
     slug: AreaSlug;
     title: string;
-    link: string;
+    link: ResolvedPathname;
     prototype: 'area';
     description: string | null;
     lastEdited?: GenericDoc[];
+    /** When it was last saved. */
+    updatedAt?: Date | string | null;
 };

package/dist/panel/pages/live/Live.svelte

@@ -4,6 +4,7 @@
   import { t__ } from '../../../core/i18n';
   import { panelPath } from '../../../core/routes/util.js';
   import LiveEditPanel from '../../components/sections/live/LiveEditPanel.svelte';
+  import Commands from '../../components/sections/commands/Commands.svelte';
   import LiveFloatingUI from '../../components/sections/live/LiveFloatingUI.svelte';
   import { Pane, PaneGroup, PaneResizer } from '../../components/ui/pane/index.js';
   import { Toaster } from '../../components/ui/sonner';
@@ -260,51 +261,53 @@
   }
 </script>
 
-<div class="rz-live-container">
-  {#if !sync}
-    <div out:fade={{ duration: 150 }} class="rz-live-container__overlay">
-      <div><SpinLoader /> {t__('common.live_in_sync')}</div>
-    </div>
-  {/if}
-
-  <Toaster />
-
-  <LiveFloatingUI
-    bind:currentDevice
-    forms={panelForms}
-    onClose={closeActivePanel}
-    {activePanel}
-    toggleRootPanel={rootDocumentPanel ? toggleRootPanel : null}
-  />
-
-  <PaneGroup direction="horizontal">
-    <Pane bind:this={paneLeft} collapsedSize={0} collapsible={true} defaultSize={30}>
-      {#if activePanel && panelContexts[activePanel.update]}
-        {#key activePanel.update}
-          <LiveEditPanel
-            doc={panelContexts[activePanel.update].doc}
-            onDataChange={makePanelOnDataChange(activePanel.update)}
-            afterSuccess={makeAfterSuccess(activePanel.update)}
-            onFormReady={(form) => {
-              panelForms[activePanel.update] = form;
-            }}
-          />
-        {/key}
-      {/if}
-    </Pane>
-
-    <PaneResizer />
-    <Pane class="rz-live-container__pane-right" defaultSize={70}>
-      <iframe
-        class={currentDevice}
-        bind:this={iframe}
-        title="edit"
-        src={data.src}
-        onerror={handleIFrameError}
-      ></iframe>
-    </Pane>
-  </PaneGroup>
-</div>
+<Commands>
+  <div class="rz-live-container">
+    {#if !sync}
+      <div out:fade={{ duration: 150 }} class="rz-live-container__overlay">
+        <div><SpinLoader /> {t__('common.live_in_sync')}</div>
+      </div>
+    {/if}
+
+    <Toaster />
+
+    <LiveFloatingUI
+      bind:currentDevice
+      forms={panelForms}
+      onClose={closeActivePanel}
+      {activePanel}
+      toggleRootPanel={rootDocumentPanel ? toggleRootPanel : null}
+    />
+
+    <PaneGroup direction="horizontal">
+      <Pane bind:this={paneLeft} collapsedSize={0} collapsible={true} defaultSize={30}>
+        {#if activePanel && panelContexts[activePanel.update]}
+          {#key activePanel.update}
+            <LiveEditPanel
+              doc={panelContexts[activePanel.update].doc}
+              onDataChange={makePanelOnDataChange(activePanel.update)}
+              afterSuccess={makeAfterSuccess(activePanel.update)}
+              onFormReady={(form) => {
+                panelForms[activePanel.update] = form;
+              }}
+            />
+          {/key}
+        {/if}
+      </Pane>
+
+      <PaneResizer />
+      <Pane class="rz-live-container__pane-right" defaultSize={70}>
+        <iframe
+          class={currentDevice}
+          bind:this={iframe}
+          title="edit"
+          src={data.src}
+          onerror={handleIFrameError}
+        ></iframe>
+      </Pane>
+    </PaneGroup>
+  </div>
+</Commands>
 
 <style>
   :global(.rz-scroll-area__viewport) {
@@ -318,14 +321,14 @@
     align-items: center;
     justify-content: flex-start;
     height: 100vh;
-    background-color: hsl(var(--rz-gray-3));
+    background-color: var(--rz-bg-page);
   }
 
   .rz-live-container__side-panel {
     width: 100%;
     flex-shrink: 0;
     flex-grow: 0;
-    border-right: var(--rz-border);
+    border-right: 1px solid var(--rz-border);
   }
 
   :global(.rz-live-hidden) {
@@ -356,9 +359,9 @@
   }
 
   .rz-live-container__overlay {
-    background-color: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-2)));
-    color: light-dark(hsl(var(--rz-gray-2)), hsl(var(--rz-gray-18)));
-    opacity: 0.93;
+    background-color: var(--rz-bg-overlay);
+    backdrop-filter: blur(var(--rz-overlay-blur));
+    color: var(--rz-fg);
     position: absolute;
     inset: 0;
     display: flex;

package/dist/panel/style/font.css

@@ -1,45 +1,34 @@
 @font-face {
-  font-family: 'Lora';
-  src: url('/assets/panel/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
+  font-family: 'geist';
+  src: url('/assets/panel/fonts/Geist-VariableFont_wght.ttf') format('truetype');
   font-weight: 100 1000;
-  font-style: Italic;
 }
 
 @font-face {
-  font-family: 'Lora';
-  src: url('/assets/panel/fonts/Lora-VariableFont_wght.ttf') format('truetype');
+  font-family: 'geist-mono';
+  src: url('/assets/panel/fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
   font-weight: 100 1000;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Chivo';
-  src: url('/assets/panel/fonts/ChivoMono-Italic-VariableFont_wght.ttf') format('truetype');
-  font-weight: 100 1000;
-  font-style: Italic;
 }
 
 :root {
-  --rz-font-scale: 0.8;
-
   --rz-font-sans:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --rz-font-mono: 'SFMono-Regular', Consolas, Liberation Mono, Menlo, Courier, monospace;
-  --rz-font-serif: 'Lora';
+  --rz-font-mono: 'geist-mono', Consolas, Liberation Mono, Menlo, Courier, monospace;
 
-  --rz-text-2xs: calc(var(--rz-font-scale) * 0.625rem);
-  --rz-text-xs: calc(var(--rz-font-scale) * 0.75rem);
-  --rz-text-sm: calc(var(--rz-font-scale) * 0.875rem);
-  --rz-text-md: calc(var(--rz-font-scale) * 1rem);
-  --rz-text-lg: calc(var(--rz-font-scale) * 1.125rem);
-  --rz-text-xl: calc(var(--rz-font-scale) * 1.25rem);
-  --rz-text-2xl: calc(var(--rz-font-scale) * 1.5rem);
-  --rz-text-3xl: calc(var(--rz-font-scale) * 1.875rem);
-  --rz-text-4xl: calc(var(--rz-font-scale) * 2.25rem);
-  --rz-text-5xl: calc(var(--rz-font-scale) * 3rem);
-  --rz-text-6xl: calc(var(--rz-font-scale) * 3.75rem);
-  --rz-text-7xl: calc(var(--rz-font-scale) * 4.5rem);
-  --rz-text-8xl: calc(var(--rz-font-scale) * 6rem);
-  --rz-text-9xl: calc(var(--rz-font-scale) * 8rem);
+  /* 13px body, one pixel a step around it, then a tighter scale for titles. */
+  --rz-text-2xs: 0.625rem;
+  --rz-text-xs: 0.6875rem;
+  --rz-text-sm: 0.75rem;
+  --rz-text-md: 0.8125rem;
+  --rz-text-lg: 0.875rem;
+  --rz-text-xl: 0.9375rem;
+  --rz-text-2xl: 1.125rem;
+  --rz-text-3xl: 1.375rem;
+  --rz-text-4xl: 1.75rem;
+  --rz-text-5xl: 2.25rem;
+  --rz-text-6xl: 2.75rem;
+  --rz-text-7xl: 3.5rem;
+  --rz-text-8xl: 4.5rem;
+  --rz-text-9xl: 6rem;
 }

package/dist/panel/style/index.css

@@ -411,6 +411,9 @@ video {
     --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
 }
 :root {
+  /* One step of the scale: `--rz-size-4` is 4 of them, `--size(5.5)` five and a half. */
+  --rz-unit: 0.25rem;
+
   --rz-size-0-5: 0.125rem;
   --rz-size-1: 0.25rem;
   --rz-size-1-5: 0.375rem;
@@ -454,101 +457,198 @@ video {
   --rz-size-laptop: 64rem;
 }
 @font-face {
-  font-family: 'Lora';
-  src: url('/assets/panel/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
-  font-weight: 100 1000;
-  font-style: Italic;
-}
-
-@font-face {
-  font-family: 'Lora';
-  src: url('/assets/panel/fonts/Lora-VariableFont_wght.ttf') format('truetype');
+  font-family: 'geist';
+  src: url('/assets/panel/fonts/Geist-VariableFont_wght.ttf') format('truetype');
   font-weight: 100 1000;
-  font-style: normal;
 }
 
 @font-face {
-  font-family: 'Chivo';
-  src: url('/assets/panel/fonts/ChivoMono-Italic-VariableFont_wght.ttf') format('truetype');
+  font-family: 'geist-mono';
+  src: url('/assets/panel/fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
   font-weight: 100 1000;
-  font-style: Italic;
 }
 
 :root {
-  --rz-font-scale: 0.8;
-
   --rz-font-sans:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --rz-font-mono: 'SFMono-Regular', Consolas, Liberation Mono, Menlo, Courier, monospace;
-  --rz-font-serif: 'Lora';
-
-  --rz-text-2xs: calc(var(--rz-font-scale) * 0.625rem);
-  --rz-text-xs: calc(var(--rz-font-scale) * 0.75rem);
-  --rz-text-sm: calc(var(--rz-font-scale) * 0.875rem);
-  --rz-text-md: calc(var(--rz-font-scale) * 1rem);
-  --rz-text-lg: calc(var(--rz-font-scale) * 1.125rem);
-  --rz-text-xl: calc(var(--rz-font-scale) * 1.25rem);
-  --rz-text-2xl: calc(var(--rz-font-scale) * 1.5rem);
-  --rz-text-3xl: calc(var(--rz-font-scale) * 1.875rem);
-  --rz-text-4xl: calc(var(--rz-font-scale) * 2.25rem);
-  --rz-text-5xl: calc(var(--rz-font-scale) * 3rem);
-  --rz-text-6xl: calc(var(--rz-font-scale) * 3.75rem);
-  --rz-text-7xl: calc(var(--rz-font-scale) * 4.5rem);
-  --rz-text-8xl: calc(var(--rz-font-scale) * 6rem);
-  --rz-text-9xl: calc(var(--rz-font-scale) * 8rem);
+  --rz-font-mono: 'geist-mono', Consolas, Liberation Mono, Menlo, Courier, monospace;
+
+  /* 13px body, one pixel a step around it, then a tighter scale for titles. */
+  --rz-text-2xs: 0.625rem;
+  --rz-text-xs: 0.6875rem;
+  --rz-text-sm: 0.75rem;
+  --rz-text-md: 0.8125rem;
+  --rz-text-lg: 0.875rem;
+  --rz-text-xl: 0.9375rem;
+  --rz-text-2xl: 1.125rem;
+  --rz-text-3xl: 1.375rem;
+  --rz-text-4xl: 1.75rem;
+  --rz-text-5xl: 2.25rem;
+  --rz-text-6xl: 2.75rem;
+  --rz-text-7xl: 3.5rem;
+  --rz-text-8xl: 4.5rem;
+  --rz-text-9xl: 6rem;
 }
 
 :root {
   --rz-radius-none: 0;
-  --rz-base-radius: 0.165rem;
-  --rz-radius-sm: calc(var(--rz-base-radius) * 1);
-  --rz-radius-md: calc(var(--rz-base-radius) * 1.5);
-  --rz-radius-lg: calc(var(--rz-base-radius) * 2);
-  --rz-radius-xl: calc(var(--rz-base-radius) * 4);
+  --rz-radius-sm: 0.25rem;
+  --rz-radius-md: 0.375rem;
+  --rz-radius-lg: 0.4375rem;
+  --rz-radius-xl: 0.625rem;
   --rz-radius-full: 999999px;
 }
 
+/*
+ * The palette: grays and an accent in OKLCH, set by four numbers. 0 is the darkest gray.
+ * Only scheme.css reads it; components read the scheme's tokens.
+ */
 :root {
-  --rz-gray-0: 0 0% 2.03%;
-  --rz-gray-1: 0 0% 4.52%;
-  --rz-gray-2: 0 0% 7.94%;
-  --rz-gray-3: 0 0% 12.21%;
-  --rz-gray-4: 0 0% 17.26%;
-  --rz-gray-5: 0 0% 22.97%;
-  --rz-gray-6: 0 0% 29.23%;
-  --rz-gray-7: 0 0% 35.91%;
-  --rz-gray-8: 0 0% 42.88%;
-  --rz-gray-9: 0 0% 50%;
-  --rz-gray-10: 0 0% 57.12%;
-  --rz-gray-11: 0 0% 64.09%;
-  --rz-gray-12: 0 0% 70.77%;
-  --rz-gray-13: 0 0% 77.03%;
-  --rz-gray-14: 0 0% 82.74%;
-  --rz-gray-15: 0 0% 87.79%;
-  --rz-gray-16: 0 0% 92.06%;
-  --rz-gray-17: 0 0% 95.48%;
-  --rz-gray-18: 0 0% 97.97%;
-  --rz-gray-19: 0 0% 99.49%;
-
-  /* --rz-color-spot: 160deg 72% 49%; */
-  --rz-color-spot: 229deg 89% 60%;
-  --rz-color-spot-fg: 229deg 72% 19%;
-
-  --rz-color-success: 160deg 72% 49%;
-  --rz-color-warn: 14deg, 80%, 60%;
-  --rz-color-alert: 4deg 100% 69%;
+  --rz-gray-hue: 0;
+  --rz-gray-chroma: 0;
+  --rz-gray-0: oklch(0.13 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-1: oklch(0.155 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-2: oklch(0.178 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-3: oklch(0.203 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-4: oklch(0.232 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-5: oklch(0.27 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-6: oklch(0.33 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-7: oklch(0.4 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-8: oklch(0.48 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-9: oklch(0.555 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-10: oklch(0.625 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-11: oklch(0.69 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-12: oklch(0.755 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-13: oklch(0.815 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-14: oklch(0.865 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-15: oklch(0.905 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-16: oklch(0.94 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-17: oklch(0.965 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-18: oklch(0.982 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-19: oklch(0.996 var(--rz-gray-chroma) var(--rz-gray-hue));
+
+  --rz-accent-hue: 268;
+  --rz-accent-chroma: 0.19;
+  --rz-accent-strong: oklch(0.5 var(--rz-accent-chroma) var(--rz-accent-hue));
+  --rz-accent-solid: oklch(0.585 var(--rz-accent-chroma) var(--rz-accent-hue));
+  --rz-accent-soft: oklch(0.76 calc(var(--rz-accent-chroma) * 0.8) var(--rz-accent-hue));
+  --rz-accent-contrast: oklch(0.99 0 0);
+
+  --rz-success: oklch(0.64 0.14 155);
+  --rz-warn: oklch(0.76 0.15 70);
+  --rz-danger: oklch(0.62 0.19 25);
 }
-
+/*
+ * What each token is, in light and in dark. Nothing else names a gray.
+ *
+ * base → page → raised → float: each level sits on the one before it.
+ * The tints are translucent, so they shade whatever level is under them.
+ */
 :root {
-  --rz-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --rz-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --rz-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --rz-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --rz-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --rz-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --rz-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --rz-shadow-none: 0 0 #0000;
+  color-scheme: light dark;
+
+  /* levels */
+  --rz-bg-base: var(--rz-gray-17);
+  --rz-bg-page: var(--rz-gray-19);
+  --rz-bg-raised: var(--rz-gray-19);
+  --rz-bg-float: var(--rz-gray-19);
+  --rz-bg-knob: var(--rz-gray-19);
+  --rz-bg-inverse: var(--rz-gray-2);
+
+  /* tints */
+  --rz-bg-well: oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-bg-hover: oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-bg-active: oklch(from var(--rz-gray-0) l c h / 0.06);
+  --rz-bg-overlay: oklch(from var(--rz-gray-0) l c h / 0.2);
+
+  /* borders */
+  --rz-border: oklch(from var(--rz-gray-0) l c h / 0.075);
+  --rz-border-strong: oklch(from var(--rz-gray-0) l c h / 0.13);
+
+  /* text */
+  --rz-fg: var(--rz-gray-2);
+  --rz-fg-muted: var(--rz-gray-8);
+  --rz-fg-subtle: var(--rz-gray-10);
+  --rz-fg-inverse: var(--rz-gray-18);
+
+  /* accent: focus, a selection, a link */
+  --rz-accent: var(--rz-accent-solid);
+  --rz-accent-fg: var(--rz-accent-contrast);
+  --rz-accent-text: var(--rz-accent-strong);
+  --rz-accent-tint: oklch(from var(--rz-accent-solid) l c h / 0.07);
+  --rz-accent-border: oklch(from var(--rz-accent-solid) l c h / 0.5);
+  --rz-ring: oklch(from var(--rz-accent-solid) l c h / 0.16);
+
+  /* shadows: light mode lifts with a shadow, dark mode with a lit top edge */
+  --rz-shadow-raised: 0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-shadow-float:
+    0 4px 12px -2px oklch(from var(--rz-gray-0) l c h / 0.06),
+    0 16px 36px -12px oklch(from var(--rz-gray-0) l c h / 0.16);
+  --rz-shadow-knob:
+    0 0 0 1px oklch(from var(--rz-gray-0) l c h / 0.06),
+    0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.08);
+
+  /* gradients */
+  --rz-gradient-primary: linear-gradient(
+    180deg,
+    oklch(from var(--rz-bg-inverse) calc(l + 0.08) c h),
+    var(--rz-bg-inverse)
+  );
+  --rz-shadow-primary:
+    inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.12),
+    0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.18);
+  --rz-glow: radial-gradient(
+    70% 38% at 50% 0%,
+    oklch(from var(--rz-accent-solid) l c h / 0.035),
+    transparent
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rz-bg-base: var(--rz-gray-1);
+    --rz-bg-page: var(--rz-gray-2);
+    --rz-bg-raised: var(--rz-gray-3);
+    --rz-bg-float: var(--rz-gray-4);
+    --rz-bg-knob: var(--rz-gray-5);
+    --rz-bg-inverse: var(--rz-gray-17);
+
+    --rz-bg-well: oklch(from var(--rz-gray-19) l c h / 0.035);
+    --rz-bg-hover: oklch(from var(--rz-gray-19) l c h / 0.04);
+    --rz-bg-active: oklch(from var(--rz-gray-19) l c h / 0.07);
+    --rz-bg-overlay: oklch(from var(--rz-gray-0) l c h / 0.55);
+
+    --rz-border: oklch(from var(--rz-gray-19) l c h / 0.07);
+    --rz-border-strong: oklch(from var(--rz-gray-19) l c h / 0.12);
+
+    --rz-fg: var(--rz-gray-17);
+    --rz-fg-muted: var(--rz-gray-12);
+    --rz-fg-subtle: var(--rz-gray-9);
+    --rz-fg-inverse: var(--rz-gray-2);
+
+    --rz-accent-text: var(--rz-accent-soft);
+    --rz-accent-tint: oklch(from var(--rz-accent-solid) l c h / 0.13);
+    --rz-accent-border: oklch(from var(--rz-accent-soft) l c h / 0.45);
+    --rz-ring: oklch(from var(--rz-accent-soft) l c h / 0.2);
+
+    --rz-shadow-raised: inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.03);
+    --rz-shadow-float:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.05),
+      0 16px 40px -12px oklch(from var(--rz-gray-0) l c h / 0.6);
+    --rz-shadow-knob:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.07),
+      0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.5);
+
+    --rz-shadow-primary:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.5),
+      0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.4);
+    --rz-glow: radial-gradient(
+      70% 38% at 50% 0%,
+      oklch(from var(--rz-accent-solid) l c h / 0.07),
+      transparent
+    );
+  }
 }
 
 .uz-upper {
@@ -556,44 +656,9 @@ video {
 }
 
 :root {
-  color-scheme: light dark;
-
-  --rz-border: 1px solid hsl(var(--rz-color-border));
-
-  /* Inputs */
-  --rz-input-height: var(--rz-size-11);
-  --rz-input-bg: var(--rz-gray-19);
-
-  /* Overlay */
-  --rz-overlay-color: hsl(var(--rz-gray-11) / 0.4);
-  --rz-overlay-blur: 6px;
-
-  /* Rows */
-  --rz-row-height: var(--rz-size-12);
-  --rz-row-bg: var(--rz-gray-18);
-
-  /* Colors */
-  --rz-color-fg: var(--rz-gray-0);
-  --rz-color-bg: var(--rz-gray-17);
-  --rz-color-border: var(--rz-gray-15);
-  --rz-color-ring: var(--rz-color-spot);
-
-  /* Collapsible group, tree, blocks... */
-  --rz-collapse-fields-content-bg: light-dark(hsl(var(--rz-input-bg)), hsl(var(--rz-color-bg)));
-
-  /* Popovers dropdown, dialog,... */
-  --rz-popover-bg: hsl(var(--rz-color-bg));
-  --rz-popover-highlight-bg: hsl(var(--rz-gray-15));
-
-  @media (prefers-color-scheme: dark) {
-    --rz-overlay-color: hsl(var(--rz-gray-0) / 0.7);
-    --rz-color-fg: var(--rz-gray-17);
-    --rz-color-border: var(--rz-gray-4);
-    --rz-color-bg: var(--rz-gray-2);
-    --rz-input-bg: var(--rz-gray-4);
-    --rz-row-bg: var(--rz-gray-3);
-    --rz-popover-highlight-bg: hsl(var(--rz-gray-3));
-  }
+  --rz-input-height: var(--rz-size-9);
+  --rz-row-height: var(--rz-size-10);
+  --rz-overlay-blur: 2px;
 }
 
 html:has(.rz-root),
@@ -603,21 +668,23 @@ body:has(.rz-root) {
 }
 
 .rz-root {
-  background-color: hsl(var(--rz-color-bg));
-  color: hsl(var(--rz-color-fg));
+  background-color: var(--rz-bg-page);
+  color: var(--rz-fg);
   font-size: var(--rz-text-md);
   min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   ::-moz-selection {
-    background-color: hsl(var(--rz-color-spot) / 0.5);
-    color: hsl(var(--rz-color-fg));
+    background-color: oklch(from var(--rz-accent-solid) l c h / 0.3);
+    color: var(--rz-fg);
   }
   ::selection {
-    background-color: hsl(var(--rz-color-spot) / 0.5);
-    color: hsl(var(--rz-color-fg));
+    background-color: oklch(from var(--rz-accent-solid) l c h / 0.3);
+    color: var(--rz-fg);
   }
 
   hr {
-    border-color: hsl(var(--rz-color-border));
+    border-color: var(--rz-border);
     margin-top: var(--rz-size-4);
     margin-bottom: var(--rz-size-4);
   }
@@ -627,12 +694,14 @@ body:has(.rz-root) {
 .rz-dialog-content,
 [data-bits-floating-content-wrapper] {
   hr {
-    border-color: hsl(var(--rz-color-border));
+    border-color: var(--rz-border);
     margin-top: var(--rz-size-4);
     margin-bottom: var(--rz-size-4);
   }
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
   font-size: var(--rz-text-md);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .rz-sr-only {

package/dist/panel/style/mixins/index.css

@@ -1 +1,15 @@
+/* A level: its fill, a hairline, its shadow. raised, float. */
 
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */