@neuravision/construct 1.3.1 → 2.0.0

package/components/_shared.css

@@ -22,7 +22,7 @@
   --ct-dropdown-min-width: 200px;
   --ct-switch-width: 44px;
   --ct-switch-height: 24px;
-  --ct-tooltip-bg: var(--color-slate-950);
+  --ct-tooltip-bg: var(--color-stone-950);
   --ct-tooltip-color: var(--color-text-inverse);
   --ct-tooltip-radius: var(--radius-sm);
   --ct-tooltip-shadow: var(--shadow-sm);

package/components/app-shell-v2.css

@@ -278,11 +278,11 @@
 /* Tinted sidebar surface — Slack / Linear / Discord aesthetic. */
 
 .ct-app-shell-v2--sidebar-branded > .ct-app-shell-v2__sidebar {
-  --_branded-bg: var(--color-slate-900);
-  --_branded-border: var(--color-slate-700);
-  --_branded-text: var(--color-slate-300);
-  --_branded-text-strong: var(--color-slate-0);
-  --_branded-text-muted: var(--color-slate-100);
+  --_branded-bg: var(--color-stone-900);
+  --_branded-border: var(--color-stone-700);
+  --_branded-text: var(--color-stone-300);
+  --_branded-text-strong: var(--color-stone-0);
+  --_branded-text-muted: var(--color-stone-100);
   --_branded-hover-bg: color-mix(in srgb, var(--_branded-text-strong) 8%, transparent);
   --_branded-active-bg: color-mix(in srgb, var(--_branded-text-strong) 12%, transparent);
   --_branded-badge-bg: color-mix(in srgb, var(--_branded-text-strong) 15%, transparent);
@@ -325,8 +325,8 @@
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item--active .ct-nav-item__badge,
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .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/banner.css

@@ -127,18 +127,18 @@
 .ct-banner.ct-banner--solid {
   --ct-banner-bg: var(--ct-banner-accent);
   --ct-banner-border: var(--ct-banner-accent);
-  color: var(--color-text-inverse);
+  color: var(--color-state-on-solid);
 }
 
 .ct-banner--solid .ct-banner__icon,
 .ct-banner--solid .ct-banner__message,
 .ct-banner--solid .ct-banner__close {
-  color: var(--color-text-inverse);
+  color: var(--color-state-on-solid);
 }
 
 @media (hover: hover) {
   .ct-banner--solid .ct-banner__close:hover {
-    background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
+    background: color-mix(in srgb, var(--color-state-on-solid) 20%, transparent);
   }
 }
 

package/components/button.css

@@ -3,7 +3,7 @@
   --ct-button-bg-hover: var(--color-brand-primary-hover);
   --ct-button-bg-active: var(--color-brand-primary-active);
   --ct-button-border: transparent;
-  --ct-button-color: var(--color-text-inverse);
+  --ct-button-color: var(--color-text-on-primary);
   --ct-button-height: var(--control-height-md);
   --ct-button-padding-x: var(--space-6);
   --ct-button-font-size: var(--font-size-sm);
@@ -83,7 +83,7 @@
   --ct-button-bg-hover: var(--color-brand-accent-hover);
   --ct-button-bg-active: var(--color-brand-accent-active);
   --ct-button-border: transparent;
-  --ct-button-color: var(--color-text-inverse);
+  --ct-button-color: var(--color-brand-on-accent);
 }
 
 .ct-button--danger {
@@ -91,7 +91,7 @@
   --ct-button-bg-hover: color-mix(in srgb, var(--color-state-danger) 85%, black);
   --ct-button-bg-active: color-mix(in srgb, var(--color-state-danger) 70%, black);
   --ct-button-border: transparent;
-  --ct-button-color: var(--color-text-inverse);
+  --ct-button-color: var(--color-state-on-solid);
 }
 
 .ct-button--link {

package/components/card.css

@@ -59,7 +59,7 @@
 }
 
 .ct-card--interactive[aria-selected='true'] {
-  border-color: var(--color-brand-primary);
+  border-color: var(--color-brand-accent);
   box-shadow: var(--shadow-md);
 }
 

package/components/checkbox.css

@@ -46,7 +46,7 @@
   content: '';
   width: 10px;
   height: 6px;
-  border: 2px solid var(--color-text-inverse);
+  border: 2px solid var(--color-brand-on-accent);
   border-block-start: 0;
   border-inline-end: 0;
   transform: rotate(-45deg) scale(0);
@@ -58,15 +58,15 @@
   width: 8px;
   height: 8px;
   border-radius: var(--radius-round);
