@aesthetic/core
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.1 • Public • Published

    Aesthetic - Core API

    Build Status npm version npm deps

    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.

    Requirements

    • IE 11+

    Installation

    yarn add @aesthetic/core
    

    Documentation

    https://aestheticsuite.dev

    Install

    npm i @aesthetic/core

    DownloadsWeekly Downloads

    3

    Version

    0.11.1

    License

    MIT

    Unpacked Size

    123 kB

    Total Files

    27

    Last publish

    Collaborators

    • milesj