@publier/shell 0.3.0 → 0.5.0

package/dist/themes/lattice.css

@@ -0,0 +1,223 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f4f4f4;
+	--color-base-300: #e0e0e0;
+	--color-base-content: #161616;
+	--color-primary: #007298;
+	--color-primary-content: #ffffff;
+	--color-secondary: #393939;
+	--color-secondary-content: #ffffff;
+	--color-accent: #007298;
+	--color-accent-content: #ffffff;
+	--color-neutral: #161616;
+	--color-neutral-content: #ffffff;
+	--color-error: #da1e28;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 2px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #161616;
+	--color-base-200: #262626;
+	--color-base-300: #393939;
+	--color-base-content: #f4f4f4;
+	--color-primary: #52c1e1;
+	--color-primary-content: #161616;
+	--color-secondary: #c6c6c6;
+	--color-secondary-content: #161616;
+	--color-accent: #52c1e1;
+	--color-accent-content: #161616;
+	--color-neutral: #f4f4f4;
+	--color-neutral-content: #161616;
+	--color-error: #ff8389;
+	--color-error-content: #161616;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 2px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #161616;
+	--color-base-200: #262626;
+	--color-base-300: #393939;
+	--color-base-content: #f4f4f4;
+	--color-primary: #52c1e1;
+	--color-primary-content: #161616;
+	--color-secondary: #c6c6c6;
+	--color-secondary-content: #161616;
+	--color-accent: #52c1e1;
+	--color-accent-content: #161616;
+	--color-neutral: #f4f4f4;
+	--color-neutral-content: #161616;
+	--color-error: #ff8389;
+	--color-error-content: #161616;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 2px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4rem;
+	--publier-scale-display-xl-weight: 300;
+	--publier-scale-display-xl-line-height: 1.17;
+	--publier-scale-display-xl-tracking: -0.01em;
+	--publier-scale-display-lg-size: 3rem;
+	--publier-scale-display-lg-weight: 300;
+	--publier-scale-display-lg-line-height: 1.17;
+	--publier-scale-display-lg-tracking: -0.01em;
+	--publier-scale-display-md-size: 2.5rem;
+	--publier-scale-display-md-weight: 300;
+	--publier-scale-display-md-line-height: 1.2;
+	--publier-scale-display-md-tracking: 0;
+	--publier-scale-heading-lg-size: 2rem;
+	--publier-scale-heading-lg-weight: 400;
+	--publier-scale-heading-lg-line-height: 1.25;
+	--publier-scale-heading-lg-tracking: 0;
+	--publier-scale-heading-md-size: 1.5rem;
+	--publier-scale-heading-md-weight: 400;
+	--publier-scale-heading-md-line-height: 1.33;
+	--publier-scale-heading-md-tracking: 0;
+	--publier-scale-heading-sm-size: 1.25rem;
+	--publier-scale-heading-sm-weight: 400;
+	--publier-scale-heading-sm-line-height: 1.4;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 600;
+	--publier-scale-title-line-height: 1.5;
+	--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.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.16px;
+	--publier-scale-body-sm-size: 0.875rem;
+	--publier-scale-body-sm-weight: 400;
+	--publier-scale-body-sm-line-height: 1.29;
+	--publier-scale-body-sm-tracking: 0.16px;
+	--publier-scale-caption-size: 0.75rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.33;
+	--publier-scale-caption-tracking: 0.32px;
+	--publier-scale-label-size: 0.875rem;
+	--publier-scale-label-weight: 600;
+	--publier-scale-label-line-height: 1.29;
+	--publier-scale-label-tracking: 0.16px;
+	--publier-scale-button-size: 0.875rem;
+	--publier-scale-button-weight: 400;
+	--publier-scale-button-line-height: 1.29;
+	--publier-scale-button-tracking: 0.16px;
+	--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: 400;
+
+	--publier-font-preset-heading: var(--publier-font-builtin-ibm-plex-sans);
+	--publier-font-preset-body: var(--publier-font-builtin-ibm-plex-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: 6rem;
+
+	--publier-radius-button: 0px;
+	--publier-radius-control: 0px;
+	--publier-radius-card: 0px;
+	--publier-radius-panel: 2px;
+	--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: 2px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: none;
+	--publier-elevation-overlay: 0 2px 12px 2px rgb(0 0 0 / 0.25);
+
+	--publier-motion-duration-fast: 70ms;
+	--publier-motion-duration-base: 150ms;
+	--publier-motion-duration-slow: 240ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+	--publier-nav-height: 3rem;
+	--publier-page-max-width: 80rem;
+	--publier-layout-width: 1584px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #525252;
+	--color-pl-muted-bg: #e0e0e0;
+	--color-pl-subtle: #525252;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e0e0e0;
+	--color-pl-border-strong: #8d8d8d;
+	--color-pl-ring: #007298;
+	--color-pl-sidebar-accent: #f4f4f4;
+	--color-pl-sidebar-active: #e3f6fc;
+	--color-pl-sidebar-active-fg: #007298;
+
+	--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: #c6c6c6;
+	--color-pl-muted-bg: #393939;
+	--color-pl-subtle: #c6c6c6;
+	--color-pl-card: #262626;
+	--color-pl-card-hover: #262626;
+	--color-pl-popover: #262626;
+	--color-pl-border: #393939;
+	--color-pl-border-strong: #6f6f6f;
+	--color-pl-ring: #52c1e1;
+	--color-pl-sidebar-accent: #262626;
+	--color-pl-sidebar-active: color-mix(in oklch, #52c1e1 14%, transparent);
+	--color-pl-sidebar-active-fg: #52c1e1;
+
+	--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/marigold.css

@@ -0,0 +1,226 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #f6eedd;
+	--color-base-200: #ede2cb;
+	--color-base-300: #cdbb96;
+	--color-base-content: #2a2218;
+	--color-primary: #f7c243;
+	--color-primary-content: #2a2218;
+	--color-secondary: #4a3f2e;
+	--color-secondary-content: #f6eedd;
+	--color-accent: #f7c243;
+	--color-accent-content: #2a2218;
+	--color-neutral: #2a2218;
+	--color-neutral-content: #f6eedd;
+	--color-error: #b3261e;
+	--color-error-content: #f6eedd;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 16px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #1f1a13;
+	--color-base-200: #2a241b;
+	--color-base-300: #3d3426;
+	--color-base-content: #f5eddc;
+	--color-primary: #f7cb58;
+	--color-primary-content: #1f1a13;
+	--color-secondary: #bcae92;
+	--color-secondary-content: #1f1a13;
+	--color-accent: #f7cb58;
+	--color-accent-content: #1f1a13;
+	--color-neutral: #f5eddc;
+	--color-neutral-content: #1f1a13;
+	--color-error: #f2796e;
+	--color-error-content: #1f1a13;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 16px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #1f1a13;
+	--color-base-200: #2a241b;
+	--color-base-300: #3d3426;
+	--color-base-content: #f5eddc;
+	--color-primary: #f7cb58;
+	--color-primary-content: #1f1a13;
+	--color-secondary: #bcae92;
+	--color-secondary-content: #1f1a13;
+	--color-accent: #f7cb58;
+	--color-accent-content: #1f1a13;
+	--color-neutral: #f5eddc;
+	--color-neutral-content: #1f1a13;
+	--color-error: #f2796e;
+	--color-error-content: #1f1a13;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 16px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4rem;
+	--publier-scale-display-xl-weight: 800;
+	--publier-scale-display-xl-line-height: 1.05;
+	--publier-scale-display-xl-tracking: -0.03em;
+	--publier-scale-display-lg-size: 3rem;
+	--publier-scale-display-lg-weight: 800;
+	--publier-scale-display-lg-line-height: 1.1;
+	--publier-scale-display-lg-tracking: -0.025em;
+	--publier-scale-display-md-size: 2.25rem;
+	--publier-scale-display-md-weight: 700;
+	--publier-scale-display-md-line-height: 1.15;
+	--publier-scale-display-md-tracking: -0.02em;
+	--publier-scale-heading-lg-size: 1.75rem;
+	--publier-scale-heading-lg-weight: 700;
+	--publier-scale-heading-lg-line-height: 1.25;
+	--publier-scale-heading-lg-tracking: -0.01em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--publier-scale-heading-md-weight: 700;
+	--publier-scale-heading-md-line-height: 1.3;
+	--publier-scale-heading-md-tracking: 0;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 700;
+	--publier-scale-heading-sm-line-height: 1.35;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 700;
+	--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.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: 500;
+	--publier-scale-caption-line-height: 1.4;
+	--publier-scale-caption-tracking: 0;
+	--publier-scale-label-size: 0.875rem;
+	--publier-scale-label-weight: 600;
+	--publier-scale-label-line-height: 1.3;
+	--publier-scale-label-tracking: 0;
+	--publier-scale-button-size: 0.9375rem;
+	--publier-scale-button-weight: 700;
+	--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: 700;
+
+	--publier-font-preset-heading: var(--publier-font-builtin-nunito);
+	--publier-font-preset-body: var(--publier-font-builtin-nunito);
+
+	--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: 4.5rem;
+
+	--publier-radius-button: 12px;
+	--publier-radius-control: 12px;
+	--publier-radius-card: 16px;
+	--publier-radius-panel: 24px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 12px;
+	--publier-surface-radius: 16px;
+	--publier-card-radius: 16px;
+	--publier-nav-item-radius: 12px;
+	--publier-code-block-radius: 12px;
+	--publier-code-inline-radius: 6px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 0 0 2px #2a2218, 0 4px 0 0 #2a2218;
+	--publier-elevation-overlay: 0 0 0 2px #2a2218, 0 6px 0 0 #2a2218;
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 180ms;
+	--publier-motion-duration-slow: 280ms;
+	--publier-motion-easing: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+	--publier-nav-height: 4rem;
+	--publier-page-max-width: 47.5rem;
+	--publier-layout-width: 1240px;
+	--publier-shadow-color: 42 34 24;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #675a44;
+	--color-pl-muted-bg: #e4d6ba;
+	--color-pl-subtle: #675a44;
+	--color-pl-card: #fffaef;
+	--color-pl-card-hover: #fffaef;
+	--color-pl-popover: #fffaef;
+	--color-pl-border: #cdbb96;
+	--color-pl-border-strong: #2a2218;
+	--color-pl-ring: #2a2218;
+	--color-pl-sidebar-accent: #ede2cb;
+	--color-pl-sidebar-active: #fdedc9;
+	--color-pl-sidebar-active-fg: #2a2218;
+
+	--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: #bcae92;
+	--color-pl-muted-bg: #2a241b;
+	--color-pl-subtle: #bcae92;
+	--color-pl-card: #2a241b;
+	--color-pl-card-hover: #2a241b;
+	--color-pl-popover: #2a241b;
+	--color-pl-border: #3d3426;
+	--color-pl-border-strong: #5a4d38;
+	--color-pl-ring: #f5eddc;
+	--color-pl-sidebar-accent: #2a241b;
+	--color-pl-sidebar-active: color-mix(in oklch, #f7cb58 16%, transparent);
+	--color-pl-sidebar-active-fg: #f7cb58;
+
+	--publier-elevation-raised: 0 0 0 2px #5a4d38, 0 4px 0 0 #5a4d38;
+	--publier-elevation-overlay: 0 0 0 2px #5a4d38, 0 6px 0 0 #5a4d38;
+
+	--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/meridian.css

@@ -0,0 +1,227 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f6f9fc;
+	--color-base-300: #eef2f6;
+	--color-base-content: #0d253d;
+	--color-primary: #6636d1;
+	--color-primary-content: #ffffff;
+	--color-secondary: #273951;
+	--color-secondary-content: #ffffff;
+	--color-accent: #6636d1;
+	--color-accent-content: #ffffff;
+	--color-neutral: #0d253d;
+	--color-neutral-content: #ffffff;
+	--color-error: #c62828;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #0b1220;
+	--color-base-200: #131b2d;
+	--color-base-300: #22304a;
+	--color-base-content: #e6edf5;
+	--color-primary: #bdadff;
+	--color-primary-content: #0b1220;
+	--color-secondary: #9aa8bd;
+	--color-secondary-content: #0b1220;
+	--color-accent: #bdadff;
+	--color-accent-content: #0b1220;
+	--color-neutral: #e6edf5;
+	--color-neutral-content: #0b1220;
+	--color-error: #f87171;
+	--color-error-content: #0b1220;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #0b1220;
+	--color-base-200: #131b2d;
+	--color-base-300: #22304a;
+	--color-base-content: #e6edf5;
+	--color-primary: #bdadff;
+	--color-primary-content: #0b1220;
+	--color-secondary: #9aa8bd;
+	--color-secondary-content: #0b1220;
+	--color-accent: #bdadff;
+	--color-accent-content: #0b1220;
+	--color-neutral: #e6edf5;
+	--color-neutral-content: #0b1220;
+	--color-error: #f87171;
+	--color-error-content: #0b1220;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 12px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 3.5rem;
+	--publier-scale-display-xl-weight: 300;
+	--publier-scale-display-xl-line-height: 1.03;
+	--publier-scale-display-xl-tracking: -1.4px;
+	--publier-scale-display-lg-size: 2.75rem;
+	--publier-scale-display-lg-weight: 300;
+	--publier-scale-display-lg-line-height: 1.08;
+	--publier-scale-display-lg-tracking: -0.9px;
+	--publier-scale-display-md-size: 2rem;
+	--publier-scale-display-md-weight: 300;
+	--publier-scale-display-md-line-height: 1.12;
+	--publier-scale-display-md-tracking: -0.5px;
+	--publier-scale-heading-lg-size: 1.5rem;
+	--publier-scale-heading-lg-weight: 400;
+	--publier-scale-heading-lg-line-height: 1.2;
+	--publier-scale-heading-lg-tracking: -0.3px;
+	--publier-scale-heading-md-size: 1.25rem;
+	--publier-scale-heading-md-weight: 400;
+	--publier-scale-heading-md-line-height: 1.3;
+	--publier-scale-heading-md-tracking: -0.2px;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 500;
+	--publier-scale-heading-sm-line-height: 1.35;
+	--publier-scale-heading-sm-tracking: -0.1px;
+	--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: 300;
+	--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.43;
+	--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.29;
+	--publier-scale-label-tracking: 0;
+	--publier-scale-button-size: 0.9375rem;
+	--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: 400;
+
+	--publier-font-preset-heading: var(--publier-font-builtin-dm-sans);
+	--publier-font-preset-body: var(--publier-font-builtin-dm-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: 9999px;
+	--publier-radius-control: 6px;
+	--publier-radius-card: 12px;
+	--publier-radius-panel: 16px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 6px;
+	--publier-surface-radius: 12px;
+	--publier-card-radius: 12px;
+	--publier-nav-item-radius: 6px;
+	--publier-code-block-radius: 6px;
+	--publier-code-inline-radius: 4px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 1px 2px rgb(13 37 61 / 0.04), 0 6px 16px -4px rgb(13 37 61 / 0.08);
+	--publier-elevation-overlay:
+		0 2px 4px rgb(13 37 61 / 0.05), 0 16px 32px -8px rgb(13 37 61 / 0.14);
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 180ms;
+	--publier-motion-duration-slow: 280ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+	--publier-nav-height: 4.5rem;
+	--publier-page-max-width: 45rem;
+	--publier-layout-width: 1200px;
+	--publier-shadow-color: 13 37 61;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #5b6b82;
+	--color-pl-muted-bg: #eef2f7;
+	--color-pl-subtle: #5b6b82;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e3e8ee;
+	--color-pl-border-strong: #c4cfdc;
+	--color-pl-ring: #6636d1;
+	--color-pl-sidebar-accent: #f6f9fc;
+	--color-pl-sidebar-active: #f4f3ff;
+	--color-pl-sidebar-active-fg: #6636d1;
+
+	--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: #9aa8bd;
+	--color-pl-muted-bg: #131b2d;
+	--color-pl-subtle: #9aa8bd;
+	--color-pl-card: #131b2d;
+	--color-pl-card-hover: #131b2d;
+	--color-pl-popover: #131b2d;
+	--color-pl-border: #22304a;
+	--color-pl-border-strong: #33425f;
+	--color-pl-ring: #bdadff;
+	--color-pl-sidebar-accent: #131b2d;
+	--color-pl-sidebar-active: color-mix(in oklch, #bdadff 16%, transparent);
+	--color-pl-sidebar-active-fg: #bdadff;
+
+	--publier-elevation-raised: 0 0 0 1px #22304a, 0 6px 16px -4px rgb(0 0 0 / 0.4);
+	--publier-elevation-overlay: 0 0 0 1px #22304a, 0 16px 32px -8px 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);
+}