@eagami/ui 1.4.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "@angular/core": "^21.0.0",
     "@angular/forms": "^21.0.0"
   },
+  "dependencies": {},
   "engines": {
     "node": ">=20"
   },
@@ -40,6 +41,5 @@
       "default": "./fesm2022/eagami-ui.mjs"
     }
   },
-  "type": "module",
-  "dependencies": {}
+  "type": "module"
 }

package/src/styles/tokens/_colors.scss

@@ -132,6 +132,19 @@
   --color-info-default: var(--color-info-600);
   --color-info-subtle: var(--color-info-50);
   --color-info-muted: var(--color-info-100);
+
+  // Color-picker mechanics — pure RGB primaries that build the hue wheel and
+  // the saturation/value gradient. These are intrinsic to the picker UI, not
+  // themeable, but live here so component SCSS stays literal-free.
+  --color-picker-hue-red: #ff0000;
+  --color-picker-hue-yellow: #ffff00;
+  --color-picker-hue-green: #00ff00;
+  --color-picker-hue-cyan: #00ffff;
+  --color-picker-hue-blue: #0000ff;
+  --color-picker-hue-magenta: #ff00ff;
+  --color-picker-sv-white: #ffffff;
+  --color-picker-sv-black: #000000;
+  --color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
 }
 
 // ---------------------------------------------------------------------------

package/src/styles/tokens/_spacing.scss

@@ -28,6 +28,34 @@
   --space-24: 6rem; // 96px
   --space-32: 8rem; // 128px
 
+  // ---------------------------------------------------------------------------
+  // Negative variants — mirror the positive scale 1:1 with an `n-` infix.
+  // Useful for negative margins (container bleeds, overlap tricks, gutter
+  // collapsing) so consumers don't have to write `calc(var(--space-2) * -1)`.
+  // ---------------------------------------------------------------------------
+  --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
+
   // ---------------------------------------------------------------------------
   // Layout / component-specific semantic spacing
   // ---------------------------------------------------------------------------

package/src/styles/tokens/_typography.scss

@@ -9,7 +9,7 @@
   --font-family-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
   --font-family-brand: 'Syne', 'DM Sans', system-ui, sans-serif;
   --font-family-serif: 'Georgia', 'Times New Roman', serif;
-  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
   // ---------------------------------------------------------------------------
   // Font sizes (rem, base 16px)
@@ -107,13 +107,57 @@
   --text-label-sm-weight: var(--font-weight-medium);
   --text-label-sm-lh: var(--line-height-tight);
 
-  // Helper / caption
-  --text-helper-size: var(--font-size-xs);
+  // Helper / caption — used for field-level hint and error messages. Sits
+  // between `--font-size-xs` (12px) and `--font-size-sm` (14px) at 13px so
+  // it stays visually subordinate to the field's label without dropping into
+  // the "barely readable" zone that 12px hits on dense forms.
+  //
+  // STANDARD — every form-like component (anything exposing `errorMsg` and/or
+  // `hint`) must render its messages identically. Mirror `<ea-input>` exactly:
+  //   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);
 
-  // Code
-  --text-code-size: var(--font-size-sm);
+  // Code — inline code styled to read as a chip embedded in body text. Size
+  // is relative (em) so it tracks the surrounding text size rather than
+  // forcing an absolute value. Apply with `font-size: var(--text-code-size);
+  // font-weight: var(--text-code-weight); font-family: var(--text-code-family);
+  // color: var(--text-code-color); background-color: var(--text-code-bg);
+  // padding: var(--text-code-padding); border-radius: var(--text-code-radius);`
+  // on `code` (or `<ea-text variant="code">` when that ships).
+  --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);
+
+  // Kbd — keyboard-key glyph, slightly smaller than inline code and with a
+  // raised appearance (border + 1px bottom shadow) to suggest a physical key.
+  // Same shape language as `code` so the two read as a family.
+  --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);
 }