0.0.17 • Published 1 year ago

@enapter/design-tokens v0.0.17

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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

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.

0.0.17

1 year ago

0.0.16

1 year ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago