@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.64

package/dist/design-system/themes/core/tokens/_border-radius.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// BORDER RADIUS TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Corner radius scale
+// Node: 36930:106
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // CORNER RADIUS SCALE (13 values from Figma)
+  // Figma variables: shape/corner/* → SCSS: --er-shape-corner-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-corner-0: 0; // Figma: shape/corner/0 - core 0
+  --er-shape-corner-25: 2px; // Figma: shape/corner/25 - core 2
+  --er-shape-corner-50: 4px; // Figma: shape/corner/50 - core 4
+  --er-shape-corner-75: 6px; // Figma: shape/corner/75 - core 6
+  --er-shape-corner-100: 8px; // Figma: shape/corner/100 - core 8
+  --er-shape-corner-150: 12px; // Figma: shape/corner/150 - core 12
+  --er-shape-corner-200: 16px; // Figma: shape/corner/200 - core 16
+  --er-shape-corner-250: 20px; // Figma: shape/corner/250 - core 20
+  --er-shape-corner-300: 24px; // Figma: shape/corner/300 - core 24
+  --er-shape-corner-350: 28px; // Figma: shape/corner/350 - core 28
+  --er-shape-corner-400: 32px; // Figma: shape/corner/400 - core 32
+  --er-shape-corner-450: 48px; // Figma: shape/corner/450 - core 48
+  --er-shape-corner-full: 1000px; // Figma: shape/corner/full - core 1000, pill/stadium shape (CSS clamps to height/2)
+}

package/dist/design-system/themes/core/tokens/_control-height.scss

@@ -0,0 +1,18 @@
+// ============================================================================
+// CONTROL / COMPONENT HEIGHT TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Control height scale
+// Values alias the shape/spacing/* scale
+// Version: 1.1.0
+// ============================================================================
+
+:root {
+  --er-control-height-xxs: var(--er-shape-spacing-200); // 16px - Figma: xxs → shape/spacing/200
+  --er-control-height-xs: var(--er-shape-spacing-250); // 20px - Figma: xs → shape/spacing/250
+  --er-control-height-sm: var(--er-shape-spacing-300); // 24px - Figma: sm → shape/spacing/300
+  --er-control-height-md: var(--er-shape-spacing-400); // 32px - Figma: md → shape/spacing/400
+  --er-control-height-lg: var(--er-shape-spacing-500); // 40px - Figma: lg → shape/spacing/500
+  --er-control-height-xl: var(--er-shape-spacing-600); // 48px - Figma: xl → shape/spacing/600
+  --er-control-height-2xl: var(--er-shape-spacing-800); // 64px - Figma: 2xl → shape/spacing/800
+  --er-control-height-3xl: var(--er-shape-spacing-900); // 72px - Figma: 3xl → shape/spacing/900
+}

package/dist/design-system/themes/core/tokens/_screen-size.scss

@@ -0,0 +1,10 @@
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (13 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-screen-desktop: 1376px;
+  --er-screen-tablet: 744px;
+  --er-screen-lg: 393px;
+}

package/dist/design-system/themes/core/tokens/_spacing.scss

@@ -0,0 +1,29 @@
+// ============================================================================
+// SPACING TOKENS (Shape / Spacing)
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Spacing scale
+// Node: (from design tokens) — values follow Figma spacing scale
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (14 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-spacing-50: 4px; // Figma: shape/spacing/50 - core 4
+  --er-shape-spacing-75: 6px; // Figma: shape/spacing/75 - core 6
+  --er-shape-spacing-100: 8px; // Figma: shape/spacing/100 - core 8
+  --er-shape-spacing-150: 12px; // Figma: shape/spacing/150 - core 12
+  --er-shape-spacing-200: 16px; // Figma: shape/spacing/200 - core 16
+  --er-shape-spacing-250: 20px; // Figma: shape/spacing/250 - core 20
+  --er-shape-spacing-300: 24px; // Figma: shape/spacing/300 - core 24
+  --er-shape-spacing-400: 32px; // Figma: shape/spacing/400 - core 32
+  --er-shape-spacing-450: 36px; // Figma: shape/spacing/450 - core 36
+  --er-shape-spacing-500: 40px; // Figma: shape/spacing/500 - core 40
+  --er-shape-spacing-600: 48px; // Figma: shape/spacing/600 - core 48
+  --er-shape-spacing-700: 56px; // Figma: shape/spacing/700 - core 56
+  --er-shape-spacing-800: 64px; // Figma: shape/spacing/800 - core 64
+  --er-shape-spacing-900: 72px; // Figma: shape/spacing/900 - core 72
+}

