@eagami/ui 4.4.0 → 4.5.1

package/src/styles/tokens/_spacing.scss

@@ -1,73 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --space-0: 0;
-  --space-px: 1px;
-  --space-0-5: 0.125rem; //  2px
-  --space-1: 0.25rem; //  4px
-  --space-1-5: 0.375rem; //  6px
-  --space-2: 0.5rem; //  8px
-  --space-2-5: 0.625rem; // 10px
-  --space-3: 0.75rem; // 12px
-  --space-3-5: 0.875rem; // 14px
-  --space-4: 1rem; // 16px
-  --space-5: 1.25rem; // 20px
-  --space-6: 1.5rem; // 24px
-  --space-7: 1.75rem; // 28px
-  --space-8: 2rem; // 32px
-  --space-9: 2.25rem; // 36px
-  --space-10: 2.5rem; // 40px
-  --space-11: 2.75rem; // 44px
-  --space-12: 3rem; // 48px
-  --space-14: 3.5rem; // 56px
-  --space-16: 4rem; // 64px
-  --space-20: 5rem; // 80px
-  --space-24: 6rem; // 96px
-  --space-32: 8rem; // 128px
-
-  // Negative variants mirror the scale (n- infix) so consumers skip
-  // `calc(var(--space-2) * -1)` for negative margins.
-  --space-n-px: -1px;
-  --space-n-0-5: -0.125rem; //  -2px
-  --space-n-1: -0.25rem; //  -4px
-  --space-n-1-5: -0.375rem; //  -6px
-  --space-n-2: -0.5rem; //  -8px
-  --space-n-2-5: -0.625rem; // -10px
-  --space-n-3: -0.75rem; // -12px
-  --space-n-3-5: -0.875rem; // -14px
-  --space-n-4: -1rem; // -16px
-  --space-n-5: -1.25rem; // -20px
-  --space-n-6: -1.5rem; // -24px
-  --space-n-7: -1.75rem; // -28px
-  --space-n-8: -2rem; // -32px
-  --space-n-9: -2.25rem; // -36px
-  --space-n-10: -2.5rem; // -40px
-  --space-n-11: -2.75rem; // -44px
-  --space-n-12: -3rem; // -48px
-  --space-n-14: -3.5rem; // -56px
-  --space-n-16: -4rem; // -64px
-  --space-n-20: -5rem; // -80px
-  --space-n-24: -6rem; // -96px
-  --space-n-32: -8rem; // -128px
-
-  --inset-xs: var(--space-1) var(--space-2); //  4px  8px
-  --inset-sm: var(--space-1-5) var(--space-3); //  6px 12px
-  --inset-md: var(--space-2) var(--space-4); //  8px 16px
-  --inset-lg: var(--space-3) var(--space-6); // 12px 24px
-  --inset-xl: var(--space-4) var(--space-8); // 16px 32px
-
-  // vertical gap
-  --stack-2xs: var(--space-1); //  4px
-  --stack-xs: var(--space-2); //  8px
-  --stack-sm: var(--space-3); // 12px
-  --stack-md: var(--space-4); // 16px
-  --stack-lg: var(--space-6); // 24px
-  --stack-xl: var(--space-8); // 32px
-  --stack-2xl: var(--space-12); // 48px
-
-  // horizontal gap
-  --inline-2xs: var(--space-1); //  4px
-  --inline-xs: var(--space-2); //  8px
-  --inline-sm: var(--space-3); // 12px
-  --inline-md: var(--space-4); // 16px
-  --inline-lg: var(--space-6); // 24px
-}

package/src/styles/tokens/_typography.scss

