@aesthetic/addon-mixins

CSS-in-JS mixins for the Aesthetic design system.

Usage no npm install needed!

<script type="module">
  import aestheticAddonMixins from 'https://cdn.skypack.dev/@aesthetic/addon-mixins';
</script>

README

Aesthetic - Design System Mixins

Build Status npm version npm deps

CSS-in-JS mixins for the Aesthetic design system.

import mixins from '@aesthetic/addon-mixins';
import { Design } from '@aesthetic/system';

// Configure design system with mixins
const design = new Design(
  'dls',
  {
    /* ... */
  },
  mixins,
);

// Generate CSS properties from theme
const theme = design.createTheme(
  { contrast: 'normal', scheme: 'light' },
  {
    /* ... */
  },
);

const css = theme.mixin('background', { palette: 'success' }, { borderWidth: 1 });

// OR with type safety
const css = theme.mixin.background({ palette: 'success' }, { borderWidth: 1 });

Installation

yarn add @aesthetic/addon-mixins

Documentation

https://aestheticsuite.dev