package/dist/design-system/themes/core/typography/_typography-primitives.scss

@@ -0,0 +1,11 @@
+:root {
+  // typography-primitives.scss
+  --er-font-brand: 'Geist';
+  --er-font-plain: 'Geist';
+
+  --er-font-weight-400: 500;
+  --er-font-weight-500: 500;
+  --er-font-weight-600: 600;
+  --er-font-weight-700: 700;
+  --er-font-weight-800: 800;
+}

package/dist/design-system/themes/core/typography/_typography-semantic.scss

@@ -0,0 +1,5 @@
+:root{
+  --er-wg-regular: 400;
+  --er-wg-semi: 500;
+  --er-wg-bold: 600;
+}

package/dist/design-system/themes/core/typography/_typography-tokens.scss

@@ -0,0 +1,185 @@
+// NOTE: Google Fonts (Geist) are loaded via <link> tags in nuxt.config.ts app.head
+// (preconnect + stylesheet) instead of a render-blocking CSS @import.
+
+// ============================================================================
+// TYPOGRAPHY TOKENS
+// ============================================================================
+// Typography system for clear, scalable, and consistent interfaces
+// Source: Figma UI Kit Production - Typography v1.0.0
+// File: https://www.figma.com/design/I9lA8XsNx4Tmn9d0dysJ2A/UI-KIT---PRODUCT
+// Frame: Typography (36924:101)
+//
+// Font: Geist
+// Naming: typo/{category}-{size}/{property}
+// Categories: dis (Display), head (Headline), title (Title), label (Label), body (Body)
+// Sizes: lg (Large), md (Medium), sm (Small)
+// Properties: font, sz, line-hg, wg, tracking
+// IMPORTANT: Variable names MUST match Figma exactly:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // DISPLAY (Largest text: Hero sections, marketing pages)
+  // Frame 36924:291 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Display Large - 57/64 Regular (Frame 36924:292)
+  // typo/dis-lg/{property}
+  --er-typo-dis-lg-font: var(--er-font-brand);
+  --er-typo-dis-lg-sz: 57px;
+  --er-typo-dis-lg-line-hg: 64px;
+  --er-typo-dis-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-lg-tracking: -0.25px;
+
+  // Display Medium - 45/52 Regular (Frame 36924:299)
+  // typo/dis-md/{property}
+  --er-typo-dis-md-font: var(--er-font-brand);
+  --er-typo-dis-md-sz: 45px;
+  --er-typo-dis-md-line-hg: 52px;
+  --er-typo-dis-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-md-tracking: 0;
+
+  // Display Small - 36/44 Regular (Frame 36924:306)
+  // typo/dis-sm/{property}
+  --er-typo-dis-sm-font: var(--er-font-brand);
+  --er-typo-dis-sm-sz: 36px;
+  --er-typo-dis-sm-line-hg: 44px;
+  --er-typo-dis-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // HEADLINE (Page titles, section headers)
+  // Frame 36924:313 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Headline Large - 32/40 Regular (Frame 36924:313)
+  // typo/head-lg/{property}
+  --er-typo-head-lg-font: var(--er-font-brand);
+  --er-typo-head-lg-sz: 32px;
+  --er-typo-head-lg-line-hg: 40px;
+  --er-typo-head-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-lg-tracking: 0;
+
+  // Headline Medium - 28/36 Regular (Frame 36924:320)
+  // typo/head-md/{property}
+  --er-typo-head-md-font: var(--er-font-brand);
+  --er-typo-head-md-sz: 28px;
+  --er-typo-head-md-line-hg: 36px;
+  --er-typo-head-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-md-tracking: 0;
+
+  // Headline Small - 24/32 Regular (Frame 36924:327)
+  // typo/head-sm/{property}
+  --er-typo-head-sm-font: var(--er-font-brand);
+  --er-typo-head-sm-sz: 24px;
+  --er-typo-head-sm-line-hg: 32px;
+  --er-typo-head-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TITLE (Card titles, dialog headers, component headings)
+  // Frame 36924:334 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Title Large - 20/28 Regular (Frame 36924:334)
+  // typo/title-lg/{property}
+  --er-typo-title-lg-font: var(--er-font-brand);
+  --er-typo-title-lg-sz: 20px;
+  --er-typo-title-lg-line-hg: 28px;
+  --er-typo-title-lg-wg: var(--er-wg-semi); // Semi
+  --er-typo-title-lg-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-title-lg-tracking: 0;
+
+  // Title Medium - 16/24 Medium (Frame 36924:341)
+  // typo/title-md/{property}
+  --er-typo-title-md-font: var(--er-font-brand);
+  --er-typo-title-md-sz: 16px;
+  --er-typo-title-md-line-hg: 24px;
+  --er-typo-title-md-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-md-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-md-tracking: 0.15px;
+
+  // Title Small - 14/20 Medium (Frame 36924:348)
+  // typo/title-sm/{property}
+  --er-typo-title-sm-font: var(--er-font-brand);
+  --er-typo-title-sm-sz: 14px;
+  --er-typo-title-sm-line-hg: 20px;
+  --er-typo-title-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-sm-tracking: 0.1px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // LABEL (Form labels, button text, badges, chips)
+  // Frame 36924:355 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Label Large - 14/20 Medium (Frame 36924:355)
+  // typo/label-lg/{property}
+  --er-typo-label-lg-font: var(--er-font-brand);
+  --er-typo-label-lg-sz: 14px;
+  --er-typo-label-lg-line-hg: 20px;
+  --er-typo-label-lg-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-lg-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-lg-tracking: 0.1px;
+
+  // Label Medium - 12/16 Medium (Frame 36924:362)
+  // typo/label-md/{property}
+  --er-typo-label-md-font: var(--er-font-brand);
+  --er-typo-label-md-sz: 12px;
+  --er-typo-label-md-line-hg: 16px;
+  --er-typo-label-md-wg: var(--er-wg-semi); // Semi Bold
+  --er-typo-label-md-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-label-md-tracking: 0.5px;
+
+  // Label Small - 11/16 Medium (Frame 36924:369)
+  // typo/label-sm/{property}
+  --er-typo-label-sm-font: var(--er-font-brand);
+  --er-typo-label-sm-sz: 11px;
+  --er-typo-label-sm-line-hg: 16px;
+  --er-typo-label-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-sm-tracking: 0.5px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BODY (Paragraphs, descriptions, table content)
+  // Frame 36924:376 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Body Large - 16/24 Regular (Frame 36924:376)
+  // typo/body-lg/{property}
+  --er-typo-body-lg-font: var(--er-font-brand);
+  --er-typo-body-lg-sz: 16px;
+  --er-typo-body-lg-line-hg: 24px;
+  --er-typo-body-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-lg-tracking: 0.5px;
+
+  // Body Medium - 14/20 Regular (Frame 36924:383)
+  // typo/body-md/{property}
+  --er-typo-body-md-font: var(--er-font-brand);
+  --er-typo-body-md-sz: 14px;
+  --er-typo-body-md-line-hg: 20px;
+  --er-typo-body-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-md-tracking: 0.25px;
+
+  // Body Small - 12/16 Regular (Frame 36924:390)
+  // typo/body-sm/{property}
+  --er-typo-body-sm-font: var(--er-font-brand);
+  --er-typo-body-sm-sz: 12px;
+  --er-typo-body-sm-line-hg: 16px;
+  --er-typo-body-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-sm-tracking: 0.4px;
+}

