@odx/design-tokens
v4.0.2
Published
ODX Design Tokens
Readme
@odx/design-tokens
The @odx/design-tokens package provides a centralized collection of design tokens for the ODX Design System. These tokens include essential design variables such as colors, spacing, typography scales, and other key visual attributes, ensuring consistency and cohesion across all ODX projects.
Features
- Design Tokens: Centralized collection of design variables for colors, spacing, typography, and more.
- CSS Variables: Exported as CSS custom properties for easy integration into your stylesheets.
- JavaScript and TypeScript Support: Available as JavaScript and TypeScript modules for seamless integration into your codebase.
Install
PNPM
pnpm add @odx/design-tokensNPM
npm i @odx/design-tokens --save Setup
Once installed, you can import the design tokens and fonts into your project:
CSS
@import "@odx/design-tokens/fonts"; /* @odx/design-tokens/assets/fonts.css */
@import "@odx/design-tokens/css"; /* @odx/design-tokens/dist/tokens.css */JavaScript
// import CSS variables
import '@odx/design-tokens/css';
// usage with JS
import { token } from '@odx/design-tokens';
/**
* @param {string} id
* @param {{ mode?: 'light' | 'dark' | 'auto', eaaConformity?: boolean }} [input] - optional
* */
token('color.background.primary.rest'); // CSS variable: var(--odx-color-background-primary-rest)
token('color.background.primary.rest', { mode: 'dark' }); // dark mode color value in hex
// JSON import
import tokens from '@odx/design-tokens/tokens.json' with { type: 'json' };Light/Dark mode support
Using JavaScript
import { setTheme, darkModeClass, lightModeClass } from '@odx/design-tokens';
setTheme({ mode: 'dark' | 'light' | 'auto' });
// Class name constants
document.documentElement.classList.toggle(darkModeClass | lightModeClass);Using CSS classes
To enable dark mode styles, add the .odx-dark-mode class to an element.
<html class="odx-dark-mode">
<!-- Your content here will use dark mode styles -->
</html>To enable light mode styles, add the .odx-light-mode class to an element.
<html class="odx-light-mode">
<!-- Your content here will use light mode styles -->
</html>European Accessibility Act (EAA) Conformity
EAA conformity mode overrides the
palette.cyan.*color tokens (including the "Dräger Air Blue" color) to meet WCAG 2.1 AA contrast requirements.
Using JavaScript
import { setTheme } from '@odx/design-tokens';
setTheme({ eaaConformity: true });Using CSS classes
The
.odx-eaa-compliantclass can be combined with the dark and light mode classes but have to be added to the same element.
To enable EAA compliant colors, add the .odx-eaa-compliant class to an element.
<html class="odx-eaa-compliant">
<!-- Your content here will use EAA compliant colors -->
</html>Documentation
For detailed documentation on how to use the @odx/design-tokens package, including examples and best practices, please visit our documentation.