@enapter/design-tokens
v0.0.17
Published
Use Enapter Colors and Typography in html/js/astro/react/tailwind and other projects.
Downloads
297
Readme
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-tokensImport 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-tokensimport { 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.