@cmgfi/clear-ds 1.0.1 → 1.1.1

package/dist/tokens/tokens.css

@@ -171,6 +171,108 @@
   --scrim-color: #2A343D;
   --scrim-opacity: 0.25;
   --scrim: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity) * 100%), transparent);
+
+  /* ==========================================================================
+     SEMANTIC TOKENS
+     Purpose-named aliases over the primitive scale above.
+     Always prefer these in component styles and consumer code over raw
+     primitives — semantic names survive theme changes and communicate intent.
+     ========================================================================== */
+
+  /* ── Text Colors ─────────────────────────────────────────────────────────
+     Named by role in the UI. heading/body/label share the same value today
+     but are kept separate so a future theme can differentiate them.        */
+  --color-text-heading:      var(--navy-800);   /* Page headings, section titles, panel headers */
+  --color-text-body:         var(--navy-800);   /* Body copy, descriptions, content paragraphs */
+  --color-text-label:        var(--navy-800);   /* Form field labels, data column headers */
+  --color-text-helper:       var(--navy-400);   /* Helper text, subtitles, field descriptions */
+  --color-text-placeholder:  var(--navy-300);   /* Input placeholder text */
+  --color-text-disabled:     var(--navy-300);   /* Disabled input and control text */
+  --color-text-error:        var(--red-600);    /* Validation error messages */
+  --color-text-link:         var(--teal-700);   /* Hyperlinks, inline interactive text */
+  --color-text-link-hover:   var(--teal-900);   /* Hovered hyperlinks */
+  --color-text-inverse:      var(--surface-50); /* Text on dark or brand-colored surfaces */
+
+  /* ── Text Sizes ──────────────────────────────────────────────────────────
+     Named by purpose in the UI. Base: 1rem = 12px.                        */
+  --font-size-hero:        48px; /* Hero banners, display text */
+  --font-size-title:       38px; /* Major page titles */
+  --font-size-section:     32px; /* Section headings */
+  --font-size-panel:       20px; /* Panel and card headings */
+  --font-size-subheading:  18px; /* Subheadings, intro paragraphs */
+  --font-size-label:       14px; /* Form labels, prominent body text */
+  --font-size-body:        12px; /* Standard body text (= 1rem) */
+  --font-size-caption:     10px; /* Captions, helper text, badge labels */
+
+  --font-weight-bold:      700;  /* Headings, strong emphasis */
+  --font-weight-semibold:  600;  /* Labels, medium emphasis */
+  --font-weight-regular:   400;  /* Body copy, field values */
+
+  --line-height-heading:   1.2;  /* Headings and titles — tight */
+  --line-height-body:      1.4;  /* Body copy and labels — comfortable */
+
+  /* ── Surfaces / Backgrounds ──────────────────────────────────────────── */
+  --color-surface-default:   var(--surface-50);  /* White — base page/card/input background */
+  --color-surface-secondary: var(--surface-200); /* Secondary panels, alternate rows */
+  --color-surface-elevated:  var(--surface-100); /* Popovers, dropdowns, cards that float */
+  --color-surface-hover:     var(--surface-200); /* Hover background on list/menu items */
+  --color-surface-disabled:  var(--surface-300); /* Disabled input/field background */
+  --color-surface-selected:  var(--teal-50);     /* Selected row or active item background */
+  --color-surface-overlay:   var(--scrim);       /* Modal and drawer backdrop */
+
+  /* ── Borders ─────────────────────────────────────────────────────────── */
+  --color-border-primary:      var(--navy-100);    /* Default input, card, and container borders */
+  --color-border-secondary:    var(--navy-200);    /* Stronger dividers, tab borders */
+  --color-border-tertiary:     var(--surface-500); /* Very light internal dividers */
+  --color-border-brand:        var(--teal-100);    /* Soft brand-colored border */
+  --color-border-brand-strong: var(--teal-200);    /* Stronger brand border — hover of soft elements */
+  --color-border-focus:        var(--teal-500);    /* Focused input border ring */
+  --color-border-error:        var(--red-600);     /* Error/invalid state border */
+
+  /* ── Brand ───────────────────────────────────────────────────────────── */
+  --color-brand-primary:         var(--teal-700); /* Primary brand color — buttons, links, toggles */
+  --color-brand-primary-hover:   var(--teal-800); /* Hover over primary brand elements */
+  --color-brand-primary-active:  var(--teal-900); /* Pressed/active primary brand elements */
+  --color-brand-primary-bg:      var(--teal-50);  /* Tinted background for brand-highlighted areas */
+  --color-brand-secondary:       var(--teal-500); /* Secondary brand — focus indicators, data markers */
+  --color-brand-secondary-hover: var(--teal-600); /* Hover over secondary brand elements */
+
+  /* ── Status ──────────────────────────────────────────────────────────── */
+  --color-status-error:          var(--red-600);    /* Error text, icons */
+  --color-status-error-hover:    var(--red-700);    /* Hovered error elements */
+  --color-status-error-bg:       var(--red-50);     /* Error background tint */
+  --color-status-error-border:   var(--red-600);    /* Error borders */
+  --color-status-warning:        var(--yellow-600); /* Warning text, icons */
+  --color-status-warning-bg:     var(--yellow-50);  /* Warning background tint */
+  --color-status-warning-border: var(--yellow-200); /* Warning borders */
+  --color-status-success:        var(--green-500);  /* Success text, icons */
+  --color-status-success-bg:     var(--green-50);   /* Success background tint */
+  --color-status-success-border: var(--green-200);  /* Success borders */
+  --color-status-info:           var(--blue-500);   /* Info text, icons */
+  --color-status-info-bg:        var(--blue-50);    /* Info background tint */
+  --color-status-info-border:    var(--blue-200);   /* Info borders */
+
+  /* ── Focus Rings ─────────────────────────────────────────────────────── */
+  --focus-ring:       0 0 0 2px var(--surface-50), 0 0 0 6px var(--teal-700); /* Standard keyboard focus */
+  --focus-ring-inset: inset 0 0 0 2px var(--teal-700);                        /* Inset variant — menus, popovers */
+
+  /* ── Border Radius ───────────────────────────────────────────────────── */
+  --radius-sm:   4px;    /* Small chips, tags, badges */
+  --radius-md:   6px;    /* Standard — inputs, cards, buttons */
+  --radius-lg:   8px;    /* Modals, drawers, larger containers */
+  --radius-full: 9999px; /* Pill buttons, circular avatars */
+
+  /* ── Motion ──────────────────────────────────────────────────────────── */
+  --transition-fast:   80ms ease;  /* Hover color changes */
+  --transition-normal: 120ms ease; /* Standard state changes */
+  --transition-slow:   200ms ease; /* Expand/collapse, panel slides */
+
+  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
+  --z-sticky:       100; /* Sticky headers, persistent bars */
+  --z-dropdown:     200; /* Dropdowns, menus, date pickers */
+  --z-overlay:      300; /* Modals, drawers */
+  --z-notification: 400; /* Toast notifications */
+  --z-tooltip:      500; /* Tooltips */
 }
 
 /* --- Headings --- */

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@cmgfi/clear-ds",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "CMG Financial — Clear Design System React component library",
-  "keywords": ["cmg", "clear-ds", "design-system", "react", "components"],
+  "keywords": [
+    "cmg",
+    "clear-ds",
+    "design-system",
+    "react",
+    "components"
+  ],
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
-    "url": "https://cmg-financial.ghe.com/andyg/clear-ds.git"
+    "url": "https://github.com/cmg-pilot-program/clear-ds.git"
   },
   "publishConfig": {
     "access": "public"