@attrus-ds/core 0.1.0 → 0.1.1

package/README.md

@@ -108,8 +108,26 @@ for additive changes, `major` for breaking token/API changes.
 
 ## Local development
 
+Source lives under `src/`, organized by concern:
+
+```
+src/
+├── index.css            # dev entry — fonts + tokens + typography + components
+├── tokens/              # design tokens, split by concern (3-layer architecture)
+│   ├── index.css        #   barrel (cascade order)
+│   ├── palette.css      #   layer 1 — raw, theme-agnostic primitives
+│   ├── color-semantic.css #  layer 2 — semantic color roles (components consume these)
+│   ├── gradients.css · data-viz.css · glass.css
+│   ├── radius.css · elevation.css · spacing.css · iconography.css · motion.css
+│   ├── typography.css   #   type scale / weights / line-height / tracking tokens
+│   └── theme-dark.css   #   [data-theme="dark"] semantic overrides
+├── typography/index.css # ready-to-use type classes + text utilities
+└── components/          # one stylesheet per component domain (+ index.css barrel)
+```
+
 The published artifact is assembled into `dist/` by a dependency-free Node
-script from the source files at the repo root:
+script (`scripts/build.mjs`). The token partials are concatenated into a single
+`dist/css/tokens.css`, so consumer import paths are unchanged.
 
 ```bash
 npm install

package/dist/css/tokens.css

@@ -1,19 +1,14 @@
+/* @attrus/cabiros — design tokens + type classes (concatenated).
+   Generated by scripts/build.mjs from src/tokens/ and src/typography/. */
+
 /* ============================================================
-   CABIROS — ATTRUS Design System
-   colors_and_type.css
-   ----
-   Sober, serious, professional. Dashboards for financial
-   operations across LATAM. Cool bluish grays. Deep navy.
-   Primary brand blue. Liquid-glass-friendly translucency.
+   ATTRUS / Cabiros — BASE PALETTE (raw color tokens)
+   The primitive layer. Theme-agnostic. Referenced only by the
+   semantic layer (color-semantic.css) and effect layers — never
+   consumed directly by components.
    ============================================================ */
 
-/* ---------- Webfont: Lato ---------- */
-
 :root {
-  /* ============================================================
-     1.  BASE PALETTE  —  raw color tokens
-     ============================================================ */
-
   /* --- Brand (from manual: Lato + 4 HEX stops) --- */
   --brand-attrus-ink:        #0F0F1A;   /* almost-black, blue-tinted */
   --brand-attrus-navy:       #002142;   /* deep navy */
@@ -146,13 +141,17 @@
   --color-info-700: #144B8C;
   --color-info-800: #0D3A6E;
   --color-info-900: #072951;
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SEMANTIC COLOR TOKENS
+   Reference the base palette (palette.css). This is the layer
+   components consume.
+   Roles: default | secondary | muted | accent | placeholder
+   Contexts: fg (text/icon), bg (surface), br (border)
+   ============================================================ */
 
-  /* ============================================================
-     2.  SEMANTIC TOKENS — reference the base palette
-     Roles: default | secondary | muted | accent | placeholder
-     Contexts: fg (text/icon), bg (surface), br (border)
-     ============================================================ */
-
+:root {
   /* Default (light) theme — the 60% whites/light grays */
   --color-background-canvas:      var(--color-neutral-25);          /* app background */
   --color-background-surface:     var(--color-neutral-0);           /* card / container */
@@ -274,10 +273,13 @@
   --color-feedback-danger-foreground-on-inverse-muted:  color-mix(in srgb, var(--color-danger-100)  70%, var(--color-foreground-inverse-muted));
   --color-feedback-info-foreground-on-inverse:          var(--color-info-100);
   --color-feedback-info-foreground-on-inverse-muted:    color-mix(in srgb, var(--color-info-100)    70%, var(--color-foreground-inverse-muted));
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
+   ============================================================ */
 
-  /* ============================================================
-     3.  GRADIENTS  —  primary brand + layers
-     ============================================================ */
+: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%);
@@ -302,16 +304,19 @@
   --grad-data-brand:  linear-gradient(180deg,
                         color-mix(in srgb, var(--color-brand-accent-500) 30%, transparent) 0%,
                         color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — DATA VISUALIZATION (chart palettes & structure)
+   Categorical = qualitative series (distinct, on-brand, cool).
+   Sequential  = single-hue magnitude ramp (Sky).
+   Diverging   = danger ← neutral → success (variance/heatmap).
+   Structure   = grid / axis / track / reference (semantic → theme).
+   Categorical gets dark-theme overrides (lift the dark hues, in
+   theme-dark.css); ramps + structure follow semantic tokens.
+   ============================================================ */
 
-  /* ============================================================
-     3b.  DATA VISUALIZATION  —  chart palettes & structure
-     Categorical = qualitative series (distinct, on-brand, cool).
-     Sequential  = single-hue magnitude ramp (Sky).
-     Diverging   = danger ← neutral → success (variance/heatmap).
-     Structure   = grid / axis / track / reference (semantic → theme).
-     Categorical gets dark-theme overrides (lift the dark hues);
-     ramps + structure follow semantic tokens automatically.
-     ============================================================ */
+:root {
   /* Categorical — order chosen for max adjacent contrast */
   --dataviz-cat-1: #003399;  /* Royal — brand-anchored series 1 */
   --dataviz-cat-2: #3399FF;  /* Sky */
@@ -350,11 +355,14 @@
   --dataviz-axis-label:  var(--color-foreground-muted);  /* tick labels */
   --dataviz-track:       var(--color-background-subtle);  /* empty bar / gauge track */
   --dataviz-reference:   var(--color-foreground-muted);   /* dashed target/avg line */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — LIQUID GLASS (transparent / frosted layers)
+   Use with backdrop-filter: blur().
+   ============================================================ */
 
-  /* ============================================================
-     4.  LIQUID GLASS  —  transparent / frosted layers
-     Use with backdrop-filter: blur().
-     ============================================================ */
+:root {
   --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
   --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
   --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
@@ -367,10 +375,14 @@
   --glass-blur-lg:   saturate(160%) blur(28px);
   --glass-border:      1px solid color-mix(in srgb, var(--color-pure-white) 45%, transparent);
   --glass-border-dark: 1px solid color-mix(in srgb, var(--color-pure-white) 10%, transparent);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — RADII
+   Mostly softly rounded; buttons fully rounded.
+   ============================================================ */
 
-  /* ============================================================
-     5.  RADII  —  mostly softly rounded; buttons fully rounded
-     ============================================================ */
+:root {
   --radius-2xs: 2px;   /* never-square minimum — tiny chips, ticks, dividers */
   --radius-xs: 4px;
   --radius-sm: 6px;
@@ -382,10 +394,13 @@
   --radius-xl: 20px;   /* hero / large panels */
   --radius-2xl: 28px;
   --radius-pill: 999px; /* BUTTONS — fully rounded */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SHADOWS (soft, blue-tinted, multi-layer)
+   ============================================================ */
 
-  /* ============================================================
-     6.  SHADOWS  —  soft, blue-tinted, multi-layer
-     ============================================================ */
+:root {
   --shadow-xs:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 5%, transparent);
   --shadow-sm:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
                 0 2px 6px color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
@@ -427,10 +442,14 @@
                   0 10px 30px color-mix(in srgb, var(--color-shadow-tint) 12%, transparent);
   --shadow-glass-dark: 0 1px 0 color-mix(in srgb, var(--color-pure-white)  8%, transparent) inset,
                        0 10px 40px color-mix(in srgb, var(--color-pure-black) 35%, transparent);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SPACING
+   4px base; dense, data-heavy layouts.
+   ============================================================ */
 
-  /* ============================================================
-     7.  SPACING  —  4px base; dense, data-heavy layouts
-     ============================================================ */
+:root {
   --space-0:   0;
   --space-1:   2px;
   --space-2:   4px;
@@ -448,10 +467,13 @@
   --space-12:  64px;
   --space-14:  80px;
   --space-16:  96px;
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — ICONOGRAPHY (Lucide; sized to pair with type scale)
+   ============================================================ */
 
-  /* ============================================================
-     7b. ICONOGRAPHY  —  Lucide; sized to pair with type scale
-     ============================================================ */
+:root {
   --icon-xs: 12px;  /* helper text, micro caption          (paired w/ 11–12px text) */
   --icon-sm: 14px;  /* input affix, dense inline           (paired w/ 13px text) */
   --icon-md: 16px;  /* default — buttons, nav, body        (paired w/ 14px text) */
@@ -462,10 +484,13 @@
   --icon-stroke:      1.75;  /* default — slightly bolder than 1.5, calmer than 2 */
   --icon-stroke-bold: 2;     /* close buttons, X marks, indicators where weight matters */
   --icon-stroke-thin: 1.5;   /* decorative / large hero icons where 1.75 looks heavy */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — MOTION (durations + easings for transitions/animations)
+   ============================================================ */
 
-  /* ============================================================
-     7c. MOTION  —  durations + easings for transitions/animations
-     ============================================================ */
+:root {
   /* Easing — single curve across the system; "out-expo-ish" for snappy UI */
   --ease-standard: cubic-bezier(.2, .8, .2, 1);
   --ease-emphasis: cubic-bezier(.2, .9, .15, 1);   /* slightly more overshoot — for entries */
@@ -483,10 +508,15 @@
   --transition-fast:  140ms var(--ease-standard);   /* default for buttons/inputs */
   --transition-base:  200ms var(--ease-standard);
   --transition-slow:  320ms var(--ease-standard);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — TYPOGRAPHY TOKENS (Lato family per brand manual)
+   Font families, weights, type scale, line heights, letter spacing.
+   Ready-to-use type CLASSES live in ../typography/index.css.
+   ============================================================ */
 
-  /* ============================================================
-     8.  TYPOGRAPHY  —  Lato family per brand manual
-     ============================================================ */
+:root {
   --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
   --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -529,18 +559,20 @@
   --ls-body:    0em;      /* <16px body */
   --ls-label:   0.02em;   /* small caps / labels */
   --ls-caps:    0.08em;
-}
-
+}
+
 /* ============================================================
-   DARK THEME  —  [data-theme="dark"] remaps the AMBIENT semantic
-   tokens to a dark ink ramp. Components consume semantic tokens,
-   so they flip automatically — no per-component dark CSS needed.
+   ATTRUS / Cabiros — DARK THEME
+   [data-theme="dark"] remaps the AMBIENT semantic tokens to a dark
+   ink ramp. Components consume semantic tokens, so they flip
+   automatically — no per-component dark CSS needed.
    Philosophy: the INVERSE layer stays a deliberate, brand-tinted
-   dark even here (see note in :root), distinct from the ambient
-   surface. Raw palette + brand/accent scales are theme-agnostic.
-   Toggle via JS (theme-toggle.js): sets data-theme on <html>,
-   persists to localStorage, seeds from prefers-color-scheme.
+   dark even here (see note in color-semantic.css), distinct from the
+   ambient surface. Raw palette + brand/accent scales are theme-agnostic.
+   Toggle via JS: set data-theme on <html>, persist to localStorage,
+   seed from prefers-color-scheme.
    ============================================================ */
+
 [data-theme="dark"] {
   color-scheme: dark;
 
@@ -603,10 +635,12 @@
   --dataviz-cat-6: #E87BA1;  /* Rose, lightened */
   --dataviz-cat-7: #3FC4DC;  /* Cyan, lightened */
   --dataviz-cat-8: #A6B0C4;  /* Slate, lightened */
-}
-
+}
+
 /* ============================================================
-   9.  SEMANTIC TYPE CLASSES  —  ready-to-use
+   ATTRUS / Cabiros — SEMANTIC TYPE CLASSES (ready-to-use)
+   Base document styles + the display/heading/body/utility classes.
+   Consumes typography + color tokens (see ../tokens).
    ============================================================ */
 
 html, body {
@@ -657,35 +691,5 @@ h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height:
 }
 .inverse .fg-secondary { color: var(--color-foreground-inverse-secondary); }
 .inverse .color-foreground-muted     { color: var(--color-foreground-inverse-muted); }
-.inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
-
-
-/* ---- doc-back link (fixed top-left on every preview page) ---- */
-.doc-back {
-  position: fixed;
-  top: var(--space-5);
-  left: var(--space-5);
-  z-index: 1000;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-sans);
-  font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--color-foreground-secondary);
-  text-decoration: none;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-pill);
-  background: var(--color-background-surface);
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-fast);
-}
-.doc-back:hover {
-  color: var(--color-foreground-default);
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-md);
-}
-.doc-back svg, .doc-back i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
+

package/dist/tokens/attrus-tokens.flat.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org (informal)",
   "name": "ATTRUS Design Tokens",
-  "description": "Cabiros · ATTRUS Design System — exported design tokens. Light values in `value`; dark-theme overrides in `darkValue`. Source of truth: colors_and_type.css.",
+  "description": "Cabiros · ATTRUS Design System — exported design tokens. Light values in `value`; dark-theme overrides in `darkValue`. Source of truth: src/tokens/.",
   "version": "1.0.0",
   "generated": "2026-06-03",
   "tokenCount": 333,

package/dist/tokens/attrus-tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org (informal)",
   "name": "ATTRUS Design Tokens",
-  "description": "Cabiros · ATTRUS Design System — exported design tokens. Light values in `value`; dark-theme overrides in `darkValue`. Source of truth: colors_and_type.css.",
+  "description": "Cabiros · ATTRUS Design System — exported design tokens. Light values in `value`; dark-theme overrides in `darkValue`. Source of truth: src/tokens/.",
   "version": "1.0.0",
   "generated": "2026-06-03",
   "tokenCount": 334,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attrus-ds/core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets and fonts. Visual layer only (no framework components).",
   "keywords": [
     "design-system",
@@ -13,6 +13,14 @@
     "fintech"
   ],
   "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FacilitaGPI/attrus-ds.git"
+  },
+  "homepage": "https://github.com/FacilitaGPI/attrus-ds#readme",
+  "bugs": {
+    "url": "https://github.com/FacilitaGPI/attrus-ds/issues"
+  },
   "type": "module",
   "publishConfig": {
     "access": "public"