@aesthetic/core NPM

Aesthetic - Core API

Unifies a design system and a CSS-in-JS engine into a powerful framework agnostic API.

import { Aesthetic } from '@aesthetic/core';
import dayTheme from './design/system/dayTheme';
import nightTheme from './design/system/nightTheme';

const aesthetic = new Aesthetic({
	defaultUnit: 'px',
	deterministicClasses: false,
});

// Register a theme (provided by the design system)
aesthetic.registerDefaultTheme('day', dayTheme);

// Register a theme that has global styles
aesthetic.registerTheme('night', nightTheme, (css) => ({
	'@root': css.mixin('root', {
		backgroundColor: css.var('palette-neutral-bg-base'),
		height: '100%',
	}),
}));

// Create a component style sheet
const styleSheet = aesthetic.createStyleSheet((css) => ({
	button: {
		textAlign: 'center',
		display: 'inline-block',
		padding: css.var('spacing-df'),
	},
}));

// Render the style sheet into the document
const classNames = aesthetic.renderStyleSheet(styleSheet);

Though the core API is framework agnostic and can be used stand-alone, it's encouraged to use a framework integration package for better ergonomics.

Features

Supports all features provided by unified packages, while also providing...

Register, manage, and activate themes, powered by the design system.
Automatically activates a theme based on a users preferences (color scheme, contrast, etc).
Scopes active theme styles and CSS variables to the body to avoid global scope pollution.
Factories and renders component and theme style sheets.
Supports color scheme, contrast, and theme variants for style sheets.
Renders font faces, keyframes, and CSS imports.
Handles server-side rendering and client-side hydration.
Integrates with the React framework.