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

```css
: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](https://joy.malt.com/6bf479565/p/027b08-colors/b/266e61).

### 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](https://www.npmjs.com/package/@maltjoy/tokens).

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

```scss
@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.



Malt design system themes modules based on tokens. 

@maltjoy/themes

Malt design system themes modules based on tokens