@etymos/tokens

Project

• Name: Etymos Tokens.
• Purpose: Provide foundational Design Tokens for Etymos design system.

Installation

• npm: npm install @etymos/tokens
• yarn: yarn add @etymos/tokens
• Local development: git clone this repo and run npm install.

Quick Start

• Import: Register the components in your app (see src/components/* for examples).
  • Example (module import): import 'etymos-ui/dist/etymos-ui.js';
• Use: Add components to HTML:
  • <et-icon-button aria-label="Close"></et-icon-button>
  • Components use slots for semantic content and props/attributes for configuration.

Core Principles

Three token levels

• Primitive tokens: Base values (colors, spacing, fonts).
• Semantic tokens: Meaningful abstractions (brand, background, surface).
• Component tokens: Component-specific variables derived from semantic tokens.

Customize

Override CSS variables on :root or a theme wrapper: :root { --et-color-primary: #0b5fff; --et-spacing-1: 8px; }

Scope themes

Apply a class to a root container to switch theme variables (for example .et-theme-dark { ... }).

Contributing

• Guidelines: Open PRs against main/release/* branches; follow existing code style.

License

• See LICENSE in the repository root.

Contact & Support

• For issues or feature requests, open an issue in this repository. PRs and suggested improvements are welcome.