@publier/shell 0.3.0 → 0.5.0

package/dist/themes/broadsheet.css

@@ -0,0 +1,226 @@
+: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-font-preset-heading: var(--publier-font-builtin-source-serif-4);
+	--publier-font-preset-body: var(--publier-font-builtin-sans);
+
+	--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);
+}

package/dist/themes/canopy.css

@@ -0,0 +1,226 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #fafafa;
+	--color-base-300: #ededed;
+	--color-base-content: #171717;
+	--color-primary: #047857;
+	--color-primary-content: #ffffff;
+	--color-secondary: #212121;
+	--color-secondary-content: #ffffff;
+	--color-accent: #047857;
+	--color-accent-content: #ffffff;
+	--color-neutral: #171717;
+	--color-neutral-content: #ffffff;
+	--color-error: #c13515;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 8px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #1c1c1c;
+	--color-base-200: #202020;
+	--color-base-300: #2e2e2e;
+	--color-base-content: #ededed;
+	--color-primary: #34d399;
+	--color-primary-content: #052e22;
+	--color-secondary: #a1a1a1;
+	--color-secondary-content: #1c1c1c;
+	--color-accent: #34d399;
+	--color-accent-content: #052e22;
+	--color-neutral: #ededed;
+	--color-neutral-content: #1c1c1c;
+	--color-error: #f2765a;
+	--color-error-content: #1c1c1c;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 8px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #1c1c1c;
+	--color-base-200: #202020;
+	--color-base-300: #2e2e2e;
+	--color-base-content: #ededed;
+	--color-primary: #34d399;
+	--color-primary-content: #052e22;
+	--color-secondary: #a1a1a1;
+	--color-secondary-content: #1c1c1c;
+	--color-accent: #34d399;
+	--color-accent-content: #052e22;
+	--color-neutral: #ededed;
+	--color-neutral-content: #1c1c1c;
+	--color-error: #f2765a;
+	--color-error-content: #1c1c1c;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 8px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 3.5rem;
+	--publier-scale-display-xl-weight: 500;
+	--publier-scale-display-xl-line-height: 1.05;
+	--publier-scale-display-xl-tracking: -0.03em;
+	--publier-scale-display-lg-size: 2.75rem;
+	--publier-scale-display-lg-weight: 500;
+	--publier-scale-display-lg-line-height: 1.1;
+	--publier-scale-display-lg-tracking: -0.025em;
+	--publier-scale-display-md-size: 2rem;
+	--publier-scale-display-md-weight: 500;
+	--publier-scale-display-md-line-height: 1.15;
+	--publier-scale-display-md-tracking: -0.02em;
+	--publier-scale-heading-lg-size: 1.5rem;
+	--publier-scale-heading-lg-weight: 500;
+	--publier-scale-heading-lg-line-height: 1.25;
+	--publier-scale-heading-lg-tracking: -0.015em;
+	--publier-scale-heading-md-size: 1.25rem;
+	--publier-scale-heading-md-weight: 500;
+	--publier-scale-heading-md-line-height: 1.3;
+	--publier-scale-heading-md-tracking: -0.01em;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 500;
+	--publier-scale-heading-sm-line-height: 1.4;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 500;
+	--publier-scale-title-line-height: 1.4;
+	--publier-scale-title-tracking: 0;
+	--publier-scale-body-lg-size: 1.125rem;
+	--publier-scale-body-lg-weight: 400;
+	--publier-scale-body-lg-line-height: 1.55;
+	--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.45;
+	--publier-scale-body-sm-tracking: 0;
+	--publier-scale-caption-size: 0.8125rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.45;
+	--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: 0.875rem;
+	--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: 500;
+
+	--publier-font-preset-heading: var(--publier-font-builtin-geist);
+	--publier-font-preset-body: var(--publier-font-builtin-geist);
+
+	--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: 2.5rem;
+	--publier-space-section: 4rem;
+
+	--publier-radius-button: 6px;
+	--publier-radius-control: 6px;
+	--publier-radius-card: 8px;
+	--publier-radius-panel: 12px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 6px;
+	--publier-surface-radius: 8px;
+	--publier-card-radius: 8px;
+	--publier-nav-item-radius: 6px;
+	--publier-code-block-radius: 8px;
+	--publier-code-inline-radius: 4px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 0 0 1px rgb(0 0 0 / 0.04);
+	--publier-elevation-overlay: 0 0 0 1px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.08);
+
+	--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: 45rem;
+	--publier-layout-width: 1280px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #707070;
+	--color-pl-muted-bg: #f2f2f2;
+	--color-pl-subtle: #707070;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e5e5e5;
+	--color-pl-border-strong: #c7c7c7;
+	--color-pl-ring: #171717;
+	--color-pl-sidebar-accent: #fafafa;
+	--color-pl-sidebar-active: #ecfdf5;
+	--color-pl-sidebar-active-fg: #047857;
+
+	--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: #a1a1a1;
+	--color-pl-muted-bg: #202020;
+	--color-pl-subtle: #a1a1a1;
+	--color-pl-card: #202020;
+	--color-pl-card-hover: #202020;
+	--color-pl-popover: #202020;
+	--color-pl-border: #2e2e2e;
+	--color-pl-border-strong: #3f3f3f;
+	--color-pl-ring: #ededed;
+	--color-pl-sidebar-accent: #202020;
+	--color-pl-sidebar-active: color-mix(in oklch, #34d399 14%, transparent);
+	--color-pl-sidebar-active-fg: #34d399;
+
+	--publier-elevation-raised: 0 0 0 1px #2e2e2e;
+	--publier-elevation-overlay: 0 0 0 1px #2e2e2e, 0 8px 24px 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/folio.css

@@ -0,0 +1,230 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #fbfaf5;
+	--color-base-200: #f6f4ee;
+	--color-base-300: #eeebe3;
+	--color-base-content: #1f1e1a;
+	--color-primary: #5e5f1f;
+	--color-primary-content: #ffffff;
+	--color-secondary: #3a3832;
+	--color-secondary-content: #fbfaf5;
+	--color-accent: #5e5f1f;
+	--color-accent-content: #ffffff;
+	--color-neutral: #1f1e1a;
+	--color-neutral-content: #fbfaf5;
+	--color-error: #b3261e;
+	--color-error-content: #fbfaf5;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #1c1b17;
+	--color-base-200: #26241f;
+	--color-base-300: #3a3730;
+	--color-base-content: #edebe4;
+	--color-primary: #cfd17a;
+	--color-primary-content: #1c1b17;
+	--color-secondary: #a8a294;
+	--color-secondary-content: #1c1b17;
+	--color-accent: #cfd17a;
+	--color-accent-content: #1c1b17;
+	--color-neutral: #edebe4;
+	--color-neutral-content: #1c1b17;
+	--color-error: #f2877e;
+	--color-error-content: #1c1b17;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #1c1b17;
+	--color-base-200: #26241f;
+	--color-base-300: #3a3730;
+	--color-base-content: #edebe4;
+	--color-primary: #cfd17a;
+	--color-primary-content: #1c1b17;
+	--color-secondary: #a8a294;
+	--color-secondary-content: #1c1b17;
+	--color-accent: #cfd17a;
+	--color-accent-content: #1c1b17;
+	--color-neutral: #edebe4;
+	--color-neutral-content: #1c1b17;
+	--color-error: #f2877e;
+	--color-error-content: #1c1b17;
+
+	--radius-selector: 9999px;
+	--radius-field: 8px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 3.5rem;
+	--publier-scale-display-xl-weight: 600;
+	--publier-scale-display-xl-line-height: 1.08;
+	--publier-scale-display-xl-tracking: -0.02em;
+	--publier-scale-display-lg-size: 2.75rem;
+	--publier-scale-display-lg-weight: 600;
+	--publier-scale-display-lg-line-height: 1.12;
+	--publier-scale-display-lg-tracking: -0.02em;
+	--publier-scale-display-md-size: 2rem;
+	--publier-scale-display-md-weight: 600;
+	--publier-scale-display-md-line-height: 1.2;
+	--publier-scale-display-md-tracking: -0.01em;
+	--publier-scale-heading-lg-size: 1.75rem;
+	--publier-scale-heading-lg-weight: 600;
+	--publier-scale-heading-lg-line-height: 1.3;
+	--publier-scale-heading-lg-tracking: -0.01em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--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.25rem;
+	--publier-scale-heading-sm-weight: 600;
+	--publier-scale-heading-sm-line-height: 1.3;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 600;
+	--publier-scale-title-line-height: 1.4;
+	--publier-scale-title-tracking: 0;
+	--publier-scale-body-lg-size: 1.125rem;
+	--publier-scale-body-lg-weight: 400;
+	--publier-scale-body-lg-line-height: 1.6;
+	--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.55;
+	--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.5;
+	--publier-scale-body-sm-tracking: 0;
+	--publier-scale-caption-size: 0.8125rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.4;
+	--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: 0.875rem;
+	--publier-scale-button-weight: 500;
+	--publier-scale-button-line-height: 1.3;
+	--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-font-preset-heading: var(--publier-font-builtin-newsreader);
+	--publier-font-preset-body: var(--publier-font-builtin-newsreader);
+
+	--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: 8px;
+	--publier-radius-control: 8px;
+	--publier-radius-card: 12px;
+	--publier-radius-panel: 16px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 8px;
+	--publier-surface-radius: 12px;
+	--publier-card-radius: 12px;
+	--publier-nav-item-radius: 6px;
+	--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 2px 6px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1);
+	--publier-elevation-overlay:
+		0 0 0 1px rgb(0 0 0 / 0.02), 0 2px 6px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1);
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 160ms;
+	--publier-motion-duration-slow: 260ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+	--publier-nav-height: 4.5rem;
+	--publier-page-max-width: 45rem;
+	--publier-layout-width: 1280px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #6b685e;
+	--color-pl-muted-bg: #efede6;
+	--color-pl-subtle: #6b685e;
+	--color-pl-card: #fbfaf5;
+	--color-pl-card-hover: #fbfaf5;
+	--color-pl-popover: #fbfaf5;
+	--color-pl-border: #e4e1d8;
+	--color-pl-border-strong: #bdb8ac;
+	--color-pl-ring: #1f1e1a;
+	--color-pl-sidebar-accent: #f6f4ee;
+	--color-pl-sidebar-active: #f1f1e2;
+	--color-pl-sidebar-active-fg: #5e5f1f;
+
+	--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: #a8a294;
+	--color-pl-muted-bg: #26241f;
+	--color-pl-subtle: #a8a294;
+	--color-pl-card: #26241f;
+	--color-pl-card-hover: #26241f;
+	--color-pl-popover: #26241f;
+	--color-pl-border: #3a3730;
+	--color-pl-border-strong: #4d4a40;
+	--color-pl-ring: #edebe4;
+	--color-pl-sidebar-accent: #26241f;
+	--color-pl-sidebar-active: color-mix(in oklch, #cfd17a 14%, transparent);
+	--color-pl-sidebar-active-fg: #cfd17a;
+
+	--publier-elevation-raised:
+		0 0 0 1px #3a3730, 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.2);
+	--publier-elevation-overlay:
+		0 0 0 1px #3a3730, 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.2);
+
+	--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/hearth.css

@@ -140,6 +140,9 @@ color-scheme: dark;
 	--publier-font-weight-body: 400;
 	--publier-font-weight-heading: 600;
 
+	--publier-font-preset-heading: var(--publier-font-builtin-sans);
+	--publier-font-preset-body: var(--publier-font-builtin-sans);
+
 	--publier-space-xxs: 0.125rem;
 	--publier-space-xs: 0.25rem;
 	--publier-space-sm: 0.5rem;