Ask Claude CodeAsk CodexRSS

Harmo 0.2.0

Dark mode, eight accents, a theme for any brand color with npx harmo-ui theme, and two new components, Kbd and Card.

On this page: Install · Upgrading · Added · Changed · Fixed

Install

With the packages installed:

bun add @harmo-ui/css@0.2.0 @harmo-ui/react@0.2.0

With copied components, for each one you use. Files you've changed are kept until you say to replace them:

bunx harmo-ui@0.2.0 add <component>

Upgrading

  • Buttons and switches use the new fill tokens. A primary button's colors are now --harmo-color-primary-fill, --harmo-color-primary-fill-hover, and --harmo-color-primary-fill-active, and a switch's is --harmo-color-primary-fill. On :root they follow your --harmo-color-primary: the fill is the primary, one step darker on hover and another when pressed.

    What you'll notice: if you set --harmo-color-primary-hover or --harmo-color-primary-active to restyle buttons, they now hover one step darker than your primary, not in your hover color. Set the fill tokens instead; the other two still color text and links.

    In 0.1.1:

    globals.css
    :root {
  --harmo-color-primary: #0f75b6;
  --harmo-color-primary-hover: #0265a0;
  --harmo-color-primary-active: #005589;
}

    In 0.2.0:

    globals.css
    :root {
  --harmo-color-primary: #0f75b6;
  --harmo-color-primary-fill-hover: #0265a0;
  --harmo-color-primary-fill-active: #005589;
}

    Or run npx harmo-ui theme "#0f75b6", which sets every role, in light and dark mode.

  • A theme on an element needs the fill tokens there too. A token built from another is worked out on :root, so on an element, the fills don't follow a primary set there.

    What you'll notice: in a section you colored with --harmo-color-primary, what uses the primary itself takes the color, such as an accent tag, but buttons and switches stay purple:

    Unread 
    <section style="--harmo-color-primary: light-dark(#0f75b6, #30aed9)">
  <span class="htag" data-variant="accent">Unread</span>
  <button class="hbutton" type="button">
    <span class="hbutton-label">Save</span>
  </button>
  <input class="hswitch" type="checkbox" role="switch" checked aria-label="Email recaps" />
</section>

    Set the fills on the section as well:

    Unread 
    <section
  style="
    --harmo-color-primary: light-dark(#0f75b6, #30aed9);
    --harmo-color-primary-fill: light-dark(#0f75b6, #1f6bb0);
    --harmo-color-primary-fill-hover: light-dark(#0a5d92, #2478c4);
    --harmo-color-primary-fill-active: light-dark(#064c79, #1b62a0);
  "
>
  <span class="htag" data-variant="accent">Unread</span>
  <button class="hbutton" type="button">
    <span class="hbutton-label">Save</span>
  </button>
  <input class="hswitch" type="checkbox" role="switch" checked aria-label="Email recaps" />
</section>

    An accent on the section, such as data-harmo-accent="blue", sets them for you.

Added

  • Dark mode. Every color is a light and dark pair, through light-dark(). A page stays light until it opts in with color-scheme: dark, or color-scheme: light dark to follow the system, on :root or on any part of the page.
  • Accents. data-harmo-accent on <html>, or on any element, recolors what's inside it: purple (the default), blue, teal, green, amber, red, pink, or mono, which is black, or near-white in dark mode. Each passes WCAG AA in every role, in both modes. index.css includes them, and npx harmo-ui add copies accents.css with tokens.css; with per-component imports, load accents.css after tokens.css.
  • npx harmo-ui theme "<hex>", which writes harmo-theme.css: your brand color in every role, in light and dark mode, at WCAG AA, adapted from the nearest accent. It adds the file to harmo.css when there is one.
  • Kbd: <kbd class="hkbd">, or <Kbd>, for a key or shortcut, such as Enter or ⌘K, in text or on a button.
  • Card: .hcard, or <Card>, a frame around a group of content, tinted by default, raised, or ghost for rows that lead somewhere.
  • Tokens: --harmo-color-primary-fill, -fill-hover, and -fill-active, for what has white text on it, Button and Switch; --harmo-link-hover-text-decoration; and --harmo-card-padding.

Changed

  • A primary button is one step darker on hover and another when pressed, and in dark mode one step lighter on hover, instead of turning dark purple.
  • @harmo-ui/react declares "sideEffects": false, so a bundler can leave out the components an app doesn't use.
  • The packages' npm pages link to harmo-ui.com.

Fixed

  • A popup, and the list inside it, stay 8px from the window's edge, as on a phone, and a list fills a popup wider than its 32rem cap.
  • An open list no longer shows the browser's own focus ring, clipped by its popup. When the list has keyboard focus and no option is highlighted, its popup shows Harmo's focus ring.
  • The React README shows HarmoProvider in a Client Component, as the Next.js App Router needs.

Older: Harmo 0.1.1 · Every release