@loworbitstudio/visor-core 0.5.0 → 0.6.0

package/dist/index.css

@@ -5,4 +5,6 @@
    ============================================ */
 
 /* Full design token bundle */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
+
 @import './tokens.css';

package/dist/primitives.css

@@ -3,7 +3,9 @@
    Generated by @loworbitstudio/visor-core
    DO NOT EDIT — run `npm run build` to regenerate
    ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-primitives {
 /* --- Primitive: Colors --- */
 :root {
   --color-neutral-50: #f9fafb;
@@ -116,6 +118,7 @@
 
 /* --- Primitive: Font Sizes --- */
 :root {
+  --font-size-2xs: 0.6875rem; /* 11px */
   --font-size-xs: 0.75rem; /* 12px */
   --font-size-sm: 0.875rem; /* 14px */
   --font-size-base: 1rem; /* 16px */
@@ -214,3 +217,4 @@
   --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);
 }
+}

package/dist/semantic.css

@@ -3,7 +3,9 @@
    Generated by @loworbitstudio/visor-core
    DO NOT EDIT — run `npm run build` to regenerate
    ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-semantic {
 /* --- Semantic: Text --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -45,6 +47,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -169,3 +176,4 @@
   --sidebar-ring: var(--color-primary-500);
   --sidebar-text-muted: var(--color-neutral-500);
 }
+}

package/dist/themes/blackout.css

@@ -1,4 +1,6 @@
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* ── Section 1: Shared tokens (mode-independent) ── */
 
 /* --- Primitive: Colors --- */
@@ -219,6 +221,11 @@
   --surface-error-default: #ef4444;
   --surface-info-subtle: #001d2e;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #090909;
+  --surface-elev-1: #1b1b1b;
+  --surface-elev-2: #2e2e2e;
+  --surface-elev-3: #424242;
+  --surface-elev-4: #555555;
 }
 
 
@@ -299,6 +306,11 @@
     --surface-error-default: #ef4444;
     --surface-info-subtle: #001d2e;
     --surface-info-default: #0ea5e9;
+    --surface-elev-0: #090909;
+    --surface-elev-1: #1b1b1b;
+    --surface-elev-2: #2e2e2e;
+    --surface-elev-3: #424242;
+    --surface-elev-4: #555555;
   }
 }
 
@@ -383,6 +395,11 @@ html:not(.dark) .blackout-theme {
   --surface-error-default: #ef4444;
   --surface-info-subtle: #ecf7ff;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #ffffff;
+  --surface-elev-1: #f5f5f5;
+  --surface-elev-2: #f1f1f1;
+  --surface-elev-3: #eaeaea;
+  --surface-elev-4: #e0e0e0;
 }
 
 
@@ -459,4 +476,4 @@ html:not(.dark) .blackout-theme {
   --color-fd-popover-foreground: rgba(255, 255, 255, 0.75);
   --color-fd-ring: #666666;
 }
-
+}

package/dist/themes/dark.css

@@ -3,7 +3,9 @@
    Generated by @loworbitstudio/visor-core
    DO NOT EDIT — run `npm run build` to regenerate
    ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* --- Adaptive: Text (dark) — manual toggle --- */
 .dark,
 .theme-dark,
@@ -49,6 +51,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -183,6 +190,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 }
 
@@ -272,3 +284,4 @@
   --sidebar-text-muted: var(--color-neutral-400);
 }
 }
+}

package/dist/themes/light.css

@@ -3,7 +3,9 @@
    Generated by @loworbitstudio/visor-core
    DO NOT EDIT — run `npm run build` to regenerate
    ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* --- Adaptive: Text (light) --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -45,6 +47,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-white);
+  --surface-elev-1: var(--color-neutral-50);
+  --surface-elev-2: var(--color-neutral-100);
+  --surface-elev-3: var(--color-neutral-200);
+  --surface-elev-4: var(--color-neutral-300);
 }
 
 
@@ -121,3 +128,4 @@
   --sidebar-ring: var(--color-primary-500);
   --sidebar-text-muted: var(--color-neutral-500);
 }
+}

package/dist/themes/modern-minimal.css

@@ -14,7 +14,9 @@
   font-display: swap;
 }
 
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* ── Section 1: Shared tokens (mode-independent) ── */
 
 /* --- Primitive: Colors --- */
@@ -251,6 +253,11 @@
   --surface-error-default: #ef4444;
   --surface-info-subtle: #001d2e;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #07090e;
+  --surface-elev-1: #171b22;
+  --surface-elev-2: #292e38;
+  --surface-elev-3: #3d424d;
+  --surface-elev-4: #505561;
 }
 
 
@@ -331,6 +338,11 @@
     --surface-error-default: #ef4444;
     --surface-info-subtle: #001d2e;
     --surface-info-default: #0ea5e9;
+    --surface-elev-0: #07090e;
+    --surface-elev-1: #171b22;
+    --surface-elev-2: #292e38;
+    --surface-elev-3: #3d424d;
+    --surface-elev-4: #505561;
   }
 }
 
@@ -433,6 +445,11 @@ html:not(.dark) .modern-minimal-theme {
   --surface-error-default: #ef4444;
   --surface-info-subtle: #ecf7ff;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #ffffff;
+  --surface-elev-1: #f4f5f7;
+  --surface-elev-2: #f0f2f6;
+  --surface-elev-3: #eaeef5;
+  --surface-elev-4: #e2e8f3;
 }
 
 
@@ -509,4 +526,4 @@ html:not(.dark) .modern-minimal-theme {
   --color-fd-popover-foreground: rgba(0, 0, 0, 0.9);
   --color-fd-ring: #04bf81;
 }