@@ -1,147 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  // The `* Fallback` faces are Arial tuned with metric overrides to match the
-  // web fonts, so they must sit right after each web font in the stack: that way
-  // text laid out before the font loads has the same metrics and `font-display:
-  // swap` causes no layout shift when the real font arrives.
-  --font-family-sans:
-    'DM Sans', 'DM Sans Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --font-family-brand:
-    'Syne', 'Syne Fallback', 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
-  --font-family-serif: 'Georgia', 'Times New Roman', serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-
-  --font-size-2xs: 0.625rem; // 10px
-  --font-size-xs: 0.75rem; // 12px
-  --font-size-sm: 0.875rem; // 14px
-  --font-size-md: 1rem; // 16px
-  --font-size-lg: 1.125rem; // 18px
-  --font-size-xl: 1.25rem; // 20px
-  --font-size-2xl: 1.5rem; // 24px
-  --font-size-3xl: 1.875rem; // 30px
-  --font-size-4xl: 2.25rem; // 36px
-  --font-size-5xl: 3rem; // 48px
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
-
-  --letter-spacing-tighter: -0.05em;
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0em;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --letter-spacing-widest: 0.1em;
-
-  // Leading/status icon sized relative to the text beside it; em keeps it in
-  // proportion as the surrounding font-size changes
-  --icon-inline-size: 1.5em;
-
-  --text-display-size: var(--font-size-5xl);
-  --text-display-weight: var(--font-weight-bold);
-  --text-display-lh: var(--line-height-tight);
-
-  --text-h1-size: var(--font-size-4xl);
-  --text-h1-weight: var(--font-weight-bold);
-  --text-h1-lh: var(--line-height-tight);
-
-  --text-h2-size: var(--font-size-3xl);
-  --text-h2-weight: var(--font-weight-semibold);
-  --text-h2-lh: var(--line-height-snug);
-
-  --text-h3-size: var(--font-size-2xl);
-  --text-h3-weight: var(--font-weight-semibold);
-  --text-h3-lh: var(--line-height-snug);
-
-  --text-h4-size: var(--font-size-xl);
-  --text-h4-weight: var(--font-weight-semibold);
-  --text-h4-lh: var(--line-height-snug);
-
-  // Page-level subsection title (an `<h2>` under the page `<h1>`). Mirrors
-  // `--text-h4-*` metrics but pins the brand family so it reads as wordmark,
-  // not body. Only composite that pins a font-family.
-  --text-section-heading-size: var(--font-size-xl);
-  --text-section-heading-weight: var(--font-weight-semibold);
-  --text-section-heading-lh: var(--line-height-snug);
-  --text-section-heading-family: var(--font-family-brand);
-
-  --text-body-lg-size: var(--font-size-lg);
-  --text-body-lg-weight: var(--font-weight-regular);
-  --text-body-lg-lh: var(--line-height-relaxed);
-
-  --text-body-md-size: var(--font-size-md);
-  --text-body-md-weight: var(--font-weight-regular);
-  --text-body-md-lh: var(--line-height-normal);
-
-  --text-body-sm-size: var(--font-size-sm);
-  --text-body-sm-weight: var(--font-weight-regular);
-  --text-body-sm-lh: var(--line-height-normal);
-
-  --text-label-lg-size: var(--font-size-md);
-  --text-label-lg-weight: var(--font-weight-medium);
-  --text-label-lg-lh: var(--line-height-tight);
-
-  --text-label-md-size: var(--font-size-sm);
-  --text-label-md-weight: var(--font-weight-medium);
-  --text-label-md-lh: var(--line-height-tight);
-
-  --text-label-sm-size: var(--font-size-xs);
-  --text-label-sm-weight: var(--font-weight-medium);
-  --text-label-sm-lh: var(--line-height-tight);
-
-  // Helper / caption: subordinate text below a component's primary content.
-  // 13px (between --font-size-xs 12px and -sm 14px) so it stays subordinate
-  // without hitting the barely-readable 12px floor. Used for field hint and
-  // error messages (see standard below) and short metadata such as a
-  // file-uploader's constraints or per-file size labels.
-  //
-  // Standard: every form-like component (anything exposing `errorMsg` and/or
-  // `hint`) must render its messages identically. Mirror `<ea-input>`:
-  //   1. `<p class="ea-{name}-field__message ea-{name}-field__message--error">`
-  //      (or `--hint`) with `role="alert"` on the error variant and an `id`
-  //      matching the field's `aria-describedby`.
-  //   2. The first child of the error `<p>` is always
-  //      `<ea-icon-alert-circle class="ea-{name}-field__message-icon" />`.
-  //      Hints render text-only (no icon).
-  //   3. `__message` uses `display: flex; align-items: center; gap: var(--space-1)`
-  //      plus the three `--text-helper-*` tokens above. Never hard-code a
-  //      font-size on `__message`.
-  //   4. `__message-icon` uses `flex-shrink: 0; width: 0.875em; height: 0.875em`
-  //      so the icon scales with the text.
-  //   5. Error color is `var(--color-error-default)`. Hint color is component-
-  //      specific (`--color-text-secondary` or `inherit`) but stays consistent
-  //      within a component.
-  //   6. `AlertCircleIconComponent` must be in the component's `imports: [...]`.
-  --text-helper-size: 0.8125rem; // 13px
-  --text-helper-weight: var(--font-weight-regular);
-  --text-helper-lh: var(--line-height-normal);
-
-  // Inline code chip; em-sized so it tracks the surrounding text
-  --text-code-size: 0.875em;
-  --text-code-weight: var(--font-weight-regular);
-  --text-code-family: var(--font-family-mono);
-  --text-code-color: var(--color-text-primary);
-  --text-code-bg: var(--color-bg-muted);
-  --text-code-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
-  --text-code-radius: var(--radius-sm);
-
-  // Keyboard-key glyph; raised border + bottom shadow suggest a physical key
-  --text-kbd-size: 0.8125em;
-  --text-kbd-weight: var(--font-weight-medium);
-  --text-kbd-family: var(--font-family-mono);
-  --text-kbd-color: var(--color-text-primary);
-  --text-kbd-bg: var(--color-bg-base);
-  --text-kbd-border: var(--border-width-thin) solid var(--color-border-default);
-  --text-kbd-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
-  --text-kbd-radius: var(--radius-sm);
-  --text-kbd-shadow: 0 1px 0 var(--color-border-default);
-}