Themes

Description

Theme registration and Bulma style bundle for Enso UI.

Installation

Install the package:

yarn add @enso-ui/themes

Features

• registers the theme selector inside the shared settings menu
• ships Bulma component styles and overrides for Enso UI
• adds responsive layout spacing helpers on top of the shared Bulma bundle
• keeps theme wiring isolated from the main shell package

Usage

import registerThemes from '@enso-ui/themes/src/bulma/register';

registerThemes(app);

Layout Helpers

The package ships responsive spacing helpers for layout work when local component CSS would be unnecessary.

Supported families:

• m/p-0..6
• mx/my/px/py-0..6
• mt/mr/mb/ml/pt/pr/pb/pl-0..6
• m-auto, mx-auto, my-auto, mt-auto, mr-auto, mb-auto, ml-auto

Supported responsive suffixes:

• -mobile: mobile only
• -touch: touch widths up to desktop
• -tablet: tablet and above
• -desktop: desktop and above
• -widescreen: widescreen and above
• -fullhd: fullhd and above

Examples:

<section class="px-2-mobile px-4-tablet py-3-desktop">
    ...
</section>

<div class="mx-auto-widescreen mt-2-touch mt-5-desktop">
    ...
</div>

These helpers were added because responsive spacing is a recurring need in Bulma-based layouts, and the shared layer benefits from offering a predictable utility contract instead of forcing each application to reinvent small wrapper classes.

Typography Contract

The shared theme layer exposes two application-level font handles:

• --enso-font-ui
• --enso-font-content

Applications should override only these two variables locally, typically in the host application's main stylesheet:

:root {
    --enso-font-ui: 'Plus Jakarta Sans', sans-serif;
    --enso-font-content: 'DM Sans', system-ui, sans-serif;
}

The shared theme layer maps them to the Bulma typography contract as follows:

• --bulma-body-family → --enso-font-content
• --bulma-family-primary → --enso-font-content
• --bulma-family-secondary → --enso-font-ui

This creates two semantic typography groups:

• content
  • body text
  • table values
  • input and select values
  • general document copy
• ui
  • menu and navigation labels
  • titles and subtitles
  • buttons and action chrome
  • shell controls such as tabs and settings items

API

Depends On

• No additional Enso UI dependencies.

Contributions

are welcome. Pull requests are great, but issues are good too. Thank you to all the people who already contributed to Enso!

License

MIT