package/dist/design-system/themes/core/typography/_typography-utils.scss

@@ -0,0 +1,375 @@
+// ============================================================================
+// TYPOGRAPHY UTILITIES
+// ============================================================================
+// Helper mixins and classes for applying typography tokens
+// Usage:
+//   @use '../typography/typography-utils' as typo;
+//   .my-element { @include typo.display-lg; }
+// Or use CSS classes directly: <h1 class="typo-dis-lg">
+//
+// IMPORTANT: Uses Figma naming convention:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// MIXINS - Use in SCSS
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display styles
+@mixin display-lg {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-lg-em {
+  font-family: var(--er-typo-dis-lg-font);
+  font-size: var(--er-typo-dis-lg-sz);
+  line-height: var(--er-typo-dis-lg-line-hg);
+  font-weight: var(--er-typo-dis-lg-wg-em);
+  letter-spacing: var(--er-typo-dis-lg-tracking);
+}
+
+@mixin display-md {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-md-em {
+  font-family: var(--er-typo-dis-md-font);
+  font-size: var(--er-typo-dis-md-sz);
+  line-height: var(--er-typo-dis-md-line-hg);
+  font-weight: var(--er-typo-dis-md-wg-em);
+  letter-spacing: var(--er-typo-dis-md-tracking);
+}
+
+@mixin display-sm {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+@mixin display-sm-em {
+  font-family: var(--er-typo-dis-sm-font);
+  font-size: var(--er-typo-dis-sm-sz);
+  line-height: var(--er-typo-dis-sm-line-hg);
+  font-weight: var(--er-typo-dis-sm-wg-em);
+  letter-spacing: var(--er-typo-dis-sm-tracking);
+}
+
+// Headline styles
+@mixin headline-lg {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-lg-em {
+  font-family: var(--er-typo-head-lg-font);
+  font-size: var(--er-typo-head-lg-sz);
+  line-height: var(--er-typo-head-lg-line-hg);
+  font-weight: var(--er-typo-head-lg-wg-em);
+  letter-spacing: var(--er-typo-head-lg-tracking);
+}
+
+@mixin headline-md {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-md-em {
+  font-family: var(--er-typo-head-md-font);
+  font-size: var(--er-typo-head-md-sz);
+  line-height: var(--er-typo-head-md-line-hg);
+  font-weight: var(--er-typo-head-md-wg-em);
+  letter-spacing: var(--er-typo-head-md-tracking);
+}
+
+@mixin headline-sm {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+@mixin headline-sm-em {
+  font-family: var(--er-typo-head-sm-font);
+  font-size: var(--er-typo-head-sm-sz);
+  line-height: var(--er-typo-head-sm-line-hg);
+  font-weight: var(--er-typo-head-sm-wg-em);
+  letter-spacing: var(--er-typo-head-sm-tracking);
+}
+
+// Title styles
+@mixin title-lg {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  line-height: var(--er-typo-title-lg-line-hg);
+  font-weight: var(--er-typo-title-lg-wg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-lg-em {
+  font-family: var(--er-typo-title-lg-font);
+  font-size: var(--er-typo-title-lg-sz);
+  font-weight: var(--er-typo-title-lg-wg-em);
+  line-height: var(--er-typo-title-lg-line-hg);
+  letter-spacing: var(--er-typo-title-lg-tracking);
+}
+
+@mixin title-md {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-md-em {
+  font-family: var(--er-typo-title-md-font);
+  font-size: var(--er-typo-title-md-sz);
+  line-height: var(--er-typo-title-md-line-hg);
+  font-weight: var(--er-typo-title-md-wg-em);
+  letter-spacing: var(--er-typo-title-md-tracking);
+}
+
+@mixin title-sm {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+@mixin title-sm-em {
+  font-family: var(--er-typo-title-sm-font);
+  font-size: var(--er-typo-title-sm-sz);
+  line-height: var(--er-typo-title-sm-line-hg);
+  font-weight: var(--er-typo-title-sm-wg-em);
+  letter-spacing: var(--er-typo-title-sm-tracking);
+}
+
+// Label styles
+@mixin label-lg {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-lg-em {
+  font-family: var(--er-typo-label-lg-font);
+  font-size: var(--er-typo-label-lg-sz);
+  line-height: var(--er-typo-label-lg-line-hg);
+  font-weight: var(--er-typo-label-lg-wg-em);
+  letter-spacing: var(--er-typo-label-lg-tracking);
+}
+
+@mixin label-md {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-md-em {
+  font-family: var(--er-typo-label-md-font);
+  font-size: var(--er-typo-label-md-sz);
+  line-height: var(--er-typo-label-md-line-hg);
+  font-weight: var(--er-typo-label-md-wg-em);
+  letter-spacing: var(--er-typo-label-md-tracking);
+}
+
+@mixin label-sm {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+@mixin label-sm-em {
+  font-family: var(--er-typo-label-sm-font);
+  font-size: var(--er-typo-label-sm-sz);
+  line-height: var(--er-typo-label-sm-line-hg);
+  font-weight: var(--er-typo-label-sm-wg-em);
+  letter-spacing: var(--er-typo-label-sm-tracking);
+}
+
+// Body styles
+@mixin body-lg {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-lg-em {
+  font-family: var(--er-typo-body-lg-font);
+  font-size: var(--er-typo-body-lg-sz);
+  line-height: var(--er-typo-body-lg-line-hg);
+  font-weight: var(--er-typo-body-lg-wg-em);
+  letter-spacing: var(--er-typo-body-lg-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-md-em {
+  font-family: var(--er-typo-body-md-font);
+  font-size: var(--er-typo-body-md-sz);
+  line-height: var(--er-typo-body-md-line-hg);
+  font-weight: var(--er-typo-body-md-wg-em);
+  letter-spacing: var(--er-typo-body-md-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+@mixin body-sm-em {
+  font-family: var(--er-typo-body-sm-font);
+  font-size: var(--er-typo-body-sm-sz);
+  line-height: var(--er-typo-body-sm-line-hg);
+  font-weight: var(--er-typo-body-sm-wg-em);
+  letter-spacing: var(--er-typo-body-sm-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// UTILITY CLASSES - Use in HTML
+// ─────────────────────────────────────────────────────────────────────────
+
+// Display classes
+.typo-dis-lg {
+  @include display-lg;
+}
+.typo-dis-lg-em {
+  @include display-lg-em;
+}
+.typo-dis-md {
+  @include display-md;
+}
+.typo-dis-md-em {
+  @include display-md-em;
+}
+.typo-dis-sm {
+  @include display-sm;
+}
+.typo-dis-sm-em {
+  @include display-sm-em;
+}
+
+// Headline classes
+.typo-head-lg {
+  @include headline-lg;
+}
+.typo-head-lg-em {
+  @include headline-lg-em;
+}
+.typo-head-md {
+  @include headline-md;
+}
+.typo-head-md-em {
+  @include headline-md-em;
+}
+.typo-head-sm {
+  @include headline-sm;
+}
+.typo-head-sm-em {
+  @include headline-sm-em;
+}
+
+// Title classes
+.typo-title-lg {
+  @include title-lg;
+}
+.typo-title-lg-em {
+  @include title-lg-em;
+}
+.typo-title-md {
+  @include title-md;
+}
+.typo-title-md-em {
+  @include title-md-em;
+}
+.typo-title-sm {
+  @include title-sm;
+}
+.typo-title-sm-em {
+  @include title-sm-em;
+}
+
+// Label classes
+.typo-label-lg {
+  @include label-lg;
+}
+.typo-label-lg-em {
+  @include label-lg-em;
+}
+.typo-label-md {
+  @include label-md;
+}
+.typo-label-md-em {
+  @include label-md-em;
+}
+.typo-label-sm {
+  @include label-sm;
+}
+.typo-label-sm-em {
+  @include label-sm-em;
+}
+
+// Body classes
+.typo-body-lg {
+  @include body-lg;
+}
+.typo-body-lg-em {
+  @include body-lg-em;
+}
+.typo-body-md {
+  @include body-md;
+}
+.typo-body-md-em {
+  @include body-md-em;
+}
+.typo-body-sm {
+  @include body-sm;
+}
+.typo-body-sm-em {
+  @include body-sm-em;
+}