@cmgfi/clear-ds 1.0.0 → 1.1.0

package/dist/tokens/tokens.css

@@ -0,0 +1,553 @@
+/* ==========================================================================
+   Clear Design System — Tokens
+   Extracted from ClearDsMigration design file
+   ========================================================================== */
+
+/* --- Base & Color Tokens --- */
+
+:root {
+  /* ═══════════════════════════════════════════════════════
+     GRID SYSTEM — Mobile 4-col / Tablet 6-col / Desktop 12-col
+     ═══════════════════════════════════════════════════════ */
+  --grid-columns-mobile: 4;
+  --grid-gutter-mobile: 16px;
+  --grid-margin-mobile: 24px;
+  --grid-container-mobile: 576px;
+
+  --grid-columns-tablet: 6;
+  --grid-gutter-tablet: 16px;
+  --grid-margin-tablet: 48px;
+  --grid-container-tablet: 768px;
+
+  --grid-columns-desktop: 12;
+  --grid-gutter-desktop: 18px;
+  --grid-margin-desktop: 128px;
+  --grid-container-desktop: 1200px;
+
+  /* Breakpoint references */
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1200px;
+
+  --font-family: 'Open Sans', sans-serif;
+  --color-text: #202020;
+  --color-text-secondary: #70777d;
+
+  /* --- Teal ---
+     Core brand color for key interactive elements */
+  --teal-50: #EAF6F7;
+  --teal-100: #D1EDEF;
+  --teal-200: #ADDDE0;
+  --teal-300: #8BD2D7;
+  --teal-400: #6BC2C8;
+  --teal-500: #32A4AC;
+  --teal-600: #138890;
+  --teal-700: #047880;
+  --teal-800: #186368;
+  --teal-900: #18474A;
+
+  /* --- Surface ---
+     Backgrounds and containers for visual structure and hierarchy */
+  --surface-50: #FFFFFF;
+  --surface-100: #FCFCFC;
+  --surface-200: #F7F7F7;
+  --surface-300: #F4F4F5;
+  --surface-400: #EDEDED;
+  --surface-500: #E4E4E4;
+  --surface-600: #CFCFCF;
+  --surface-700: #A2A2A2;
+  --surface-800: #7D7D7D;
+  --surface-900: #606060;
+
+  /* --- Navy ---
+     Text, borders, and idle states */
+  --navy-50: #EAEBEC;
+  --navy-100: #CBCED1;
+  --navy-200: #9DA2A6;
+  --navy-300: #70777D;
+  --navy-400: #555D64;
+  --navy-500: #2A343D;
+  --navy-600: #262F38;
+  --navy-700: #1E252B;
+  --navy-800: #171D22;
+  --navy-900: #12161A;
+
+  /* --- Yellow ---
+     Warning: potential issues, caution, user intervention */
+  --yellow-50: #FFFCE7;
+  --yellow-100: #FEF5B3;
+  --yellow-200: #FDF08F;
+  --yellow-300: #FCE95C;
+  --yellow-400: #FCE53C;
+  --yellow-500: #FBDE0B;
+  --yellow-600: #AB9400;
+  --yellow-700: #867704;
+  --yellow-800: #695D05;
+  --yellow-900: #514908;
+
+  /* --- Blue ---
+     Information: neutral feedback and informational states */
+  --blue-50: #F5F9FF;
+  --blue-100: #D0E1FD;
+  --blue-200: #ABC9FB;
+  --blue-300: #85B2F9;
+  --blue-400: #609AF8;
+  --blue-500: #3B82F6;
+  --blue-600: #326FD1;
+  --blue-700: #295BAC;
+  --blue-800: #204887;
+  --blue-900: #183462;
+
+  /* --- Green ---
+     Success: positive actions and task completion */
+  --green-50: #EDF8EA;
+  --green-100: #C8E8C3;
+  --green-200: #9BD491;
+  --green-300: #6FB864;
+  --green-400: #4B9C3E;
+  --green-500: #1E830E;
+  --green-600: #1A760B;
+  --green-700: #155D0A;
+  --green-800: #174510;
+  --green-900: #11340B;
+
+  /* --- Red ---
+     Error/Danger: issues, required intervention, caution */
+  --red-50: #FFF5F5;
+  --red-100: #FFE0DF;
+  --red-200: #FFB8B3;
+  --red-300: #FF867F;
+  --red-400: #FF5A4E;
+  --red-500: #EB1000;
+  --red-600: #D60F00;
+  --red-700: #C00B14;
+  --red-800: #990D03;
+  --red-900: #630700;
+
+  /* ==========================================================================
+     Spacing Tokens
+     Root font-size: 12px (1rem = 12px)
+     ========================================================================== */
+
+  /* --- Numeric scale (raw rem values) --- */
+  --spacing-02: 0.167rem; /*  2px */
+  --spacing-04: 0.333rem; /*  4px */
+  --spacing-08: 0.667rem; /*  8px */
+  --spacing-12: 1rem;     /* 12px */
+  --spacing-16: 1.333rem; /* 16px */
+  --spacing-20: 1.667rem; /* 20px */
+  --spacing-24: 2rem;     /* 24px */
+  --spacing-28: 2.333rem; /* 28px */
+  --spacing-32: 2.667rem; /* 32px */
+  --spacing-36: 3rem;     /* 36px */
+  --spacing-40: 3.333rem; /* 40px */
+
+  /* --- Named aliases (t-shirt sizes) --- */
+  --spacing-xxxs: var(--spacing-02); /*  2px — not in grid table but present on spacer component */
+  --spacing-base: var(--spacing-04); /*  4px */
+  --spacing-xxs:  var(--spacing-08); /*  8px */
+  --spacing-xs:   var(--spacing-12); /* 12px */
+  --spacing-sm:   var(--spacing-16); /* 16px */
+  --spacing-md:   var(--spacing-24); /* 24px */
+  --spacing-lg:   var(--spacing-32); /* 32px */
+  --spacing-xl:   3.667rem;           /* 44px */
+  --spacing-xxl:  4.667rem;           /* 56px */
+
+  /* ==========================================================================
+     Elevation Tokens
+     Drop shadows to convey depth and visual hierarchy
+     ========================================================================== */
+
+  --shadow-depth-1: 0px 3px 8.75px 2px #EAEBEC;
+  --shadow-depth-2: 0px 3px 8.75px 2px #EAEBEC;
+  --shadow-depth-3: 0px 6px 10.5px 2px #EAEBEC;
+  --shadow-depth-4: 0px 8px 14px 2px #EAEBEC;
+
+  /* ==========================================================================
+     Scrim Token
+     Darkened overlay behind modals and expanded navigation menus
+     ========================================================================== */
+
+  --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 --- */
+
+.text-h1 {
+  font-family: var(--font-family);
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-h2 {
+  font-family: var(--font-family);
+  font-size: 38px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-h3 {
+  font-family: var(--font-family);
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-h4 {
+  font-family: var(--font-family);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-h5 {
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-h6 {
+  font-family: var(--font-family);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+/* --- XL (18px) --- */
+
+.text-xl-bold {
+  font-family: var(--font-family);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-xl-semibold {
+  font-family: var(--font-family);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.text-xl-regular {
+  font-family: var(--font-family);
+  font-size: 18px;
+  font-weight: 400;
+  color: var(--color-text);
+}
+
+/* --- Large (14px) --- */
+
+.text-large-bold {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-large-semibold {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.text-large-regular {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text);
+}
+
+/* --- Normal (12px) --- */
+
+.text-normal-bold {
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-normal-semibold {
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.text-normal-regular {
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text);
+}
+
+/* --- Small (10px) --- */
+
+.text-small-bold {
+  font-family: var(--font-family);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.text-small-semibold {
+  font-family: var(--font-family);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.text-small-regular {
+  font-family: var(--font-family);
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--color-text);
+}
+
+/* ==========================================================================
+   Icon Tokens — PrimeIcons (PrimeNG icon font)
+   Usage: <i class="pi pi-{icon-name}"></i>
+   Requires: PrimeIcons CSS from the primeicons npm package
+             @import 'primeicons/primeicons.css';
+   Default size: 14px (matches design). Override with --icon-size-* tokens.
+   ========================================================================== */
+
+:root {
+  --icon-size-sm: 12px;
+  --icon-size-md: 14px;  /* default in design */
+  --icon-size-lg: 18px;
+  --icon-size-xl: 24px;
+}
+
+/* --- Arrows --- */
+/* pi-angle-double-down, pi-angle-double-left, pi-angle-double-right,
+   pi-angle-double-up, pi-angle-down, pi-angle-left, pi-angle-right,
+   pi-angle-up, pi-arrow-circle-down, pi-arrow-circle-left,
+   pi-arrow-circle-right, pi-arrow-circle-up, pi-arrow-down,
+   pi-arrow-down-left, pi-arrow-down-right, pi-arrow-left,
+   pi-arrow-right, pi-arrow-right-arrow-left, pi-arrow-up,
+   pi-arrow-up-left, pi-arrow-up-right, pi-arrows-alt, pi-arrows-h,
+   pi-arrows-v, pi-chevron-circle-down, pi-chevron-circle-left,
+   pi-chevron-circle-right, pi-chevron-circle-up, pi-chevron-down,
+   pi-chevron-left, pi-chevron-right, pi-chevron-up, pi-refresh,
+   pi-replay, pi-reply, pi-sync, pi-undo */
+
+/* --- Brands --- */
+/* pi-amazon, pi-android, pi-apple, pi-bitcoin, pi-discord,
+   pi-facebook, pi-github, pi-google, pi-instagram, pi-linkedin,
+   pi-microsoft, pi-paypal, pi-prime, pi-reddit, pi-slack,
+   pi-telegram, pi-tiktok, pi-twitch, pi-twitter, pi-whatsapp,
+   pi-youtube */
+
+/* --- Communication --- */
+/* pi-comment, pi-comments, pi-inbox, pi-language, pi-megaphone,
+   pi-microphone, pi-phone, pi-send */
+
+/* --- Design --- */
+/* pi-palette, pi-pencil */
+
+/* --- Devices --- */
+/* pi-desktop, pi-mobile, pi-tablet */
+
+/* --- Documents --- */
+/* pi-book, pi-clipboard, pi-copy, pi-envelope, pi-file,
+   pi-file-arrow-up, pi-file-check, pi-file-edit, pi-file-excel,
+   pi-file-export, pi-file-import, pi-file-o, pi-file-pdf,
+   pi-file-plus, pi-file-word, pi-folder, pi-folder-open,
+   pi-folder-plus */
+
+/* --- E-Commerce --- */
+/* pi-box, pi-cart-arrow-down, pi-cart-minus, pi-cart-plus,
+   pi-credit-card, pi-money-bill, pi-receipt, pi-shop,
+   pi-shopping-bag, pi-shopping-cart, pi-tag, pi-tags, pi-ticket,
+   pi-wallet */
+
+/* --- Graphs --- */
+/* pi-chart-bar, pi-chart-line, pi-chart-pie, pi-chart-scatter */
+
+/* --- Map --- */
+/* pi-car, pi-compass, pi-directions, pi-directions-alt, pi-map,
+   pi-map-marker, pi-truck */
+
+/* --- Math --- */
+/* pi-dollar, pi-euro, pi-minus, pi-minus-circle, pi-percentage,
+   pi-plus, pi-plus-circle, pi-pound, pi-times */
+
+/* --- Media --- */
+/* pi-backward, pi-camera, pi-caret-down, pi-caret-left,
+   pi-caret-right, pi-caret-up, pi-eject, pi-fast-backward,
+   pi-fast-forward, pi-forward, pi-image, pi-images, pi-pause,
+   pi-play, pi-sliders-h, pi-sliders-v, pi-step-backward,
+   pi-step-backward-alt, pi-step-forward, pi-step-forward-alt,
+   pi-stop, pi-stop-circle, pi-video, pi-volume-down,
+   pi-volume-off, pi-volume-up */
+
+/* --- Editor --- */
+/* pi-align-center, pi-align-justify, pi-align-left, pi-align-right,
+   pi-bars, pi-eraser, pi-list */
+
+/* --- Sort --- */
+/* pi-sort, pi-sort-alpha-down, pi-sort-alpha-down-alt,
+   pi-sort-alpha-up, pi-sort-alpha-up-alt, pi-sort-alt,
+   pi-sort-alt-slash, pi-sort-amount-down, pi-sort-amount-down-alt,
+   pi-sort-amount-up, pi-sort-amount-up-alt, pi-sort-down,
+   pi-sort-down-fill, pi-sort-numeric-down, pi-sort-numeric-down-alt,
+   pi-sort-numeric-up, pi-sort-numeric-up-alt, pi-sort-up,
+   pi-sort-up-fill */
+
+/* --- Misc --- */
+/* pi-ban, pi-bell, pi-bell-slash, pi-bolt, pi-briefcase,
+   pi-building, pi-building-columns, pi-calculator, pi-check,
+   pi-check-circle, pi-check-square, pi-code, pi-database,
+   pi-ellipsis-h, pi-ellipsis-v, pi-gift, pi-lock, pi-lock-open,
+   pi-paperclip, pi-qrcode, pi-server, pi-shield, pi-sitemap,
+   pi-unlock, pi-verified */
+
+/* --- Symbols --- */
+/* pi-asterisk, pi-at, pi-bullseye, pi-equals, pi-exclamation-triangle,
+   pi-exclamation-circle, pi-flag, pi-hashtag, pi-info,
+   pi-info-circle, pi-question, pi-question-circle */
+
+/* --- System --- */
+/* pi-clone, pi-cloud, pi-cloud-download, pi-cloud-upload, pi-cog,
+   pi-delete-left, pi-download, pi-external-link, pi-eye,
+   pi-eye-slash, pi-filter-slash, pi-globe, pi-history, pi-home,
+   pi-key, pi-link, pi-moon, pi-power-off, pi-print, pi-save,
+   pi-search, pi-search-minus, pi-search-plus, pi-share-alt,
+   pi-sign-in, pi-sign-out, pi-spinner, pi-spinner-dotted, pi-sun,
+   pi-table, pi-th-large, pi-times-circle, pi-trash, pi-upload,
+   pi-wifi, pi-window-maximize, pi-window-minimize, pi-wrench */
+
+/* --- Users --- */
+/* pi-id-card, pi-user, pi-user-edit, pi-user-minus, pi-user-plus,
+   pi-users */
+
+/* --- Time --- */
+/* pi-calendar, pi-calendar-clock, pi-calendar-minus,
+   pi-calendar-plus, pi-calendar-times, pi-clock, pi-hourglass,
+   pi-stopwatch */
+
+/* --- With Fills (filled variants) --- */
+/* pi-bookmark, pi-bookmark-fill, pi-circle, pi-circle-fill,
+   pi-filter, pi-filter-fill, pi-flag-fill, pi-heart, pi-heart-fill,
+   pi-star, pi-star-fill, pi-star-half, pi-star-half-fill,
+   pi-thumbs-down, pi-thumbs-down-fill, pi-thumbs-up,
+   pi-thumbs-up-fill */
+
+/* --- New / Extended Icons --- */
+/* pi-address-book, pi-arrow-down-left-and-arrow-up-right-to-center,
+   pi-arrow-up-right-and-arrow-down-left-from-center, pi-barcode,
+   pi-crown, pi-ethereum, pi-expand, pi-face-smile, pi-gauge,
+   pi-graduation-cap, pi-hammer, pi-headphones, pi-indian-rupee,
+   pi-lightbulb, pi-list-check, pi-mars, pi-microchip,
+   pi-microchip-ai, pi-objects-column, pi-pause-circle,
+   pi-pen-to-square, pi-pinterest, pi-play-circle, pi-sparkles,
+   pi-thumbtack, pi-trophy, pi-turkish-lira, pi-venus,
+   pi-warehouse, pi-wave-pulse */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmgfi/clear-ds",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "CMG Financial — Clear Design System React component library",
   "keywords": ["cmg", "clear-ds", "design-system", "react", "components"],
   "license": "UNLICENSED",
@@ -29,6 +29,7 @@
   ],
   "scripts": {
     "build": "vite build",
+    "postbuild": "mkdir -p dist/tokens && cp src/tokens/tokens.css dist/tokens/tokens.css",
     "build:watch": "vite build --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",