@redvars/peacock 3.0.0

package/demo/tokens.css

@@ -0,0 +1,510 @@
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+
+:root {
+  --color-background: #fffbff;
+  --color-black: #000000;
+  --color-blue: #305cde;
+  --color-blue-0: #000000;
+  --color-blue-10: #001550;
+  --color-blue-20: #00277f;
+  --color-blue-30: #003ab2;
+  --color-blue-40: #2352d5;
+  --color-blue-50: #446def;
+  --color-blue-60: #6789ff;
+  --color-blue-70: #90a7ff;
+  --color-blue-80: #b6c4ff;
+  --color-blue-90: #dce1ff;
+  --color-blue-95: #eff0ff;
+  --color-blue-98: #faf8ff;
+  --color-blue-100: #ffffff;
+  --color-error: var(--color-red);
+  --color-error-0: var(--color-red-0);
+  --color-error-10: var(--color-red-10);
+  --color-error-20: var(--color-red-20);
+  --color-error-30: var(--color-red-30);
+  --color-error-40: var(--color-red-40);
+  --color-error-50: var(--color-red-50);
+  --color-error-60: var(--color-red-60);
+  --color-error-70: var(--color-red-70);
+  --color-error-80: var(--color-red-80);
+  --color-error-90: var(--color-red-90);
+  --color-error-95: var(--color-red-95);
+  --color-error-98: var(--color-red-98);
+  --color-error-100: var(--color-red-100);
+  --color-error-container: #ffdad6;
+  --color-green: #2e6f40;
+  --color-green-0: #000000;
+  --color-green-10: #00210b;
+  --color-green-20: #003917;
+  --color-green-30: #005225;
+  --color-green-40: #0f6d35;
+  --color-green-50: #31874b;
+  --color-green-60: #4da163;
+  --color-green-70: #68bd7b;
+  --color-green-80: #83d995;
+  --color-green-90: #9ff6af;
+  --color-green-95: #c4ffcb;
+  --color-green-98: #eaffe9;
+  --color-green-100: #ffffff;
+  --color-inverse-on-surface: #fbeeec;
+  --color-inverse-primary: #aec6ff;
+  --color-inverse-surface: #362f2e;
+  --color-neutral: #747878;
+  --color-neutral-0: #000000;
+  --color-neutral-4: #0b0f0f;
+  --color-neutral-6: #101415;
+  --color-neutral-10: #191c1d;
+  --color-neutral-12: #1d2021;
+  --color-neutral-17: #272b2b;
+  --color-neutral-20: #2e3132;
+  --color-neutral-22: #323536;
+  --color-neutral-30: #444748;
+  --color-neutral-40: #5c5f5f;
+  --color-neutral-50: #747878;
+  --color-neutral-60: #8e9192;
+  --color-neutral-70: #a9acac;
+  --color-neutral-80: #c4c7c7;
+  --color-neutral-87: #d8dadb;
+  --color-neutral-90: #e1e3e3;
+  --color-neutral-92: #e6e8e9;
+  --color-neutral-94: #eceeef;
+  --color-neutral-95: #eff1f1;
+  --color-neutral-96: #f2f4f4;
+  --color-neutral-98: #f8fafa;
+  --color-neutral-99: #fafdfd;
+  --color-neutral-100: #ffffff;
+  --color-neutral-variant: #6f797a;
+  --color-neutral-variant-0: #000000;
+  --color-neutral-variant-4: #071011;
+  --color-neutral-variant-6: #0c1516;
+  --color-neutral-variant-10: #141d1f;
+  --color-neutral-variant-12: #182123;
+  --color-neutral-variant-17: #222b2d;
+  --color-neutral-variant-20: #293234;
+  --color-neutral-variant-22: #2d3638;
+  --color-neutral-variant-30: #3f484a;
+  --color-neutral-variant-40: #576062;
+  --color-neutral-variant-50: #6f797a;
+  --color-neutral-variant-60: #899294;
+  --color-neutral-variant-70: #a3adaf;
+  --color-neutral-variant-80: #bfc8ca;
+  --color-neutral-variant-87: #d2dcde;
+  --color-neutral-variant-90: #dbe4e6;
+  --color-neutral-variant-92: #e0eaec;
+  --color-neutral-variant-94: #e6f0f1;
+  --color-neutral-variant-95: #e9f2f4;
+  --color-neutral-variant-96: #ecf5f7;
+  --color-neutral-variant-98: #f2fbfd;
+  --color-neutral-variant-99: #f6feff;
+  --color-neutral-variant-100: #ffffff;
+  --color-on-background: #201a19;
+  --color-on-error: #ffffff;
+  --color-on-error-container: #410002;
+  --color-on-primary: #ffffff;
+  --color-on-primary-container: #001a42;
+  --color-on-secondary: #ffffff;
+  --color-on-secondary-container: #141b2c;
+  --color-on-surface: var(--color-neutral-10);
+  --color-on-surface-variant: var(--color-neutral-30);
+  --color-on-tertiary: #ffffff;
+  --color-on-tertiary-container: #29132d;
+  --color-orange: #ff7518;
+  --color-orange-0: #000000;
+  --color-orange-10: #341100;
+  --color-orange-20: #552100;
+  --color-orange-30: #783100;
+  --color-orange-40: #9e4300;
+  --color-orange-50: #c55500;
+  --color-orange-60: #ee6803;
+  --color-orange-70: #ff8d4c;
+  --color-orange-80: #ffb691;
+  --color-orange-90: #ffdbcb;
+  --color-orange-95: #ffede6;
+  --color-orange-98: #fff8f6;
+  --color-orange-100: #ffffff;
+  --color-outline: var(--color-neutral-variant-50);
+  --color-outline-variant: var(--color-neutral-variant-80);
+  --color-primary: #4589ff;
+  --color-primary-0: #000000;
+  --color-primary-10: #001a42;
+  --color-primary-20: #002e6b;
+  --color-primary-30: #004396;
+  --color-primary-40: #005ac4;
+  --color-primary-50: #2673e8;
+  --color-primary-60: #4f8eff;
+  --color-primary-70: #82aaff;
+  --color-primary-80: #aec6ff;
+  --color-primary-90: #d8e2ff;
+  --color-primary-95: #edf0ff;
+  --color-primary-98: #faf9ff;
+  --color-primary-100: #ffffff;
+  --color-primary-container: #d8e2ff;
+  --color-purple: #e40078;
+  --color-purple-0: #000000;
+  --color-purple-10: #3f001c;
+  --color-purple-20: #650032;
+  --color-purple-30: #8e0048;
+  --color-purple-40: #ba0061;
+  --color-purple-50: #e6067a;
+  --color-purple-60: #ff4993;
+  --color-purple-70: #ff84ad;
+  --color-purple-80: #ffb1c7;
+  --color-purple-90: #ffd9e2;
+  --color-purple-95: #ffecef;
+  --color-purple-98: #fff8f8;
+  --color-purple-100: #ffffff;
+  --color-red: #e73121;
+  --color-red-0: #000000;
+  --color-red-10: #410000;
+  --color-red-20: #690000;
+  --color-red-30: #930000;
+  --color-red-40: #be0c05;
+  --color-red-50: #e32e1f;
+  --color-red-60: #ff5541;
+  --color-red-70: #ff8a78;
+  --color-red-80: #ffb4a8;
+  --color-red-90: #ffdad4;
+  --color-red-95: #ffedea;
+  --color-red-98: #fff8f6;
+  --color-red-100: #ffffff;
+  --color-scrim: #000000;
+  --color-secondary: #6f778b;
+  --color-secondary-0: #000000;
+  --color-secondary-10: #141b2c;
+  --color-secondary-20: #293041;
+  --color-secondary-30: #3f4759;
+  --color-secondary-40: #575e71;
+  --color-secondary-50: #6f778b;
+  --color-secondary-60: #8990a5;
+  --color-secondary-70: #a4abc0;
+  --color-secondary-80: #bfc6dc;
+  --color-secondary-90: #dbe2f9;
+  --color-secondary-95: #edf0ff;
+  --color-secondary-98: #faf9ff;
+  --color-secondary-100: #ffffff;
+  --color-secondary-container: #dbe2f9;
+  --color-shadow: #000000;
+  --color-success: var(--color-green);
+  --color-success-0: var(--color-green-0);
+  --color-success-10: var(--color-green-10);
+  --color-success-20: var(--color-green-20);
+  --color-success-30: var(--color-green-30);
+  --color-success-40: var(--color-green-40);
+  --color-success-50: var(--color-green-50);
+  --color-success-60: var(--color-green-60);
+  --color-success-70: var(--color-green-70);
+  --color-success-80: var(--color-green-80);
+  --color-success-90: var(--color-green-90);
+  --color-success-95: var(--color-green-95);
+  --color-success-98: var(--color-green-98);
+  --color-success-100: var(--color-green-100);
+  --color-surface: var(--color-neutral-98);
+  --color-surface-container: var(--color-neutral-94);
+  --color-surface-container-high: var(--color-neutral-92);
+  --color-surface-container-highest: var(--color-neutral-90);
+  --color-surface-container-low: var(--color-neutral-96);
+  --color-surface-container-lowest: var(--color-neutral-100);
+  --color-surface-dim: var(--color-neutral-87);
+  --color-surface-variant: var(--color-neutral-90);
+  --color-tertiary: #8b6d8d;
+  --color-tertiary-0: #000000;
+  --color-tertiary-10: #29132d;
+  --color-tertiary-20: #402843;
+  --color-tertiary-30: #583e5a;
+  --color-tertiary-40: #715573;
+  --color-tertiary-50: #8b6d8d;
+  --color-tertiary-60: #a686a7;
+  --color-tertiary-70: #c2a1c2;
+  --color-tertiary-80: #dfbcdf;
+  --color-tertiary-90: #fcd7fb;
+  --color-tertiary-95: #ffebfc;
+  --color-tertiary-98: #fff7fa;
+  --color-tertiary-100: #ffffff;
+  --color-tertiary-container: #fcd7fb;
+  --color-warning: var(--color-yellow);
+  --color-warning-0: var(--color-yellow-0);
+  --color-warning-10: var(--color-yellow-10);
+  --color-warning-20: var(--color-yellow-20);
+  --color-warning-30: var(--color-yellow-30);
+  --color-warning-40: var(--color-yellow-40);
+  --color-warning-50: var(--color-yellow-50);
+  --color-warning-60: var(--color-yellow-60);
+  --color-warning-70: var(--color-yellow-70);
+  --color-warning-80: var(--color-yellow-80);
+  --color-warning-90: var(--color-yellow-90);
+  --color-warning-95: var(--color-yellow-95);
+  --color-warning-98: var(--color-yellow-98);
+  --color-warning-100: var(--color-yellow-100);
+  --color-white: #ffffff;
+  --color-yellow: #ffed29;
+  --color-yellow-0: #000000;
+  --color-yellow-10: #1f1c00;
+  --color-yellow-20: #363100;
+  --color-yellow-30: #4e4800;
+  --color-yellow-40: #686000;
+  --color-yellow-50: #837900;
+  --color-yellow-60: #9f9300;
+  --color-yellow-70: #bcae00;
+  --color-yellow-80: #d9c900;
+  --color-yellow-90: #f7e61e;
+  --color-yellow-95: #fff392;
+  --color-yellow-98: #fff9e6;
+  --color-yellow-100: #ffffff;
+  --container-lg: 1056px; /* Large container width. Intended for standard desktop layouts with typical content density. */
+  --container-max: 1584px; /* Maximum container width. Use when constraining very wide layouts to maintain readable line lengths. */
+  --container-md: 672px; /* Medium container width. Suitable for tablet layouts and compact desktop content areas. */
+  --container-sm: 320px; /* Small container width. Use for narrow layouts and small screens such as mobile devices. */
+  --container-xl: 1312px; /* Extra large container width. Use for wide desktop displays and content-heavy pages. */
+  --duration-long1: 450ms; /* These durations are often paired with Emphasized easing. */
+  --duration-long2: 500ms; /* These durations are often paired with Emphasized easing. */
+  --duration-medium1: 250ms; /* These are used for medium duration transitions, like modal animations. */
+  --duration-medium2: 300ms; /* These are used for medium duration transitions, like modal animations. */
+  --duration-short1: 50ms; /* These are used for small utility-focused transitions. Like checkbox animations. */
+  --duration-short2: 100ms; /* These are used for small utility-focused transitions. Like checkbox animations. */
+  --duration-short3: 150ms; /* These are used for small utility-focused transitions. Like checkbox animations. */
+  --duration-short4: 200ms; /* These are used for small utility-focused transitions. Like checkbox animations. */
+  --easing-linear: cubic-bezier(0, 0, 1, 1);
+  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --font-family-brand: "Noto Sans", sans-serif; /* The font family used for brand headings and titles. */
+  --font-family-monospace: "Noto Sans Mono", monospace; /* The font family used for code snippets and monospaced text. */
+  --font-family-sans: "Noto Sans", sans-serif; /* The primary font family used for body text and general content. */
+  --font-weight-bold: 700; /* Bold weight for emphasis. 700 weight. */
+  --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */
+  --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */
+  --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */
+  --global-badge-color: var(--color-error-40);
+  --spacing-000: 0; /* No spacing (base × 0). */
+  --spacing-025: 0.125rem; /* 2px - Smallest increment (base × 0.125). */
+  --spacing-050: 0.25rem; /* 4px - Extra small spacing (base × 0.25). */
+  --spacing-100: 0.5rem; /* 8px - Small spacing (base × 0.5). */
+  --spacing-150: 0.75rem; /* 12px - Small-medium spacing (base × 0.75). */
+  --spacing-200: 1rem; /* 16px - Base spacing unit (base × 1). */
+  --spacing-300: 1.5rem; /* 24px - Medium spacing (base × 1.5). */
+  --spacing-400: 2rem; /* 32px - Medium-large spacing (base × 2). */
+  --spacing-500: 2.5rem; /* 40px - Large spacing (base × 2.5). */
+  --spacing-600: 3rem; /* 48px - Extra large spacing (base × 3). */
+  --spacing-800: 4rem; /* 64px - Huge spacing (base × 4). */
+  --spacing-1000: 5rem; /* 80px - Massive spacing (base × 5). */
+  --spacing-1200: 6rem; /* 96px - Gigantic spacing (base × 6). */
+  --spacing-2000: 10rem; /* 160px - Maximum defined spacing (base × 10). */
+  --spacing-base: 1rem; /* Base spacing unit (1rem = 16px). */
+  --typography-body-large-emphasized-font-family: var(--font-family-sans);
+  --typography-body-large-emphasized-font-size: 1rem;
+  --typography-body-large-emphasized-font-weight: var(--font-weight-medium);
+  --typography-body-large-emphasized-letter-spacing: 0.5px;
+  --typography-body-large-emphasized-line-height: 1.5rem;
+  --typography-body-large-font-family: var(--font-family-sans);
+  --typography-body-large-font-size: 1rem;
+  --typography-body-large-font-weight: var(--font-weight-regular);
+  --typography-body-large-letter-spacing: 0.5px;
+  --typography-body-large-line-height: 1.5rem;
+  --typography-body-medium-emphasized-font-family: var(--font-family-sans);
+  --typography-body-medium-emphasized-font-size: 0.875rem;
+  --typography-body-medium-emphasized-font-weight: var(--font-weight-medium);
+  --typography-body-medium-emphasized-letter-spacing: 0.25px;
+  --typography-body-medium-emphasized-line-height: 1.25rem;
+  --typography-body-medium-font-family: var(--font-family-sans);
+  --typography-body-medium-font-size: 0.875rem;
+  --typography-body-medium-font-weight: var(--font-weight-regular);
+  --typography-body-medium-letter-spacing: 0.25px;
+  --typography-body-medium-line-height: 1.25rem;
+  --typography-body-small-emphasized-font-family: var(--font-family-sans);
+  --typography-body-small-emphasized-font-size: 0.75rem;
+  --typography-body-small-emphasized-font-weight: var(--font-weight-medium);
+  --typography-body-small-emphasized-letter-spacing: 0.4000000059604645px;
+  --typography-body-small-emphasized-line-height: 1rem;
+  --typography-body-small-font-family: var(--font-family-sans);
+  --typography-body-small-font-size: 0.75rem;
+  --typography-body-small-font-weight: var(--font-weight-regular);
+  --typography-body-small-letter-spacing: 0.4000000059604645px;
+  --typography-body-small-line-height: 1rem;
+  --typography-code-large-emphasized-font-family: var(--font-family-monospace);
+  --typography-code-large-emphasized-font-size: 1rem;
+  --typography-code-large-emphasized-font-weight: var(--font-weight-medium);
+  --typography-code-large-emphasized-letter-spacing: 0.5px;
+  --typography-code-large-emphasized-line-height: 1.5rem;
+  --typography-code-large-font-family: var(--font-family-monospace);
+  --typography-code-large-font-size: 1rem;
+  --typography-code-large-font-weight: var(--font-weight-regular);
+  --typography-code-large-letter-spacing: 0.5px;
+  --typography-code-large-line-height: 1.5rem;
+  --typography-code-medium-emphasized-font-family: var(--font-family-monospace);
+  --typography-code-medium-emphasized-font-size: 0.875rem;
+  --typography-code-medium-emphasized-font-weight: var(--font-weight-medium);
+  --typography-code-medium-emphasized-letter-spacing: 0.25px;
+  --typography-code-medium-emphasized-line-height: 1.25rem;
+  --typography-code-medium-font-family: var(--font-family-monospace);
+  --typography-code-medium-font-size: 0.875rem;
+  --typography-code-medium-font-weight: var(--font-weight-regular);
+  --typography-code-medium-letter-spacing: 0.25px;
+  --typography-code-medium-line-height: 1.25rem;
+  --typography-code-small-emphasized-font-family: var(--font-family-monospace);
+  --typography-code-small-emphasized-font-size: 0.75rem;
+  --typography-code-small-emphasized-font-weight: var(--font-weight-medium);
+  --typography-code-small-emphasized-letter-spacing: 0.4000000059604645px;
+  --typography-code-small-emphasized-line-height: 1rem;
+  --typography-code-small-font-family: var(--font-family-monospace);
+  --typography-code-small-font-size: 0.75rem;
+  --typography-code-small-font-weight: var(--font-weight-regular);
+  --typography-code-small-letter-spacing: 0.4000000059604645px;
+  --typography-code-small-line-height: 1rem;
+  --typography-display-large-emphasized-font-family: var(--font-family-sans);
+  --typography-display-large-emphasized-font-size: 3.5625rem;
+  --typography-display-large-emphasized-font-weight: var(--font-weight-medium);
+  --typography-display-large-emphasized-letter-spacing: -0.25px;
+  --typography-display-large-emphasized-line-height: 4rem;
+  --typography-display-large-font-family: var(--font-family-sans);
+  --typography-display-large-font-size: 3.5625rem;
+  --typography-display-large-font-weight: var(--font-weight-regular);
+  --typography-display-large-letter-spacing: -0.25px;
+  --typography-display-large-line-height: 4rem;
+  --typography-display-medium-emphasized-font-family: var(--font-family-sans);
+  --typography-display-medium-emphasized-font-size: 2.8125rem;
+  --typography-display-medium-emphasized-font-weight: var(--font-weight-medium);
+  --typography-display-medium-emphasized-letter-spacing: 0;
+  --typography-display-medium-emphasized-line-height: 3.25rem;
+  --typography-display-medium-font-family: var(--font-family-sans);
+  --typography-display-medium-font-size: 2.8125rem;
+  --typography-display-medium-font-weight: var(--font-weight-regular);
+  --typography-display-medium-letter-spacing: 0;
+  --typography-display-medium-line-height: 3.25rem;
+  --typography-display-small-emphasized-font-family: var(--font-family-sans);
+  --typography-display-small-emphasized-font-size: 2.25rem;
+  --typography-display-small-emphasized-font-weight: var(--font-weight-medium);
+  --typography-display-small-emphasized-letter-spacing: 0;
+  --typography-display-small-emphasized-line-height: 2.75rem;
+  --typography-display-small-font-family: var(--font-family-sans);
+  --typography-display-small-font-size: 2.25rem;
+  --typography-display-small-font-weight: var(--font-weight-regular);
+  --typography-display-small-letter-spacing: 0;
+  --typography-display-small-line-height: 2.75rem;
+  --typography-headline-large-emphasized-font-family: var(--font-family-sans);
+  --typography-headline-large-emphasized-font-size: 2rem;
+  --typography-headline-large-emphasized-font-weight: var(--font-weight-medium);
+  --typography-headline-large-emphasized-letter-spacing: 0;
+  --typography-headline-large-emphasized-line-height: 2.5rem;
+  --typography-headline-large-font-family: var(--font-family-sans);
+  --typography-headline-large-font-size: 2rem;
+  --typography-headline-large-font-weight: var(--font-weight-regular);
+  --typography-headline-large-letter-spacing: 0;
+  --typography-headline-large-line-height: 2.5rem;
+  --typography-headline-medium-emphasized-font-family: var(--font-family-sans);
+  --typography-headline-medium-emphasized-font-size: 1.75rem;
+  --typography-headline-medium-emphasized-font-weight: var(--font-weight-medium);
+  --typography-headline-medium-emphasized-letter-spacing: 0;
+  --typography-headline-medium-emphasized-line-height: 2.25rem;
+  --typography-headline-medium-font-family: var(--font-family-sans);
+  --typography-headline-medium-font-size: 1.75rem;
+  --typography-headline-medium-font-weight: var(--font-weight-regular);
+  --typography-headline-medium-letter-spacing: 0;
+  --typography-headline-medium-line-height: 2.25rem;
+  --typography-headline-small-emphasized-font-family: var(--font-family-sans);
+  --typography-headline-small-emphasized-font-size: 1.5rem;
+  --typography-headline-small-emphasized-font-weight: var(--font-weight-medium);
+  --typography-headline-small-emphasized-letter-spacing: 0;
+  --typography-headline-small-emphasized-line-height: 2rem;
+  --typography-headline-small-font-family: var(--font-family-sans);
+  --typography-headline-small-font-size: 1.5rem;
+  --typography-headline-small-font-weight: var(--font-weight-regular);
+  --typography-headline-small-letter-spacing: 0;
+  --typography-headline-small-line-height: 2rem;
+  --typography-label-large-emphasized-font-family: var(--font-family-sans);
+  --typography-label-large-emphasized-font-size: 0.875rem;
+  --typography-label-large-emphasized-font-weight: var(--font-weight-semi-bold);
+  --typography-label-large-emphasized-letter-spacing: 0.10000000149011612px;
+  --typography-label-large-emphasized-line-height: 1.25rem;
+  --typography-label-large-font-family: var(--font-family-sans);
+  --typography-label-large-font-size: 0.875rem;
+  --typography-label-large-font-weight: var(--font-weight-medium);
+  --typography-label-large-letter-spacing: 0.10000000149011612px;
+  --typography-label-large-line-height: 1.25rem;
+  --typography-label-medium-emphasized-font-family: var(--font-family-sans);
+  --typography-label-medium-emphasized-font-size: 0.75rem;
+  --typography-label-medium-emphasized-font-weight: var(--font-weight-semi-bold);
+  --typography-label-medium-emphasized-letter-spacing: 0.5px;
+  --typography-label-medium-emphasized-line-height: 1rem;
+  --typography-label-medium-font-family: var(--font-family-sans);
+  --typography-label-medium-font-size: 0.75rem;
+  --typography-label-medium-font-weight: var(--font-weight-medium);
+  --typography-label-medium-letter-spacing: 0.5px;
+  --typography-label-medium-line-height: 1rem;
+  --typography-label-small-emphasized-font-family: var(--font-family-sans);
+  --typography-label-small-emphasized-font-size: 0.6875rem;
+  --typography-label-small-emphasized-font-weight: var(--font-weight-semi-bold);
+  --typography-label-small-emphasized-letter-spacing: 0.5px;
+  --typography-label-small-emphasized-line-height: 1rem;
+  --typography-label-small-font-family: var(--font-family-sans);
+  --typography-label-small-font-size: 0.6875rem;
+  --typography-label-small-font-weight: var(--font-weight-medium);
+  --typography-label-small-letter-spacing: 0.5px;
+  --typography-label-small-line-height: 1rem;
+  --typography-title-large-emphasized-font-family: var(--font-family-sans);
+  --typography-title-large-emphasized-font-size: 1.375rem;
+  --typography-title-large-emphasized-font-weight: var(--font-weight-medium);
+  --typography-title-large-emphasized-letter-spacing: 0;
+  --typography-title-large-emphasized-line-height: 1.75rem;
+  --typography-title-large-font-family: var(--font-family-sans);
+  --typography-title-large-font-size: 1.375rem;
+  --typography-title-large-font-weight: var(--font-weight-regular);
+  --typography-title-large-letter-spacing: 0;
+  --typography-title-large-line-height: 1.75rem;
+  --typography-title-medium-emphasized-font-family: var(--font-family-sans);
+  --typography-title-medium-emphasized-font-size: 1rem;
+  --typography-title-medium-emphasized-font-weight: var(--font-weight-semi-bold);
+  --typography-title-medium-emphasized-letter-spacing: 0.15000000596046448px;
+  --typography-title-medium-emphasized-line-height: 1.5rem;
+  --typography-title-medium-font-family: var(--font-family-sans);
+  --typography-title-medium-font-size: 1rem;
+  --typography-title-medium-font-weight: var(--font-weight-medium);
+  --typography-title-medium-letter-spacing: 0.15000000596046448px;
+  --typography-title-medium-line-height: 1.5rem;
+  --typography-title-small-emphasized-font-family: var(--font-family-sans);
+  --typography-title-small-emphasized-font-size: 0.875rem;
+  --typography-title-small-emphasized-font-weight: var(--font-weight-semi-bold);
+  --typography-title-small-emphasized-letter-spacing: 0.10000000149011612px;
+  --typography-title-small-emphasized-line-height: 1.25rem;
+  --typography-title-small-font-family: var(--font-family-sans);
+  --typography-title-small-font-size: 0.875rem;
+  --typography-title-small-font-weight: var(--font-weight-medium);
+  --typography-title-small-letter-spacing: 0.10000000149011612px;
+  --typography-title-small-line-height: 1.25rem;
+  color-scheme: light dark;
+}
+
+[data-theme='dark'] {
+  --color-background: #201a19;
+  --color-error-container: #93000a;
+  --color-inverse-on-surface: #362f2e;
+  --color-inverse-primary: #005ac4;
+  --color-inverse-surface: #ede0dd;
+  --color-on-background: #ede0dd;
+  --color-on-error: #690005;
+  --color-on-error-container: #ffb4ab;
+  --color-on-primary: #002e6b;
+  --color-on-primary-container: #d8e2ff;
+  --color-on-secondary: #293041;
+  --color-on-secondary-container: #dbe2f9;
+  --color-on-surface: #ede0dd;
+  --color-on-surface-variant: #d8c2be;
+  --color-on-tertiary: #402843;
+  --color-on-tertiary-container: #fcd7fb;
+  --color-outline: var(--color-neutral-variant-60);
+  --color-outline-variant: var(--color-neutral-variant-30);
+  --color-primary-container: #004396;
+  --color-scrim: #000000;
+  --color-secondary-container: #3f4759;
+  --color-shadow: #000000;
+  --color-surface: #201a19;
+  --color-surface-container: var(--color-neutral-12);
+  --color-surface-container-high: var(--color-neutral-17);
+  --color-surface-container-highest: var(--color-neutral-22);
+  --color-surface-container-low: var(--color-neutral-10);
+  --color-surface-container-lowest: var(--color-neutral-4);
+  --color-surface-dim: var(--color-neutral-6);
+  --color-surface-variant: #534341;
+  --color-tertiary-container: #583e5a;
+  --global-badge-color: var(--color-error-80);
+}
+

