@aesthetic/addon-mixins
npm i @aesthetic/addon-mixins

@aesthetic/addon-mixins

🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

by aesthetic-suite

TypeScript:Not Found
npm i @aesthetic/addon-mixins
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

Downloads/wk

3

GitHub Stars

200

LAST COMMIT

1yr ago

MAINTAINERS

0

CONTRIBUTORS

7

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
No alternatives found
No tutorials found
Add a tutorial