@loworbitstudio/visor-core 0.3.0 → 0.5.0

package/dist/themes/space.css

@@ -0,0 +1,462 @@
+
+/* ── Section 1: Shared tokens (mode-independent) ── */
+
+/* --- Primitive: Colors --- */
+.space-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: #f2f5ff;
+  --color-primary-100: #eef2ff;
+  --color-primary-200: #eaeeff;
+  --color-primary-300: #e2e9ff;
+  --color-primary-400: #d8e1ff;
+  --color-primary-500: #5b6fff;
+  --color-primary-600: #353ac8;
+  --color-primary-700: #281fb0;
+  --color-primary-800: #1b0b86;
+  --color-primary-900: #0e005a;
+  --color-primary-950: #04002d;
+  --color-accent-50: #f2f5ff;
+  --color-accent-100: #eef2ff;
+  --color-accent-200: #eaeeff;
+  --color-accent-300: #e2e9ff;
+  --color-accent-400: #d8e1ff;
+  --color-accent-500: #5b6fff;
+  --color-accent-600: #353ac8;
+  --color-accent-700: #281fb0;
+  --color-accent-800: #1b0b86;
+  --color-accent-900: #0e005a;
+  --color-accent-950: #04002d;
+  --color-neutral-50: #f5f5f8;
+  --color-neutral-100: #f1f1f8;
+  --color-neutral-200: #ecedf8;
+  --color-neutral-300: #e5e6f5;
+  --color-neutral-400: #dcdceb;
+  --color-neutral-500: #6c6c79;
+  --color-neutral-600: #545460;
+  --color-neutral-700: #41414d;
+  --color-neutral-800: #2d2d38;
+  --color-neutral-900: #191924;
+  --color-neutral-950: #080810;
+  --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 --- */
+.space-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 --- */
+.space-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 --- */
+.space-theme {
+  --font-display: Satoshi;
+  --font-sans: Satoshi;
+  --font-heading: var(--font-sans);
+  --font-body: Satoshi;
+  --font-mono: Monaspace Neon;
+  --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 --- */
+.space-theme {
+  --shadow-xs: 0 1px 2px rgba(91, 111, 255, 0.08);
+  --shadow-sm: 0 1px 3px rgba(91, 111, 255, 0.1);
+  --shadow-md: 0 4px 12px rgba(91, 111, 255, 0.12);
+  --shadow-lg: 0 10px 24px rgba(91, 111, 255, 0.14);
+  --shadow-xl: 0 20px 40px rgba(91, 111, 255, 0.16);
+}
+
+
+/* --- Primitive: Motion --- */
+.space-theme {
+  --motion-duration-100: 100ms;
+  --motion-duration-150: 150ms;
+  --motion-duration-200: 200ms;
+  --motion-duration-300: 300ms;
+  --motion-duration-500: 400ms;
+  --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 --- */
+.space-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 .space-theme {
+  --text-primary: #e8e8f0;
+  --text-secondary: rgba(232, 232, 240, 0.72);
+  --text-tertiary: rgba(232, 232, 240, 0.5);
+  --text-disabled: #545460;
+  --text-inverse: #191924;
+  --text-inverse-secondary: #41414d;
+  --text-link: #8b9fff;
+  --text-link-hover: #e2e9ff;
+  --text-success: #22c55e;
+  --text-warning: #f59e0b;
+  --text-error: #ef4444;
+  --text-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Surface (dark) — manual toggle --- */
+.dark .space-theme {
+  --surface-page: #080810;
+  --surface-card: #0e0e18;
+  --surface-popover: #0e0e18;
+  --surface-subtle: #2d2d38;
+  --surface-muted: #41414d;
+  --surface-overlay: #080810;
+  --surface-interactive-default: #2d2d38;
+  --surface-interactive-hover: #41414d;
+  --surface-interactive-active: #545460;
+  --surface-interactive-disabled: #2d2d38;
+  --surface-selected: #1b0b86;
+  --surface-accent-subtle: #0e005a;
+  --surface-accent-default: #5b6fff;
+  --surface-accent-strong: #d8e1ff;
+  --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 .space-theme {
+  --border-default: #41414d;
+  --border-muted: #2d2d38;
+  --border-strong: #545460;
+  --border-focus: #5b6fff;
+  --border-disabled: #2d2d38;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (dark) — manual toggle --- */
+.dark .space-theme {
+  --interactive-primary-bg: #5b6fff;
+  --interactive-primary-bg-hover: #d8e1ff;
+  --interactive-primary-bg-active: #e2e9ff;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #2d2d38;
+  --interactive-secondary-bg-hover: #41414d;
+  --interactive-secondary-bg-active: #545460;
+  --interactive-secondary-text: #f5f5f8;
+  --interactive-secondary-border: #545460;
+  --interactive-destructive-bg: #ef4444;
+  --interactive-destructive-bg-hover: #a30016;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #2d2d38;
+  --interactive-ghost-bg-hover: #41414d;
+}
+
+
+/* --- Adaptive: Text (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --text-primary: #e8e8f0;
+    --text-secondary: rgba(232, 232, 240, 0.72);
+    --text-tertiary: rgba(232, 232, 240, 0.5);
+    --text-disabled: #545460;
+    --text-inverse: #191924;
+    --text-inverse-secondary: #41414d;
+    --text-link: #8b9fff;
+    --text-link-hover: #e2e9ff;
+    --text-success: #22c55e;
+    --text-warning: #f59e0b;
+    --text-error: #ef4444;
+    --text-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --surface-page: #080810;
+    --surface-card: #0e0e18;
+    --surface-popover: #0e0e18;
+    --surface-subtle: #2d2d38;
+    --surface-muted: #41414d;
+    --surface-overlay: #080810;
+    --surface-interactive-default: #2d2d38;
+    --surface-interactive-hover: #41414d;
+    --surface-interactive-active: #545460;
+    --surface-interactive-disabled: #2d2d38;
+    --surface-selected: #1b0b86;
+    --surface-accent-subtle: #0e005a;
+    --surface-accent-default: #5b6fff;
+    --surface-accent-strong: #d8e1ff;
+    --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) {
+  .space-theme:not(.light) {
+    --border-default: #41414d;
+    --border-muted: #2d2d38;
+    --border-strong: #545460;
+    --border-focus: #5b6fff;
+    --border-disabled: #2d2d38;
+    --border-success: #22c55e;
+    --border-warning: #f59e0b;
+    --border-error: #ef4444;
+    --border-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --interactive-primary-bg: #5b6fff;
+    --interactive-primary-bg-hover: #d8e1ff;
+    --interactive-primary-bg-active: #e2e9ff;
+    --interactive-primary-text: #ffffff;
+    --interactive-secondary-bg: #2d2d38;
+    --interactive-secondary-bg-hover: #41414d;
+    --interactive-secondary-bg-active: #545460;
+    --interactive-secondary-text: #f5f5f8;
+    --interactive-secondary-border: #545460;
+    --interactive-destructive-bg: #ef4444;
+    --interactive-destructive-bg-hover: #a30016;
+    --interactive-destructive-text: #ffffff;
+    --interactive-ghost-bg: #2d2d38;
+    --interactive-ghost-bg-hover: #41414d;
+  }
+}
+
+
+/* ── Section 3: Light mode overrides ── */
+
+/* --- Adaptive: Text (light) --- */
+html:not(.dark) .space-theme {
+  --text-primary: #1a1630;
+  --text-secondary: rgba(26, 22, 48, 0.72);
+  --text-tertiary: rgba(26, 22, 48, 0.65);
+  --text-disabled: #e5e6f5;
+  --text-inverse: #ffffff;
+  --text-inverse-secondary: #ecedf8;
+  --text-link: #5b6fff;
+  --text-link-hover: #281fb0;
+  --text-success: #005120;
+  --text-warning: #5e3900;
+  --text-error: #81000f;
+  --text-info: #004869;
+}
+
+
+/* --- Adaptive: Surface (light) --- */
+html:not(.dark) .space-theme {
+  --surface-page: #e0ddef;
+  --surface-card: #f2f0f8;
+  --surface-popover: #f2f0f8;
+  --surface-subtle: #f5f5f8;
+  --surface-muted: #f1f1f8;
+  --surface-overlay: #191924;
+  --surface-interactive-default: #ffffff;
+  --surface-interactive-hover: #f5f5f8;
+  --surface-interactive-active: #f1f1f8;
+  --surface-interactive-disabled: #f5f5f8;
+  --surface-selected: #eef2ff;
+  --surface-accent-subtle: #f2f5ff;
+  --surface-accent-default: #5b6fff;
+  --surface-accent-strong: #353ac8;
+  --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) .space-theme {
+  --border-default: #ecedf8;
+  --border-muted: #f1f1f8;
+  --border-strong: #e5e6f5;
+  --border-focus: #5b6fff;
+  --border-disabled: #f1f1f8;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (light) --- */
+html:not(.dark) .space-theme {
+  --interactive-primary-bg: #5b6fff;
+  --interactive-primary-bg-hover: #281fb0;
+  --interactive-primary-bg-active: #1b0b86;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #ffffff;
+  --interactive-secondary-bg-hover: #f5f5f8;
+  --interactive-secondary-bg-active: #f1f1f8;
+  --interactive-secondary-text: #191924;
+  --interactive-secondary-border: #e5e6f5;
+  --interactive-destructive-bg: #a30016;
+  --interactive-destructive-bg-hover: #81000f;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #ffffff;
+  --interactive-ghost-bg-hover: #f1f1f8;
+}
+
+
+/* --- Fumadocs bridge: dark --- */
+.dark .space-theme {
+  --color-fd-background: #080810;
+  --color-fd-foreground: #e8e8f0;
+  --color-fd-card: #0e0e18;
+  --color-fd-card-foreground: #e8e8f0;
+  --color-fd-border: #41414d;
+  --color-fd-muted: #41414d;
+  --color-fd-muted-foreground: rgba(232, 232, 240, 0.72);
+  --color-fd-accent: #5b6fff;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #5b6fff;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #41414d;
+  --color-fd-secondary-foreground: #e8e8f0;
+  --color-fd-popover: #0e0e18;
+  --color-fd-popover-foreground: #e8e8f0;
+  --color-fd-ring: #5b6fff;
+}
+
+
+/* --- Fumadocs bridge: light --- */
+html:not(.dark) .space-theme {
+  --color-fd-background: #e0ddef;
+  --color-fd-foreground: #1a1630;
+  --color-fd-card: #f2f0f8;
+  --color-fd-card-foreground: #1a1630;
+  --color-fd-border: #ecedf8;
+  --color-fd-muted: #f1f1f8;
+  --color-fd-muted-foreground: rgba(26, 22, 48, 0.72);
+  --color-fd-accent: #5b6fff;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #5b6fff;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #f1f1f8;
+  --color-fd-secondary-foreground: #1a1630;
+  --color-fd-popover: #f2f0f8;
+  --color-fd-popover-foreground: #1a1630;
+  --color-fd-ring: #5b6fff;
+}
+

package/dist/tokens.css

@@ -103,6 +103,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;
@@ -165,6 +174,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);
@@ -230,6 +252,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);
@@ -398,6 +421,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);
@@ -523,6 +547,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);
@@ -656,6 +681,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor-core",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Design tokens for the Visor design system — CSS custom properties for theming.",
   "type": "module",
   "main": "./dist/index.css",
@@ -10,8 +10,12 @@
     "./tokens": "./dist/tokens.css",
     "./primitives": "./dist/primitives.css",
     "./semantic": "./dist/semantic.css",
-    "./themes/light": "./dist/themes/light.css",
+    "./themes/blackout": "./dist/themes/blackout.css",
     "./themes/dark": "./dist/themes/dark.css",
+    "./themes/light": "./dist/themes/light.css",
+    "./themes/modern-minimal": "./dist/themes/modern-minimal.css",
+    "./themes/neutral": "./dist/themes/neutral.css",
+    "./themes/space": "./dist/themes/space.css",
     "./types": "./src/types.ts"
   },
   "scripts": {
@@ -43,6 +47,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@loworbitstudio/visor-theme-engine": "^0.4.0",
     "@types/node": "^22.0.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",

package/src/types.ts

@@ -153,6 +153,7 @@ export const TOKEN_SURFACE_INTERACTIVE_DEFAULT = "--surface-interactive-default"
 export const TOKEN_SURFACE_INTERACTIVE_HOVER = "--surface-interactive-hover" as const;
 export const TOKEN_SURFACE_INTERACTIVE_ACTIVE = "--surface-interactive-active" as const;
 export const TOKEN_SURFACE_INTERACTIVE_DISABLED = "--surface-interactive-disabled" as const;
+export const TOKEN_SURFACE_SELECTED = "--surface-selected" as const;
 export const TOKEN_SURFACE_ACCENT_SUBTLE = "--surface-accent-subtle" as const;
 export const TOKEN_SURFACE_ACCENT_DEFAULT = "--surface-accent-default" as const;
 export const TOKEN_SURFACE_ACCENT_STRONG = "--surface-accent-strong" as const;
@@ -261,6 +262,7 @@ export type SurfaceToken =
   | typeof TOKEN_SURFACE_INTERACTIVE_HOVER
   | typeof TOKEN_SURFACE_INTERACTIVE_ACTIVE
   | typeof TOKEN_SURFACE_INTERACTIVE_DISABLED
+  | typeof TOKEN_SURFACE_SELECTED
   | typeof TOKEN_SURFACE_ACCENT_SUBTLE
   | typeof TOKEN_SURFACE_ACCENT_DEFAULT
   | typeof TOKEN_SURFACE_ACCENT_STRONG