package/dist/src/LoaderUtils.d.ts

@@ -0,0 +1,23 @@
+interface ComponentConfig {
+    CustomElementClass?: any;
+    importPath?: string;
+    dependencies?: string[];
+}
+interface LoaderConfig {
+    prefix?: string;
+    components?: Record<string, ComponentConfig>;
+}
+export { LoaderConfig };
+export declare class LoaderUtils {
+    private loaderConfig;
+    private _loaderConfig;
+    private _observer;
+    constructor(loaderConfig: LoaderConfig);
+    static registerComponent(tagName: string, CustomElementClass: any): void;
+    start(): void;
+    eagerLoadComponents(): void;
+    getFullTagName(name: string): string;
+    registerAsync(tagName: string): Promise<void>;
+    load(root: Element | Document): Promise<void>;
+    lazyLoadComponents(root: any): void;
+}

package/dist/src/LoaderUtils.js

@@ -0,0 +1,81 @@
+export class LoaderUtils {
+    constructor(loaderConfig) {
+        this.loaderConfig = loaderConfig;
+        this._loaderConfig = loaderConfig;
+    }
+    static registerComponent(tagName, CustomElementClass) {
+        if (CustomElementClass && !customElements.get(tagName)) {
+            customElements.define(tagName, CustomElementClass);
+        }
+    }
+    start() {
+        this.eagerLoadComponents();
+        this.lazyLoadComponents(document);
+    }
+    eagerLoadComponents() {
+        if (!this._loaderConfig.components)
+            return;
+        for (const [name, value] of Object.entries(this._loaderConfig.components)) {
+            if (value.CustomElementClass)
+                LoaderUtils.registerComponent(this.getFullTagName(name), value.CustomElementClass);
+        }
+    }
+    getFullTagName(name) {
+        return `${this._loaderConfig.prefix}-${name}`;
+    }
+    async registerAsync(tagName) {
+        if (customElements.get(tagName))
+            return;
+        const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');
+        if (!this._loaderConfig.components)
+            return;
+        const config = this._loaderConfig.components[baseName];
+        if (!config || !config.importPath)
+            return;
+        try {
+            const module = await import(config.importPath);
+            // Runtime definition: grabbing the class from the module
+            const CustomElementClass = module.default || module[Object.keys(module)[0]];
+            if (CustomElementClass && !customElements.get(tagName)) {
+                customElements.define(tagName, CustomElementClass);
+            }
+            // Handle dependencies recursively
+            if (config.dependencies) {
+                for (const dep of config.dependencies) {
+                    // eslint-disable-next-line no-await-in-loop
+                    await this.registerAsync(this.getFullTagName(dep));
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Unable to load <${tagName}> from ${config.importPath}`, error);
+        }
+    }
+    async load(root) {
+        const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : '';
+        const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el => el.tagName.toLowerCase());
+        if (rootTagName.includes('-') && !customElements.get(rootTagName)) {
+            tags.push(rootTagName);
+        }
+        const tagsToRegister = [...new Set(tags)];
+        await Promise.allSettled(tagsToRegister.map(tagName => this.registerAsync(tagName)));
+    }
+    lazyLoadComponents(root) {
+        this._observer = new MutationObserver(mutations => {
+            for (const { addedNodes } of mutations) {
+                for (const node of addedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        this.load(node);
+                    }
+                }
+            }
+        });
+        const target = root instanceof Document ? root.documentElement : root;
+        this.load(target);
+        this._observer.observe(target, {
+            subtree: true,
+            childList: true,
+        });
+    }
+}
+//# sourceMappingURL=LoaderUtils.js.map

package/dist/src/LoaderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderUtils.js","sourceRoot":"","sources":["../../src/LoaderUtils.ts"],"names":[],"mappings":"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","sourcesContent":["interface ComponentConfig {\n  CustomElementClass?: any; // earger load\n  importPath?: string; // lazy load\n  dependencies?: string[];\n}\n\ninterface LoaderConfig {\n  prefix?: string;\n  components?: Record<string, ComponentConfig>;\n}\n\nexport { LoaderConfig };\n\nexport class LoaderUtils {\n  private _loaderConfig: LoaderConfig;\n  private _observer: MutationObserver | undefined;\n\n  constructor(private loaderConfig: LoaderConfig) {\n    this._loaderConfig = loaderConfig;\n  }\n\n  static registerComponent(tagName: string, CustomElementClass: any) {\n    if (CustomElementClass && !customElements.get(tagName)) {\n      customElements.define(tagName, CustomElementClass);\n    }\n  }\n\n  start() {\n    this.eagerLoadComponents();\n    this.lazyLoadComponents(document);\n  }\n\n  eagerLoadComponents() {\n    if (!this._loaderConfig.components) return;\n    for (const [name, value] of Object.entries(this._loaderConfig.components)) {\n      if (value.CustomElementClass)\n        LoaderUtils.registerComponent(\n          this.getFullTagName(name),\n          value.CustomElementClass,\n        );\n    }\n  }\n\n  getFullTagName(name: string) {\n    return `${this._loaderConfig.prefix}-${name}`;\n  }\n\n  async registerAsync(tagName: string): Promise<void> {\n    if (customElements.get(tagName)) return;\n\n    const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');\n\n    if (!this._loaderConfig.components) return;\n\n    const config = this._loaderConfig.components[baseName];\n    if (!config || !config.importPath) return;\n\n    try {\n      const module = await import(config.importPath);\n\n      // Runtime definition: grabbing the class from the module\n      const CustomElementClass =\n        module.default || module[Object.keys(module)[0]];\n\n      if (CustomElementClass && !customElements.get(tagName)) {\n        customElements.define(tagName, CustomElementClass);\n      }\n\n      // Handle dependencies recursively\n      if (config.dependencies) {\n        for (const dep of config.dependencies) {\n          // eslint-disable-next-line no-await-in-loop\n          await this.registerAsync(this.getFullTagName(dep));\n        }\n      }\n    } catch (error) {\n      console.error(\n        `Unable to load <${tagName}> from ${config.importPath}`,\n        error,\n      );\n    }\n  }\n\n  async load(root: Element | Document): Promise<void> {\n    const rootTagName =\n      root instanceof Element ? root.tagName.toLowerCase() : '';\n\n    const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>\n      el.tagName.toLowerCase(),\n    );\n\n    if (rootTagName.includes('-') && !customElements.get(rootTagName)) {\n      tags.push(rootTagName);\n    }\n\n    const tagsToRegister = [...new Set(tags)];\n    await Promise.allSettled(\n      tagsToRegister.map(tagName => this.registerAsync(tagName)),\n    );\n  }\n\n  lazyLoadComponents(root: any) {\n    this._observer = new MutationObserver(mutations => {\n      for (const { addedNodes } of mutations) {\n        for (const node of addedNodes) {\n          if (node.nodeType === Node.ELEMENT_NODE) {\n            this.load(node as Element);\n          }\n        }\n      }\n    });\n\n    const target = root instanceof Document ? root.documentElement : root;\n    this.load(target);\n\n    this._observer.observe(target, {\n      subtree: true,\n      childList: true,\n    });\n  }\n}\n"]}

package/dist/src/avatar/avatar.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/avatar/avatar.css.js

@@ -0,0 +1,41 @@
+import { css, unsafeCSS } from 'lit';
+import { getTypography } from '../utils.js';
+export const styles = css `
+  :host {
+    display: inline-block;
+    pointer-events: none;
+    --avatar-size: 2rem;
+    --avatar-background-color: var(--color-primary);
+    --avatar-text-color: var(--color-on-primary);
+    --avatar-border-radius: var(--global-avatar-border-radius);
+  }
+
+  .avatar-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-050);
+    line-height: 0;
+  }
+
+  .avatar {
+    border-radius: var(--avatar-border-radius);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--avatar-text-color);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    ${unsafeCSS(getTypography('body-large-emphasized'))}
+    background-color: var(--avatar-background-color);
+
+    font-size: calc(var(--avatar-size) * 0.4);
+
+    .image {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+  }
+`;
+//# sourceMappingURL=avatar.css.js.map

package/dist/src/avatar/avatar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.css.js","sourceRoot":"","sources":["../../../src/avatar/avatar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;;;;;;;;;;;;CAYtD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { getTypography } from '../utils.js';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    pointer-events: none;\n    --avatar-size: 2rem;\n    --avatar-background-color: var(--color-primary);\n    --avatar-text-color: var(--color-on-primary);\n    --avatar-border-radius: var(--global-avatar-border-radius);\n  }\n\n  .avatar-container {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-050);\n    line-height: 0;\n  }\n\n  .avatar {\n    border-radius: var(--avatar-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--avatar-text-color);\n    width: var(--avatar-size);\n    height: var(--avatar-size);\n    ${unsafeCSS(getTypography('body-large-emphasized'))}\n    background-color: var(--avatar-background-color);\n\n    font-size: calc(var(--avatar-size) * 0.4);\n\n    .image {\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      border-radius: inherit;\n    }\n  }\n`;\n"]}