@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 {
@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.