-
+}

package/dist/themes/neutral.css

@@ -1,4 +1,6 @@
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* ── Section 1: Shared tokens (mode-independent) ── */
 
 /* --- Primitive: Colors --- */
@@ -219,6 +221,11 @@
   --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;
 }
 
 
@@ -299,6 +306,11 @@
     --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;
   }
 }
 
@@ -383,6 +395,11 @@ html:not(.dark) .neutral-theme {
   --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;
 }
 
 
@@ -459,4 +476,4 @@ html:not(.dark) .neutral-theme {
   --color-fd-popover-foreground: #18181b;
   --color-fd-ring: #1798ad;
 }
-
+}

package/dist/themes/space.css

@@ -1,4 +1,6 @@
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
+@layer visor-adaptive {
 /* ── Section 1: Shared tokens (mode-independent) ── */
 
 /* --- Primitive: Colors --- */
@@ -219,6 +221,11 @@
   --surface-error-default: #ef4444;
   --surface-info-subtle: #001d2e;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #080810;
+  --surface-elev-1: #191924;
+  --surface-elev-2: #2d2d38;
+  --surface-elev-3: #41414d;
+  --surface-elev-4: #545460;
 }
 
 
@@ -299,6 +306,11 @@
     --surface-error-default: #ef4444;
     --surface-info-subtle: #001d2e;
     --surface-info-default: #0ea5e9;
+    --surface-elev-0: #080810;
+    --surface-elev-1: #191924;
+    --surface-elev-2: #2d2d38;
+    --surface-elev-3: #41414d;
+    --surface-elev-4: #545460;
   }
 }
 
@@ -383,6 +395,11 @@ html:not(.dark) .space-theme {
   --surface-error-default: #ef4444;
   --surface-info-subtle: #ecf7ff;
   --surface-info-default: #0ea5e9;
+  --surface-elev-0: #ffffff;
+  --surface-elev-1: #f5f5f8;
+  --surface-elev-2: #f1f1f8;
+  --surface-elev-3: #ecedf8;
+  --surface-elev-4: #e5e6f5;
 }
 
 
@@ -459,4 +476,4 @@ html:not(.dark) .space-theme {
   --color-fd-popover-foreground: #1a1630;
   --color-fd-ring: #5b6fff;
 }
-
+}

package/dist/tokens.css

@@ -5,10 +5,12 @@
    ============================================ */
 
 /* Import order: primitives → semantic → adaptive */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
 /* ============================================
-   Tier 1: Primitives
+   Tier 1: Primitives → @layer visor-primitives
    ============================================ */
+@layer visor-primitives {
 /* --- Primitive: Colors --- */
 :root {
   --color-neutral-50: #f9fafb;
@@ -121,6 +123,7 @@
 
 /* --- Primitive: Font Sizes --- */
 :root {
+  --font-size-2xs: 0.6875rem; /* 11px */
   --font-size-xs: 0.75rem; /* 12px */
   --font-size-sm: 0.875rem; /* 14px */
   --font-size-base: 1rem; /* 16px */
@@ -219,10 +222,12 @@
   --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);
 }
+}
 
 /* ============================================
-   Tier 2: Semantic
+   Tier 2: Semantic → @layer visor-semantic
    ============================================ */
+@layer visor-semantic {
 /* --- Semantic: Text --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -264,6 +269,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -388,10 +398,12 @@
   --sidebar-ring: var(--color-primary-500);
   --sidebar-text-muted: var(--color-neutral-500);
 }
+}
 
 /* ============================================
-   Tier 3: Adaptive — Light Theme (:root)
+   Tier 3: Adaptive — Light + Dark → @layer visor-adaptive
    ============================================ */
+@layer visor-adaptive {
 /* --- Adaptive: Text (light) --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -433,6 +445,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-white);
+  --surface-elev-1: var(--color-neutral-50);
+  --surface-elev-2: var(--color-neutral-100);
+  --surface-elev-3: var(--color-neutral-200);
+  --surface-elev-4: var(--color-neutral-300);
 }
 
 
@@ -510,10 +527,8 @@
   --sidebar-text-muted: var(--color-neutral-500);
 }
 
-/* ============================================
-   Tier 3: Adaptive — Dark Theme (.dark, .theme-dark, [data-theme="dark"])
-   and @media (prefers-color-scheme: dark)
-   ============================================ */
+
+
 /* --- Adaptive: Text (dark) — manual toggle --- */
 .dark,
 .theme-dark,
@@ -559,6 +574,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -693,6 +713,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 }
 
@@ -782,7 +807,7 @@
   --sidebar-text-muted: var(--color-neutral-400);
 }
 }
-
+}
 /* ============================================
    Global: Motion Safety
    ============================================ */

package/dist/utilities.css

@@ -0,0 +1,23 @@
+/* ============================================
+   Visor Design Tokens — Utilities
+   Generated by @loworbitstudio/visor-core
+   DO NOT EDIT — run `npm run build` to regenerate
+   ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
+
+@layer visor-adaptive {
+/* --- Typography Utilities --- */
+.eyebrow {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.label-tiny {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor-core",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Design tokens for the Visor design system — CSS custom properties for theming.",
   "type": "module",
   "main": "./dist/index.css",
@@ -16,7 +16,8 @@
     "./themes/modern-minimal": "./dist/themes/modern-minimal.css",
     "./themes/neutral": "./dist/themes/neutral.css",
     "./themes/space": "./dist/themes/space.css",
-    "./types": "./src/types.ts"
+    "./types": "./src/types.ts",
+    "./utilities": "./dist/utilities.css"
   },
   "scripts": {
     "build": "tsx src/generate/generate-css.ts",