@maltjoy/themes

This package gather all themes for Joy design system. This includes a set of tokens in the form of css variables applied to :root.

Customization

As each theme is a simple group of CSS custom properties, you can easily override a specific value if needed.

:root {
    --joy-color-neutral-60: #000;
}

Tokens

This package includes all "Tokens" defined for Joy design system. You can find all of it on our Zeroheight documentation.

Tokens types

• Colors
• Functional colors
• Elevations
• Border radius
• Spacing
• Transition (animation)
• Layers (z-index)
• Forms
• Typography (font-family, font-size, font-weight, line-height)

Source of truth

Tokens are declared in tokens/**/*.json and built with Style Dictionary:

• _tokens-vars.scss — CSS custom properties on :root
• _tokens-classes.scss — utility classes (colors, radius, elevation, font-size, …)
• dist/tokens-vars.js — ESM export for JavaScript

Run pnpm build:tokens in this package after editing JSON files.

Default theme

Import the compiled default theme:

@import '@maltjoy/themes/dist/default.css';

Or from SCSS:

@use '@maltjoy/themes/dist/default.css';

Custom theme

Extend the default theme and override CSS variables. See src/themes/_example.scss:

@use './tokens-vars';
@use './tokens-classes';
@use './fonts-presets-classes';
@use './spacing-classes';

:root {
  --joy-color-neutral-60: #000;
  --joy-font-size-primary-300: 9px;
}

SCSS utilities

• @maltjoy/themes/src/tools — $FONTS_MAP, getFontBySize() mixin
• @maltjoy/themes/src/tokens/src/spacing — $SPACING_SCALE indices for generated gap/spacing classes

Utility classes (colors, spacing, typography presets, .joy-link, …) are included in dist/default.css.