@mitcsutt/kiln-ui 0.2.1 → 0.3.0

package/dist/theme/ThemeProvider.d.ts

@@ -10,8 +10,8 @@ export interface ThemeProviderProps {
     mode?: ColorMode;
     /**
      * Uncontrolled starting mode when the user hasn't chosen one yet (default `system`).
-     * A stored choice (see `persistMode`) always wins. Monograph is dark-first, so apps
-     * using it usually pass `defaultMode="dark"`. Pair with `themeScript(theme, defaultMode)`.
+     * A stored choice (see `persistMode`) always wins. Monograph and Flightdeck are dark-first, so apps
+     * using either usually pass `defaultMode="dark"`. Pair with `themeScript(theme, defaultMode)`.
      */
     defaultMode?: ColorMode;
     onThemeChange?: (theme: ThemeName) => void;
@@ -52,7 +52,7 @@ export interface ThemeScopeProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Renders a subtree in a different theme (and optionally mode). Themes are plain CSS
- * scoped to `[data-theme]`, so scopes nest freely — e.g. a Fiesta card previewed on a
- * Monograph page. Also paints the theme's page background and text colour.
+ * scoped to `[data-theme]`, so scopes nest freely — e.g. a Riso card previewed on a
+ * Flightdeck page. Also paints the theme's page background and text colour.
  */
 export declare const ThemeScope: import("react").ForwardRefExoticComponent<ThemeScopeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["DARK_QUERY","readStoredMode","v","storageKey","subscribeToStorage","onChange","useStoredMode","useSyncExternalStore","enabled","subscribeToSystemDark","mq","useSystemDark","ThemeProvider","themeProp","DEFAULT_THEME","modeProp","DEFAULT_STORAGE_KEY","themeState","setThemeState","useState","prevThemeProp","setPrevThemeProp","chosenMode","setChosenMode","prevModeProp","setPrevModeProp","storedMode","persistMode","modeState","defaultMode","target","el","systemDark","resolvedMode","setTheme","useCallback","t","onThemeChange","setMode","m","onModeChange","value","useMemo","ThemeContext","ThemeScope","forwardRef","rest","theme","mode","paint"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { DEFAULT_THEME } from './themes'\nimport type { ColorMode, ThemeName } from './themes'\nimport type { ThemeContextValue } from './context'\n\nimport { ThemeContext } from './context'\nimport { DEFAULT_STORAGE_KEY } from './script'\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)'\n\nfunction readStoredMode(storageKey: string): ColorMode | undefined {\n  try {\n    const v = typeof localStorage === 'undefined' ? null : localStorage.getItem(storageKey)\n    return v === 'light' || v === 'dark' || v === 'system' ? v : undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction subscribeToStorage(onChange: () => void): () => void {\n  window.addEventListener('storage', onChange)\n  return () => {\n    window.removeEventListener('storage', onChange)\n  }\n}\n\n/**\n * The mode stored by an earlier visit, read only on the client (`undefined` while\n * rendering on the server and during hydration, so markup always matches).\n */\nfunction useStoredMode(enabled: boolean, storageKey: string): ColorMode | undefined {\n  return useSyncExternalStore(\n    subscribeToStorage,\n    () => (enabled ? readStoredMode(storageKey) : undefined),\n    () => undefined,\n  )\n}\n\nfunction subscribeToSystemDark(onChange: () => void): () => void {\n  if (typeof matchMedia === 'undefined') return () => undefined\n  const mq = matchMedia(DARK_QUERY)\n  mq.addEventListener('change', onChange)\n  return () => {\n    mq.removeEventListener('change', onChange)\n  }\n}\n\nfunction useSystemDark(): boolean {\n  return useSyncExternalStore(\n    subscribeToSystemDark,\n    () => typeof matchMedia !== 'undefined' && matchMedia(DARK_QUERY).matches,\n    () => false,\n  )\n}\n\nexport interface ThemeProviderProps {\n  /**\n   * Which theme to render (default `paper`). A built-in name, or any name your own\n   * `[data-theme='<name>']` stylesheet defines. Controlled if `onThemeChange` is also supplied.\n   */\n  theme?: ThemeName\n  /** Initial/controlled colour mode. `system` follows the OS via CSS alone — no flash. */\n  mode?: ColorMode\n  /**\n   * Uncontrolled starting mode when the user hasn't chosen one yet (default `system`).\n   * A stored choice (see `persistMode`) always wins. Monograph is dark-first, so apps\n   * using it usually pass `defaultMode=\"dark\"`. Pair with `themeScript(theme, defaultMode)`.\n   */\n  defaultMode?: ColorMode\n  onThemeChange?: (theme: ThemeName) => void\n  onModeChange?: (mode: ColorMode) => void\n  /** Persist the user's mode choice in localStorage. Default `true`. */\n  persistMode?: boolean\n  /**\n   * The localStorage key the mode is stored under (default `kiln-color-mode`). Give each\n   * app on one origin its own key, or keep an existing one so readers' choices carry over.\n   * Pass the same key to `themeScript`.\n   */\n  storageKey?: string\n  /**\n   * Where to write `data-theme` / `data-mode`. `document` (default) targets `<html>`,\n   * which is what an app wants. Use `<ThemeScope>` for nested, local themes.\n   */\n  target?: 'document' | 'none'\n  children: ReactNode\n}\n\n/**\n * App-level theme state. Writes `data-theme` + `data-mode` to `<html>` and exposes\n * `useTheme()`. All visual work happens in CSS; this component only flips attributes.\n *\n * For SSR without a flash, also render `<script dangerouslySetInnerHTML={{ __html: themeScript() }} />`\n * in the document head (see `themeScript`).\n */\nexport function ThemeProvider({\n  theme: themeProp = DEFAULT_THEME,\n  mode: modeProp,\n  defaultMode = 'system',\n  onThemeChange,\n  onModeChange,\n  persistMode = true,\n  storageKey = DEFAULT_STORAGE_KEY,\n  target = 'document',\n  children,\n}: ThemeProviderProps) {\n  const [themeState, setThemeState] = useState<ThemeName>(themeProp)\n  const [prevThemeProp, setPrevThemeProp] = useState(themeProp)\n  // Follow the prop when it changes (React's \"adjust state on a prop change\" pattern).\n  if (themeProp !== prevThemeProp) {\n    setPrevThemeProp(themeProp)\n    setThemeState(themeProp)\n  }\n\n  // The latest explicit choice: a `mode` prop, or a `setMode` call. Unset until one happens.\n  const [chosenMode, setChosenMode] = useState<ColorMode | undefined>(modeProp)\n  const [prevModeProp, setPrevModeProp] = useState(modeProp)\n  if (modeProp !== prevModeProp) {\n    setPrevModeProp(modeProp)\n    if (modeProp) setChosenMode(modeProp)\n  }\n  // A stored choice wins over `defaultMode`, uncontrolled only.\n  const storedMode = useStoredMode(persistMode && !modeProp, storageKey)\n  const modeState = chosenMode ?? storedMode ?? defaultMode\n\n  useEffect(() => {\n    if (target !== 'document' || typeof document === 'undefined') return\n    const el = document.documentElement\n    el.dataset.theme = themeState\n    el.dataset.mode = modeState\n  }, [target, themeState, modeState])\n\n  const systemDark = useSystemDark()\n  const resolvedMode = modeState === 'system' ? (systemDark ? 'dark' : 'light') : modeState\n\n  const setTheme = useCallback(\n    (t: ThemeName) => {\n      setThemeState(t)\n      onThemeChange?.(t)\n    },\n    [onThemeChange],\n  )\n\n  const setMode = useCallback(\n    (m: ColorMode) => {\n      setChosenMode(m)\n      if (persistMode && typeof localStorage !== 'undefined') {\n        try {\n          localStorage.setItem(storageKey, m)\n        } catch {\n          /* storage unavailable — ignore */\n        }\n      }\n      onModeChange?.(m)\n    },\n    [onModeChange, persistMode, storageKey],\n  )\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme: themeState, mode: modeState, resolvedMode, setTheme, setMode }),\n    [themeState, modeState, resolvedMode, setTheme, setMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport interface ThemeScopeProps extends HTMLAttributes<HTMLDivElement> {\n  theme: ThemeName\n  /** Omit to inherit the surrounding colour mode (the usual case). */\n  mode?: ColorMode\n  /**\n   * Paint the theme's canvas (background, text colour, base type) on the scope.\n   * Default `true`. Set `false` to drop a themed component into a rounded frame or\n   * a surface without a square background.\n   */\n  paint?: boolean\n}\n\n/**\n * Renders a subtree in a different theme (and optionally mode). Themes are plain CSS\n * scoped to `[data-theme]`, so scopes nest freely — e.g. a Fiesta card previewed on a\n * Monograph page. Also paints the theme's page background and text colour.\n */\nexport const ThemeScope = forwardRef<HTMLDivElement, ThemeScopeProps>(function ThemeScope(\n  { theme, mode, paint = true, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-theme={theme}\n      data-mode={mode}\n      data-kiln-scope={paint ? '' : undefined}\n      data-kiln-scope-bare={paint ? undefined : ''}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAiBA,IAAMA,IAAa;AAEnB,SAASC,EAAe,GAA2C;CACjE,IAAI;EACF,IAAMC,IAAI,OAAO,eAAiB,MAAc,OAAO,aAAa,QAAQC,CAAU;EACtF,OAAOD,MAAM,WAAWA,MAAM,UAAUA,MAAM,WAAWA,IAAI,KAAA;CAC/D,QAAQ;EACN;CACF;AACF;AAEA,SAASE,EAAmB,GAAkC;CAE5D,OADA,OAAO,iBAAiB,WAAWC,CAAQ,SAC9B;EACX,OAAO,oBAAoB,WAAWA,CAAQ;CAChD;AACF;AAMA,SAASC,EAAc,GAAkB,GAA2C;CAClF,OAAOC,EACLH,SACOI,IAAUP,EAAeE,CAAU,IAAI,KAAA,SACxC,KAAA,CACR;AACF;AAEA,SAASM,EAAsB,GAAkC;CAC/D,IAAI,OAAO,aAAe,KAAa,aAAa,KAAA;CACpD,IAAMC,IAAK,WAAWV,CAAU;CAEhC,OADAU,EAAG,iBAAiB,UAAUL,CAAQ,SACzB;EACX,EAAG,oBAAoB,UAAUA,CAAQ;CAC3C;AACF;AAEA,SAASM,IAAyB;CAChC,OAAOJ,EACLE,SACM,OAAO,aAAe,OAAe,WAAWT,CAAU,CAAC,CAAC,eAC5D,EACR;AACF;AAyCA,SAAgBY,EAAc,EAC5B,OAAOC,IAAYC,GACnB,MAAMC,GACN,iBAAc,UACd,kBACA,iBACA,iBAAc,IACd,gBAAaC,GACb,YAAS,YACT,eACqB;CACrB,IAAM,CAACC,GAAYC,KAAiBC,EAAoBN,CAAS,GAC3D,CAACO,GAAeC,KAAoBF,EAASN,CAAS;CAE5D,AAAIA,MAAcO,MAChBC,EAAiBR,CAAS,GAC1BK,EAAcL,CAAS;CAIzB,IAAM,CAACS,GAAYC,KAAiBJ,EAAgCJ,CAAQ,GACtE,CAACS,GAAcC,KAAmBN,EAASJ,CAAQ;CACzD,AAAIA,MAAaS,MACfC,EAAgBV,CAAQ,GACpBA,KAAUQ,EAAcR,CAAQ;CAGtC,IAAMW,IAAapB,EAAcqB,KAAe,CAACZ,GAAUZ,CAAU,GAC/DyB,IAAYN,KAAcI,KAAcG;CAE9C,QAAgB;EACd,IAAIC,MAAW,cAAc,OAAO,WAAa,KAAa;EAC9D,IAAMC,IAAK,SAAS;EAEpB,AADA,EAAG,QAAQ,QAAQd,GACnB,EAAG,QAAQ,OAAOW;CACpB,GAAG;EAACE;EAAQb;EAAYW;CAAS,CAAC;CAElC,IAAMI,IAAarB,EAAc,GAC3BsB,IAAeL,MAAc,WAAYI,IAAa,SAAS,UAAWJ,GAE1EM,IAAWC,GACd,MAAiB;EAEhB,AADAjB,EAAckB,CAAC,GACfC,IAAgBD,CAAC;CACnB,GACA,CAACC,CAAa,CAChB,GAEMC,IAAUH,GACb,MAAiB;EAEhB,IADAZ,EAAcgB,CAAC,GACXZ,KAAe,OAAO,eAAiB,KACzC,IAAI;GACF,aAAa,QAAQxB,GAAYoC,CAAC;EACpC,QAAQ,CAER;EAEF,IAAeA,CAAC;CAClB,GACA;EAACC;EAAcb;EAAaxB;CAAU,CACxC,GAEMsC,IAAQC,SACL;EAAE,OAAOzB;EAAY,MAAMW;EAAW;EAAc;EAAU;CAAQ,IAC7E;EAACX;EAAYW;EAAWK;EAAcC;EAAUI;CAAO,CACzD;CAEA,OAAO,kBAACK,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;AAmBA,IAAaC,IAAaC,EAA4C,SACpE,EAAE,UAAO,SAAM,WAAQ,IAAM,GAAGC,KAChC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,mBAAiBC,IAAQ,KAAK,KAAA;EAC9B,wBAAsBA,IAAQ,KAAA,IAAY;EAC1C,GAAIH;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"ThemeProvider.js","names":["DARK_QUERY","readStoredMode","v","storageKey","subscribeToStorage","onChange","useStoredMode","useSyncExternalStore","enabled","subscribeToSystemDark","mq","useSystemDark","ThemeProvider","themeProp","DEFAULT_THEME","modeProp","DEFAULT_STORAGE_KEY","themeState","setThemeState","useState","prevThemeProp","setPrevThemeProp","chosenMode","setChosenMode","prevModeProp","setPrevModeProp","storedMode","persistMode","modeState","defaultMode","target","el","systemDark","resolvedMode","setTheme","useCallback","t","onThemeChange","setMode","m","onModeChange","value","useMemo","ThemeContext","ThemeScope","forwardRef","rest","theme","mode","paint"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { DEFAULT_THEME } from './themes'\nimport type { ColorMode, ThemeName } from './themes'\nimport type { ThemeContextValue } from './context'\n\nimport { ThemeContext } from './context'\nimport { DEFAULT_STORAGE_KEY } from './script'\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)'\n\nfunction readStoredMode(storageKey: string): ColorMode | undefined {\n  try {\n    const v = typeof localStorage === 'undefined' ? null : localStorage.getItem(storageKey)\n    return v === 'light' || v === 'dark' || v === 'system' ? v : undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction subscribeToStorage(onChange: () => void): () => void {\n  window.addEventListener('storage', onChange)\n  return () => {\n    window.removeEventListener('storage', onChange)\n  }\n}\n\n/**\n * The mode stored by an earlier visit, read only on the client (`undefined` while\n * rendering on the server and during hydration, so markup always matches).\n */\nfunction useStoredMode(enabled: boolean, storageKey: string): ColorMode | undefined {\n  return useSyncExternalStore(\n    subscribeToStorage,\n    () => (enabled ? readStoredMode(storageKey) : undefined),\n    () => undefined,\n  )\n}\n\nfunction subscribeToSystemDark(onChange: () => void): () => void {\n  if (typeof matchMedia === 'undefined') return () => undefined\n  const mq = matchMedia(DARK_QUERY)\n  mq.addEventListener('change', onChange)\n  return () => {\n    mq.removeEventListener('change', onChange)\n  }\n}\n\nfunction useSystemDark(): boolean {\n  return useSyncExternalStore(\n    subscribeToSystemDark,\n    () => typeof matchMedia !== 'undefined' && matchMedia(DARK_QUERY).matches,\n    () => false,\n  )\n}\n\nexport interface ThemeProviderProps {\n  /**\n   * Which theme to render (default `paper`). A built-in name, or any name your own\n   * `[data-theme='<name>']` stylesheet defines. Controlled if `onThemeChange` is also supplied.\n   */\n  theme?: ThemeName\n  /** Initial/controlled colour mode. `system` follows the OS via CSS alone — no flash. */\n  mode?: ColorMode\n  /**\n   * Uncontrolled starting mode when the user hasn't chosen one yet (default `system`).\n   * A stored choice (see `persistMode`) always wins. Monograph and Flightdeck are dark-first, so apps\n   * using either usually pass `defaultMode=\"dark\"`. Pair with `themeScript(theme, defaultMode)`.\n   */\n  defaultMode?: ColorMode\n  onThemeChange?: (theme: ThemeName) => void\n  onModeChange?: (mode: ColorMode) => void\n  /** Persist the user's mode choice in localStorage. Default `true`. */\n  persistMode?: boolean\n  /**\n   * The localStorage key the mode is stored under (default `kiln-color-mode`). Give each\n   * app on one origin its own key, or keep an existing one so readers' choices carry over.\n   * Pass the same key to `themeScript`.\n   */\n  storageKey?: string\n  /**\n   * Where to write `data-theme` / `data-mode`. `document` (default) targets `<html>`,\n   * which is what an app wants. Use `<ThemeScope>` for nested, local themes.\n   */\n  target?: 'document' | 'none'\n  children: ReactNode\n}\n\n/**\n * App-level theme state. Writes `data-theme` + `data-mode` to `<html>` and exposes\n * `useTheme()`. All visual work happens in CSS; this component only flips attributes.\n *\n * For SSR without a flash, also render `<script dangerouslySetInnerHTML={{ __html: themeScript() }} />`\n * in the document head (see `themeScript`).\n */\nexport function ThemeProvider({\n  theme: themeProp = DEFAULT_THEME,\n  mode: modeProp,\n  defaultMode = 'system',\n  onThemeChange,\n  onModeChange,\n  persistMode = true,\n  storageKey = DEFAULT_STORAGE_KEY,\n  target = 'document',\n  children,\n}: ThemeProviderProps) {\n  const [themeState, setThemeState] = useState<ThemeName>(themeProp)\n  const [prevThemeProp, setPrevThemeProp] = useState(themeProp)\n  // Follow the prop when it changes (React's \"adjust state on a prop change\" pattern).\n  if (themeProp !== prevThemeProp) {\n    setPrevThemeProp(themeProp)\n    setThemeState(themeProp)\n  }\n\n  // The latest explicit choice: a `mode` prop, or a `setMode` call. Unset until one happens.\n  const [chosenMode, setChosenMode] = useState<ColorMode | undefined>(modeProp)\n  const [prevModeProp, setPrevModeProp] = useState(modeProp)\n  if (modeProp !== prevModeProp) {\n    setPrevModeProp(modeProp)\n    if (modeProp) setChosenMode(modeProp)\n  }\n  // A stored choice wins over `defaultMode`, uncontrolled only.\n  const storedMode = useStoredMode(persistMode && !modeProp, storageKey)\n  const modeState = chosenMode ?? storedMode ?? defaultMode\n\n  useEffect(() => {\n    if (target !== 'document' || typeof document === 'undefined') return\n    const el = document.documentElement\n    el.dataset.theme = themeState\n    el.dataset.mode = modeState\n  }, [target, themeState, modeState])\n\n  const systemDark = useSystemDark()\n  const resolvedMode = modeState === 'system' ? (systemDark ? 'dark' : 'light') : modeState\n\n  const setTheme = useCallback(\n    (t: ThemeName) => {\n      setThemeState(t)\n      onThemeChange?.(t)\n    },\n    [onThemeChange],\n  )\n\n  const setMode = useCallback(\n    (m: ColorMode) => {\n      setChosenMode(m)\n      if (persistMode && typeof localStorage !== 'undefined') {\n        try {\n          localStorage.setItem(storageKey, m)\n        } catch {\n          /* storage unavailable — ignore */\n        }\n      }\n      onModeChange?.(m)\n    },\n    [onModeChange, persistMode, storageKey],\n  )\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({ theme: themeState, mode: modeState, resolvedMode, setTheme, setMode }),\n    [themeState, modeState, resolvedMode, setTheme, setMode],\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport interface ThemeScopeProps extends HTMLAttributes<HTMLDivElement> {\n  theme: ThemeName\n  /** Omit to inherit the surrounding colour mode (the usual case). */\n  mode?: ColorMode\n  /**\n   * Paint the theme's canvas (background, text colour, base type) on the scope.\n   * Default `true`. Set `false` to drop a themed component into a rounded frame or\n   * a surface without a square background.\n   */\n  paint?: boolean\n}\n\n/**\n * Renders a subtree in a different theme (and optionally mode). Themes are plain CSS\n * scoped to `[data-theme]`, so scopes nest freely — e.g. a Riso card previewed on a\n * Flightdeck page. Also paints the theme's page background and text colour.\n */\nexport const ThemeScope = forwardRef<HTMLDivElement, ThemeScopeProps>(function ThemeScope(\n  { theme, mode, paint = true, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-theme={theme}\n      data-mode={mode}\n      data-kiln-scope={paint ? '' : undefined}\n      data-kiln-scope-bare={paint ? undefined : ''}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAiBA,IAAMA,IAAa;AAEnB,SAASC,EAAe,GAA2C;CACjE,IAAI;EACF,IAAMC,IAAI,OAAO,eAAiB,MAAc,OAAO,aAAa,QAAQC,CAAU;EACtF,OAAOD,MAAM,WAAWA,MAAM,UAAUA,MAAM,WAAWA,IAAI,KAAA;CAC/D,QAAQ;EACN;CACF;AACF;AAEA,SAASE,EAAmB,GAAkC;CAE5D,OADA,OAAO,iBAAiB,WAAWC,CAAQ,SAC9B;EACX,OAAO,oBAAoB,WAAWA,CAAQ;CAChD;AACF;AAMA,SAASC,EAAc,GAAkB,GAA2C;CAClF,OAAOC,EACLH,SACOI,IAAUP,EAAeE,CAAU,IAAI,KAAA,SACxC,KAAA,CACR;AACF;AAEA,SAASM,EAAsB,GAAkC;CAC/D,IAAI,OAAO,aAAe,KAAa,aAAa,KAAA;CACpD,IAAMC,IAAK,WAAWV,CAAU;CAEhC,OADAU,EAAG,iBAAiB,UAAUL,CAAQ,SACzB;EACX,EAAG,oBAAoB,UAAUA,CAAQ;CAC3C;AACF;AAEA,SAASM,IAAyB;CAChC,OAAOJ,EACLE,SACM,OAAO,aAAe,OAAe,WAAWT,CAAU,CAAC,CAAC,eAC5D,EACR;AACF;AAyCA,SAAgBY,EAAc,EAC5B,OAAOC,IAAYC,GACnB,MAAMC,GACN,iBAAc,UACd,kBACA,iBACA,iBAAc,IACd,gBAAaC,GACb,YAAS,YACT,eACqB;CACrB,IAAM,CAACC,GAAYC,KAAiBC,EAAoBN,CAAS,GAC3D,CAACO,GAAeC,KAAoBF,EAASN,CAAS;CAE5D,AAAIA,MAAcO,MAChBC,EAAiBR,CAAS,GAC1BK,EAAcL,CAAS;CAIzB,IAAM,CAACS,GAAYC,KAAiBJ,EAAgCJ,CAAQ,GACtE,CAACS,GAAcC,KAAmBN,EAASJ,CAAQ;CACzD,AAAIA,MAAaS,MACfC,EAAgBV,CAAQ,GACpBA,KAAUQ,EAAcR,CAAQ;CAGtC,IAAMW,IAAapB,EAAcqB,KAAe,CAACZ,GAAUZ,CAAU,GAC/DyB,IAAYN,KAAcI,KAAcG;CAE9C,QAAgB;EACd,IAAIC,MAAW,cAAc,OAAO,WAAa,KAAa;EAC9D,IAAMC,IAAK,SAAS;EAEpB,AADA,EAAG,QAAQ,QAAQd,GACnB,EAAG,QAAQ,OAAOW;CACpB,GAAG;EAACE;EAAQb;EAAYW;CAAS,CAAC;CAElC,IAAMI,IAAarB,EAAc,GAC3BsB,IAAeL,MAAc,WAAYI,IAAa,SAAS,UAAWJ,GAE1EM,IAAWC,GACd,MAAiB;EAEhB,AADAjB,EAAckB,CAAC,GACfC,IAAgBD,CAAC;CACnB,GACA,CAACC,CAAa,CAChB,GAEMC,IAAUH,GACb,MAAiB;EAEhB,IADAZ,EAAcgB,CAAC,GACXZ,KAAe,OAAO,eAAiB,KACzC,IAAI;GACF,aAAa,QAAQxB,GAAYoC,CAAC;EACpC,QAAQ,CAER;EAEF,IAAeA,CAAC;CAClB,GACA;EAACC;EAAcb;EAAaxB;CAAU,CACxC,GAEMsC,IAAQC,SACL;EAAE,OAAOzB;EAAY,MAAMW;EAAW;EAAc;EAAU;CAAQ,IAC7E;EAACX;EAAYW;EAAWK;EAAcC;EAAUI;CAAO,CACzD;CAEA,OAAO,kBAACK,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;AAmBA,IAAaC,IAAaC,EAA4C,SACpE,EAAE,UAAO,SAAM,WAAQ,IAAM,GAAGC,KAChC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,mBAAiBC,IAAQ,KAAK,KAAA;EAC9B,wBAAsBA,IAAQ,KAAA,IAAY;EAC1C,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/theme/themes.d.ts

@@ -10,7 +10,7 @@
  * opt-in preset, add it here. Nothing in `src/components/` should ever change for a new
  * theme.
  */
-export declare const THEMES: readonly ["paper", "monograph", "ledger", "fiesta"];
+export declare const THEMES: readonly ["paper", "monograph", "ledger", "fiesta", "flightdeck", "riso"];
 /** A theme that ships with Kiln. */
 export type BuiltInThemeName = (typeof THEMES)[number];
 /**

package/dist/theme/themes.js

@@ -3,11 +3,13 @@ var e = [
 	"paper",
 	"monograph",
 	"ledger",
-	"fiesta"
+	"fiesta",
+	"flightdeck",
+	"riso"
 ], t = "paper", n = {
 	paper: {
 		label: "Paper",
-		description: "The neutral default. A typeset proof: graphite ink on warm paper, the ink as the accent, a grotesk for scanning and a book serif for reading.",
+		description: "The neutral default, built for legibility. Blue-black ink on grey recycled stock with white sheets, Golos Text throughout.",
 		stylesheet: null
 	},
 	monograph: {
@@ -15,15 +17,25 @@ var e = [
 		description: "A monograph read under a desk lamp at night. Blue-slate, one ember accent, a big serif display. Dark-first.",
 		stylesheet: "@mitcsutt/kiln-ui/themes/monograph.css"
 	},
+	flightdeck: {
+		label: "Flightdeck",
+		description: "A glass-cockpit display. Dark blue-grey glass, cyan for what you set, a reverse-video box for what you select, B612 throughout. Dark-first.",
+		stylesheet: "@mitcsutt/kiln-ui/themes/flightdeck.css"
+	},
 	ledger: {
 		label: "Ledger",
-		description: "An accountant's ruled book. Quiet, dense and numeric: green-grey paper, tabular figures, compact rhythm.",
+		description: "A columnar accounting pad. Green rules on white, banknote-green actions, red negatives, condensed figures.",
 		stylesheet: "@mitcsutt/kiln-ui/themes/ledger.css"
 	},
 	fiesta: {
 		label: "Fiesta",
 		description: "A screen-printed festival poster. Flat spot inks, hard offsets, chunky condensed type, springy motion.",
 		stylesheet: "@mitcsutt/kiln-ui/themes/fiesta.css"
+	},
+	riso: {
+		label: "Riso",
+		description: "A two-drum risograph zine. Fluorescent pink and blue ink on white stock, screen tints instead of shadows, a hand-drawn face.",
+		stylesheet: "@mitcsutt/kiln-ui/themes/riso.css"
 	}
 }, r = [
 	"system",

package/dist/theme/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","names":["THEMES","DEFAULT_THEME","THEME_META","MODES"],"sources":["../../src/theme/themes.ts"],"sourcesContent":["/**\n * Registry of the themes Kiln ships. A theme is *only* CSS (see `src/themes/<name>.css`);\n * this list exists so TypeScript, Storybook and the docs agree on the built-in names.\n *\n * The runtime never checks a name against this list: `ThemeProvider`, `ThemeScope` and\n * `themeScript` only write `data-theme`, so a consumer's own theme (any string, styled by\n * their own `[data-theme='<name>']` stylesheet) works exactly like a built-in one.\n *\n * Adding a built-in: create `src/themes/<name>.css`, export it from `package.json` as an\n * opt-in preset, add it here. Nothing in `src/components/` should ever change for a new\n * theme.\n */\nexport const THEMES = ['paper', 'monograph', 'ledger', 'fiesta'] as const\n\n/** A theme that ships with Kiln. */\nexport type BuiltInThemeName = (typeof THEMES)[number]\n\n/**\n * Any theme name: a built-in, or one you define in your own stylesheet. Built-in names\n * still autocomplete.\n */\nexport type ThemeName = BuiltInThemeName | (string & Record<never, never>)\n\n/** Applied when no theme is set. Part of the base stylesheet; needs no extra import. */\nexport const DEFAULT_THEME = 'paper' satisfies BuiltInThemeName\n\nexport interface ThemeMeta {\n  label: string\n  description: string\n  /** The stylesheet that defines the theme, or `null` when it's in the base stylesheet. */\n  stylesheet: `@mitcsutt/kiln-ui/themes/${BuiltInThemeName}.css` | null\n}\n\nexport const THEME_META: Record<BuiltInThemeName, ThemeMeta> = {\n  paper: {\n    label: 'Paper',\n    description:\n      'The neutral default. A typeset proof: graphite ink on warm paper, the ink as the accent, a grotesk for scanning and a book serif for reading.',\n    stylesheet: null,\n  },\n  monograph: {\n    label: 'Monograph',\n    description:\n      'A monograph read under a desk lamp at night. Blue-slate, one ember accent, a big serif display. Dark-first.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/monograph.css',\n  },\n  ledger: {\n    label: 'Ledger',\n    description:\n      \"An accountant's ruled book. Quiet, dense and numeric: green-grey paper, tabular figures, compact rhythm.\",\n    stylesheet: '@mitcsutt/kiln-ui/themes/ledger.css',\n  },\n  fiesta: {\n    label: 'Fiesta',\n    description:\n      'A screen-printed festival poster. Flat spot inks, hard offsets, chunky condensed type, springy motion.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/fiesta.css',\n  },\n}\n\nexport const MODES = ['system', 'light', 'dark'] as const\nexport type ColorMode = (typeof MODES)[number]\n"],"mappings":";AAYA,IAAaA,IAAS;CAAC;CAAS;CAAa;CAAU;AAAQ,GAYlDC,IAAgB,SAShBC,IAAkD;CAC7D,OAAO;EACL,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,WAAW;EACT,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;AACF,GAEaC,IAAQ;CAAC;CAAU;CAAS;AAAM"}
+{"version":3,"file":"themes.js","names":["THEMES","DEFAULT_THEME","THEME_META","MODES"],"sources":["../../src/theme/themes.ts"],"sourcesContent":["/**\n * Registry of the themes Kiln ships. A theme is *only* CSS (see `src/themes/<name>.css`);\n * this list exists so TypeScript, Storybook and the docs agree on the built-in names.\n *\n * The runtime never checks a name against this list: `ThemeProvider`, `ThemeScope` and\n * `themeScript` only write `data-theme`, so a consumer's own theme (any string, styled by\n * their own `[data-theme='<name>']` stylesheet) works exactly like a built-in one.\n *\n * Adding a built-in: create `src/themes/<name>.css`, export it from `package.json` as an\n * opt-in preset, add it here. Nothing in `src/components/` should ever change for a new\n * theme.\n */\nexport const THEMES = ['paper', 'monograph', 'ledger', 'fiesta', 'flightdeck', 'riso'] as const\n\n/** A theme that ships with Kiln. */\nexport type BuiltInThemeName = (typeof THEMES)[number]\n\n/**\n * Any theme name: a built-in, or one you define in your own stylesheet. Built-in names\n * still autocomplete.\n */\nexport type ThemeName = BuiltInThemeName | (string & Record<never, never>)\n\n/** Applied when no theme is set. Part of the base stylesheet; needs no extra import. */\nexport const DEFAULT_THEME = 'paper' satisfies BuiltInThemeName\n\nexport interface ThemeMeta {\n  label: string\n  description: string\n  /** The stylesheet that defines the theme, or `null` when it's in the base stylesheet. */\n  stylesheet: `@mitcsutt/kiln-ui/themes/${BuiltInThemeName}.css` | null\n}\n\nexport const THEME_META: Record<BuiltInThemeName, ThemeMeta> = {\n  paper: {\n    label: 'Paper',\n    description:\n      'The neutral default, built for legibility. Blue-black ink on grey recycled stock with white sheets, Golos Text throughout.',\n    stylesheet: null,\n  },\n  monograph: {\n    label: 'Monograph',\n    description:\n      'A monograph read under a desk lamp at night. Blue-slate, one ember accent, a big serif display. Dark-first.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/monograph.css',\n  },\n  flightdeck: {\n    label: 'Flightdeck',\n    description:\n      'A glass-cockpit display. Dark blue-grey glass, cyan for what you set, a reverse-video box for what you select, B612 throughout. Dark-first.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/flightdeck.css',\n  },\n  ledger: {\n    label: 'Ledger',\n    description:\n      'A columnar accounting pad. Green rules on white, banknote-green actions, red negatives, condensed figures.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/ledger.css',\n  },\n  fiesta: {\n    label: 'Fiesta',\n    description:\n      'A screen-printed festival poster. Flat spot inks, hard offsets, chunky condensed type, springy motion.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/fiesta.css',\n  },\n  riso: {\n    label: 'Riso',\n    description:\n      'A two-drum risograph zine. Fluorescent pink and blue ink on white stock, screen tints instead of shadows, a hand-drawn face.',\n    stylesheet: '@mitcsutt/kiln-ui/themes/riso.css',\n  },\n}\n\nexport const MODES = ['system', 'light', 'dark'] as const\nexport type ColorMode = (typeof MODES)[number]\n"],"mappings":";AAYA,IAAaA,IAAS;CAAC;CAAS;CAAa;CAAU;CAAU;CAAc;AAAM,GAYxEC,IAAgB,SAShBC,IAAkD;CAC7D,OAAO;EACL,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,WAAW;EACT,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,YAAY;EACV,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,QAAQ;EACN,OAAO;EACP,aACE;EACF,YAAY;CACd;CACA,MAAM;EACJ,OAAO;EACP,aACE;EACF,YAAY;CACd;AACF,GAEaC,IAAQ;CAAC;CAAU;CAAS;AAAM"}

package/dist/themes/fiesta.css

@@ -1 +1 @@
-@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=fiesta]{--font-display:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--font-text:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-prose:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-mono:"Martian Mono", ui-monospace, Menlo, monospace;--font-numeric:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--type-base:1rem;--display-scale:1;--type-ratio:1.28;--display-weight:850;--display-style:normal;--display-stretch:100%;--display-transform:uppercase;--display-tracking:.005em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:800;--heading-tracking:.01em;--heading-transform:uppercase;--label-weight:650;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--numeral-weight:600;--numeral-scale:1.12;--mono-stretch:75%;--table-head-font:var(--font-display);--leading-tight:.9;--leading-snug:1.1;--leading-body:1.5;--prose-size:1.0625rem;--prose-leading:1.55;--density:.92;--motion-scale:.9;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--icon-stroke:2.25;--border-width:2px;--border-width-strong:3px;--radius-action:999px;--radius-field:.75rem;--radius-surface:1.125rem;--radius-media:.75rem;--radius-chip:999px;--radius-avatar:50%;--color-canvas:light-dark(oklch(85% .105 62),oklch(20% .055 305));--color-surface:light-dark(oklch(98.5% .012 90),oklch(26.5% .065 305));--color-surface-sunken:light-dark(oklch(94.5% .03 80),oklch(22.5% .055 305));--color-surface-raised:light-dark(oklch(99% .01 90),oklch(30% .07 305));--color-surface-inverse:light-dark(oklch(25% .065 300),oklch(96% .02 90));--color-ink:light-dark(oklch(25% .065 300),oklch(97% .015 90));--color-ink-muted:light-dark(oklch(40% .055 300),oklch(84% .03 90));--color-ink-subtle:light-dark(oklch(45% .045 300),oklch(70% .04 300));--color-ink-inverse:light-dark(oklch(97% .015 90),oklch(25% .065 300));--color-line:light-dark(oklch(86% .03 70),oklch(36% .06 305));--color-line-strong:var(--color-ink);--section-divider-color:var(--color-ink);--control-checked-border:var(--color-ink);--marquee-edge:var(--color-ink);--color-accent:light-dark(oklch(66% .215 12),oklch(70% .2 12));--color-accent-hover:light-dark(oklch(70% .2 14),oklch(75% .19 14));--color-accent-ink:oklch(22% .065 300);--color-accent-text:light-dark(oklch(46.5% .19 12),oklch(78% .16 14));--color-accent-soft:light-dark(oklch(92% .06 15),oklch(36% .1 10));--color-highlight:light-dark(oklch(88% .165 92),oklch(86% .16 92));--color-highlight-ink:oklch(22% .065 300);--highlight-tone-positive-text:oklch(42% .09 190);--highlight-tone-caution-text:oklch(44% .1 75);--highlight-tone-critical-text:oklch(45% .19 25);--highlight-tone-info-text:oklch(43% .12 245);--highlight-accent-text:oklch(45% .19 12);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .165 92),oklch(55% .15 12));--color-scrim:light-dark(oklch(25% .065 300/.5),oklch(8% .04 305/.7));--tone-positive:light-dark(oklch(72% .12 185),oklch(76% .12 185));--tone-positive-soft:light-dark(oklch(92% .05 185),oklch(34% .06 190));--tone-positive-text:light-dark(oklch(43% .09 190),oklch(82% .1 185));--tone-positive-ink:oklch(22% .065 300);--tone-caution:light-dark(oklch(88% .165 92),oklch(86% .16 92));--tone-caution-soft:light-dark(oklch(95% .08 95),oklch(36% .07 90));--tone-caution-text:light-dark(oklch(45% .1 75),oklch(88% .14 92));--tone-caution-ink:oklch(22% .065 300);--tone-critical:light-dark(oklch(58% .22 25),oklch(66% .21 25));--tone-critical-soft:light-dark(oklch(92% .05 25),oklch(36% .1 25));--tone-critical-text:light-dark(oklch(46.5% .19 25),oklch(80% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 25),oklch(18% .04 25));--tone-info:light-dark(oklch(62% .12 240),oklch(74% .11 238));--tone-info-soft:light-dark(oklch(92% .04 240),oklch(34% .07 245));--tone-info-text:light-dark(oklch(44.5% .12 245),oklch(82% .09 238));--tone-info-ink:oklch(22% .065 300);--color-cat-1:oklch(72% .19 12);--color-cat-2:oklch(86% .16 92);--color-cat-3:oklch(76% .12 185);--color-cat-4:oklch(76% .15 55);--color-cat-5:oklch(78% .11 240);--color-cat-6:oklch(80% .15 135);--color-cat-7:oklch(76% .12 330);--color-cat-8:oklch(82% .06 70);--color-cat-ink:oklch(22% .065 300);--shadow-surface:4px 4px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--active-shift:2px;--shadow-active:2px 2px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-float:5px 5px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-overlay:8px 8px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--canvas-image:radial-gradient(circle at 1px 1px, light-dark(oklch(25% .065 300/.07),oklch(97% .015 90/.05)) 1px, transparent 1.4px);--canvas-image-size:7px 7px}}@font-face{font-family:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=fiesta]{--font-display:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--font-text:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-prose:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;--font-mono:"Martian Mono", ui-monospace, Menlo, monospace;--font-numeric:"Big Shoulders", "Arial Narrow", ui-sans-serif, sans-serif;--type-base:1rem;--display-scale:1;--type-ratio:1.28;--display-weight:850;--display-style:normal;--display-stretch:100%;--display-transform:uppercase;--display-tracking:.005em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:800;--heading-tracking:.01em;--heading-transform:uppercase;--label-weight:650;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--numeral-weight:600;--numeral-scale:1.12;--mono-stretch:75%;--table-head-font:var(--font-display);--leading-tight:.9;--leading-snug:1.1;--leading-body:1.5;--prose-size:1.0625rem;--prose-leading:1.55;--density:.92;--motion-scale:.9;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--icon-stroke:2.25;--border-width:2px;--border-width-strong:3px;--radius-action:999px;--radius-field:.75rem;--radius-surface:1.125rem;--radius-media:.75rem;--radius-chip:999px;--radius-avatar:50%;--color-canvas:light-dark(oklch(85% .105 62),oklch(20% .055 305));--color-surface:light-dark(oklch(98.5% .012 90),oklch(26.5% .065 305));--color-surface-sunken:light-dark(oklch(94.5% .03 80),oklch(22.5% .055 305));--color-surface-raised:light-dark(oklch(99% .01 90),oklch(30% .07 305));--color-surface-inverse:light-dark(oklch(25% .065 300),oklch(96% .02 90));--color-ink:light-dark(oklch(25% .065 300),oklch(97% .015 90));--color-ink-muted:light-dark(oklch(40% .055 300),oklch(84% .03 90));--color-ink-subtle:light-dark(oklch(45% .045 300),oklch(70% .04 300));--color-ink-inverse:light-dark(oklch(97% .015 90),oklch(25% .065 300));--color-line:light-dark(oklch(86% .03 70),oklch(36% .06 305));--color-line-strong:var(--color-ink);--section-divider-color:var(--color-ink);--control-checked-border:var(--color-ink);--marquee-edge:var(--color-ink);--color-accent:light-dark(oklch(66% .215 12),oklch(70% .2 12));--color-accent-hover:light-dark(oklch(70% .2 14),oklch(75% .19 14));--color-accent-ink:oklch(22% .065 300);--color-accent-text:light-dark(oklch(46.5% .19 12),oklch(78% .16 14));--color-accent-soft:light-dark(oklch(92% .06 15),oklch(36% .1 10));--color-highlight:light-dark(oklch(88% .165 92),oklch(86% .16 92));--color-highlight-ink:oklch(22% .065 300);--highlight-tone-positive-text:oklch(42% .09 190);--highlight-tone-caution-text:oklch(44% .1 75);--highlight-tone-critical-text:oklch(45% .19 25);--highlight-tone-info-text:oklch(43% .12 245);--highlight-accent-text:oklch(45% .19 12);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .165 92),oklch(55% .15 12));--color-scrim:light-dark(oklch(25% .065 300/.5),oklch(8% .04 305/.7));--tone-positive:light-dark(oklch(72% .12 185),oklch(76% .12 185));--tone-positive-soft:light-dark(oklch(92% .05 185),oklch(34% .06 190));--tone-positive-text:light-dark(oklch(43% .09 190),oklch(82% .1 185));--tone-positive-ink:oklch(22% .065 300);--tone-caution:light-dark(oklch(88% .165 92),oklch(86% .16 92));--tone-caution-soft:light-dark(oklch(95% .08 95),oklch(36% .07 90));--tone-caution-text:light-dark(oklch(45% .1 75),oklch(88% .14 92));--tone-caution-ink:oklch(22% .065 300);--tone-critical:light-dark(oklch(58% .22 25),oklch(66% .21 25));--tone-critical-soft:light-dark(oklch(92% .05 25),oklch(36% .1 25));--tone-critical-text:light-dark(oklch(46.5% .19 25),oklch(80% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 25),oklch(18% .04 25));--tone-info:light-dark(oklch(62% .12 240),oklch(74% .11 238));--tone-info-soft:light-dark(oklch(92% .04 240),oklch(34% .07 245));--tone-info-text:light-dark(oklch(44.5% .12 245),oklch(82% .09 238));--tone-info-ink:oklch(22% .065 300);--color-cat-1:oklch(72% .19 12);--color-cat-2:oklch(86% .16 92);--color-cat-3:oklch(76% .12 185);--color-cat-4:oklch(76% .15 55);--color-cat-5:oklch(78% .11 240);--color-cat-6:oklch(80% .15 135);--color-cat-7:oklch(76% .12 330);--color-cat-8:oklch(82% .06 70);--color-cat-ink:oklch(22% .065 300);--shadow-surface:4px 4px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--active-shift:2px;--shadow-active:2px 2px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-float:5px 5px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--shadow-overlay:8px 8px 0 0 light-dark(oklch(25% .065 300),oklch(8% .04 305));--canvas-image:radial-gradient(circle at 1px 1px, light-dark(oklch(25% .065 300/.07),oklch(97% .015 90/.05)) 1px, transparent 1.4px);--canvas-image-size:7px 7px}}@font-face{font-family:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Big Shoulders;font-style:normal;font-display:swap;font-weight:100 900;src:url(../assets/fonts/big-shoulders-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Bricolage Grotesque;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(../assets/fonts/bricolage-grotesque-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Martian Mono;font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(../assets/fonts/martian-mono-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Martian Mono;font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(../assets/fonts/martian-mono-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/themes/flightdeck.css

@@ -0,0 +1 @@
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=flightdeck]{--font-display:"B612", ui-sans-serif, system-ui, sans-serif;--font-text:"B612", ui-sans-serif, system-ui, sans-serif;--font-prose:"B612", ui-sans-serif, system-ui, sans-serif;--font-mono:"B612 Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"B612", ui-sans-serif, system-ui, sans-serif;--type-base:.9375rem;--display-scale:1;--type-ratio:1.25;--display-weight:700;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.01em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:700;--heading-tracking:0;--heading-transform:none;--label-weight:400;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--mono-stretch:100%;--leading-tight:1;--leading-snug:1.2;--leading-body:1.5;--prose-size:1.0625rem;--prose-leading:1.6;--density:.94;--motion-scale:.8;--ease-out:cubic-bezier(.33, 1, .68, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:1px;--radius-action:.125rem;--radius-field:.125rem;--radius-surface:.25rem;--radius-media:0;--radius-chip:999px;--radius-avatar:.125rem;--color-canvas:light-dark(oklch(95% .008 235),oklch(21.5% .022 235));--color-surface:light-dark(oklch(98.5% .004 235),oklch(25% .023 235));--color-surface-sunken:light-dark(oklch(92.5% .01 235),oklch(19% .02 235));--color-surface-raised:light-dark(oklch(99.5% .003 235),oklch(28.5% .024 235));--color-surface-inverse:light-dark(oklch(23% .02 235),oklch(93% .008 235));--color-ink:light-dark(oklch(24% .02 235),oklch(95% .005 235));--color-ink-muted:light-dark(oklch(42% .02 235),oklch(78% .012 235));--color-ink-subtle:light-dark(oklch(50% .018 235),oklch(69% .014 235));--color-ink-inverse:light-dark(oklch(96% .006 235),oklch(20% .02 235));--color-line:light-dark(oklch(87% .012 235),oklch(37% .022 235));--color-line-strong:light-dark(oklch(68% .02 235),oklch(53% .024 235));--color-accent:light-dark(oklch(50% .1 220),oklch(80% .12 210));--color-accent-hover:light-dark(oklch(45% .1 220),oklch(85% .11 210));--color-accent-ink:light-dark(oklch(99% .005 220),oklch(20% .03 235));--color-accent-text:light-dark(oklch(44% .1 220),oklch(82% .11 210));--color-accent-soft:light-dark(oklch(94% .025 215),oklch(30% .045 220));--color-highlight:light-dark(oklch(88% .015 235),oklch(36% .02 235));--color-highlight-ink:light-dark(oklch(22% .02 235),oklch(96% .005 235));--color-focus:var(--color-ink);--color-selection:light-dark(oklch(82% .02 235),oklch(45% .025 235));--color-scrim:light-dark(oklch(25% .02 235/.42),oklch(8% .015 235/.66));--tone-positive:light-dark(oklch(50% .14 148),oklch(78% .17 145));--tone-positive-soft:light-dark(oklch(94% .04 148),oklch(29% .06 148));--tone-positive-text:light-dark(oklch(42% .12 148),oklch(82% .15 145));--tone-positive-ink:light-dark(oklch(99% .01 148),oklch(18% .05 148));--tone-caution:light-dark(oklch(78% .15 75),oklch(80% .15 75));--tone-caution-soft:light-dark(oklch(95% .05 85),oklch(31% .06 75));--tone-caution-text:light-dark(oklch(48% .1 65),oklch(85% .13 80));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 70));--tone-critical:light-dark(oklch(54% .2 27),oklch(66% .21 27));--tone-critical-soft:light-dark(oklch(94% .035 25),oklch(29% .07 27));--tone-critical-text:light-dark(oklch(50% .19 27),oklch(77% .14 27));--tone-critical-ink:light-dark(oklch(99% .008 25),oklch(17% .04 27));--tone-info:light-dark(oklch(50% .1 255),oklch(76% .08 255));--tone-info-soft:light-dark(oklch(94% .02 255),oklch(29% .04 255));--tone-info-text:light-dark(oklch(44% .1 255),oklch(82% .07 255));--tone-info-ink:light-dark(oklch(99% .006 255),oklch(18% .03 255));--color-cat-1:light-dark(oklch(80% .09 300),oklch(72% .11 300));--color-cat-2:light-dark(oklch(82% .08 210),oklch(72% .09 210));--color-cat-3:light-dark(oklch(82% .1 145),oklch(72% .11 145));--color-cat-4:light-dark(oklch(86% .1 85),oklch(76% .11 85));--color-cat-5:light-dark(oklch(80% .09 27),oklch(70% .11 27));--color-cat-6:light-dark(oklch(82% .07 250),oklch(72% .08 250));--color-cat-7:light-dark(oklch(84% .09 115),oklch(74% .1 115));--color-cat-8:light-dark(oklch(80% .015 235),oklch(70% .02 235));--color-cat-ink:oklch(20% .02 235);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(10% .02 235/.2), 0 8px 20px -8px oklch(10% .02 235/.35);--shadow-overlay:0 2px 4px oklch(10% .02 235/.2), 0 20px 48px -12px oklch(10% .02 235/.45);--canvas-image:none}}@font-face{font-family:B612;font-style:normal;font-display:swap;font-weight:400;src:url(../assets/fonts/b612-latin-400-normal.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612;font-style:italic;font-display:swap;font-weight:400;src:url(../assets/fonts/b612-latin-400-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612;font-style:normal;font-display:swap;font-weight:700;src:url(../assets/fonts/b612-latin-700-normal.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612;font-style:italic;font-display:swap;font-weight:700;src:url(../assets/fonts/b612-latin-700-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612 Mono;font-style:normal;font-display:swap;font-weight:400;src:url(../assets/fonts/b612-mono-latin-400-normal.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612 Mono;font-style:italic;font-display:swap;font-weight:400;src:url(../assets/fonts/b612-mono-latin-400-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612 Mono;font-style:normal;font-display:swap;font-weight:700;src:url(../assets/fonts/b612-mono-latin-700-normal.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:B612 Mono;font-style:italic;font-display:swap;font-weight:700;src:url(../assets/fonts/b612-mono-latin-700-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/themes/ledger.css

@@ -1 +1 @@
-@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=ledger]{--font-display:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-text:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-prose:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-mono:"Martian Mono", ui-monospace, Menlo, monospace;--font-numeric:"Martian Mono", ui-monospace, Menlo, monospace;--type-base:.9375rem;--type-ratio:1.2;--display-scale:1.25;--display-weight:700;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.03em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:650;--heading-tracking:-.012em;--heading-transform:none;--label-weight:550;--label-tracking:0;--label-transform:none;--numeric-stretch:80%;--mono-stretch:80%;--leading-tight:1.05;--leading-snug:1.2;--leading-body:1.5;--prose-size:1rem;--prose-leading:1.55;--density:.86;--motion-scale:.8;--ease-out:cubic-bezier(.25, 1, .5, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:2px;--radius-action:.3125rem;--radius-field:.3125rem;--radius-surface:.375rem;--radius-media:.25rem;--radius-chip:.25rem;--radius-avatar:.3125rem;--color-canvas:light-dark(oklch(96.8% .008 145),oklch(19% .012 170));--color-surface:light-dark(oklch(99.2% .004 145),oklch(22.2% .013 170));--color-surface-sunken:light-dark(oklch(94.8% .01 145),oklch(17% .011 170));--color-surface-raised:light-dark(oklch(99.6% .003 145),oklch(25% .014 170));--color-surface-inverse:light-dark(oklch(25% .02 170),oklch(93% .008 145));--color-ink:light-dark(oklch(24% .02 170),oklch(93% .008 145));--color-ink-muted:light-dark(oklch(45% .018 170),oklch(74% .012 150));--color-ink-subtle:light-dark(oklch(52.5% .014 165),oklch(63.5% .012 160));--color-ink-inverse:light-dark(oklch(96% .006 145),oklch(22% .02 170));--color-line:light-dark(oklch(88.5% .018 150),oklch(30% .014 170));--color-line-strong:light-dark(oklch(76% .03 155),oklch(40% .018 170));--table-foot-rule:3px double var(--color-ink);--stat-fit:7.5;--color-accent:light-dark(oklch(47% .085 165),oklch(72% .1 162));--color-accent-hover:light-dark(oklch(42% .08 165),oklch(77% .1 162));--color-accent-ink:light-dark(oklch(98.5% .008 145),oklch(18% .03 165));--color-accent-text:light-dark(oklch(44% .085 165),oklch(78% .09 162));--color-accent-soft:light-dark(oklch(93% .03 160),oklch(29% .04 165));--color-highlight:light-dark(oklch(95% .09 102),oklch(36% .06 100));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(93% .1 102),oklch(40% .07 100));--color-scrim:light-dark(oklch(24% .02 170/.4),oklch(8% .01 170/.66));--tone-positive:light-dark(oklch(50% .1 155),oklch(72% .11 158));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(28% .045 158));--tone-positive-text:light-dark(oklch(44% .1 155),oklch(78% .1 158));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(74% .14 78),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(30% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(84% .11 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(52% .18 25),oklch(68% .16 24));--tone-critical-soft:light-dark(oklch(94.5% .03 22),oklch(29% .055 24));--tone-critical-text:light-dark(oklch(49% .17 25),oklch(76% .13 24));--tone-critical-ink:light-dark(oklch(98.5% .01 22),oklch(18% .03 24));--tone-info:light-dark(oklch(50% .07 230),oklch(72% .07 230));--tone-info-soft:light-dark(oklch(94% .02 230),oklch(28% .03 230));--tone-info-text:light-dark(oklch(45% .07 230),oklch(78% .06 230));--tone-info-ink:light-dark(oklch(98.5% .01 230),oklch(18% .03 230));--color-cat-1:light-dark(oklch(62% .09 165),oklch(68% .09 165));--color-cat-2:light-dark(oklch(72% .11 75),oklch(76% .11 75));--color-cat-3:light-dark(oklch(60% .08 235),oklch(68% .08 235));--color-cat-4:light-dark(oklch(62% .12 30),oklch(68% .12 30));--color-cat-5:light-dark(oklch(70% .06 120),oklch(74% .07 120));--color-cat-6:light-dark(oklch(62% .07 300),oklch(68% .07 300));--color-cat-7:light-dark(oklch(72% .05 195),oklch(76% .05 195));--color-cat-8:light-dark(oklch(65% .02 170),oklch(70% .02 170));--color-cat-ink:oklch(20% .02 170);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(24% .02 170/.1), 0 8px 20px -6px oklch(24% .02 170/.18);--shadow-overlay:0 2px 4px oklch(20% .02 170/.12), 0 20px 48px -12px oklch(20% .02 170/.3);--canvas-image:none}}
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=ledger]{--font-display:"Archivo", ui-sans-serif, system-ui, sans-serif;--font-text:"Archivo", ui-sans-serif, system-ui, sans-serif;--font-prose:"Archivo", ui-sans-serif, system-ui, sans-serif;--font-mono:"Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"Archivo", ui-sans-serif, system-ui, sans-serif;--type-base:.9375rem;--type-ratio:1.2;--display-scale:1.25;--display-weight:750;--display-style:normal;--display-stretch:87.5%;--display-transform:none;--display-tracking:-.03em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:650;--heading-tracking:-.012em;--heading-transform:none;--label-weight:550;--label-tracking:0;--label-transform:none;--numeric-stretch:78%;--mono-stretch:100%;--leading-tight:1.05;--leading-snug:1.2;--leading-body:1.5;--prose-size:1rem;--prose-leading:1.55;--density:.86;--motion-scale:.8;--ease-out:cubic-bezier(.25, 1, .5, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:2px;--radius-action:.1875rem;--radius-field:.1875rem;--radius-surface:.1875rem;--radius-media:.125rem;--radius-chip:.125rem;--radius-avatar:.25rem;--color-canvas:light-dark(oklch(98.5% .003 150),oklch(24% .018 185));--color-surface:light-dark(oklch(99.8% .001 150),oklch(27.5% .019 185));--color-surface-sunken:light-dark(oklch(96.3% .006 150),oklch(21.5% .017 185));--color-surface-raised:light-dark(oklch(100% 0 0),oklch(31% .02 185));--color-surface-inverse:light-dark(oklch(24% .02 160),oklch(95% .01 170));--color-ink:light-dark(oklch(22% .02 160),oklch(93% .01 160));--color-ink-muted:light-dark(oklch(44% .02 160),oklch(83% .015 175));--color-ink-subtle:light-dark(oklch(50% .02 160),oklch(75% .015 175));--color-ink-inverse:light-dark(oklch(97% .006 150),oklch(22% .02 170));--color-line:light-dark(oklch(86% .05 155),oklch(39% .035 165));--color-line-strong:light-dark(oklch(70% .08 155),oklch(50% .05 160));--table-foot-rule:3px double var(--color-ink);--stat-fit:6;--color-accent:light-dark(oklch(44% .1 160),oklch(76% .085 155));--color-accent-hover:light-dark(oklch(39% .095 160),oklch(81% .085 155));--color-accent-ink:light-dark(oklch(98.5% .01 150),oklch(20% .03 160));--color-accent-text:light-dark(oklch(42% .1 160),oklch(85% .08 155));--color-accent-soft:light-dark(oklch(93% .04 158),oklch(34% .035 158));--color-highlight:light-dark(oklch(95% .09 102),oklch(42% .06 100));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(93% .1 102),oklch(46% .07 100));--color-scrim:light-dark(oklch(24% .02 170/.4),oklch(8% .01 170/.66));--tone-positive:light-dark(oklch(50% .1 155),oklch(76% .1 155));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(33% .04 155));--tone-positive-text:light-dark(oklch(44% .1 155),oklch(83% .09 155));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(74% .14 78),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(35% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(87% .1 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(52% .18 25),oklch(68% .16 24));--tone-critical-soft:light-dark(oklch(94.5% .03 22),oklch(34% .055 24));--tone-critical-text:light-dark(oklch(49% .17 25),oklch(82% .11 24));--tone-critical-ink:light-dark(oklch(98.5% .01 22),oklch(18% .03 24));--tone-info:light-dark(oklch(50% .07 230),oklch(72% .07 230));--tone-info-soft:light-dark(oklch(94% .02 230),oklch(33% .03 230));--tone-info-text:light-dark(oklch(45% .07 230),oklch(83% .06 230));--tone-info-ink:light-dark(oklch(98.5% .01 230),oklch(18% .03 230));--color-cat-1:light-dark(oklch(62% .09 165),oklch(68% .09 165));--color-cat-2:light-dark(oklch(72% .11 75),oklch(76% .11 75));--color-cat-3:light-dark(oklch(60% .08 235),oklch(68% .08 235));--color-cat-4:light-dark(oklch(62% .12 30),oklch(68% .12 30));--color-cat-5:light-dark(oklch(70% .06 120),oklch(74% .07 120));--color-cat-6:light-dark(oklch(62% .07 300),oklch(68% .07 300));--color-cat-7:light-dark(oklch(72% .05 195),oklch(76% .05 195));--color-cat-8:light-dark(oklch(65% .02 170),oklch(70% .02 170));--color-cat-ink:oklch(20% .02 170);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(24% .02 170/.1), 0 8px 20px -6px oklch(24% .02 170/.18);--shadow-overlay:0 2px 4px oklch(20% .02 170/.12), 0 20px 48px -12px oklch(20% .02 170/.3);--canvas-image:none}}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../assets/fonts/archivo-latin-ext-wdth-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../assets/fonts/archivo-latin-wdth-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Archivo;font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../assets/fonts/archivo-latin-ext-wdth-italic.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Archivo;font-style:italic;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../assets/fonts/archivo-latin-wdth-italic.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/themes/monograph.css

@@ -1 +1 @@
-@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=monograph]{--font-display:"Newsreader", "Iowan Old Style", Georgia, serif;--font-text:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-prose:"Newsreader", "Iowan Old Style", Georgia, serif;--font-mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"Newsreader", "Iowan Old Style", Georgia, serif;--type-base:1.0625rem;--display-scale:1;--type-ratio:1.25;--display-weight:430;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.035em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:480;--heading-tracking:-.018em;--heading-transform:none;--label-weight:560;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--mono-stretch:87.5%;--leading-tight:1.02;--leading-snug:1.2;--leading-body:1.55;--prose-size:1.1875rem;--prose-leading:1.62;--density:1.05;--motion-scale:1.1;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:1px;--radius-action:999px;--radius-field:.5rem;--radius-surface:.75rem;--radius-media:.5rem;--radius-chip:999px;--radius-avatar:28%;--color-canvas:light-dark(oklch(97.2% .005 250),oklch(17.8% .013 257));--color-surface:light-dark(oklch(99.3% .003 250),oklch(20.8% .015 257));--color-surface-sunken:light-dark(oklch(95.2% .007 250),oklch(15.8% .012 257));--color-surface-raised:light-dark(oklch(99.7% .002 250),oklch(23.8% .016 257));--color-surface-inverse:light-dark(oklch(22% .018 257),oklch(93% .008 250));--color-ink:light-dark(oklch(22.5% .02 257),oklch(94% .008 250));--color-ink-muted:light-dark(oklch(44% .018 257),oklch(75% .013 250));--color-ink-subtle:light-dark(oklch(52.5% .014 257),oklch(62.5% .013 252));--color-ink-inverse:light-dark(oklch(96% .006 250),oklch(20% .018 257));--color-line:light-dark(oklch(89.5% .008 250),oklch(29% .015 257));--color-line-strong:light-dark(oklch(79% .012 250),oklch(39% .016 257));--color-accent:light-dark(oklch(56.5% .158 44),oklch(72% .15 52));--color-accent-hover:light-dark(oklch(52% .15 42),oklch(77% .14 55));--color-accent-ink:light-dark(oklch(98.5% .01 60),oklch(19% .03 45));--color-accent-text:light-dark(oklch(53% .15 42),oklch(78% .13 56));--color-accent-soft:light-dark(oklch(94% .035 60),oklch(29% .055 48));--color-highlight:light-dark(oklch(93% .02 230),oklch(30% .03 240));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .07 58),oklch(42% .09 50));--color-scrim:light-dark(oklch(25% .02 257/.42),oklch(8% .01 257/.66));--tone-positive:light-dark(oklch(52% .11 155),oklch(72% .12 158));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(28% .045 158));--tone-positive-text:light-dark(oklch(45% .1 155),oklch(78% .11 158));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(72% .14 80),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(30% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(84% .11 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(54% .19 22),oklch(68% .17 22));--tone-critical-soft:light-dark(oklch(94% .035 20),oklch(29% .06 22));--tone-critical-text:light-dark(oklch(50% .18 22),oklch(76% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 20),oklch(18% .03 22));--tone-info:light-dark(oklch(52% .08 235),oklch(72% .08 232));--tone-info-soft:light-dark(oklch(94% .02 235),oklch(28% .035 235));--tone-info-text:light-dark(oklch(46% .08 235),oklch(78% .07 232));--tone-info-ink:light-dark(oklch(98.5% .01 235),oklch(18% .03 235));--color-cat-1:light-dark(oklch(78% .09 50),oklch(70% .1 50));--color-cat-2:light-dark(oklch(80% .07 160),oklch(70% .08 160));--color-cat-3:light-dark(oklch(80% .06 235),oklch(70% .07 235));--color-cat-4:light-dark(oklch(84% .09 95),oklch(74% .1 95));--color-cat-5:light-dark(oklch(79% .07 15),oklch(69% .08 15));--color-cat-6:light-dark(oklch(80% .05 195),oklch(70% .06 195));--color-cat-7:light-dark(oklch(82% .06 125),oklch(72% .07 125));--color-cat-8:light-dark(oklch(78% .03 257),oklch(68% .03 257));--color-cat-ink:oklch(22% .02 257);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(20% .02 257/.12), 0 10px 28px -6px oklch(20% .03 257/.22);--shadow-overlay:0 2px 4px oklch(15% .02 257/.14), 0 24px 64px -12px oklch(15% .03 257/.36);--canvas-image:none}}
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=monograph]{--font-display:"Newsreader", "Iowan Old Style", Georgia, serif;--font-text:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;--font-prose:"Newsreader", "Iowan Old Style", Georgia, serif;--font-mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"Newsreader", "Iowan Old Style", Georgia, serif;--type-base:1.0625rem;--display-scale:1;--type-ratio:1.25;--display-weight:430;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.035em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:480;--heading-tracking:-.018em;--heading-transform:none;--label-weight:560;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--mono-stretch:87.5%;--leading-tight:1.02;--leading-snug:1.2;--leading-body:1.55;--prose-size:1.1875rem;--prose-leading:1.62;--density:1.05;--motion-scale:1.1;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:var(--ease-out);--icon-stroke:1.5;--border-width:1px;--border-width-strong:1px;--radius-action:999px;--radius-field:.5rem;--radius-surface:.75rem;--radius-media:.5rem;--radius-chip:999px;--radius-avatar:28%;--color-canvas:light-dark(oklch(97.2% .005 250),oklch(17.8% .013 257));--color-surface:light-dark(oklch(99.3% .003 250),oklch(20.8% .015 257));--color-surface-sunken:light-dark(oklch(95.2% .007 250),oklch(15.8% .012 257));--color-surface-raised:light-dark(oklch(99.7% .002 250),oklch(23.8% .016 257));--color-surface-inverse:light-dark(oklch(22% .018 257),oklch(93% .008 250));--color-ink:light-dark(oklch(22.5% .02 257),oklch(94% .008 250));--color-ink-muted:light-dark(oklch(44% .018 257),oklch(75% .013 250));--color-ink-subtle:light-dark(oklch(52.5% .014 257),oklch(62.5% .013 252));--color-ink-inverse:light-dark(oklch(96% .006 250),oklch(20% .018 257));--color-line:light-dark(oklch(89.5% .008 250),oklch(29% .015 257));--color-line-strong:light-dark(oklch(79% .012 250),oklch(39% .016 257));--color-accent:light-dark(oklch(56.5% .158 44),oklch(72% .15 52));--color-accent-hover:light-dark(oklch(52% .15 42),oklch(77% .14 55));--color-accent-ink:light-dark(oklch(98.5% .01 60),oklch(19% .03 45));--color-accent-text:light-dark(oklch(53% .15 42),oklch(78% .13 56));--color-accent-soft:light-dark(oklch(94% .035 60),oklch(29% .055 48));--color-highlight:light-dark(oklch(93% .02 230),oklch(30% .03 240));--color-highlight-ink:var(--color-ink);--color-focus:var(--color-ink);--color-selection:light-dark(oklch(88% .07 58),oklch(42% .09 50));--color-scrim:light-dark(oklch(25% .02 257/.42),oklch(8% .01 257/.66));--tone-positive:light-dark(oklch(52% .11 155),oklch(72% .12 158));--tone-positive-soft:light-dark(oklch(94% .035 155),oklch(28% .045 158));--tone-positive-text:light-dark(oklch(45% .1 155),oklch(78% .11 158));--tone-positive-ink:light-dark(oklch(98.5% .01 155),oklch(18% .03 158));--tone-caution:light-dark(oklch(72% .14 80),oklch(80% .13 85));--tone-caution-soft:light-dark(oklch(95% .05 88),oklch(30% .05 80));--tone-caution-text:light-dark(oklch(50% .1 70),oklch(84% .11 88));--tone-caution-ink:light-dark(oklch(22% .04 70),oklch(20% .04 80));--tone-critical:light-dark(oklch(54% .19 22),oklch(68% .17 22));--tone-critical-soft:light-dark(oklch(94% .035 20),oklch(29% .06 22));--tone-critical-text:light-dark(oklch(50% .18 22),oklch(76% .14 22));--tone-critical-ink:light-dark(oklch(98.5% .01 20),oklch(18% .03 22));--tone-info:light-dark(oklch(52% .08 235),oklch(72% .08 232));--tone-info-soft:light-dark(oklch(94% .02 235),oklch(28% .035 235));--tone-info-text:light-dark(oklch(46% .08 235),oklch(78% .07 232));--tone-info-ink:light-dark(oklch(98.5% .01 235),oklch(18% .03 235));--color-cat-1:light-dark(oklch(78% .09 50),oklch(70% .1 50));--color-cat-2:light-dark(oklch(80% .07 160),oklch(70% .08 160));--color-cat-3:light-dark(oklch(80% .06 235),oklch(70% .07 235));--color-cat-4:light-dark(oklch(84% .09 95),oklch(74% .1 95));--color-cat-5:light-dark(oklch(79% .07 15),oklch(69% .08 15));--color-cat-6:light-dark(oklch(80% .05 195),oklch(70% .06 195));--color-cat-7:light-dark(oklch(82% .06 125),oklch(72% .07 125));--color-cat-8:light-dark(oklch(78% .03 257),oklch(68% .03 257));--color-cat-ink:oklch(22% .02 257);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:0 1px 2px oklch(20% .02 257/.12), 0 10px 28px -6px oklch(20% .03 257/.22);--shadow-overlay:0 2px 4px oklch(15% .02 257/.14), 0 24px 64px -12px oklch(15% .03 257/.36);--canvas-image:none}}@font-face{font-family:Newsreader;font-style:normal;font-display:swap;font-weight:200 800;src:url(../assets/fonts/newsreader-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Newsreader;font-style:normal;font-display:swap;font-weight:200 800;src:url(../assets/fonts/newsreader-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Newsreader;font-style:italic;font-display:swap;font-weight:200 800;src:url(../assets/fonts/newsreader-latin-ext-standard-italic.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Newsreader;font-style:italic;font-display:swap;font-weight:200 800;src:url(../assets/fonts/newsreader-latin-standard-italic.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Schibsted Grotesk;font-style:normal;font-display:swap;font-weight:400 900;src:url(../assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Schibsted Grotesk;font-style:normal;font-display:swap;font-weight:400 900;src:url(../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Schibsted Grotesk;font-style:italic;font-display:swap;font-weight:400 900;src:url(../assets/fonts/schibsted-grotesk-latin-ext-wght-italic.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Schibsted Grotesk;font-style:italic;font-display:swap;font-weight:400 900;src:url(../assets/fonts/schibsted-grotesk-latin-wght-italic.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Martian Mono;font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(../assets/fonts/martian-mono-latin-ext-standard-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Martian Mono;font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(../assets/fonts/martian-mono-latin-standard-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/themes/riso.css

@@ -0,0 +1 @@
+@layer kiln.reset,kiln.tokens;@layer kiln.themes{[data-theme=riso]{--font-display:"Shantell Sans", ui-sans-serif, system-ui, sans-serif;--font-text:"Shantell Sans", ui-sans-serif, system-ui, sans-serif;--font-prose:"Shantell Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:"Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--font-numeric:"Shantell Sans", ui-sans-serif, system-ui, sans-serif;--type-base:1rem;--display-scale:1.2;--type-ratio:1.25;--display-weight:800;--display-style:normal;--display-stretch:100%;--display-transform:none;--display-tracking:-.02em;--display-opsz:72;--heading-font:var(--font-display);--heading-weight:700;--heading-tracking:-.01em;--heading-transform:none;--label-weight:600;--label-tracking:0;--label-transform:none;--numeric-stretch:100%;--numeral-weight:700;--numeral-scale:1;--mono-stretch:100%;--table-head-font:var(--font-text);--leading-tight:.95;--leading-snug:1.15;--leading-body:1.55;--prose-size:1.0625rem;--prose-leading:1.6;--density:1;--motion-scale:1;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.3, .64, 1);--icon-stroke:2;--border-width:1px;--border-width-strong:2px;--radius-action:.625rem;--radius-field:.375rem;--radius-surface:.75rem;--radius-media:.25rem;--radius-chip:999px;--radius-avatar:50%;--color-canvas:light-dark(oklch(98.5% .003 250),oklch(25% .06 258));--color-surface:light-dark(oklch(95.5% .02 255),oklch(29% .07 258));--color-surface-sunken:light-dark(oklch(95.5% .025 355),oklch(22% .055 258));--color-surface-raised:light-dark(oklch(99.8% .002 250),oklch(33% .075 258));--color-surface-inverse:light-dark(oklch(39% .14 258),oklch(95% .025 350));--color-ink:light-dark(oklch(39% .14 258),oklch(96% .015 350));--color-ink-muted:light-dark(oklch(47% .12 258),oklch(84% .05 255));--color-ink-subtle:light-dark(oklch(46% .11 258),oklch(74% .07 255));--color-ink-inverse:light-dark(oklch(98.5% .003 250),oklch(22% .06 258));--color-line:light-dark(oklch(86% .06 258),oklch(42% .08 258));--color-line-strong:light-dark(oklch(56% .13 258),oklch(64% .1 258));--section-divider-color:var(--color-line-strong);--control-checked-border:var(--color-ink);--marquee-edge:var(--color-line);--color-accent:light-dark(oklch(68% .24 355),oklch(70% .24 355));--color-accent-hover:light-dark(oklch(72% .22 355),oklch(76% .2 355));--color-accent-ink:oklch(20% .07 258);--color-accent-text:light-dark(oklch(52% .22 0),oklch(78% .17 355));--color-accent-soft:light-dark(oklch(93% .055 355),oklch(32% .09 355));--color-highlight:light-dark(oklch(90% .07 355),oklch(37% .12 355));--color-highlight-ink:light-dark(oklch(33% .13 258),oklch(97% .015 350));--highlight-tone-positive-text:light-dark(oklch(38% .09 175),oklch(86% .12 170));--highlight-tone-caution-text:light-dark(oklch(40% .09 80),oklch(90% .13 95));--highlight-tone-critical-text:light-dark(oklch(42% .18 27),oklch(86% .12 25));--highlight-tone-info-text:light-dark(oklch(36% .14 258),oklch(86% .07 250));--highlight-accent-text:light-dark(oklch(42% .2 0),oklch(88% .1 355));--color-focus:light-dark(oklch(39% .14 258),oklch(96% .015 350));--color-selection:light-dark(oklch(88% .09 355),oklch(50% .17 355));--color-scrim:light-dark(oklch(25% .1 258/.5),oklch(8% .03 258/.7));--tone-positive:light-dark(oklch(70% .12 175),oklch(76% .13 172));--tone-positive-soft:light-dark(oklch(94% .04 175),oklch(32% .06 175));--tone-positive-text:light-dark(oklch(42% .09 175),oklch(82% .12 172));--tone-positive-ink:oklch(20% .05 200);--tone-caution:light-dark(oklch(88% .16 95),oklch(86% .15 95));--tone-caution-soft:light-dark(oklch(95% .07 98),oklch(34% .06 90));--tone-caution-text:light-dark(oklch(44% .1 80),oklch(88% .14 95));--tone-caution-ink:oklch(22% .05 258);--tone-critical:light-dark(oklch(56% .21 27),oklch(66% .21 27));--tone-critical-soft:light-dark(oklch(94% .04 27),oklch(34% .1 27));--tone-critical-text:light-dark(oklch(46% .19 27),oklch(80% .14 25));--tone-critical-ink:light-dark(oklch(98.5% .01 27),oklch(18% .04 27));--tone-info:light-dark(oklch(76% .1 245),oklch(74% .11 245));--tone-info-soft:light-dark(oklch(94% .03 250),oklch(32% .07 255));--tone-info-text:light-dark(oklch(44% .14 258),oklch(82% .09 245));--tone-info-ink:oklch(22% .06 258);--color-cat-1:oklch(72% .2 355);--color-cat-2:oklch(76% .1 245);--color-cat-3:oklch(88% .16 95);--color-cat-4:oklch(78% .11 178);--color-cat-5:oklch(79% .14 58);--color-cat-6:oklch(80% .15 140);--color-cat-7:oklch(78% .09 315);--color-cat-8:oklch(85% .03 250);--color-cat-ink:oklch(22% .06 258);--shadow-surface:none;--active-shift:0px;--shadow-active:none;--shadow-float:3px 3px 0 0 light-dark(oklch(68% .24 355),oklch(70% .24 355));--shadow-overlay:3px 3px 0 0 light-dark(oklch(68% .24 355),oklch(70% .24 355));--canvas-image:none;--canvas-image-size:auto}}@font-face{font-family:Shantell Sans;font-style:normal;font-display:swap;font-weight:300 800;src:url(../assets/fonts/shantell-sans-latin-ext-full-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Shantell Sans;font-style:normal;font-display:swap;font-weight:300 800;src:url(../assets/fonts/shantell-sans-latin-full-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Shantell Sans;font-style:italic;font-display:swap;font-weight:300 800;src:url(../assets/fonts/shantell-sans-latin-ext-full-italic.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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:Shantell Sans;font-style:italic;font-display:swap;font-weight:300 800;src:url(../assets/fonts/shantell-sans-latin-full-italic.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mitcsutt/kiln-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Kiln: a themeable React design system on Radix primitives, plain CSS and design tokens",
   "keywords": [
     "kiln",
@@ -40,6 +40,8 @@
     "./themes/monograph.css": "./dist/themes/monograph.css",
     "./themes/ledger.css": "./dist/themes/ledger.css",
     "./themes/fiesta.css": "./dist/themes/fiesta.css",
+    "./themes/flightdeck.css": "./dist/themes/flightdeck.css",
+    "./themes/riso.css": "./dist/themes/riso.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -85,7 +87,7 @@
   "scripts": {
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "check:package": "pnpm pack --out node_modules/.cache/kiln-pack/package.tgz > /dev/null && publint --pack pnpm --strict && attw node_modules/.cache/kiln-pack/package.tgz --profile esm-only --exclude-entrypoints ./styles.css ./themes/monograph.css ./themes/ledger.css ./themes/fiesta.css && node scripts/check-theme-script-entry.ts node_modules/.cache/kiln-pack/package.tgz",
+    "check:package": "pnpm pack --out node_modules/.cache/kiln-pack/package.tgz > /dev/null && publint --pack pnpm --strict && attw node_modules/.cache/kiln-pack/package.tgz --profile esm-only --exclude-entrypoints ./styles.css ./themes/monograph.css ./themes/ledger.css ./themes/fiesta.css ./themes/flightdeck.css ./themes/riso.css && node scripts/check-theme-script-entry.ts node_modules/.cache/kiln-pack/package.tgz",
     "check:skills": "intent validate",
     "lint": "eslint --max-warnings=0 .",
     "size": "node ../../size-report.ts",

package/skills/custom-theme/SKILL.md

@@ -48,14 +48,16 @@ export function Usage() {
 
 ## 1. Start from one idea
 
-Strong themes take one idea from their subject and apply it everywhere, with everything else quiet. Paper is a typeset proof; Fiesta is a screen-printed festival poster. Harbour is _the tide table posted at a ferry terminal_. That idea decides the rest:
+Strong themes take one idea from their subject and apply it everywhere, with everything else quiet. Paper is an office that prints for everyone, on grey stock; Riso is a two-drum risograph zine. Harbour is _the tide table posted at a ferry terminal_. That idea decides the rest:
 
 - **Colour**: sea-grey enamel neutrals (hue 225), one signal-orange accent like a channel buoy, sea-glass green for "you".
 - **Type**: heavy upright signage for headings, and every figure in a monospaced face, because tide times are read down a column.
 - **Shape**: squared enamel corners, firm hairlines, flat surfaces.
 - **Motion**: brisk, no bounce.
 
-If a choice can't be justified by the idea, leave it at the default. Pick at most two families and one accent.
+If a choice can't be justified by the idea, leave it at the default. Write the one-line reason for each choice next to its value, and if you can't, change the choice. Pick at most two families and one accent.
+
+Generated UI also converges on a second set of looks: a cream canvas with a terracotta accent, near-black with one acid accent, a mint canvas with forest green, hard-offset shadows on every card, and a short list of "distinctive" fonts. Kiln's newer themes (Paper, Ledger, Flightdeck and Riso) avoid all of them. Monograph and Fiesta predate these rules and are kept unchanged for compatibility, so don't take them as a model. Kiln's [DESIGN.md](https://github.com/mitcsutt/kiln/blob/main/DESIGN.md) lists them in full.
 
 ## 2. Copy the starter file
 
@@ -68,25 +70,25 @@ This is every token in the contract, set to Paper's values, under your theme's n
 @layer kiln.themes {
   [data-theme='harbour'] {
     /* Type roles */
-    --font-display: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
-    --font-text: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
-    --font-prose: 'Newsreader', 'Iowan Old Style', Georgia, serif;
-    --font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
-    --font-numeric: 'Newsreader', 'Iowan Old Style', Georgia, serif;
+    --font-display: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
+    --font-text: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
+    --font-prose: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
+    --font-numeric: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
     --type-base: 1rem;
     --display-scale: 1;
     --type-ratio: 1.25;
-    --display-weight: 640;
+    --display-weight: 740;
     --display-style: normal;
     --display-stretch: 100%;
     --display-transform: none;
-    --display-tracking: -0.04em;
+    --display-tracking: -0.025em;
     --display-opsz: 72;
     --heading-font: var(--font-display);
-    --heading-weight: 620;
+    --heading-weight: 650;
     --heading-tracking: -0.015em;
     --heading-transform: none;
-    --label-weight: 560;
+    --label-weight: 600;
     --label-tracking: 0;
     --label-transform: none;
     --numeric-stretch: 100%;
@@ -94,7 +96,7 @@ This is every token in the contract, set to Paper's values, under your theme's n
     --leading-tight: 1;
     --leading-snug: 1.2;
     --leading-body: 1.55;
-    --prose-size: 1.125rem;
+    --prose-size: 1.0625rem;
     --prose-leading: 1.6;
 
     /* Structure & temperament */
@@ -106,35 +108,35 @@ This is every token in the contract, set to Paper's values, under your theme's n
     --icon-stroke: 1.5;
     --border-width: 1px;
     --border-width-strong: 2px;
-    --radius-action: 0.375rem;
-    --radius-field: 0.375rem;
-    --radius-surface: 0.5rem;
-    --radius-media: 0.25rem;
-    --radius-chip: 0.375rem;
+    --radius-action: 0.25rem;
+    --radius-field: 0.25rem;
+    --radius-surface: 0.375rem;
+    --radius-media: 0.125rem;
+    --radius-chip: 999px;
     --radius-avatar: 50%;
 
     /* Colour */
-    --color-canvas: light-dark(oklch(0.976 0.004 85), oklch(0.188 0.005 85));
-    --color-surface: light-dark(oklch(0.993 0.002 85), oklch(0.215 0.006 85));
-    --color-surface-sunken: light-dark(oklch(0.955 0.005 85), oklch(0.165 0.005 85));
-    --color-surface-raised: light-dark(oklch(0.997 0.002 85), oklch(0.245 0.006 85));
-    --color-surface-inverse: light-dark(oklch(0.235 0.008 85), oklch(0.93 0.005 85));
-    --color-ink: light-dark(oklch(0.215 0.008 85), oklch(0.935 0.005 85));
-    --color-ink-muted: light-dark(oklch(0.435 0.008 85), oklch(0.755 0.006 85));
-    --color-ink-subtle: light-dark(oklch(0.515 0.008 85), oklch(0.64 0.006 85));
-    --color-ink-inverse: light-dark(oklch(0.965 0.004 85), oklch(0.2 0.008 85));
-    --color-line: light-dark(oklch(0.9 0.005 85), oklch(0.3 0.006 85));
-    --color-line-strong: light-dark(oklch(0.8 0.006 85), oklch(0.4 0.007 85));
-    --color-accent: light-dark(oklch(0.25 0.008 85), oklch(0.92 0.005 85));
-    --color-accent-hover: light-dark(oklch(0.34 0.008 85), oklch(0.84 0.006 85));
-    --color-accent-ink: light-dark(oklch(0.975 0.004 85), oklch(0.2 0.008 85));
-    --color-accent-text: light-dark(oklch(0.25 0.008 85), oklch(0.92 0.005 85));
-    --color-accent-soft: light-dark(oklch(0.925 0.006 85), oklch(0.285 0.007 85));
-    --color-highlight: light-dark(oklch(0.935 0.035 228), oklch(0.315 0.045 235));
+    --color-canvas: light-dark(oklch(0.952 0.006 250), oklch(0.17 0.008 250));
+    --color-surface: light-dark(oklch(0.995 0.002 250), oklch(0.215 0.009 250));
+    --color-surface-sunken: light-dark(oklch(0.935 0.006 250), oklch(0.14 0.008 250));
+    --color-surface-raised: light-dark(oklch(0.998 0.002 250), oklch(0.25 0.009 250));
+    --color-surface-inverse: light-dark(oklch(0.26 0.06 256), oklch(0.93 0.012 250));
+    --color-ink: light-dark(oklch(0.26 0.06 256), oklch(0.94 0.01 250));
+    --color-ink-muted: light-dark(oklch(0.42 0.06 256), oklch(0.77 0.015 250));
+    --color-ink-subtle: light-dark(oklch(0.47 0.06 256), oklch(0.66 0.015 250));
+    --color-ink-inverse: light-dark(oklch(0.96 0.006 250), oklch(0.2 0.05 256));
+    --color-line: light-dark(oklch(0.9 0.006 250), oklch(0.3 0.01 250));
+    --color-line-strong: light-dark(oklch(0.78 0.012 252), oklch(0.42 0.012 250));
+    --color-accent: light-dark(oklch(0.37 0.1 255), oklch(0.86 0.06 250));
+    --color-accent-hover: light-dark(oklch(0.31 0.095 255), oklch(0.92 0.045 250));
+    --color-accent-ink: light-dark(oklch(0.985 0.005 250), oklch(0.2 0.05 256));
+    --color-accent-text: light-dark(oklch(0.35 0.1 255), oklch(0.86 0.06 250));
+    --color-accent-soft: light-dark(oklch(0.93 0.025 252), oklch(0.285 0.03 252));
+    --color-highlight: light-dark(oklch(0.925 0.045 228), oklch(0.33 0.05 235));
     --color-highlight-ink: var(--color-ink);
     --color-focus: var(--color-ink);
     --color-selection: light-dark(oklch(0.88 0.06 228), oklch(0.42 0.07 235));
-    --color-scrim: light-dark(oklch(0.22 0.008 85 / 0.4), oklch(0.07 0.005 85 / 0.66));
+    --color-scrim: light-dark(oklch(0.22 0.04 258 / 0.4), oklch(0.07 0.01 250 / 0.66));
     --tone-positive: light-dark(oklch(0.52 0.11 155), oklch(0.72 0.12 158));
     --tone-positive-soft: light-dark(oklch(0.94 0.035 155), oklch(0.28 0.045 158));
     --tone-positive-text: light-dark(oklch(0.45 0.1 155), oklch(0.78 0.11 158));
@@ -158,15 +160,15 @@ This is every token in the contract, set to Paper's values, under your theme's n
     --color-cat-5: light-dark(oklch(0.8 0.05 300), oklch(0.7 0.06 300));
     --color-cat-6: light-dark(oklch(0.82 0.06 125), oklch(0.72 0.07 125));
     --color-cat-7: light-dark(oklch(0.8 0.05 195), oklch(0.7 0.06 195));
-    --color-cat-8: light-dark(oklch(0.8 0.01 85), oklch(0.7 0.01 85));
-    --color-cat-ink: oklch(0.21 0.008 85);
+    --color-cat-8: light-dark(oklch(0.8 0.01 250), oklch(0.7 0.01 250));
+    --color-cat-ink: oklch(0.21 0.03 258);
 
     /* Edges & depth */
     --shadow-surface: none;
     --active-shift: 0px;
     --shadow-active: none;
-    --shadow-float: 0 1px 2px oklch(0.2 0.008 85 / 0.1), 0 8px 24px -6px oklch(0.2 0.008 85 / 0.18);
-    --shadow-overlay: 0 2px 4px oklch(0.15 0.008 85 / 0.12), 0 20px 56px -12px oklch(0.15 0.008 85 / 0.32);
+    --shadow-float: 0 1px 2px oklch(0.2 0.04 258 / 0.1), 0 8px 24px -6px oklch(0.2 0.04 258 / 0.18);
+    --shadow-overlay: 0 2px 4px oklch(0.15 0.04 258 / 0.12), 0 20px 56px -12px oklch(0.15 0.04 258 / 0.32);
     --canvas-image: none;
   }
 }
@@ -193,7 +195,7 @@ Work through the file group by group. Keep every token; a theme that leaves one
 **Type.** Assign families to roles, then set the temperament: the base size, the ratio between steps, the display weight and tracking.
 
 ```css
---font-numeric: 'Martian Mono', ui-monospace, monospace;
+--font-numeric: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
 --numeric-stretch: 87.5%;
 --display-weight: 780;
 --type-ratio: 1.22;
@@ -201,7 +203,7 @@ Work through the file group by group. Keep every token; a theme that leaves one
 
 **Structure.** `--density` multiplies every space step and control height; `--motion-scale` multiplies every duration. Radii are roles, so actions, fields, surfaces and avatars can each have their own.
 
-**Depth.** Decide what an edge is. Flat themes set `--shadow-surface: none` and keep soft shadows for floating layers only; Fiesta's hard offset is its edge.
+**Depth.** Decide what an edge is. Flat themes set `--shadow-surface: none` and keep soft shadows for floating layers only; a hard offset belongs only on floating layers, and only when your subject explains it (Riso's misregistered second drum). Fiesta keeps its hard offset on static surfaces as a legacy preset; don't copy that.
 
 The whole Harbour file is in the repository at [`apps/docs/src/styles/harbour.css`](https://github.com/mitcsutt/kiln/blob/main/apps/docs/src/styles/harbour.css).
 
@@ -244,7 +246,7 @@ Kiln ships only the faces its own themes use. Declare your theme's faces in the
 }
 ```
 
-Harbour itself uses only Schibsted Grotesk and Martian Mono, which Kiln's base stylesheet already loads. That's allowed too.
+Harbour itself uses only Golos Text and Atkinson Hyperlegible Mono, which Kiln's base stylesheet already loads. That's allowed too.
 
 ## 6. Check it everywhere
 
@@ -263,7 +265,7 @@ Then go through the component pages with your theme applied. A few things to loo
 
 When your idea needs something the contract doesn't cover, there are two more levels.
 
-[Optional tokens](references/tokens.md#optional-theme-tokens) are set by only some themes, and every theme scope resets them, so they never leak into a nested theme. Ledger sets `--table-foot-rule`; Fiesta sets the `--highlight-*-text` inks for text on its gold rows.
+[Optional tokens](references/tokens.md#optional-theme-tokens) are set by only some themes, and every theme scope resets them, so they never leak into a nested theme. Ledger sets `--table-foot-rule`; Fiesta and Riso set the `--highlight-*-text` inks for text on their gold and pink-tinted rows.
 
 Component tokens change one component without touching the rest. They're read with a fallback, so setting one is always safe:
 

package/skills/custom-theme/references/colour.md

@@ -10,7 +10,7 @@ Colour in Kiln is a short list of roles. A theme gives each role a value for lig
 
 ## Surfaces, ink and lines
 
-Neutrals are tinted toward the theme's hue (chroma 0.004 to 0.02), never stock grey and never pure black or white. Paper is warm paper and graphite; Monograph is blue slate; Ledger is green-grey ruled paper.
+Neutrals are tinted toward the theme's hue (chroma 0.004 to 0.02), never stock grey and never pure black or white. Paper is cool grey stock with white sheets; Monograph is blue slate; Flightdeck is dark blue-grey display glass; Ledger is white paper ruled in green; Fiesta is apricot poster stock; Riso is bright white stock printed in two inks.
 
 
 

package/skills/custom-theme/references/motion.md

@@ -17,9 +17,9 @@ Motion in Kiln answers an action or shows a change of state: a panel opening, a
 | `--dur-3`       | 340ms | larger ones: a sheet sliding in, a panel opening |
 | `--ease-out`    |       | things arriving                                  |
 | `--ease-in-out` |       | things moving from one place to another          |
-| `--ease-spring` |       | things landing. Only Fiesta actually bounces     |
+| `--ease-spring` |       | things landing. Fiesta bounces, Riso a little    |
 
-Durations are multiplied by the theme's `--motion-scale`: Monograph runs a little slow (1.1), Ledger brisk (0.8). Hover or focus a row below to see each combination in the current theme:
+Durations are multiplied by the theme's `--motion-scale`: Monograph runs a little slow (1.1), Flightdeck and Ledger brisk (0.8), Fiesta slightly quicker (0.9), and Paper and Riso at 1. Hover or focus a row below to see each combination in the current theme:
 
 
 ## Reduced motion