@eaera-com/eaera-widgets-v2 0.1.80 → 0.1.81

package/dist/design-system/themes/netr/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/netr/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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eaera-com/eaera-widgets-v2",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "description": "Vue 3 UI widget library shared across Eaera CRM products",
   "keywords": [
     "vue",