@loworbitstudio/visor-core 0.3.0 → 0.5.0

package/README.md

@@ -4,10 +4,6 @@ CSS custom property design tokens for the Visor design system.
 
 ## Installation
 
-> **Note:** This package (`@loworbitstudio/visor-core`) is not yet published to npm. For new projects, use `npx @loworbitstudio/visor init --template nextjs` — it generates all tokens inline via the theme engine, no npm package needed. For monorepo usage, import via a relative path.
-
-When the package is published, installation will be:
-
 ```sh
 npm install @loworbitstudio/visor-core
 ```

package/dist/primitives.css

@@ -98,6 +98,15 @@
 }
 
 
+/* --- Primitive: Stroke Widths --- */
+:root {
+  --stroke-width-thin: 1px;
+  --stroke-width-regular: 1.5px;
+  --stroke-width-medium: 2px;
+  --stroke-width-thick: 2.5px;
+}
+
+
 /* --- Primitive: Font Families --- */
 :root {
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -160,6 +169,19 @@
 }
 
 
+/* --- Primitive: Opacity --- */
+:root {
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-12: 0.12;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+}
+
+
 /* --- Primitive: Overlay --- */
 :root {
   --overlay-bg: rgba(0, 0, 0, 0.5);

package/dist/semantic.css

@@ -33,6 +33,7 @@
   --surface-interactive-hover: var(--color-neutral-50);
   --surface-interactive-active: var(--color-neutral-100);
   --surface-interactive-disabled: var(--color-neutral-50);
+  --surface-selected: var(--color-primary-100);
   --surface-accent-subtle: var(--color-primary-50);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-600);

package/dist/themes/blackout.css

