Skip to content

Usage of KERN

Status

Accepted.

Context

POLAR has to comply with the KERN UX design system. KERN offers multiple ways of consuming it:

  • @kern-ux/native: plain CSS and HTML
  • (+) Flexible, since we write the HTML elements ourselves.
  • (+) Only official (not only community-based) KERN package
  • (-) We either have to maintain our own components or write the rather long HTML again and again.
  • The WebC Light Kit, i.e. KERN as web components
  • (-) Web components within web components, as POLAR itself is a web component.
  • (-) Some components do not work well within web components.
  • (-) Adjustments to the components are barely possible.
  • The Vue Kit, i.e. KERN as Vue components
  • (-) Adjustments to the components are barely possible.

Decision

We use @kern-ux/native. Larger wrapping components are maintained in src/components/kern to avoid repeating the HTML boilerplate.

Consequences

  • (+) The rendered markup is fully under our control and can be adjusted where POLAR requires it.
  • (+) No nesting of web components within web components is necessary.
  • (-) The wrapping components in src/components/kern have to be maintained by us and kept in sync with KERN updates.