@neuravision/construct 1.2.0 → 2.0.0

package/components/navbar.css

@@ -131,7 +131,7 @@
   inset-inline: var(--ct-navbar-item-padding-x);
   inset-block-end: calc(-1 * var(--ct-navbar-item-padding-y));
   height: var(--ct-navbar-item-indicator-size);
-  background: var(--ct-navbar-item-color-active);
+  background: var(--color-brand-accent);
   border-radius: var(--radius-round);
 }
 
@@ -223,7 +223,7 @@
 .ct-navbar__menu-item:focus-visible,
 .ct-navbar__menu-item[data-highlighted] {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 
@@ -493,12 +493,12 @@
 /* ── Dark ──────────────────────────────────────────────────────── */
 
 .ct-navbar--dark {
-  --_dark-bg: var(--color-slate-900);
-  --_dark-bg-hover: var(--color-slate-800);
-  --_dark-border: var(--color-slate-800);
-  --_dark-text: var(--color-slate-300);
+  --_dark-bg: var(--color-stone-900);
+  --_dark-bg-hover: var(--color-stone-800);
+  --_dark-border: var(--color-stone-800);
+  --_dark-text: var(--color-stone-300);
   --_dark-text-strong: var(--color-text-inverse);
-  --_dark-text-muted: var(--color-slate-400);
+  --_dark-text-muted: var(--color-stone-400);
 
   --ct-navbar-bg: var(--_dark-bg);
   --ct-navbar-border-color: var(--_dark-border);
@@ -521,7 +521,7 @@
 }
 
 .ct-navbar--dark .ct-navbar__link[aria-current='page']::after {
-  background: var(--color-brand-primary);
+  background: var(--color-brand-accent);
 }
 
 .ct-navbar--dark .ct-navbar__link-chevron {

package/components/pagination.css

@@ -10,11 +10,11 @@
   --ct-pagination-radius: var(--radius-sm);
   --ct-pagination-bg: var(--color-bg-elevated);
   --ct-pagination-bg-hover: var(--color-bg-muted);
-  --ct-pagination-bg-active: var(--color-brand-primary);
+  --ct-pagination-bg-active: var(--color-brand-accent);
   --ct-pagination-border: var(--color-border-default);
-  --ct-pagination-border-active: var(--color-brand-primary);
+  --ct-pagination-border-active: var(--color-brand-accent);
   --ct-pagination-color: var(--color-text-primary);
-  --ct-pagination-color-active: var(--color-text-inverse);
+  --ct-pagination-color-active: var(--color-brand-on-accent);
   --ct-pagination-color-muted: var(--color-text-muted);
 
   display: flex;

package/components/progress-bar.css

@@ -4,7 +4,7 @@
   --ct-progress-height: 8px;
   --ct-progress-radius: var(--radius-pill);
   --ct-progress-bg: var(--color-bg-muted);
-  --ct-progress-fill: var(--color-brand-primary);
+  --ct-progress-fill: var(--color-brand-accent);
 
   width: 100%;
   height: var(--ct-progress-height);

package/components/select-menu.css

@@ -160,7 +160,7 @@
 
 .ct-select-menu__option[data-highlighted] {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 

package/components/sidebar.css

@@ -150,6 +150,8 @@
   background: var(--color-bg-muted);
   color: var(--color-brand-primary);
   font-weight: var(--font-weight-semibold);
+  /* The datum: an orange leading edge marks the current location. */
+  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent);
 }
 
 .ct-nav-item__icon {
@@ -178,6 +180,6 @@
 
 .ct-nav-item--active .ct-nav-item__badge,
 .ct-nav-item[aria-current='page'] .ct-nav-item__badge {
-  background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  background: var(--color-brand-accent);
+  color: var(--color-brand-on-accent);
 }

package/components/slider.css

@@ -3,11 +3,11 @@
 .ct-slider {
   --ct-slider-track-height: 4px;
   --ct-slider-track-bg: var(--color-bg-muted);
-  --ct-slider-track-fill: var(--color-brand-primary);
+  --ct-slider-track-fill: var(--color-brand-accent);
   --ct-slider-track-radius: var(--radius-pill);
   --ct-slider-thumb-size: 20px;
   --ct-slider-thumb-bg: var(--color-bg-elevated);
-  --ct-slider-thumb-border: var(--color-brand-primary);
+  --ct-slider-thumb-border: var(--color-brand-accent);
   --ct-slider-thumb-shadow: var(--shadow-xs);
 
   display: flex;

package/components/spinner.css

@@ -1,7 +1,7 @@
 .ct-spinner {
   --ct-spinner-size: 24px;
   --ct-spinner-border: 3px;
-  --ct-spinner-color: var(--color-brand-primary);
+  --ct-spinner-color: var(--color-brand-accent);
   --ct-spinner-track: var(--color-border-subtle);
 
   width: var(--ct-spinner-size);

package/components/switch.css

@@ -34,7 +34,7 @@
 }
 
 .ct-switch__input:checked {
-  background: var(--color-brand-primary);
+  background: var(--color-brand-accent);
 }
 
 .ct-switch__input:checked::after {
@@ -47,7 +47,7 @@
   }
 
   .ct-switch__input:checked:not(:disabled):hover {
-    background: var(--color-brand-primary-hover);
+    background: var(--color-brand-accent-hover);
   }
 }
 

package/components/tabs.css

@@ -7,7 +7,7 @@
   --ct-tabs-trigger-font-size: var(--font-size-sm);
   --ct-tabs-trigger-line-height: var(--line-height-sm);
   --ct-tabs-indicator-size: 2px;
-  --ct-tabs-indicator-color: var(--color-brand-primary);
+  --ct-tabs-indicator-color: var(--color-brand-accent);
 
   display: grid;
   gap: var(--ct-tabs-gap);

package/components/toggle-group.css

@@ -9,8 +9,8 @@
   --ct-toggle-group-item-font-size: var(--font-size-sm);
   --ct-toggle-group-item-line-height: var(--line-height-sm);
   --ct-toggle-group-item-color: var(--color-text-secondary);
-  --ct-toggle-group-item-bg-active: var(--color-brand-primary);
-  --ct-toggle-group-item-color-active: var(--color-text-inverse);
+  --ct-toggle-group-item-bg-active: var(--color-brand-accent);
+  --ct-toggle-group-item-color-active: var(--color-brand-on-accent);
   --ct-toggle-group-item-bg-hover: var(--color-bg-muted);
   --ct-toggle-group-item-min-height: var(--control-height-md);
   --ct-toggle-group-gap: 0;

package/components/tree.css

@@ -9,7 +9,7 @@
   --ct-tree-row-radius: var(--radius-sm);
   --ct-tree-row-bg: transparent;
   --ct-tree-row-bg-hover: var(--color-bg-muted);
-  --ct-tree-row-bg-selected: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
+  --ct-tree-row-bg-selected: color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
   --ct-tree-row-color: var(--color-text-primary);
   --ct-tree-row-color-selected: var(--color-brand-primary);
 
@@ -173,7 +173,7 @@
 }
 
 .ct-tree__label mark {
-  background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
   color: inherit;
   border-radius: 2px;
   padding-inline: 1px;

package/docs/guidelines.md

@@ -185,9 +185,9 @@ CSS custom properties cannot be used inside `@media` queries. Use the raw pixel
 
 ## Fonts
 
-- **Default**: Fonts are loaded via Google Fonts in `foundations.css` (Sora, Source Sans 3, JetBrains Mono)
+- **Default**: Fonts are loaded via Google Fonts in `foundations.css` (Manrope for display + body, JetBrains Mono for code/data)
 - **Self-hosting**: For CSP or privacy requirements, replace Google Fonts import with local `@font-face` rules
-- **Weights**: Ensure 400, 500, 600, and 700 are available
+- **Weights**: Ensure 400, 500, 600, 700, and 800 are available
 
 ## Governance
 

package/foundations.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 @import './tokens/tokens.css';
 
 :root {
@@ -186,7 +186,7 @@ button {
 
 ::selection {
   background: var(--color-brand-accent);
-  color: var(--color-text-inverse);
+  color: var(--color-brand-on-accent);
 }
 
 .ct-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/construct",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {