@publier/shell 0.3.0 → 0.4.0

package/dist/presets-BHvXbtBH.mjs

@@ -0,0 +1 @@
+const e=/* @__PURE__ */ `almond.aspen.atrium.broadsheet.canopy.catppuccin.dark.dusk.emerald.enterprise.folio.hearth.lattice.light.maple.marigold.meridian.monolith.neutral.nocturne.ocean.prism.purple.ruby.solar.vitepress`.split(`.`);function t(){return e}function n(t){return e.includes(t)}const r=[`display-xl`,`display-lg`,`display-md`,`heading-lg`,`heading-md`,`heading-sm`,`title`,`body-lg`,`body-md`,`body-sm`,`caption`,`label`,`button`,`code`],i=[`size`,`weight`,`line-height`,`tracking`];export{t as a,n as i,i as n,r,e as t};

package/dist/{presets-PH6ZjfE7.d.mts → presets-Cl3HtWjB.d.mts}

@@ -5,7 +5,7 @@
  * Node-side introspection (reading CSS files, computing contrast) lives in
  * `./loader.ts` to keep `node:fs` out of the browser bundle path.
  */
-declare const AVAILABLE_THEMES: readonly ['almond', 'aspen', 'catppuccin', 'dark', 'dusk', 'emerald', 'enterprise', 'hearth', 'light', 'maple', 'neutral', 'ocean', 'purple', 'ruby', 'solar', 'vitepress'];
+declare const AVAILABLE_THEMES: readonly ['almond', 'aspen', 'atrium', 'broadsheet', 'canopy', 'catppuccin', 'dark', 'dusk', 'emerald', 'enterprise', 'folio', 'hearth', 'lattice', 'light', 'maple', 'marigold', 'meridian', 'monolith', 'neutral', 'nocturne', 'ocean', 'prism', 'purple', 'ruby', 'solar', 'vitepress'];
 type ThemePreset = (typeof AVAILABLE_THEMES)[number];
 /** Return a read-only copy of the built-in preset list. */
 declare function listPresets(): readonly ThemePreset[];

package/dist/tailwind/index.d.mts

@@ -1,3 +1,3 @@
-import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-PH6ZjfE7.mjs";
+import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-Cl3HtWjB.mjs";
 export declare const PRESET_CSS_PATH: '@publier/shell/tailwind/preset.css';
 export { AVAILABLE_THEMES, type ThemePreset, isValidPreset, listPresets };

package/dist/tailwind/index.mjs

@@ -1 +1 @@
-import{a as e,i as t,t as n}from"../presets-D_MQnAtK.mjs";const r=`@publier/shell/tailwind/preset.css`;export{n as AVAILABLE_THEMES,r as PRESET_CSS_PATH,t as isValidPreset,e as listPresets};
+import{a as e,i as t,t as n}from"../presets-BHvXbtBH.mjs";const r=`@publier/shell/tailwind/preset.css`;export{n as AVAILABLE_THEMES,r as PRESET_CSS_PATH,t as isValidPreset,e as listPresets};

package/dist/tailwind/loader.d.mts

@@ -4,7 +4,7 @@
  * Reads built-in preset files from disk. Node-only (uses `node:fs` via native).
  * Theme resolution / override composition lives in `./override.ts`.
  */
