@maltjoy/themes

@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)

Usage

This package is meant to be used with @maltjoy/themes.

But if you need to fully customize tokens, you can create you own theme:

@use './tokens/src/tokens' with (
    $joy-color-neutral-60: #000,
    $joy-font-size-primary-300: 9px,
    $joy-core-spacing-base: 3px,
    // and so on...
);

:root {
  // Call all the mixin in order to generate all CSS custom properties
  @include tokens.getPaletteProperties();
  @include tokens.getContextualPaletteProperties();
  @include tokens.getTextPaletteProperties();
  @include tokens.getFunctionalPaletteProperties();
  @include tokens.getOverlayProperties();
  @include tokens.getElevationsProperties();
  @include tokens.getFontsProperties();
  @include tokens.getRadiusProperties();
  @include tokens.getSpacingProperties();
  @include tokens.getAnimationsProperties();
  @include tokens.getZindexProperties();
  @include tokens.getFormsProperties();
}

All original modules are accessible from SCSS source files.