Skip to content

v2.1.0

Choose a tag to compare

@github-actions github-actions released this 13 Apr 02:59
· 202 commits to main since this release

What's New

  • Phosphor Icons adopted as the design system's icon system. Load @phosphor-icons/web bold and regular weights. Convention: ph-bold for interactive controls, ph-regular for informational icons. Accordion, Modal, and Toast migrated from inline SVGs.
  • Button utility classes.btn, .btn-sm, .btn-lg, .btn-primary, .btn-secondary, .btn-tertiary, .btn-ghost, .btn-destructive for consumers using native <button> or <a> elements (#75)
  • Input: textarea support — add [multiline]="true" to app-input to render a <textarea> with identical styling, focus ring, error, and hint (#53)
  • Select component — new app-select wrapper with native <select>, Phosphor caret, ControlValueAccessor, label/error/hint/disabled parity with app-input (#54)
  • Navigation + Tabs: inverse varianttheme="inverse" renders on --color-bg-inverse (dark navy in light mode) for apps with dark headers (#65)
  • Toast: imperative APIToastService.show(message, variant, options) and ToastContainerComponent. Place the container once in AppComponent; call show() from anywhere (#66)
  • Badge: ordinal severity pattern — documented mapping of domain severity scales (minor/moderate/fundamental, low/medium/high/critical) onto existing status token triplets (#74)

New tokens

  • --color-text-subtle-on-inverse — muted text on inverse surfaces (light + dark)
  • --color-border-on-inverse — subtle divider on inverse surfaces (light + dark)

New peer dependency

@phosphor-icons/web — add to your project and import the bold and regular weights in your global stylesheet:

@import '@phosphor-icons/web/bold/style.css';
@import '@phosphor-icons/web/regular/style.css';

Full Changelog: v2.0.0...v2.1.0