-import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-PH6ZjfE7.mjs";
+import { i as listPresets, n as ThemePreset, r as isValidPreset, t as AVAILABLE_THEMES } from "../presets-Cl3HtWjB.mjs";
 /** Shape of a parsed `theme.yaml`. Fields match `content-spec/theme.schema.json`. */
 interface ThemeYaml {
   /**

package/dist/tailwind/loader.mjs

@@ -1,2 +1,2 @@
-import{a as e,i as t,n,r,t as i}from"../presets-D_MQnAtK.mjs";import{tailwindComposeThemeCss as a,tailwindReadPresetCss as o,tailwindResolveTheme as s}from"@publier/native";import{fileURLToPath as c}from"node:url";const l=[`colors`,`typography`,`layout`,`prose`,`code`,`spacing`,`radius`,`elevation`,`motion`,`variants`],u={colors:[`primary`,`primary-content`,`secondary`,`secondary-content`,`accent`,`accent-content`,`neutral`,`neutral-content`,`base-100`,`base-200`,`base-300`,`base-content`,`info`,`info-content`,`success`,`success-content`,`warning`,`warning-content`,`error`,`error-content`],typography:[`heading`,`body`,`mono`,`body-weight`,`heading-weight`,...r.flatMap(e=>n.map(t=>`scale-${e}-${t}`))],layout:[`nav-height`,`sidebar-width`,`toc-width`,`page-max-width`],prose:[`content-gap-y`,`line-height`,`heading-line-height`],code:[`block-radius`,`inline-radius`,`inline-padding-y`,`inline-padding-x`],spacing:[`xxs`,`xs`,`sm`,`md`,`base`,`lg`,`xl`,`xxl`,`section`],radius:[`button`,`control`,`card`,`panel`,`chip`],elevation:[`flat`,`raised`,`overlay`],motion:[`duration-fast`,`duration-base`,`duration-slow`,`easing`],variants:[`nav`,`button`,`card`,`hero`,`section`]};function d(e){if(!e||typeof e!=`object`||Array.isArray(e))return{preset:void 0,overrides:{},overrideCss:``,errors:[]};let t=s(JSON.stringify(e));return{preset:t.preset??void 0,overrides:t.overrides,overrideCss:t.overrideCss,errors:t.errors.map(e=>({code:e.code,message:e.message,path:e.path}))}}function f(e){let t=Object.keys(e).sort();return t.length===0?``:`:root[data-theme="light"], :root[data-theme="dark"] {\n${t.map(t=>`\t${t}: ${e[t]};`).join(`
+import{a as e,i as t,n,r,t as i}from"../presets-BHvXbtBH.mjs";import{tailwindComposeThemeCss as a,tailwindReadPresetCss as o,tailwindResolveTheme as s}from"@publier/native";import{fileURLToPath as c}from"node:url";const l=[`colors`,`typography`,`layout`,`prose`,`code`,`spacing`,`radius`,`elevation`,`motion`,`variants`],u={colors:[`primary`,`primary-content`,`secondary`,`secondary-content`,`accent`,`accent-content`,`neutral`,`neutral-content`,`base-100`,`base-200`,`base-300`,`base-content`,`info`,`info-content`,`success`,`success-content`,`warning`,`warning-content`,`error`,`error-content`],typography:[`heading`,`body`,`mono`,`body-weight`,`heading-weight`,...r.flatMap(e=>n.map(t=>`scale-${e}-${t}`))],layout:[`nav-height`,`sidebar-width`,`toc-width`,`page-max-width`],prose:[`content-gap-y`,`line-height`,`heading-line-height`],code:[`block-radius`,`inline-radius`,`inline-padding-y`,`inline-padding-x`],spacing:[`xxs`,`xs`,`sm`,`md`,`base`,`lg`,`xl`,`xxl`,`section`],radius:[`button`,`control`,`card`,`panel`,`chip`],elevation:[`flat`,`raised`,`overlay`],motion:[`duration-fast`,`duration-base`,`duration-slow`,`easing`],variants:[`nav`,`button`,`card`,`hero`,`section`]};function d(e){if(!e||typeof e!=`object`||Array.isArray(e))return{preset:void 0,overrides:{},overrideCss:``,errors:[]};let t=s(JSON.stringify(e));return{preset:t.preset??void 0,overrides:t.overrides,overrideCss:t.overrideCss,errors:t.errors.map(e=>({code:e.code,message:e.message,path:e.path}))}}function f(e){let t=Object.keys(e).sort();return t.length===0?``:`:root[data-theme="light"], :root[data-theme="dark"] {\n${t.map(t=>`\t${t}: ${e[t]};`).join(`
 `)}\n}\n`}function p(e,t){let n=d(e),r=t.defaultPreset;return n.preset!==void 0&&(t.isValidPreset(n.preset)?r=n.preset:n.errors.push({code:`unknown-preset`,message:`Unknown preset "${n.preset}". Theme will fall back to "${t.defaultPreset}".`,path:`preset`})),{...n,preset:r}}function m(e,t){return a(e,t)}const h=c(new URL(`./themes/`,import.meta.url));function g(e){return`${h}${e}.css`}async function _(e){return o(h,e)}export{i as AVAILABLE_THEMES,u as THEME_KEYS,l as THEME_SECTIONS,m as composeThemeCss,t as isValidPreset,e as listPresets,_ as loadPresetCss,g as presetPath,f as renderOverrideCss,d as resolveTheme,p as resolveThemeWithPreset};

package/dist/themes/atrium.css

@@ -0,0 +1,223 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f5f5f7;
+	--color-base-300: #f0f0f0;
+	--color-base-content: #1d1d1f;
+	--color-primary: #06726e;
+	--color-primary-content: #ffffff;
+	--color-secondary: #1d1d1f;
+	--color-secondary-content: #ffffff;
+	--color-accent: #06726e;
+	--color-accent-content: #ffffff;
+	--color-neutral: #1d1d1f;
+	--color-neutral-content: #ffffff;
+	--color-error: #c4001a;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 18px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #000000;
+	--color-base-200: #272729;
+	--color-base-300: #38383a;
+	--color-base-content: #f5f5f7;
+	--color-primary: #60ccc5;
+	--color-primary-content: #071f1e;
+	--color-secondary: #a1a1a6;
+	--color-secondary-content: #000000;
+	--color-accent: #60ccc5;
+	--color-accent-content: #071f1e;
+	--color-neutral: #f5f5f7;
+	--color-neutral-content: #000000;
+	--color-error: #ff6961;
+	--color-error-content: #000000;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 18px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #000000;
+	--color-base-200: #272729;
+	--color-base-300: #38383a;
+	--color-base-content: #f5f5f7;
+	--color-primary: #60ccc5;
+	--color-primary-content: #071f1e;
+	--color-secondary: #a1a1a6;
+	--color-secondary-content: #000000;
+	--color-accent: #60ccc5;
+	--color-accent-content: #071f1e;
+	--color-neutral: #f5f5f7;
+	--color-neutral-content: #000000;
+	--color-error: #ff6961;
+	--color-error-content: #000000;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 18px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4rem;
+	--publier-scale-display-xl-weight: 600;
+	--publier-scale-display-xl-line-height: 1.05;
+	--publier-scale-display-xl-tracking: -0.02em;
+	--publier-scale-display-lg-size: 3rem;
+	--publier-scale-display-lg-weight: 600;
+	--publier-scale-display-lg-line-height: 1.08;
+	--publier-scale-display-lg-tracking: -0.02em;
+	--publier-scale-display-md-size: 2.125rem;
+	--publier-scale-display-md-weight: 600;
+	--publier-scale-display-md-line-height: 1.15;
+	--publier-scale-display-md-tracking: -0.015em;
+	--publier-scale-heading-lg-size: 1.75rem;
+	--publier-scale-heading-lg-weight: 600;
+	--publier-scale-heading-lg-line-height: 1.2;
+	--publier-scale-heading-lg-tracking: -0.01em;
+	--publier-scale-heading-md-size: 1.3125rem;
+	--publier-scale-heading-md-weight: 500;
+	--publier-scale-heading-md-line-height: 1.25;
+	--publier-scale-heading-md-tracking: -0.01em;
+	--publier-scale-heading-sm-size: 1.1875rem;
+	--publier-scale-heading-sm-weight: 600;
+	--publier-scale-heading-sm-line-height: 1.25;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1.0625rem;
+	--publier-scale-title-weight: 600;
+	--publier-scale-title-line-height: 1.3;
+	--publier-scale-title-tracking: 0;
+	--publier-scale-body-lg-size: 1.3125rem;
+	--publier-scale-body-lg-weight: 400;
+	--publier-scale-body-lg-line-height: 1.5;
+	--publier-scale-body-lg-tracking: 0;
+	--publier-scale-body-md-size: 1.0625rem;
+	--publier-scale-body-md-weight: 400;
+	--publier-scale-body-md-line-height: 1.5;
+	--publier-scale-body-md-tracking: 0;
+	--publier-scale-body-sm-size: 0.875rem;
+	--publier-scale-body-sm-weight: 400;
+	--publier-scale-body-sm-line-height: 1.45;
+	--publier-scale-body-sm-tracking: 0;
+	--publier-scale-caption-size: 0.8125rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.35;
+	--publier-scale-caption-tracking: 0;
+	--publier-scale-label-size: 0.875rem;
+	--publier-scale-label-weight: 500;
+	--publier-scale-label-line-height: 1.3;
+	--publier-scale-label-tracking: 0;
+	--publier-scale-button-size: 1.0625rem;
+	--publier-scale-button-weight: 500;
+	--publier-scale-button-line-height: 1.2;
+	--publier-scale-button-tracking: 0;
+	--publier-scale-code-size: 0.875rem;
+	--publier-scale-code-weight: 400;
+	--publier-scale-code-line-height: 1.6;
+	--publier-scale-code-tracking: 0;
+
+	--publier-font-weight-body: 400;
+	--publier-font-weight-heading: 600;
+
+	--publier-space-xxs: 0.25rem;
+	--publier-space-xs: 0.5rem;
+	--publier-space-sm: 0.75rem;
+	--publier-space-md: 1rem;
+	--publier-space-base: 1.25rem;
+	--publier-space-lg: 1.5rem;
+	--publier-space-xl: 2rem;
+	--publier-space-xxl: 3rem;
+	--publier-space-section: 5rem;
+
+	--publier-radius-button: 9999px;
+	--publier-radius-control: 8px;
+	--publier-radius-card: 18px;
+	--publier-radius-panel: 28px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 8px;
+	--publier-surface-radius: 18px;
+	--publier-card-radius: 18px;
+	--publier-nav-item-radius: 9999px;
+	--publier-code-block-radius: 8px;
+	--publier-code-inline-radius: 6px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 0 0 1px rgb(0 0 0 / 0.02), 0 6px 20px rgb(0 0 0 / 0.08);
+	--publier-elevation-overlay: 0 0 0 1px rgb(0 0 0 / 0.02), 0 6px 20px rgb(0 0 0 / 0.08);
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 180ms;
+	--publier-motion-duration-slow: 300ms;
+	--publier-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+	--publier-nav-height: 4.5rem;
+	--publier-page-max-width: 75rem;
+	--publier-layout-width: 1200px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #6e6e73;
+	--color-pl-muted-bg: #e8e8ed;
+	--color-pl-subtle: #6e6e73;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e0e0e0;
+	--color-pl-border-strong: #d2d2d7;
+	--color-pl-ring: #1d1d1f;
+	--color-pl-sidebar-accent: #f5f5f7;
+	--color-pl-sidebar-active: #e8fbfa;
+	--color-pl-sidebar-active-fg: #06726e;
+
+	--menu-active-bg: var(--color-pl-sidebar-active);
+	--menu-active-color: var(--color-pl-sidebar-active-fg);
+	--menu-hover-bg: var(--color-pl-sidebar-accent);
+	--menu-hover-color: var(--color-pl-sidebar-accent-fg);
+}
+
+:root[data-theme="dark"],
+.dark {
+	--color-pl-muted: #a1a1a6;
+	--color-pl-muted-bg: #272729;
+	--color-pl-subtle: #a1a1a6;
+	--color-pl-card: #272729;
+	--color-pl-card-hover: #272729;
+	--color-pl-popover: #272729;
+	--color-pl-border: #38383a;
+	--color-pl-border-strong: #4a4a4d;
+	--color-pl-ring: #f5f5f7;
+	--color-pl-sidebar-accent: #272729;
+	--color-pl-sidebar-active: color-mix(in oklch, #60ccc5 14%, transparent);
+	--color-pl-sidebar-active-fg: #60ccc5;
+
+	--publier-elevation-raised: 0 0 0 1px #38383a, 0 6px 20px rgb(0 0 0 / 0.5);
+	--publier-elevation-overlay: 0 0 0 1px #38383a, 0 6px 20px rgb(0 0 0 / 0.5);
+
+	--menu-active-bg: var(--color-pl-sidebar-active);
+	--menu-active-color: var(--color-pl-sidebar-active-fg);
+	--menu-hover-bg: var(--color-pl-sidebar-accent);
+	--menu-hover-color: var(--color-pl-sidebar-accent-fg);
+}

package/dist/themes/broadsheet.css

@@ -0,0 +1,223 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f5f5f5;
+	--color-base-300: #e0e0e0;
+	--color-base-content: #000000;
+	--color-primary: #af004e;
+	--color-primary-content: #ffffff;
+	--color-secondary: #333333;
+	--color-secondary-content: #ffffff;
+	--color-accent: #af004e;
+	--color-accent-content: #ffffff;
+	--color-neutral: #000000;
+	--color-neutral-content: #ffffff;
+	--color-error: #b3261e;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 0px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #121212;
+	--color-base-200: #1c1c1c;
+	--color-base-300: #3a3a3a;
+	--color-base-content: #f5f5f5;
+	--color-primary: #fe85a4;
+	--color-primary-content: #121212;
+	--color-secondary: #a3a3a3;
+	--color-secondary-content: #121212;
+	--color-accent: #fe85a4;
+	--color-accent-content: #121212;
+	--color-neutral: #f5f5f5;
+	--color-neutral-content: #121212;
+	--color-error: #ff8a80;
+	--color-error-content: #121212;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 0px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #121212;
+	--color-base-200: #1c1c1c;
+	--color-base-300: #3a3a3a;
+	--color-base-content: #f5f5f5;
+	--color-primary: #fe85a4;
+	--color-primary-content: #121212;
+	--color-secondary: #a3a3a3;
+	--color-secondary-content: #121212;
+	--color-accent: #fe85a4;
+	--color-accent-content: #121212;
+	--color-neutral: #f5f5f5;
+	--color-neutral-content: #121212;
+	--color-error: #ff8a80;
+	--color-error-content: #121212;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 0px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4rem;
+	--publier-scale-display-xl-weight: 700;
+	--publier-scale-display-xl-line-height: 1;
+	--publier-scale-display-xl-tracking: -0.03em;
+	--publier-scale-display-lg-size: 3rem;
+	--publier-scale-display-lg-weight: 700;
+	--publier-scale-display-lg-line-height: 1.02;
+	--publier-scale-display-lg-tracking: -0.03em;
+	--publier-scale-display-md-size: 2.25rem;
+	--publier-scale-display-md-weight: 700;
+	--publier-scale-display-md-line-height: 1.05;
+	--publier-scale-display-md-tracking: -0.025em;
+	--publier-scale-heading-lg-size: 1.75rem;
+	--publier-scale-heading-lg-weight: 700;
+	--publier-scale-heading-lg-line-height: 1.1;
+	--publier-scale-heading-lg-tracking: -0.02em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--publier-scale-heading-md-weight: 700;
+	--publier-scale-heading-md-line-height: 1.15;
+	--publier-scale-heading-md-tracking: -0.015em;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 700;
+	--publier-scale-heading-sm-line-height: 1.2;
+	--publier-scale-heading-sm-tracking: -0.01em;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 700;
+	--publier-scale-title-line-height: 1.25;
+	--publier-scale-title-tracking: 0;
+	--publier-scale-body-lg-size: 1.1875rem;
+	--publier-scale-body-lg-weight: 400;
+	--publier-scale-body-lg-line-height: 1.5;
+	--publier-scale-body-lg-tracking: 0;
+	--publier-scale-body-md-size: 1rem;
+	--publier-scale-body-md-weight: 400;
+	--publier-scale-body-md-line-height: 1.5;
+	--publier-scale-body-md-tracking: 0;
+	--publier-scale-body-sm-size: 0.875rem;
+	--publier-scale-body-sm-weight: 400;
+	--publier-scale-body-sm-line-height: 1.43;
+	--publier-scale-body-sm-tracking: 0;
+	--publier-scale-caption-size: 0.75rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.33;
+	--publier-scale-caption-tracking: 0;
+	--publier-scale-label-size: 0.75rem;
+	--publier-scale-label-weight: 700;
+	--publier-scale-label-line-height: 1.33;
+	--publier-scale-label-tracking: 0.08em;
+	--publier-scale-button-size: 0.9375rem;
+	--publier-scale-button-weight: 700;
+	--publier-scale-button-line-height: 1.25;
+	--publier-scale-button-tracking: 0.02em;
+	--publier-scale-code-size: 0.875rem;
+	--publier-scale-code-weight: 400;
+	--publier-scale-code-line-height: 1.6;
+	--publier-scale-code-tracking: 0;
+
+	--publier-font-weight-body: 400;
+	--publier-font-weight-heading: 700;
+
+	--publier-space-xxs: 0.125rem;
+	--publier-space-xs: 0.25rem;
+	--publier-space-sm: 0.5rem;
+	--publier-space-md: 0.75rem;
+	--publier-space-base: 1rem;
+	--publier-space-lg: 1.5rem;
+	--publier-space-xl: 2rem;
+	--publier-space-xxl: 3rem;
+	--publier-space-section: 4rem;
+
+	--publier-radius-button: 0px;
+	--publier-radius-control: 0px;
+	--publier-radius-card: 0px;
+	--publier-radius-panel: 0px;
+	--publier-radius-chip: 0px;
+	--publier-control-radius: 0px;
+	--publier-surface-radius: 0px;
+	--publier-card-radius: 0px;
+	--publier-nav-item-radius: 0px;
+	--publier-code-block-radius: 0px;
+	--publier-code-inline-radius: 0px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 0 0 1px #000000;
+	--publier-elevation-overlay: 0 0 0 2px #000000;
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 150ms;
+	--publier-motion-duration-slow: 240ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+	--publier-nav-height: 4.5rem;
+	--publier-page-max-width: 44rem;
+	--publier-layout-width: 1200px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #757575;
+	--color-pl-muted-bg: #ebebeb;
+	--color-pl-subtle: #757575;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e0e0e0;
+	--color-pl-border-strong: #000000;
+	--color-pl-ring: #000000;
+	--color-pl-sidebar-accent: #f5f5f5;
+	--color-pl-sidebar-active: #ffeef1;
+	--color-pl-sidebar-active-fg: #af004e;
+
+	--menu-active-bg: var(--color-pl-sidebar-active);
+	--menu-active-color: var(--color-pl-sidebar-active-fg);
+	--menu-hover-bg: var(--color-pl-sidebar-accent);
+	--menu-hover-color: var(--color-pl-sidebar-accent-fg);
+}
+
+:root[data-theme="dark"],
+.dark {
+	--color-pl-muted: #a3a3a3;
+	--color-pl-muted-bg: #1c1c1c;
+	--color-pl-subtle: #a3a3a3;
+	--color-pl-card: #1c1c1c;
+	--color-pl-card-hover: #1c1c1c;
+	--color-pl-popover: #1c1c1c;
+	--color-pl-border: #3a3a3a;
+	--color-pl-border-strong: #f5f5f5;
+	--color-pl-ring: #f5f5f5;
+	--color-pl-sidebar-accent: #1c1c1c;
+	--color-pl-sidebar-active: color-mix(in oklch, #fe85a4 14%, transparent);
+	--color-pl-sidebar-active-fg: #fe85a4;
+
+	--publier-elevation-raised: 0 0 0 1px #f5f5f5;
+	--publier-elevation-overlay: 0 0 0 2px #f5f5f5;
+
+	--menu-active-bg: var(--color-pl-sidebar-active);
+	--menu-active-color: var(--color-pl-sidebar-active-fg);
+	--menu-hover-bg: var(--color-pl-sidebar-accent);
+	--menu-hover-color: var(--color-pl-sidebar-accent-fg);
+}