-  background: var(--color-text-inverse);
+  background: var(--color-brand-on-accent);
   transform: scale(0);
   transition: transform var(--duration-fast) var(--easing-standard);
 }
 
 .ct-check__input:checked,
 .ct-radio__input:checked {
-  background: var(--color-brand-primary);
-  border-color: var(--color-brand-primary);
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
 }
 
 .ct-check__input:checked::before,
@@ -82,13 +82,13 @@
 
   .ct-check__input:checked:not(:disabled):hover,
   .ct-radio__input:checked:not(:disabled):hover {
-    background: var(--color-brand-primary-hover);
-    border-color: var(--color-brand-primary-hover);
+    background: var(--color-brand-accent-hover);
+    border-color: var(--color-brand-accent-hover);
   }
 
   .ct-check__input:indeterminate:not(:disabled):hover {
-    background: var(--color-brand-primary-hover);
-    border-color: var(--color-brand-primary-hover);
+    background: var(--color-brand-accent-hover);
+    border-color: var(--color-brand-accent-hover);
   }
 }
 
@@ -107,14 +107,14 @@
 }
 
 .ct-check__input:indeterminate {
-  background: var(--color-brand-primary);
-  border-color: var(--color-brand-primary);
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
 }
 
 .ct-check__input:indeterminate::before {
   width: 10px;
   height: 0;
-  border-block-start: 2px solid var(--color-text-inverse);
+  border-block-start: 2px solid var(--color-brand-on-accent);
   border-inline-end: 0;
   transform: scale(1);
 }

package/components/chip.css

@@ -78,10 +78,10 @@
 
 .ct-chip[aria-pressed='true'],
 .ct-chip--selected {
-  --ct-chip-bg: var(--color-brand-primary);
-  --ct-chip-border: var(--color-brand-primary);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-bg: var(--color-brand-accent);
+  --ct-chip-border: var(--color-brand-accent);
+  --ct-chip-color: var(--color-brand-on-accent);
+  --ct-chip-accent: var(--color-brand-on-accent);
 }
 
 /* ── Outline variant ─────────────────────────────────────────── */
@@ -92,7 +92,7 @@
 
 .ct-chip--outline[aria-pressed='true'],
 .ct-chip--outline.ct-chip--selected {
-  --ct-chip-bg: var(--color-brand-primary);
+  --ct-chip-bg: var(--color-brand-accent);
 }
 
 /* ── Semantic color variants (Subtle — default) ────────────── */
@@ -160,29 +160,29 @@
 .ct-chip--solid.ct-chip--info {
   --ct-chip-bg: var(--color-state-info);
   --ct-chip-border: var(--color-state-info);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--success {
   --ct-chip-bg: var(--color-state-success-text);
   --ct-chip-border: var(--color-state-success-text);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--warning {
   --ct-chip-bg: var(--color-state-warning-text);
   --ct-chip-border: var(--color-state-warning-text);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--danger {
   --ct-chip-bg: var(--color-state-danger);
   --ct-chip-border: var(--color-state-danger);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 /* ── Disabled state ──────────────────────────────────────────── */

package/components/combobox.css

@@ -180,7 +180,7 @@
 
 .ct-combobox__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/dropdown.css

@@ -94,13 +94,13 @@
 
 .ct-dropdown__item:focus-visible {
   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;
 }
 
 .ct-dropdown__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;
 }
 
@@ -207,7 +207,7 @@
 }
 
 .ct-dropdown__item[aria-checked='true'] .ct-dropdown__item-radio::before {
-  background: var(--color-brand-primary);
+  background: var(--color-brand-accent);
 }
 
 /* ── Label (group header, non-interactive) ───────────────────────── */
@@ -283,7 +283,7 @@
 .ct-dropdown__sub-trigger:focus-visible,
 .ct-dropdown__sub-trigger[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/file-upload.css

@@ -26,7 +26,7 @@
 }
 
 .ct-file-upload__dropzone[data-state='dragover'] {
-  border-color: var(--color-brand-primary);
+  border-color: var(--color-brand-accent);
   background: var(--color-bg-muted);
 }
 

package/components/list.css

@@ -218,8 +218,11 @@
 /* ── Active / Highlighted ── */
 
 .ct-list__item--active,
-.ct-list__item[data-state='active'] {
+.ct-list__item[data-state='active'],
+.ct-list__item[aria-selected='true'] {
   background: var(--ct-list-item-bg-active);
+  /* The datum: an orange leading edge marks the active/selected item. */
+  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent);
 }
 
 .ct-list__item--active .ct-list__item-title,

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.3.1",
+  "version": "2.0.0",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {