@publier/shell 0.2.0 → 0.4.0

package/dist/themes/monolith.css

@@ -0,0 +1,223 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #fafafa;
+	--color-base-300: #ebebeb;
+	--color-base-content: #171717;
+	--color-primary: #171717;
+	--color-primary-content: #ffffff;
+	--color-secondary: #4d4d4d;
+	--color-secondary-content: #ffffff;
+	--color-accent: #171717;
+	--color-accent-content: #ffffff;
+	--color-neutral: #171717;
+	--color-neutral-content: #ffffff;
+	--color-error: #c50000;
+	--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: #0a0a0a;
+	--color-base-200: #161616;
+	--color-base-300: #2e2e2e;
+	--color-base-content: #ededed;
+	--color-primary: #ededed;
+	--color-primary-content: #0a0a0a;
+	--color-secondary: #a1a1a1;
+	--color-secondary-content: #0a0a0a;
+	--color-accent: #ededed;
+	--color-accent-content: #0a0a0a;
+	--color-neutral: #ededed;
+	--color-neutral-content: #0a0a0a;
+	--color-error: #ff5b4f;
+	--color-error-content: #0a0a0a;
+
+	--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: #0a0a0a;
+	--color-base-200: #161616;
+	--color-base-300: #2e2e2e;
+	--color-base-content: #ededed;
+	--color-primary: #ededed;
+	--color-primary-content: #0a0a0a;
+	--color-secondary: #a1a1a1;
+	--color-secondary-content: #0a0a0a;
+	--color-accent: #ededed;
+	--color-accent-content: #0a0a0a;
+	--color-neutral: #ededed;
+	--color-neutral-content: #0a0a0a;
+	--color-error: #ff5b4f;
+	--color-error-content: #0a0a0a;
+
+	--radius-selector: 0px;
+	--radius-field: 0px;
+	--radius-box: 0px;
+	--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.05;
+	--publier-scale-display-xl-tracking: -0.03em;
+	--publier-scale-display-lg-size: 2.75rem;
+	--publier-scale-display-lg-weight: 600;
+	--publier-scale-display-lg-line-height: 1.08;
+	--publier-scale-display-lg-tracking: -0.03em;
+	--publier-scale-display-md-size: 2rem;
+	--publier-scale-display-md-weight: 600;
+	--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: 600;
+	--publier-scale-heading-lg-line-height: 1.2;
+	--publier-scale-heading-lg-tracking: -0.02em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--publier-scale-heading-md-weight: 600;
+	--publier-scale-heading-md-line-height: 1.25;
+	--publier-scale-heading-md-tracking: -0.01em;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 600;
+	--publier-scale-heading-sm-line-height: 1.3;
+	--publier-scale-heading-sm-tracking: -0.01em;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 600;
+	--publier-scale-title-line-height: 1.4;
+	--publier-scale-title-tracking: -0.01em;
+	--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.43;
+	--publier-scale-body-sm-tracking: -0.01em;
+	--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.8125rem;
+	--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.8125rem;
+	--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.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: 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 #ebebeb;
+	--publier-elevation-overlay: 0 1px 0 0 rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);
+
+	--publier-motion-duration-fast: 100ms;
+	--publier-motion-duration-base: 150ms;
+	--publier-motion-duration-slow: 200ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+	--publier-nav-height: 4rem;
+	--publier-page-max-width: 45rem;
+	--publier-layout-width: 1200px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #666666;
+	--color-pl-muted-bg: #f5f5f5;
+	--color-pl-subtle: #666666;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #ebebeb;
+	--color-pl-border-strong: #a1a1a1;
+	--color-pl-ring: #171717;
+	--color-pl-sidebar-accent: #fafafa;
+	--color-pl-sidebar-active: #f2f2f2;
+	--color-pl-sidebar-active-fg: #171717;
+
+	--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: #1f1f1f;
+	--color-pl-subtle: #a1a1a1;
+	--color-pl-card: #161616;
+	--color-pl-card-hover: #161616;
+	--color-pl-popover: #161616;
+	--color-pl-border: #2e2e2e;
+	--color-pl-border-strong: #4a4a4a;
+	--color-pl-ring: #ededed;
+	--color-pl-sidebar-accent: #161616;
+	--color-pl-sidebar-active: #1f1f1f;
+	--color-pl-sidebar-active-fg: #ededed;
+
+	--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/nocturne.css

