@womp/kookie-ui 0.12.0 → 0.13.1

package/src/components/text-field.css

@@ -214,7 +214,7 @@
 @breakpoints {
   .rt-TextFieldRoot {
     &:where(.rt-r-size-1) {
-      --text-field-height: var(--space-5);
+      --text-field-height: var(--control-height-1);
       --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-1), var(--radius-full));
       --text-field-native-icon-size: var(--space-3);
@@ -247,7 +247,7 @@
     }
 
     &:where(.rt-r-size-2) {
-      --text-field-height: var(--space-6);
+      --text-field-height: var(--control-height-2);
       --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-2), var(--radius-full));
       --text-field-native-icon-size: var(--space-4);
@@ -281,7 +281,7 @@
     }
 
     &:where(.rt-r-size-3) {
-      --text-field-height: var(--space-7);
+      --text-field-height: var(--control-height-3);
       --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
       --text-field-border-radius: max(var(--radius-3), var(--radius-full));
       --text-field-native-icon-size: var(--space-4);

package/src/components/toolbar.css

@@ -26,28 +26,28 @@
   }
 
   &:where(.rt-r-size-1) {
-    --toolbar-control-height: var(--space-5);
+    --toolbar-control-height: var(--control-height-1);
     --toolbar-radius: max(var(--radius-1), var(--radius-full));
     --toolbar-gap: var(--space-1);
     --toolbar-title-gap: var(--space-2);
   }
 
   &:where(.rt-r-size-2) {
-    --toolbar-control-height: var(--space-6);
+    --toolbar-control-height: var(--control-height-2);
     --toolbar-radius: max(var(--radius-2), var(--radius-full));
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-3) {
-    --toolbar-control-height: var(--space-7);
+    --toolbar-control-height: var(--control-height-3);
     --toolbar-radius: max(var(--radius-3), var(--radius-full));
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-4) {
-    --toolbar-control-height: var(--space-8);
+    --toolbar-control-height: var(--control-height-4);
     --toolbar-radius: max(var(--radius-4), var(--radius-full));
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);

package/src/hooks/appearance-script.ts

@@ -0,0 +1,28 @@
+/**
+ * The pre-paint half of light and dark mode (see `use-appearance.ts`). Kept in its own module
+ * with no client directive, so a server component such as a Next.js root layout can import the
+ * string and inline it in `<head>`.
+ */
+
+const APPEARANCE_STORAGE_KEY = 'kookie-appearance';
+
+/**
+ * Inline this in `<head>`, before any stylesheet paints, e.g.
+ * `<script dangerouslySetInnerHTML={{ __html: appearanceScript }} />`.
+ *
+ * Storage is read inside its own try/catch: browsers that block site data throw on access,
+ * and that must not skip the stamp. `matchMedia` always answers.
+ */
+const appearanceScript = `(function () {
+  var e = document.documentElement;
+  var a = null;
+  try { a = localStorage.getItem(${JSON.stringify(APPEARANCE_STORAGE_KEY)}); } catch (err) {}
+  var dark = a === "light" ? false : a === "dark" ? true : matchMedia("(prefers-color-scheme: dark)").matches;
+  var mode = dark ? "dark" : "light";
+  e.classList.remove("light", "dark");
+  e.classList.add(mode);
+  e.setAttribute("data-appearance", mode);
+  e.style.colorScheme = mode;
+})();`;
+
+export { appearanceScript, APPEARANCE_STORAGE_KEY };

package/src/hooks/index.ts

