@attrus-ds/core 0.3.1 → 1.0.2

package/README.md

@@ -22,6 +22,8 @@ What's inside:
 npm install @attrus-ds/core
 ```
 
+
+
 ## Usage
 
 ### Import everything

package/dist/css/components/buttons.css

@@ -132,13 +132,13 @@
    4. VARIANTS
    ---------------------------------------------------------------- */
 
-/* PRIMARY — brand-blue solid */
+/* PRIMARY — brand solid */
 .btn-primary {
-  background: var(--color-brand-secondary-500);
-  color: var(--color-foreground-on-solid);
+  background: var(--color-brand-solid);
+  color: var(--color-brand-on-solid);
 }
-.btn-primary:hover  { background: var(--color-brand-secondary-600); }
-.btn-primary:active { background: var(--color-brand-secondary-700); }
+.btn-primary:hover  { background: var(--color-brand-solid-hover); }
+.btn-primary:active { background: var(--color-brand-solid-active); }
 .btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
 
 
@@ -184,8 +184,8 @@
   border-radius: var(--radius-2xs);
   text-decoration: none;
 }
-.btn-link:hover  { color: var(--color-brand-secondary-700); text-decoration: underline; text-underline-offset: 2px; }
-.btn-link:active { color: var(--color-brand-secondary-800); }
+.btn-link:hover  { color: var(--color-brand-text); text-decoration: underline; text-underline-offset: 2px; }
+.btn-link:active { color: var(--color-brand-text-strong); }
 .btn-link:focus-visible { box-shadow: var(--shadow-focus); }
 
 
@@ -223,9 +223,9 @@
 /* INVERSE — white pill on dark/brand surfaces */
 .btn-inverse {
   background: var(--color-pure-white);
-  color: var(--color-brand-secondary-700);
+  color: var(--color-brand-text);
 }
-.btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-secondary-800); }
+.btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-text-strong); }
 .btn-inverse:active { background: var(--color-neutral-150); }
 .btn-inverse:focus-visible { box-shadow: var(--shadow-focus-sky); }
 

package/dist/css/components/cards.css

@@ -12,7 +12,7 @@
   display: block;
   background: var(--color-background-surface);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
+  border-radius: var(--shape-container);
   box-shadow: var(--shadow-xs);
   color: var(--color-foreground-default);
   font-family: var(--font-sans);

package/dist/css/components/inputs.css

@@ -103,7 +103,7 @@
   height: 40px;
   padding: 0 var(--space-4);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border-radius: var(--shape-control);
   background: var(--color-background-surface);
   color: var(--color-foreground-default);
 
@@ -241,7 +241,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   width: 100%;
   height: 40px;
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border-radius: var(--shape-control);
   background: var(--color-background-surface);
   overflow: hidden;
   transition:
@@ -366,7 +366,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   min-height: 40px;
   padding: 5px 8px;
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border-radius: var(--shape-control);
   background: var(--color-background-surface);
   transition:
     border-color var(--transition-fast),
@@ -469,7 +469,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   font-size: var(--fs-xl);
   font-weight: var(--w-semibold);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border-radius: var(--shape-container);
   outline: none;
   background: var(--color-background-surface);
   color: var(--color-foreground-default);
@@ -510,7 +510,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   transition: transform var(--transition-base);
 }
 .switch input { position: absolute; opacity: 0; pointer-events: none; }
-.switch input:checked ~ .switch-track { background: var(--color-brand-secondary-500); }
+.switch input:checked ~ .switch-track { background: var(--color-brand-solid); }
 .switch input:checked ~ .switch-track .switch-thumb { transform: translateX(16px); }
 .switch input:focus-visible ~ .switch-track { box-shadow: var(--shadow-focus); }
 .switch input:disabled ~ .switch-track { opacity: 0.5; cursor: not-allowed; }
@@ -553,13 +553,13 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .check-box svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(0.8); transition: opacity var(--transition-fast), transform var(--transition-fast); }
 .check input:checked ~ .check-box {
-  background: var(--color-brand-secondary-500);
-  border-color: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
+  border-color: var(--color-brand-solid);
 }
 .check input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
 .check input:indeterminate ~ .check-box {
-  background: var(--color-brand-secondary-500);
-  border-color: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
+  border-color: var(--color-brand-solid);
 }
 .check input:indeterminate ~ .check-box::after {
   content: '';
@@ -607,11 +607,11 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   width: 8px;
   height: 8px;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
   transform: scale(0);
   transition: transform var(--transition-fast);
 }
-.radio input:checked ~ .radio-dot { border-color: var(--color-brand-secondary-500); }
+.radio input:checked ~ .radio-dot { border-color: var(--color-brand-solid); }
 .radio input:checked ~ .radio-dot::after { transform: scale(1); }
 .radio input:focus-visible ~ .radio-dot { box-shadow: var(--shadow-focus); }
 .radio input:disabled ~ .radio-dot { opacity: 0.5; cursor: not-allowed; }
@@ -629,7 +629,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   height: 40px;
   padding: 0 var(--space-4);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border-radius: var(--shape-control);
   background: var(--color-background-surface);
   color: var(--color-foreground-default);
   font-family: var(--font-sans);
@@ -739,7 +739,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   cursor: pointer;
   transition: color var(--transition-fast);
 }
-.file-list-action:hover { color: var(--color-brand-secondary-700); }
+.file-list-action:hover { color: var(--color-brand-text); }
 
 .file-rows {
   list-style: none;
@@ -771,9 +771,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   color: var(--color-foreground-muted);
 }
 .file-icon[data-kind="pdf"]   { background: color-mix(in srgb, var(--color-danger-500) 8%, var(--color-background-surface)); color: var(--color-feedback-danger-foreground); }
-.file-icon[data-kind="img"]   { background: color-mix(in srgb, var(--color-brand-secondary-500) 8%, var(--color-background-surface));   color: var(--color-brand-secondary-700); }
+.file-icon[data-kind="img"]   { background: color-mix(in srgb, var(--color-brand-solid) 8%, var(--color-background-surface));   color: var(--color-brand-text); }
 .file-icon[data-kind="csv"]   { background: color-mix(in srgb, var(--color-success-500) 8%, var(--color-background-surface)); color: var(--color-feedback-success-foreground); }
-.file-icon[data-kind="doc"]   { background: color-mix(in srgb, var(--color-brand-secondary-500) 10%, var(--color-background-surface));  color: var(--color-brand-secondary-700); }
+.file-icon[data-kind="doc"]   { background: color-mix(in srgb, var(--color-brand-solid) 10%, var(--color-background-surface));  color: var(--color-brand-text); }
 
 .file-icon-tag {
   position: absolute;
@@ -823,7 +823,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .file-progress > span {
   display: block;
   height: 100%;
-  background: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
   border-radius: inherit;
   transition: width var(--transition-fast);
 }
@@ -842,7 +842,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   white-space: nowrap;
 }
 .file-status.ok      { color: var(--color-feedback-success-foreground); background: var(--color-feedback-success-background); }
-.file-status.pending { color: var(--color-brand-secondary-700);   background: color-mix(in srgb, var(--color-brand-secondary-500) 10%, transparent); }
+.file-status.pending { color: var(--color-brand-text);   background: var(--color-brand-subtle); }
 .file-status.err     { color: var(--color-feedback-danger-foreground);  background: var(--color-feedback-danger-background); cursor: pointer; }
 
 .file-remove {
@@ -889,7 +889,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   width: 18px;
   height: 18px;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
   border: 2px solid var(--color-pure-white);
   box-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow-tint) 22%, transparent);
   margin-top: -7px;
@@ -899,7 +899,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   width: 18px;
   height: 18px;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
   border: 2px solid var(--color-pure-white);
   box-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow-tint) 22%, transparent);
 }

package/dist/css/components/tabs.css

@@ -57,7 +57,7 @@
   right: var(--space-3);
   bottom: 0;
   height: 2px;
-  background: var(--color-brand-accent-500);
+  background: var(--color-accent-solid);
   border-radius: var(--radius-xs) var(--radius-xs) 0 0;
 }
 .tab:focus-visible {
@@ -83,7 +83,7 @@
 }
 .tab[aria-selected="true"] .tab-count,
 .tab.is-active .tab-count {
-  background: color-mix(in srgb, var(--color-brand-accent-500) 16%, transparent);
+  background: var(--color-accent-subtle);
   color: var(--color-foreground-accent);
 }
 
@@ -234,7 +234,7 @@
   height: 2px;
   width: var(--ind-w, 0);
   transform: translateX(var(--ind-x, 0));
-  background: var(--color-brand-accent-500);
+  background: var(--color-accent-solid);
   border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   pointer-events: none;
   transition: transform var(--duration-base) var(--ease-emphasis),

package/dist/css/tokens.css

@@ -160,7 +160,32 @@
   --color-background-sunken:      var(--color-neutral-100);         /* inputs, wells */
   --color-background-hover:       var(--color-neutral-100);
   --color-background-press:       var(--color-neutral-150);
-  --color-background-selected:    var(--color-brand-secondary-50);
+  --color-background-selected:    var(--color-brand-subtle-solid);  /* product-aware via brand-subtle-solid (dark theme overrides below) */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     THEMING SURFACE — product axis (semantic brand/accent tokens)
+     ─────────────────────────────────────────────────────────────────────────
+     A product theme (`[data-product="…"]`) redefines ONLY this short set; every
+     component fill, text and tint reads from these, so swapping them reskins the
+     whole catalog with no per-component edits. Primer/Spectrum-style aliasing.
+
+     The two axes stay orthogonal:
+       • PRODUCT axis → matiz: this set + the brand/accent scales, logo, hero grad.
+       • THEME axis (light/dark) → surface ramp + tint intensity. NEVER matiz.
+
+     Brand = institutional / primary action. */
+  --color-brand-solid:        var(--color-brand-primary-500);  /* Enterprise primary — ATTRUS Navy #002142 (buttons, avatars, toggles, badges, hero) */
+  --color-brand-solid-hover:  color-mix(in srgb, var(--color-pure-white) 12%, var(--color-brand-primary-500));  /* navy is near-ink → states LIGHTEN */
+  --color-brand-solid-active: color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-brand-primary-500));
+  --color-brand-text:         var(--color-brand-primary-500);  /* navy as text — 15:1 on white */
+  --color-brand-text-strong:  var(--color-brand-primary-700);  /* brand text pressed/emphasis */
+  --color-brand-subtle:       color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);  /* tints: brand chips, selected, tags */
+  --color-brand-subtle-solid: var(--color-brand-primary-50);   /* opaque light brand tint: brand avatars, selected-row base */
+  --color-brand-border:       var(--color-brand-primary-200);  /* light brand border: selected filter chips */
+  --color-brand-on-solid:     var(--color-foreground-on-solid);  /* text/icon on --color-brand-solid */
+  /* Accent = interactive / wayfinding (Sky). accent text = --color-foreground-accent. */
+  --color-accent-solid:       var(--color-brand-accent-500);   /* tab/active indicator, focus ring */
+  --color-accent-subtle:      color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);  /* counts, pagination, accent chips */
 
   /* ─────────────────────────────────────────────────────────────────────────
      INVERSE LAYER — contextual contrast surface, NOT dark theme
@@ -185,9 +210,9 @@
        ✗ Mixing inverse and surface tokens in the same component without intent
        ✗ Hard-coding #0B1230 / white instead of inverse tokens
      ───────────────────────────────────────────────────────────────────────── */
-  --color-background-inverse:          var(--color-ink-base);
-  --color-background-inverse-surface:  var(--color-ink-raised);
-  --color-background-inverse-subtle:   var(--color-ink-deep);
+  --color-background-inverse:          color-mix(in srgb, var(--color-brand-solid) 16%, var(--color-ink-base));      /* product-tinted dark panel */
+  --color-background-inverse-surface:  color-mix(in srgb, var(--color-brand-solid) 20%, var(--color-ink-raised));
+  --color-background-inverse-subtle:   color-mix(in srgb, var(--color-brand-solid) 12%, var(--color-ink-deep));
   --color-background-inverse-hover:    var(--color-ink-hover);
 
   /* Scrim — modal/drawer/sheet backdrop. Same in light and dark themes.
@@ -197,8 +222,8 @@
   --color-scrim:                       rgba(10, 15, 31, 0.32);
   --scrim-blur:                        6px;
   --color-background-inverse-press:    color-mix(in srgb, var(--color-ink-hover) 70%, var(--color-pure-white));
-  --color-background-inverse-selected: color-mix(in srgb, var(--color-brand-secondary-500) 22%, var(--color-ink-base));
-  --color-background-inverse-brand:    var(--color-brand-primary-500);   /* CTA / hero with brand weight — Navy */
+  --color-background-inverse-selected: color-mix(in srgb, var(--color-brand-solid) 22%, var(--color-ink-base));
+  --color-background-inverse-brand:    var(--color-brand-solid);   /* CTA / hero with brand weight — follows product */
 
   /* Foreground (text + icons) on LIGHT surfaces */
   --color-foreground-default:     var(--color-neutral-800);   /* primary copy / headings */
@@ -224,8 +249,8 @@
   --color-border-subtle:    var(--color-neutral-100);
   --color-border-default:   var(--color-neutral-150);
   --color-border-strong:    var(--color-neutral-200);
-  --color-border-focus:     var(--color-brand-accent-500);
-  --color-border-accent:    var(--color-brand-accent-500);
+  --color-border-focus:     var(--color-accent-solid);   /* per-theme accent (Sky default) — follows the product's accent */
+  --color-border-accent:    var(--color-accent-solid);
   --color-border-success:   var(--color-success-500);
   --color-border-warning:   var(--color-warning-500);
   --color-border-danger:    var(--color-danger-500);
@@ -279,11 +304,26 @@
    ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
    ============================================================ */
 
+/* Brand gradients — DERIVED from --color-brand-solid so they follow the
+   active product automatically (Enterprise Navy / Business Blue / …). The
+   var() resolves at use-site, so an element under [data-product] recomputes
+   these with that product's primary — no per-product override needed.
+   --grad-brand tips into the shared Sky accent. */
 :root {
-  --grad-brand:       linear-gradient(135deg, #001A4D 0%, #003399 50%, #3399FF 100%);
-  --grad-brand-soft:  linear-gradient(135deg, #002A80 0%, #003399 100%);
-  --grad-ink:         linear-gradient(160deg, #0B1230 0%, #001A4D 55%, #002A80 100%);
-  --grad-hero:        linear-gradient(180deg, #001133 0%, #003399 100%);
+  --grad-brand:       linear-gradient(135deg,
+                        color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 0%,
+                        var(--color-brand-solid) 55%,
+                        var(--color-accent-solid) 100%);
+  --grad-brand-soft:  linear-gradient(135deg,
+                        var(--color-brand-solid) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 20%, var(--color-brand-solid)) 100%);
+  --grad-ink:         linear-gradient(160deg,
+                        color-mix(in srgb, var(--color-pure-black) 68%, var(--color-brand-solid)) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 55%,
+                        color-mix(in srgb, var(--color-pure-black) 25%, var(--color-brand-solid)) 100%);
+  --grad-hero:        linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-pure-black) 52%, var(--color-brand-solid)) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 18%, var(--color-brand-solid)) 100%);
   --grad-sheen:       linear-gradient(120deg,
                         color-mix(in srgb, var(--color-pure-white) 14%, transparent) 0%,
                         color-mix(in srgb, var(--color-pure-white)  0%, transparent) 40%,
@@ -293,8 +333,8 @@
                         color-mix(in srgb, var(--color-pure-white) 65%, transparent) 0%,
                         color-mix(in srgb, var(--color-pure-white)  0%, transparent) 100%);
   --grad-radial-glow: radial-gradient(1200px 500px at 20% -10%,
-                        color-mix(in srgb, var(--color-brand-accent-500) 25%, transparent) 0%,
-                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 60%);
+                        color-mix(in srgb, var(--color-accent-solid) 25%, transparent) 0%,
+                        color-mix(in srgb, var(--color-accent-solid)  0%, transparent) 60%);
   --grad-data-pos:    linear-gradient(180deg,
                         color-mix(in srgb, var(--color-success-500) 35%, transparent) 0%,
                         color-mix(in srgb, var(--color-success-500)  0%, transparent) 100%);
@@ -412,7 +452,7 @@
                 0 32px 80px color-mix(in srgb, var(--color-shadow-tint) 18%, transparent);
   --shadow-2xl: 0 24px 48px color-mix(in srgb, var(--color-shadow-tint) 14%, transparent),
                 0 48px 120px color-mix(in srgb, var(--color-shadow-tint) 24%, transparent); /* deepest — modals, drawers, floating overlays above scrim */
-  --shadow-focus:         0 0 0 4px color-mix(in srgb, var(--color-brand-accent-500)     22%, transparent);
+  --shadow-focus:         0 0 0 4px color-mix(in srgb, var(--color-accent-solid)     22%, transparent);   /* per-theme accent */
   --shadow-focus-sky:     0 0 0 4px color-mix(in srgb, var(--color-brand-accent-500)     25%, transparent);
   --shadow-focus-success: 0 0 0 4px color-mix(in srgb, var(--color-success-500) 22%, transparent);
   --shadow-focus-warning: 0 0 0 4px color-mix(in srgb, var(--color-warning-500) 22%, transparent);
@@ -586,10 +626,17 @@
   --color-background-press:    color-mix(in srgb, var(--color-pure-white) 10%, var(--color-ink-raised));
   --color-background-selected: var(--color-background-inverse-selected);
 
+  /* Enterprise primary is Navy (#002142) — near-ink, so it vanishes as a solid
+     fill on the dark canvas. Lift it to a visible deep-blue in dark (Business,
+     via [data-product=business], re-asserts its own #1F6FD6 and wins by order). */
+  --color-brand-solid:        var(--color-brand-primary-400);  /* #2F4F75 — reads on ink */
+  --color-brand-solid-hover:  var(--color-brand-primary-300);  /* #5F7596 */
+  --color-brand-solid-active: var(--color-brand-primary-500);  /* settles to navy */
+
   /* Inverse layer — stays distinct: a brand-tinted dark, lifted off the ambient ink */
-  --color-background-inverse:         color-mix(in srgb, var(--color-brand-primary-500) 24%, var(--color-ink-base));
-  --color-background-inverse-surface: color-mix(in srgb, var(--color-brand-primary-500) 30%, var(--color-ink-raised));
-  --color-background-inverse-subtle:  color-mix(in srgb, var(--color-brand-primary-500) 18%, var(--color-ink-deep));
+  --color-background-inverse:         color-mix(in srgb, var(--color-brand-solid) 24%, var(--color-ink-base));
+  --color-background-inverse-surface: color-mix(in srgb, var(--color-brand-solid) 30%, var(--color-ink-raised));
+  --color-background-inverse-subtle:  color-mix(in srgb, var(--color-brand-solid) 18%, var(--color-ink-deep));
 
   /* Foreground — light on dark */
   --color-foreground-default:     var(--color-neutral-50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attrus-ds/core",
-  "version": "0.3.1",
+  "version": "1.0.2",
   "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets, fonts and an optional typed React component layer.",
   "keywords": [
     "design-system",
@@ -38,6 +38,8 @@
     "./fonts.css": "./dist/css/fonts.css",
     "./tokens.json": "./dist/tokens/attrus-tokens.json",
     "./tokens.flat.json": "./dist/tokens/attrus-tokens.flat.json",
+    "./themes": "./dist/css/themes/index.css",
+    "./themes/*": "./dist/css/themes/*",
     "./components/*": "./dist/css/components/*",
     "./react": "./dist/react/index.ts",
     "./react/*": "./dist/react/*",