4.0.1 • Published 1 year ago
@maltjoy/tokens v4.0.1
@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.
1.8.0
2 years ago
2.0.0
1 year ago
3.0.1
1 year ago
3.0.0
1 year ago
4.0.1
1 year ago
4.0.0
1 year ago
1.7.0
2 years ago
1.6.0
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.2.1
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.1.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.6.0
2 years ago
0.5.0
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago