@loworbitstudio/visor-core 0.4.1 → 0.6.0

package/dist/themes/neutral.css

@@ -0,0 +1,479 @@
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
+
+@layer visor-adaptive {
+/* ── Section 1: Shared tokens (mode-independent) ── */
+
+/* --- Primitive: Colors --- */
+.neutral-theme {
+  min-height: 100vh;
+  font-size: 1rem;
+  background: var(--surface-page, var(--surface-background));
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-primary-50: #eaf8fb;
+  --color-primary-100: #e0f8fd;
+  --color-primary-200: #d2f7ff;
+  --color-primary-300: #c3f4ff;
+  --color-primary-400: #abf0ff;
+  --color-primary-500: #1798ad;
+  --color-primary-600: #02606f;
+  --color-primary-700: #024b57;
+  --color-primary-800: #00343d;
+  --color-primary-900: #001f25;
+  --color-primary-950: #000c0f;
+  --color-accent-50: #eaf8fb;
+  --color-accent-100: #e0f8fd;
+  --color-accent-200: #d2f7ff;
+  --color-accent-300: #c3f4ff;
+  --color-accent-400: #abf0ff;
+  --color-accent-500: #1798ad;
+  --color-accent-600: #02606f;
+  --color-accent-700: #024b57;
+  --color-accent-800: #00343d;
+  --color-accent-900: #001f25;
+  --color-accent-950: #000c0f;
+  --color-neutral-50: #f5f5f6;
+  --color-neutral-100: #f2f2f4;
+  --color-neutral-200: #ededf2;
+  --color-neutral-300: #e7e7ee;
+  --color-neutral-400: #dedee7;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #54545d;
+  --color-neutral-700: #41414a;
+  --color-neutral-800: #2d2d34;
+  --color-neutral-900: #1a1a1f;
+  --color-neutral-950: #09090c;
+  --color-success-50: #e8fbeb;
+  --color-success-100: #defde3;
+  --color-success-500: #22c55e;
+  --color-success-600: #00672b;
+  --color-success-700: #005120;
+  --color-success-900: #002209;
+  --color-warning-50: #fff3e6;
+  --color-warning-100: #fff1e3;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #774a01;
+  --color-warning-700: #5e3900;
+  --color-warning-900: #281600;
+  --color-error-50: #fff2f0;
+  --color-error-100: #ffefed;
+  --color-error-500: #ef4444;
+  --color-error-600: #a30016;
+  --color-error-700: #81000f;
+  --color-error-900: #3a0003;
+  --color-info-50: #ecf7ff;
+  --color-info-100: #e8f5ff;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #005c85;
+  --color-info-700: #004869;
+  --color-info-900: #001d2e;
+}
+
+
+/* --- Primitive: Spacing --- */
+.neutral-theme {
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+}
+
+
+/* --- Primitive: Border Radius --- */
+.neutral-theme {
+  --radius-none: 0;
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 0.9997499999999999rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+}
+
+
+/* --- Primitive: Typography --- */
+.neutral-theme {
+  --font-display: system-ui;
+  --font-sans: system-ui;
+  --font-heading: var(--font-sans);
+  --font-body: system-ui;
+  --font-mono: ui-monospace;
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 700;
+  --font-weight-bold: 700;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --letter-spacing-normal: 0.05em;
+}
+
+
+/* --- Primitive: Shadows --- */
+.neutral-theme {
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08);
+}
+
+
+/* --- Primitive: Motion --- */
+.neutral-theme {
+  --motion-duration-100: 100ms;
+  --motion-duration-150: 150ms;
+  --motion-duration-200: 150ms;
+  --motion-duration-300: 300ms;
+  --motion-duration-500: 300ms;
+  --motion-duration-800: 800ms;
+  --motion-easing-linear: linear;
+  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+
+/* --- Primitive: Miscellaneous --- */
+.neutral-theme {
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 3px;
+  --border-width-4: 4px;
+  --z-base: 0;
+  --z-raised: 1;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1300;
+  --z-popover: 1400;
+  --z-toast: 1500;
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+}
+
+
+/* ── Section 2: Dark mode overrides ── */
+
+/* --- Adaptive: Text (dark) — manual toggle --- */
+.dark .neutral-theme {
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #808080;
+  --text-disabled: #54545d;
+  --text-inverse: #1a1a1f;
+  --text-inverse-secondary: #41414a;
+  --text-link: #67e8f9;
+  --text-link-hover: #c3f4ff;
+  --text-success: #22c55e;
+  --text-warning: #f59e0b;
+  --text-error: #ef4444;
+  --text-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Surface (dark) — manual toggle --- */
+.dark .neutral-theme {
+  --surface-page: #09090b;
+  --surface-card: #18181b;
+  --surface-popover: #18181b;
+  --surface-subtle: #2d2d34;
+  --surface-muted: #41414a;
+  --surface-overlay: #09090c;
+  --surface-interactive-default: #2d2d34;
+  --surface-interactive-hover: #41414a;
+  --surface-interactive-active: #54545d;
+  --surface-interactive-disabled: #2d2d34;
+  --surface-selected: #00343d;
+  --surface-accent-subtle: #001f25;
+  --surface-accent-default: #1798ad;
+  --surface-accent-strong: #abf0ff;
+  --surface-success-subtle: #002209;
+  --surface-success-default: #22c55e;
+  --surface-warning-subtle: #281600;
+  --surface-warning-default: #f59e0b;
+  --surface-error-subtle: #3a0003;
+  --surface-error-default: #ef4444;
+  --surface-info-subtle: #001d2e;
+  --surface-info-default: #0ea5e9;
+  --surface-elev-0: #09090c;
+  --surface-elev-1: #1a1a1f;
+  --surface-elev-2: #2d2d34;
+  --surface-elev-3: #41414a;
+  --surface-elev-4: #54545d;
+}
+
+
+/* --- Adaptive: Border (dark) — manual toggle --- */
+.dark .neutral-theme {
+  --border-default: #41414a;
+  --border-muted: #2d2d34;
+  --border-strong: #54545d;
+  --border-focus: #1798ad;
+  --border-disabled: #2d2d34;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (dark) — manual toggle --- */
+.dark .neutral-theme {
+  --interactive-primary-bg: #1798ad;
+  --interactive-primary-bg-hover: #abf0ff;
+  --interactive-primary-bg-active: #c3f4ff;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #2d2d34;
+  --interactive-secondary-bg-hover: #41414a;
+  --interactive-secondary-bg-active: #54545d;
+  --interactive-secondary-text: #f5f5f6;
+  --interactive-secondary-border: #54545d;
+  --interactive-destructive-bg: #ef4444;
+  --interactive-destructive-bg-hover: #a30016;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #2d2d34;
+  --interactive-ghost-bg-hover: #41414a;
+}
+
+
+/* --- Adaptive: Text (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .neutral-theme:not(.light) {
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #808080;
+    --text-disabled: #54545d;
+    --text-inverse: #1a1a1f;
+    --text-inverse-secondary: #41414a;
+    --text-link: #67e8f9;
+    --text-link-hover: #c3f4ff;
+    --text-success: #22c55e;
+    --text-warning: #f59e0b;
+    --text-error: #ef4444;
+    --text-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .neutral-theme:not(.light) {
+    --surface-page: #09090b;
+    --surface-card: #18181b;
+    --surface-popover: #18181b;
+    --surface-subtle: #2d2d34;
+    --surface-muted: #41414a;
+    --surface-overlay: #09090c;
+    --surface-interactive-default: #2d2d34;
+    --surface-interactive-hover: #41414a;
+    --surface-interactive-active: #54545d;
+    --surface-interactive-disabled: #2d2d34;
+    --surface-selected: #00343d;
+    --surface-accent-subtle: #001f25;
+    --surface-accent-default: #1798ad;
+    --surface-accent-strong: #abf0ff;
+    --surface-success-subtle: #002209;
+    --surface-success-default: #22c55e;
+    --surface-warning-subtle: #281600;
+    --surface-warning-default: #f59e0b;
+    --surface-error-subtle: #3a0003;
+    --surface-error-default: #ef4444;
+    --surface-info-subtle: #001d2e;
+    --surface-info-default: #0ea5e9;
+    --surface-elev-0: #09090c;
+    --surface-elev-1: #1a1a1f;
+    --surface-elev-2: #2d2d34;
+    --surface-elev-3: #41414a;
+    --surface-elev-4: #54545d;
+  }
+}
+
+
+/* --- Adaptive: Border (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .neutral-theme:not(.light) {
+    --border-default: #41414a;
+    --border-muted: #2d2d34;
+    --border-strong: #54545d;
+    --border-focus: #1798ad;
+    --border-disabled: #2d2d34;
+    --border-success: #22c55e;
+    --border-warning: #f59e0b;
+    --border-error: #ef4444;
+    --border-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .neutral-theme:not(.light) {
+    --interactive-primary-bg: #1798ad;
+    --interactive-primary-bg-hover: #abf0ff;
+    --interactive-primary-bg-active: #c3f4ff;
+    --interactive-primary-text: #ffffff;
+    --interactive-secondary-bg: #2d2d34;
+    --interactive-secondary-bg-hover: #41414a;
+    --interactive-secondary-bg-active: #54545d;
+    --interactive-secondary-text: #f5f5f6;
+    --interactive-secondary-border: #54545d;
+    --interactive-destructive-bg: #ef4444;
+    --interactive-destructive-bg-hover: #a30016;
+    --interactive-destructive-text: #ffffff;
+    --interactive-ghost-bg: #2d2d34;
+    --interactive-ghost-bg-hover: #41414a;
+  }
+}
+
+
+/* ── Section 3: Light mode overrides ── */
+
+/* --- Adaptive: Text (light) --- */
+html:not(.dark) .neutral-theme {
+  --text-primary: #18181b;
+  --text-secondary: #52525b;
+  --text-tertiary: #737373;
+  --text-disabled: #e7e7ee;
+  --text-inverse: #ffffff;
+  --text-inverse-secondary: #ededf2;
+  --text-link: #0891b2;
+  --text-link-hover: #024b57;
+  --text-success: #005120;
+  --text-warning: #5e3900;
+  --text-error: #81000f;
+  --text-info: #004869;
+}
+
+
+/* --- Adaptive: Surface (light) --- */
+html:not(.dark) .neutral-theme {
+  --surface-page: #ffffff;
+  --surface-card: #ffffff;
+  --surface-popover: #ffffff;
+  --surface-subtle: #f5f5f6;
+  --surface-muted: #f2f2f4;
+  --surface-overlay: #1a1a1f;
+  --surface-interactive-default: #ffffff;
+  --surface-interactive-hover: #f5f5f6;
+  --surface-interactive-active: #f2f2f4;
+  --surface-interactive-disabled: #f5f5f6;
+  --surface-selected: #e0f8fd;
+  --surface-accent-subtle: #eaf8fb;
+  --surface-accent-default: #1798ad;
+  --surface-accent-strong: #02606f;
+  --surface-success-subtle: #e8fbeb;
+  --surface-success-default: #22c55e;
+  --surface-warning-subtle: #fff3e6;
+  --surface-warning-default: #f59e0b;
+  --surface-error-subtle: #fff2f0;
+  --surface-error-default: #ef4444;
+  --surface-info-subtle: #ecf7ff;
+  --surface-info-default: #0ea5e9;
+  --surface-elev-0: #ffffff;
+  --surface-elev-1: #f5f5f6;
+  --surface-elev-2: #f2f2f4;
+  --surface-elev-3: #ededf2;
+  --surface-elev-4: #e7e7ee;
+}
+
+
+/* --- Adaptive: Border (light) --- */
+html:not(.dark) .neutral-theme {
+  --border-default: #ededf2;
+  --border-muted: #f2f2f4;
+  --border-strong: #e7e7ee;
+  --border-focus: #1798ad;
+  --border-disabled: #f2f2f4;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (light) --- */
+html:not(.dark) .neutral-theme {
+  --interactive-primary-bg: #1798ad;
+  --interactive-primary-bg-hover: #024b57;
+  --interactive-primary-bg-active: #00343d;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #ffffff;
+  --interactive-secondary-bg-hover: #f5f5f6;
+  --interactive-secondary-bg-active: #f2f2f4;
+  --interactive-secondary-text: #1a1a1f;
+  --interactive-secondary-border: #e7e7ee;
+  --interactive-destructive-bg: #a30016;
+  --interactive-destructive-bg-hover: #81000f;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #ffffff;
+  --interactive-ghost-bg-hover: #f2f2f4;
+}
+
+
+/* --- Fumadocs bridge: dark --- */
+.dark .neutral-theme {
+  --color-fd-background: #09090b;
+  --color-fd-foreground: #fafafa;
+  --color-fd-card: #18181b;
+  --color-fd-card-foreground: #fafafa;
+  --color-fd-border: #41414a;
+  --color-fd-muted: #41414a;
+  --color-fd-muted-foreground: #a1a1aa;
+  --color-fd-accent: #1798ad;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #1798ad;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #41414a;
+  --color-fd-secondary-foreground: #fafafa;
+  --color-fd-popover: #18181b;
+  --color-fd-popover-foreground: #fafafa;
+  --color-fd-ring: #1798ad;
+}
+
+
+/* --- Fumadocs bridge: light --- */
+html:not(.dark) .neutral-theme {
+  --color-fd-background: #ffffff;
+  --color-fd-foreground: #18181b;
+  --color-fd-card: #ffffff;
+  --color-fd-card-foreground: #18181b;
+  --color-fd-border: #ededf2;
+  --color-fd-muted: #f2f2f4;
+  --color-fd-muted-foreground: #52525b;
+  --color-fd-accent: #1798ad;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #1798ad;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #f2f2f4;
+  --color-fd-secondary-foreground: #18181b;
+  --color-fd-popover: #ffffff;
+  --color-fd-popover-foreground: #18181b;
+  --color-fd-ring: #1798ad;
+}
+}