@eagami/ui 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_mixins.scss

@@ -0,0 +1,45 @@
+// Shared SCSS mixins for the library. Consume from a component stylesheet with:
+//   @use '../../styles/mixins' as ea;
+//   .ea-foo__close { @include ea.icon-button; }
+
+// Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
+// is `--ea-icon-button-size` (em) so it scales with the host component's size and
+// is consistent across components at a given size tier. The glyph is enlarged so
+// it reads clearly inside the box regardless of how much padding the icon's own
+// viewBox carries (the feather `x`, for instance, only fills its middle half).
+@mixin icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ea-icon-button-size, 1.75em);
+  height: var(--ea-icon-button-size, 1.75em);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-colors);
+
+  // Glyph sized via font-size (not width) so it overrides the icon's inline 1em
+  // host size and still scales with the box.
+  > * {
+    font-size: 1.25em;
+  }
+
+  &:hover {
+    background-color: var(--color-state-hover);
+    color: var(--color-text-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/src/styles/tokens/_colors.scss

@@ -78,6 +78,9 @@
   --color-bg-subtle: var(--color-neutral-50);
   --color-bg-stripe: var(--color-neutral-50);
   --color-bg-muted: var(--color-neutral-100);
+  // Stronger neutral fill for placeholder surfaces (e.g. avatar) that must read
+  // clearly against the page; muted is too faint on a white base
+  --color-bg-emphasis: var(--color-neutral-300);
   --color-bg-elevated: var(--color-neutral-0);
   --color-bg-overlay: rgba(0, 0, 0, 0.5);
 
@@ -92,6 +95,7 @@
   --color-border-subtle: var(--color-neutral-200);
   --color-border-default: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-400);
+  --color-divider: var(--color-border-subtle);
   --color-border-focus: var(--color-primary-500);
 
   // brand-default/-hover/-active are the brand colour as a surface (solid bg
@@ -170,6 +174,7 @@
   // tracks, skeletons). Hover/active fills route through the translucent
   // --color-state-* tokens instead, so they never collide with this shade.
   --color-bg-muted: var(--color-neutral-700);
+  --color-bg-emphasis: var(--color-neutral-600);
 
   // White wash so an interactive lift reads on any dark surface, including the
   // neutral-700 tier where bg-muted/-subtle/-elevated all coincide. This is the
@@ -187,6 +192,9 @@
   );
   --color-border-default: var(--color-neutral-400);
   --color-border-strong: var(--color-neutral-300);
+  // Dividers read as barely-there against dark surfaces at border-subtle, so
+  // they step one neutral lighter for a visible-but-quiet rule.
+  --color-divider: var(--color-neutral-600);
 
   // Surface roles step one shade lighter than light mode so the button clears
   // WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label

package/src/styles/tokens/_shape.scss

@@ -13,4 +13,10 @@
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 4px;
+
+  // Hit-target box for icon buttons (clear / close / dismiss / toggle). em-based
+  // so it scales with the host component's size; since all sized components share
+  // a font-size per tier, this is also consistent across components at a tier
+  // (md = 1.75 * 16px = 28px).
+  --ea-icon-button-size: 1.75em;
 }

package/src/styles/tokens/_typography.scss

@@ -1,6 +1,12 @@
 :root {
-  --font-family-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --font-family-brand: 'Syne', 'DM Sans', system-ui, sans-serif;
+  // 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;
 
@@ -35,6 +41,10 @@
   --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);