@@ -2,3 +2,6 @@ export { useLiveAnnouncer } from './use-live-announcer.js';
 export { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';
 export { useTooltipWrapper } from './use-tooltip-wrapper.js';
 export { useToggleState } from './use-toggle-state.js';
+export { useAppearance, setAppearance } from './use-appearance.js';
+export { appearanceScript, APPEARANCE_STORAGE_KEY } from './appearance-script.js';
+export type { AppearanceChoice, ResolvedAppearance } from './use-appearance.js';

package/src/hooks/use-appearance.ts

@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+import { APPEARANCE_STORAGE_KEY } from './appearance-script.js';
+
+/**
+ * Light and dark mode, decided before the first paint and kept on `<html>`.
+ *
+ * The server cannot know the visitor's mode, so `appearanceScript` runs synchronously in
+ * `<head>`: the stored choice first, `prefers-color-scheme` otherwise. It writes the `light`
+ * or `dark` class (which every token and component stylesheet already keys off) and
+ * `data-appearance` on `<html>`. The root `<Theme>` keeps `appearance="inherit"`, so it
+ * writes no class of its own and `<html>` is the one source of truth. Nested themes and
+ * portals inherit it from there.
+ *
+ * `useAppearance` is the client half: an external store over `<html>` and the same storage
+ * key. It never mirrors the mode into React state that could disagree with the DOM.
+ */
+
+type AppearanceChoice = 'system' | 'light' | 'dark';
+type ResolvedAppearance = 'light' | 'dark';
+
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function readChoice(): AppearanceChoice {
+  try {
+    const value = globalThis.localStorage?.getItem(APPEARANCE_STORAGE_KEY);
+    return value === 'light' || value === 'dark' ? value : 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+function systemAppearance(): ResolvedAppearance {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function stamp(mode: ResolvedAppearance) {
+  const root = document.documentElement;
+  root.classList.remove('light', 'dark');
+  root.classList.add(mode);
+  root.setAttribute('data-appearance', mode);
+  root.style.colorScheme = mode;
+}
+
+function readResolved(): ResolvedAppearance {
+  const root = document.documentElement;
+  if (root.classList.contains('dark') || root.classList.contains('dark-theme')) return 'dark';
+  if (root.classList.contains('light') || root.classList.contains('light-theme')) return 'light';
+  return systemAppearance();
+}
+
+let snapshot: { choice: AppearanceChoice; resolved: ResolvedAppearance } | null = null;
+
+function getSnapshot() {
+  const choice = readChoice();
+  const resolved = readResolved();
+  if (!snapshot || snapshot.choice !== choice || snapshot.resolved !== resolved) {
+    snapshot = { choice, resolved };
+  }
+  return snapshot;
+}
+
+const serverSnapshot = { choice: 'system' as AppearanceChoice, resolved: 'light' as ResolvedAppearance };
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  const media = window.matchMedia('(prefers-color-scheme: dark)');
+  // With no stored choice, follow the system as it changes.
+  const onSystemChange = () => {
+    if (readChoice() === 'system') {
+      stamp(systemAppearance());
+      emit();
+    }
+  };
+  // Another tab changed the choice.
+  const onStorage = (event: StorageEvent) => {
+    if (event.key !== APPEARANCE_STORAGE_KEY) return;
+    const choice = readChoice();
+    stamp(choice === 'system' ? systemAppearance() : choice);
+    emit();
+  };
+  media.addEventListener('change', onSystemChange);
+  window.addEventListener('storage', onStorage);
+  return () => {
+    listeners.delete(listener);
+    media.removeEventListener('change', onSystemChange);
+    window.removeEventListener('storage', onStorage);
+  };
+}
+
+/** Applies a choice to `<html>` and stores it. The change applies even if storage is blocked. */
+function setAppearance(choice: AppearanceChoice) {
+  try {
+    if (choice === 'system') localStorage.removeItem(APPEARANCE_STORAGE_KEY);
+    else localStorage.setItem(APPEARANCE_STORAGE_KEY, choice);
+  } catch {
+    // Storage is blocked: the mode still changes for this page.
+  }
+  stamp(choice === 'system' ? systemAppearance() : choice);
+  emit();
+}
+
+/**
+ * The page's light or dark mode. `choice` is what the person picked (`system` when they
+ * haven't); `appearance` is what is showing. On the server and in the first client render it
+ * reports `system` / `light`, then corrects without a hydration mismatch.
+ */
+function useAppearance() {
+  const { choice, resolved } = React.useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);
+  return { choice, appearance: resolved, setAppearance } as const;
+}
+
+export { useAppearance, setAppearance };
+export type { AppearanceChoice, ResolvedAppearance };

package/src/styles/tokens/space.css

@@ -12,6 +12,13 @@
   --space-7: calc(40px * var(--scaling));
   --space-8: calc(48px * var(--scaling));
 
+  /* Control heights. One ladder for every control: size N is the same height in
+     Button, Menu, Sidebar, Tabs, TextField, Select, SegmentedControl and Toolbar. */
+  --control-height-1: var(--space-5);
+  --control-height-2: var(--space-6);
+  --control-height-3: var(--space-7);
+  --control-height-4: var(--space-8);
+
   /*  */
   --space-9: calc(64px * var(--scaling));
   --space-10: calc(80px * var(--scaling));