Use this for any html/js or react projects to provide unified visual style (Enapter brand colors, typography and etc).
- 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.
-
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.
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,
};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 →
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;Use getColorsByTheme(themeId: 'light' | 'dark') to get theme palettes (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.