@@ -0,0 +1,462 @@
+
+/* ── Section 1: Shared tokens (mode-independent) ── */
+
+/* --- Primitive: Colors --- */
+.blackout-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: #f5f5f5;
+  --color-primary-100: #f2f2f2;
+  --color-primary-200: #ededed;
+  --color-primary-300: #e6e6e6;
+  --color-primary-400: #dcdcdc;
+  --color-primary-500: #666666;
+  --color-primary-600: #555555;
+  --color-primary-700: #424242;
+  --color-primary-800: #2e2e2e;
+  --color-primary-900: #1b1b1b;
+  --color-primary-950: #090909;
+  --color-accent-50: #f5f5f5;
+  --color-accent-100: #f2f2f2;
+  --color-accent-200: #ededed;
+  --color-accent-300: #e6e6e6;
+  --color-accent-400: #dcdcdc;
+  --color-accent-500: #666666;
+  --color-accent-600: #555555;
+  --color-accent-700: #424242;
+  --color-accent-800: #2e2e2e;
+  --color-accent-900: #1b1b1b;
+  --color-accent-950: #090909;
+  --color-neutral-50: #f5f5f5;
+  --color-neutral-100: #f1f1f1;
+  --color-neutral-200: #eaeaea;
+  --color-neutral-300: #e0e0e0;
+  --color-neutral-400: #d2d2d2;
+  --color-neutral-500: #333333;
+  --color-neutral-600: #555555;
+  --color-neutral-700: #424242;
+  --color-neutral-800: #2e2e2e;
+  --color-neutral-900: #1b1b1b;
+  --color-neutral-950: #090909;
+  --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 --- */
+.blackout-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 --- */
+.blackout-theme {
+  --radius-none: 0;
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-md: 0.25rem; /* 4px */
+  --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 --- */
+.blackout-theme {
+  --font-display: Satoshi;
+  --font-sans: Satoshi;
+  --font-heading: var(--font-sans);
+  --font-body: Satoshi;
+  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", 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 --- */
+.blackout-theme {
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+}
+
+
+/* --- Primitive: Motion --- */
+.blackout-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 --- */
+.blackout-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 .blackout-theme {
+  --text-primary: rgba(255, 255, 255, 0.7);
+  --text-secondary: rgba(255, 255, 255, 0.70);
+  --text-tertiary: rgba(255, 255, 255, 0.55);
+  --text-disabled: rgba(255, 255, 255, 0.1);
+  --text-inverse: #1b1b1b;
+  --text-inverse-secondary: #424242;
+  --text-link: #dcdcdc;
+  --text-link-hover: #e6e6e6;
+  --text-success: #22c55e;
+  --text-warning: #f59e0b;
+  --text-error: #ef4444;
+  --text-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Surface (dark) — manual toggle --- */
+.dark .blackout-theme {
+  --surface-page: #000000;
+  --surface-card: rgba(255, 255, 255, 0.04);
+  --surface-popover: #141414;
+  --surface-subtle: rgba(255, 255, 255, 0.02);
+  --surface-muted: rgba(255, 255, 255, 0.04);
+  --surface-overlay: #090909;
+  --surface-interactive-default: #2e2e2e;
+  --surface-interactive-hover: #424242;
+  --surface-interactive-active: #555555;
+  --surface-interactive-disabled: #2e2e2e;
+  --surface-selected: #2e2e2e;
+  --surface-accent-subtle: #1b1b1b;
+  --surface-accent-default: #666666;
+  --surface-accent-strong: #dcdcdc;
+  --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;
+}
+
+
+/* --- Adaptive: Border (dark) — manual toggle --- */
+.dark .blackout-theme {
+  --border-default: rgba(255, 255, 255, 0.06);
+  --border-muted: rgba(255, 255, 255, 0.03);
+  --border-strong: rgba(255, 255, 255, 0.1);
+  --border-focus: #dcdcdc;
+  --border-disabled: #2e2e2e;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (dark) — manual toggle --- */
+.dark .blackout-theme {
+  --interactive-primary-bg: #666666;
+  --interactive-primary-bg-hover: #dcdcdc;
+  --interactive-primary-bg-active: #e6e6e6;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #2e2e2e;
+  --interactive-secondary-bg-hover: #424242;
+  --interactive-secondary-bg-active: #555555;
+  --interactive-secondary-text: #f5f5f5;
+  --interactive-secondary-border: #555555;
+  --interactive-destructive-bg: #ef4444;
+  --interactive-destructive-bg-hover: #a30016;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #2e2e2e;
+  --interactive-ghost-bg-hover: #424242;
+}
+
+
+/* --- Adaptive: Text (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .blackout-theme:not(.light) {
+    --text-primary: rgba(255, 255, 255, 0.7);
+    --text-secondary: rgba(255, 255, 255, 0.70);
+    --text-tertiary: rgba(255, 255, 255, 0.55);
+    --text-disabled: rgba(255, 255, 255, 0.1);
+    --text-inverse: #1b1b1b;
+    --text-inverse-secondary: #424242;
+    --text-link: #dcdcdc;
+    --text-link-hover: #e6e6e6;
+    --text-success: #22c55e;
+    --text-warning: #f59e0b;
+    --text-error: #ef4444;
+    --text-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .blackout-theme:not(.light) {
+    --surface-page: #000000;
+    --surface-card: rgba(255, 255, 255, 0.04);
+    --surface-popover: #141414;
+    --surface-subtle: rgba(255, 255, 255, 0.02);
+    --surface-muted: rgba(255, 255, 255, 0.04);
+    --surface-overlay: #090909;
+    --surface-interactive-default: #2e2e2e;
+    --surface-interactive-hover: #424242;
+    --surface-interactive-active: #555555;
+    --surface-interactive-disabled: #2e2e2e;
+    --surface-selected: #2e2e2e;
+    --surface-accent-subtle: #1b1b1b;
+    --surface-accent-default: #666666;
+    --surface-accent-strong: #dcdcdc;
+    --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;
+  }
+}
+
+
+/* --- Adaptive: Border (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .blackout-theme:not(.light) {
+    --border-default: rgba(255, 255, 255, 0.06);
+    --border-muted: rgba(255, 255, 255, 0.03);
+    --border-strong: rgba(255, 255, 255, 0.1);
+    --border-focus: #dcdcdc;
+    --border-disabled: #2e2e2e;
+    --border-success: #22c55e;
+    --border-warning: #f59e0b;
+    --border-error: #ef4444;
+    --border-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .blackout-theme:not(.light) {
+    --interactive-primary-bg: #666666;
+    --interactive-primary-bg-hover: #dcdcdc;
+    --interactive-primary-bg-active: #e6e6e6;
+    --interactive-primary-text: #ffffff;
+    --interactive-secondary-bg: #2e2e2e;
+    --interactive-secondary-bg-hover: #424242;
+    --interactive-secondary-bg-active: #555555;
+    --interactive-secondary-text: #f5f5f5;
+    --interactive-secondary-border: #555555;
+    --interactive-destructive-bg: #ef4444;
+    --interactive-destructive-bg-hover: #a30016;
+    --interactive-destructive-text: #ffffff;
+    --interactive-ghost-bg: #2e2e2e;
+    --interactive-ghost-bg-hover: #424242;
+  }
+}
+
+
+/* ── Section 3: Light mode overrides ── */
+
+/* --- Adaptive: Text (light) --- */
+html:not(.dark) .blackout-theme {
+  --text-primary: rgba(255, 255, 255, 0.75);
+  --text-secondary: rgba(255, 255, 255, 0.5);
+  --text-tertiary: rgba(255, 255, 255, 0.55);
+  --text-disabled: rgba(255, 255, 255, 0.12);
+  --text-inverse: #ffffff;
+  --text-inverse-secondary: #eaeaea;
+  --text-link: #555555;
+  --text-link-hover: #424242;
+  --text-success: #005120;
+  --text-warning: #5e3900;
+  --text-error: #81000f;
+  --text-info: #004869;
+}
+
+
+/* --- Adaptive: Surface (light) --- */
+html:not(.dark) .blackout-theme {
+  --surface-page: #0a0a0a;
+  --surface-card: rgba(255, 255, 255, 0.05);
+  --surface-popover: #141414;
+  --surface-subtle: rgba(255, 255, 255, 0.02);
+  --surface-muted: rgba(255, 255, 255, 0.05);
+  --surface-overlay: #1b1b1b;
+  --surface-interactive-default: transparent;
+  --surface-interactive-hover: rgba(255, 255, 255, 0.08);
+  --surface-interactive-active: rgba(255, 255, 255, 0.12);
+  --surface-interactive-disabled: rgba(255, 255, 255, 0.04);
+  --surface-selected: #f2f2f2;
+  --surface-accent-subtle: #f5f5f5;
+  --surface-accent-default: #666666;
+  --surface-accent-strong: #555555;
+  --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;
+}
+
+
+/* --- Adaptive: Border (light) --- */
+html:not(.dark) .blackout-theme {
+  --border-default: rgba(255, 255, 255, 0.08);
+  --border-muted: rgba(255, 255, 255, 0.04);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-focus: #666666;
+  --border-disabled: #f1f1f1;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (light) --- */
+html:not(.dark) .blackout-theme {
+  --interactive-primary-bg: #555555;
+  --interactive-primary-bg-hover: #424242;
+  --interactive-primary-bg-active: #2e2e2e;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #ffffff;
+  --interactive-secondary-bg-hover: #f5f5f5;
+  --interactive-secondary-bg-active: #f1f1f1;
+  --interactive-secondary-text: #1b1b1b;
+  --interactive-secondary-border: #e0e0e0;
+  --interactive-destructive-bg: #a30016;
+  --interactive-destructive-bg-hover: #81000f;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #ffffff;
+  --interactive-ghost-bg-hover: #f1f1f1;
+}
+
+
+/* --- Fumadocs bridge: dark --- */
+.dark .blackout-theme {
+  --color-fd-background: #000000;
+  --color-fd-foreground: rgba(255, 255, 255, 0.7);
+  --color-fd-card: rgba(255, 255, 255, 0.04);
+  --color-fd-card-foreground: rgba(255, 255, 255, 0.7);
+  --color-fd-border: rgba(255, 255, 255, 0.06);
+  --color-fd-muted: rgba(255, 255, 255, 0.04);
+  --color-fd-muted-foreground: rgba(255, 255, 255, 0.70);
+  --color-fd-accent: #666666;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #666666;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: rgba(255, 255, 255, 0.04);
+  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
+  --color-fd-popover: #141414;
+  --color-fd-popover-foreground: rgba(255, 255, 255, 0.7);
+  --color-fd-ring: #dcdcdc;
+}
+
+
+/* --- Fumadocs bridge: light --- */
+html:not(.dark) .blackout-theme {
+  --color-fd-background: #0a0a0a;
+  --color-fd-foreground: rgba(255, 255, 255, 0.75);
+  --color-fd-card: rgba(255, 255, 255, 0.05);
+  --color-fd-card-foreground: rgba(255, 255, 255, 0.75);
+  --color-fd-border: rgba(255, 255, 255, 0.08);
+  --color-fd-muted: rgba(255, 255, 255, 0.05);
+  --color-fd-muted-foreground: rgba(255, 255, 255, 0.5);
+  --color-fd-accent: #666666;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #666666;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: rgba(255, 255, 255, 0.05);
+  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.75);
+  --color-fd-popover: #141414;
+  --color-fd-popover-foreground: rgba(255, 255, 255, 0.75);
+  --color-fd-ring: #666666;
+}
+

package/dist/themes/dark.css

@@ -37,6 +37,7 @@
   --surface-interactive-hover: var(--color-neutral-700);
   --surface-interactive-active: var(--color-neutral-600);
   --surface-interactive-disabled: var(--color-neutral-800);
+  --surface-selected: var(--color-primary-800);
   --surface-accent-subtle: var(--color-primary-900);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-400);
@@ -170,6 +171,7 @@
   --surface-interactive-hover: var(--color-neutral-700);
   --surface-interactive-active: var(--color-neutral-600);
   --surface-interactive-disabled: var(--color-neutral-800);
+  --surface-selected: var(--color-primary-800);
   --surface-accent-subtle: var(--color-primary-900);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-400);

package/dist/themes/light.css

@@ -33,6 +33,7 @@
   --surface-interactive-hover: var(--color-neutral-50);
   --surface-interactive-active: var(--color-neutral-100);
   --surface-interactive-disabled: var(--color-neutral-50);
+  --surface-selected: var(--color-primary-100);
   --surface-accent-subtle: var(--color-primary-50);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-600);