@maltjoy/tokens

@maltjoy/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 '@maltjoy/tokens/src/tokens' with (
    $joy-color-neutral-6: #000,
    $joy-font-size-xs: 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.