@@ -0,0 +1,223 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f6f7f9;
+	--color-base-300: #eef0f3;
+	--color-base-content: #0f1115;
+	--color-primary: #0072c8;
+	--color-primary-content: #ffffff;
+	--color-secondary: #3b4048;
+	--color-secondary-content: #ffffff;
+	--color-accent: #0072c8;
+	--color-accent-content: #ffffff;
+	--color-neutral: #0f1115;
+	--color-neutral-content: #ffffff;
+	--color-error: #c2352b;
+	--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: #010102;
+	--color-base-200: #0f1011;
+	--color-base-300: #23252a;
+	--color-base-content: #f7f8f8;
+	--color-primary: #4ca6fe;
+	--color-primary-content: #010102;
+	--color-secondary: #d0d6e0;
+	--color-secondary-content: #010102;
+	--color-accent: #4ca6fe;
+	--color-accent-content: #010102;
+	--color-neutral: #f7f8f8;
+	--color-neutral-content: #010102;
+	--color-error: #f0716b;
+	--color-error-content: #010102;
+
+	--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: #010102;
+	--color-base-200: #0f1011;
+	--color-base-300: #23252a;
+	--color-base-content: #f7f8f8;
+	--color-primary: #4ca6fe;
+	--color-primary-content: #010102;
+	--color-secondary: #d0d6e0;
+	--color-secondary-content: #010102;
+	--color-accent: #4ca6fe;
+	--color-accent-content: #010102;
+	--color-neutral: #f7f8f8;
+	--color-neutral-content: #010102;
+	--color-error: #f0716b;
+	--color-error-content: #010102;
+
+	--radius-selector: 9999px;
+	--radius-field: 6px;
+	--radius-box: 8px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4rem;
+	--publier-scale-display-xl-weight: 510;
+	--publier-scale-display-xl-line-height: 1;
+	--publier-scale-display-xl-tracking: -0.035em;
+	--publier-scale-display-lg-size: 3rem;
+	--publier-scale-display-lg-weight: 510;
+	--publier-scale-display-lg-line-height: 1.05;
+	--publier-scale-display-lg-tracking: -0.03em;
+	--publier-scale-display-md-size: 2.25rem;
+	--publier-scale-display-md-weight: 510;
+	--publier-scale-display-md-line-height: 1.1;
+	--publier-scale-display-md-tracking: -0.025em;
+	--publier-scale-heading-lg-size: 1.75rem;
+	--publier-scale-heading-lg-weight: 510;
+	--publier-scale-heading-lg-line-height: 1.2;
+	--publier-scale-heading-lg-tracking: -0.02em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--publier-scale-heading-md-weight: 510;
+	--publier-scale-heading-md-line-height: 1.25;
+	--publier-scale-heading-md-tracking: -0.015em;
+	--publier-scale-heading-sm-size: 1.125rem;
+	--publier-scale-heading-sm-weight: 510;
+	--publier-scale-heading-sm-line-height: 1.3;
+	--publier-scale-heading-sm-tracking: -0.01em;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 510;
+	--publier-scale-title-line-height: 1.4;
+	--publier-scale-title-tracking: -0.01em;
+	--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.01em;
+	--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.005em;
+	--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: 0px;
+	--publier-scale-caption-size: 0.75rem;
+	--publier-scale-caption-weight: 400;
+	--publier-scale-caption-line-height: 1.4;
+	--publier-scale-caption-tracking: 0px;
+	--publier-scale-label-size: 0.8125rem;
+	--publier-scale-label-weight: 500;
+	--publier-scale-label-line-height: 1.3;
+	--publier-scale-label-tracking: 0px;
+	--publier-scale-button-size: 0.875rem;
+	--publier-scale-button-weight: 510;
+	--publier-scale-button-line-height: 1.2;
+	--publier-scale-button-tracking: 0px;
+	--publier-scale-code-size: 0.8125rem;
+	--publier-scale-code-weight: 400;
+	--publier-scale-code-line-height: 1.5;
+	--publier-scale-code-tracking: 0px;
+
+	--publier-font-weight-body: 400;
+	--publier-font-weight-heading: 510;
+
+	--publier-space-xxs: 0.25rem;
+	--publier-space-xs: 0.5rem;
+	--publier-space-sm: 0.75rem;
+	--publier-space-md: 1rem;
+	--publier-space-base: 1rem;
+	--publier-space-lg: 1.5rem;
+	--publier-space-xl: 2rem;
+	--publier-space-xxl: 3rem;
+	--publier-space-section: 6rem;
+
+	--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: 6px;
+	--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.06), 0 8px 24px rgb(0 0 0 / 0.12);
+
+	--publier-motion-duration-fast: 100ms;
+	--publier-motion-duration-base: 140ms;
+	--publier-motion-duration-slow: 220ms;
+	--publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+	--publier-nav-height: 3.5rem;
+	--publier-page-max-width: 45rem;
+	--publier-layout-width: 1280px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #5e6470;
+	--color-pl-muted-bg: #eef0f4;
+	--color-pl-subtle: #5e6470;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e3e5ea;
+	--color-pl-border-strong: #c5cad3;
+	--color-pl-ring: #0f1115;
+	--color-pl-sidebar-accent: #f6f7f9;
+	--color-pl-sidebar-active: #e6f2fb;
+	--color-pl-sidebar-active-fg: #0072c8;
+
+	--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: #8a8f98;
+	--color-pl-muted-bg: #141516;
+	--color-pl-subtle: #62666d;
+	--color-pl-card: #0f1011;
+	--color-pl-card-hover: #141516;
+	--color-pl-popover: #141516;
+	--color-pl-border: #23252a;
+	--color-pl-border-strong: #34343a;
+	--color-pl-ring: #f7f8f8;
+	--color-pl-sidebar-accent: #0f1011;
+	--color-pl-sidebar-active: color-mix(in oklch, #4ca6fe 14%, transparent);
+	--color-pl-sidebar-active-fg: #4ca6fe;
+
+	--publier-elevation-raised: 0 0 0 1px #23252a;
+	--publier-elevation-overlay: 0 0 0 1px #34343a;
+
+	--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/prism.css

@@ -0,0 +1,225 @@
+:root, [data-theme="light"] {
+color-scheme: light;
+
+	--color-base-100: #ffffff;
+	--color-base-200: #f7f7f5;
+	--color-base-300: #f1f1f1;
+	--color-base-content: #000000;
+	--color-primary: #c116bb;
+	--color-primary-content: #ffffff;
+	--color-secondary: #3a3a3a;
+	--color-secondary-content: #ffffff;
+	--color-accent: #c5b0f4;
+	--color-accent-content: #000000;
+	--color-neutral: #000000;
+	--color-neutral-content: #ffffff;
+	--color-error: #c4122f;
+	--color-error-content: #ffffff;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 24px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+
+[data-theme="dark"] {
+color-scheme: dark;
+
+	--color-base-100: #141218;
+	--color-base-200: #211e26;
+	--color-base-300: #3a3541;
+	--color-base-content: #f5f3f7;
+	--color-primary: #fa9ff2;
+	--color-primary-content: #141218;
+	--color-secondary: #a9a3b3;
+	--color-secondary-content: #141218;
+	--color-accent: #fa9ff2;
+	--color-accent-content: #141218;
+	--color-neutral: #f5f3f7;
+	--color-neutral-content: #141218;
+	--color-error: #ff8fa3;
+	--color-error-content: #141218;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 24px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-theme]) {
+color-scheme: dark;
+
+	--color-base-100: #141218;
+	--color-base-200: #211e26;
+	--color-base-300: #3a3541;
+	--color-base-content: #f5f3f7;
+	--color-primary: #fa9ff2;
+	--color-primary-content: #141218;
+	--color-secondary: #a9a3b3;
+	--color-secondary-content: #141218;
+	--color-accent: #fa9ff2;
+	--color-accent-content: #141218;
+	--color-neutral: #f5f3f7;
+	--color-neutral-content: #141218;
+	--color-error: #ff8fa3;
+	--color-error-content: #141218;
+
+	--radius-selector: 9999px;
+	--radius-field: 12px;
+	--radius-box: 24px;
+	--border: 2px;
+	--depth: 0;
+	--noise: 0;
+}
+}
+
+:root {
+
+	--publier-scale-display-xl-size: 4.5rem;
+	--publier-scale-display-xl-weight: 700;
+	--publier-scale-display-xl-line-height: 1.02;
+	--publier-scale-display-xl-tracking: -0.03em;
+	--publier-scale-display-lg-size: 3.5rem;
+	--publier-scale-display-lg-weight: 700;
+	--publier-scale-display-lg-line-height: 1.06;
+	--publier-scale-display-lg-tracking: -0.025em;
+	--publier-scale-display-md-size: 2.5rem;
+	--publier-scale-display-md-weight: 700;
+	--publier-scale-display-md-line-height: 1.12;
+	--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.015em;
+	--publier-scale-heading-md-size: 1.375rem;
+	--publier-scale-heading-md-weight: 600;
+	--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: 600;
+	--publier-scale-heading-sm-line-height: 1.35;
+	--publier-scale-heading-sm-tracking: 0;
+	--publier-scale-title-size: 1rem;
+	--publier-scale-title-weight: 600;
+	--publier-scale-title-line-height: 1.3;
+	--publier-scale-title-tracking: 0;
+	--publier-scale-body-lg-size: 1.25rem;
+	--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.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.45;
+	--publier-scale-body-sm-tracking: 0;
+	--publier-scale-caption-size: 0.8125rem;
+	--publier-scale-caption-weight: 500;
+	--publier-scale-caption-line-height: 1.3;
+	--publier-scale-caption-tracking: 0.01em;
+	--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: 1rem;
+	--publier-scale-button-weight: 600;
+	--publier-scale-button-line-height: 1.25;
+	--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-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: 6rem;
+
+	--publier-radius-button: 9999px;
+	--publier-radius-control: 12px;
+	--publier-radius-card: 24px;
+	--publier-radius-panel: 32px;
+	--publier-radius-chip: 9999px;
+	--publier-control-radius: 12px;
+	--publier-surface-radius: 24px;
+	--publier-card-radius: 24px;
+	--publier-nav-item-radius: 12px;
+	--publier-code-block-radius: 12px;
+	--publier-code-inline-radius: 6px;
+
+	--publier-elevation-flat: none;
+	--publier-elevation-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);
+	--publier-elevation-overlay: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.12);
+
+	--publier-motion-duration-fast: 120ms;
+	--publier-motion-duration-base: 180ms;
+	--publier-motion-duration-slow: 280ms;
+	--publier-motion-easing: cubic-bezier(0.34, 1.2, 0.64, 1);
+
+	--publier-nav-height: 4.5rem;
+	--publier-page-max-width: 45rem;
+	--publier-layout-width: 1200px;
+	--publier-shadow-color: 0 0 0;
+}
+
+:root,
+:root[data-theme="light"] {
+	--color-pl-muted: #5f5f5f;
+	--color-pl-muted-bg: #f0f0ee;
+	--color-pl-subtle: #5f5f5f;
+	--color-pl-card: #ffffff;
+	--color-pl-card-hover: #ffffff;
+	--color-pl-popover: #ffffff;
+	--color-pl-border: #e6e6e6;
+	--color-pl-border-strong: #8f8f8f;
+	--color-pl-ring: #c116bb;
+	--color-pl-sidebar-accent: #f7f7f5;
+	--color-pl-sidebar-active: #fbe2f8;
+	--color-pl-sidebar-active-fg: #c116bb;
+
+	--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: #a9a3b3;
+	--color-pl-muted-bg: #211e26;
+	--color-pl-subtle: #a9a3b3;
+	--color-pl-card: #211e26;
+	--color-pl-card-hover: #211e26;
+	--color-pl-popover: #211e26;
+	--color-pl-border: #3a3541;
+	--color-pl-border-strong: #5a5366;
+	--color-pl-ring: #f5f3f7;
+	--color-pl-sidebar-accent: #211e26;
+	--color-pl-sidebar-active: color-mix(in oklch, #fa9ff2 14%, transparent);
+	--color-pl-sidebar-active-fg: #fa9ff2;
+
+	--publier-elevation-raised:
+		0 0 0 1px #3a3541, 0 2px 6px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.3);
+	--publier-elevation-overlay:
+		0 0 0 1px #3a3541, 0 2px 6px rgb(0 0 0 / 0.2), 0 12px 32px rgb(0 0 0 / 0.36);
+
+	--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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/shell",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "UNLICENSED",
   "description": "Qwik + Astro docs layout for Publier sites.",
   "type": "module",
@@ -119,7 +119,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/relative-time-element": "^5.3.1",
     "@github/tab-container-element": "^4.9.0",
-    "@publier/native": "0.1.1",
+    "@publier/native": "0.3.0",
     "@tailwindcss/typography": "^0.5.20",
     "astro-pagefind": "^2.0.1",
     "daisyui": "^5.7.50",

package/src/components/top-nav-mobile.astro

@@ -4,8 +4,8 @@ import { navConfig, type NavVariant } from 'virtual:publier-nav-config';
 import type { TopNavMobileProps } from './types.ts';
 
 const EMPTY: NavVariant = { brand: '', logo: null, tabs: [], links: [], cta: null };
-const { variant = 'default', currentPath = '', variantConfig } = Astro.props as TopNavMobileProps;
+const { variant = 'default', currentPath = '', variantConfig, navVariant } = Astro.props as TopNavMobileProps;
 const v = variantConfig ?? navConfig.variants[variant] ?? navConfig.variants.default ?? EMPTY;
-const html = shellRenderTopNavMobile(JSON.stringify({ currentPath, v }));
+const html = shellRenderTopNavMobile(JSON.stringify({ currentPath, v, navVariant, searchEnabled: navConfig.searchEnabled }));
 ---
 <Fragment set:html={html} />