@enapter/design-tokens NPM

Enapter Design Tokens

Use this for any html/js or react projects to provide unified visual style (Enapter brand colors, typography and etc).

Main Laws

Using the same name for colors in light and dark color palettes.
Using default Tailwind CSS variables for screen sizes, typography and other things discribed in Tailwind CSS Documentation.

Files

colors.css – main color design tokens.
colors.js – adopted to use with React Native and etc.
tailwind.config.js - adopted to use with Tailwind CSS.

Update Tailwind CSS Config

How to use:

npm i @enapter/design-tokens

Import colors.css file with Enapter Colors as variables in your js script:

// App.js

import '@enapter/design-tokens/colors.css';

Import Enapter theme to your Tailwind CSS configuration:

// tailwind.config.js

const { theme } = require('@enapter/design-tokens/tailwind.config');

/** @type {import('tailwindcss').Config} */
module.exports = {
    // ...
    theme,
};

Colors as CSS variables only

When to use:

Any project with Tailwind CSS.
Simple HTML projects, minimum of code.

How to use:

npm i @enapter/design-tokens

/* style.css */
@import "@enapter/design-tokens/colors.css";

var(--colors-text)

Also you can use CSS variables Values in JavaScript. Read more →

Colors as JavaScript variables

When to use:

Any project with React Native.
Any project without HTML, pure JS/TS and etc.

How to use:

npm i @enapter/design-tokens

import { colors, getColorsByTheme } from "@enapter/design-tokens/colors";

const themeColors = getColorsByTheme(themeId);

const labelTextColor = colors.dark.text; // or themeColors.text;

Theme Light/Dark Mode

Use getColorsByTheme(themeId: 'light' | 'dark') to get theme palettes (light/dark mode).

Theme Light/Dark Mode

You can use @enapter/design-theme to provide theme palettes (light/dark mode) automatically. Also you can modify [data-theme="dark"] attribute in <html> tag to change palette to dark.

design system colors branding typography

@everything-registry/sub-chunk-290

12 months ago

9 months ago

2 years ago

2 years ago

2 years ago