@atlantum/core
Design tokens for the AtlantumUI design system — primitives and semantic CSS variables, themes.
Installation
npm i @atlantum/core
# or
pnpm add @atlantum/coreNo peer dependencies required.
Setup
Import the base CSS once at the entry point of your app:
// Semantic tokens (required)
import "@atlantum/core/foundation.css";
// Raw color/typography primitives (optional, needed only if you reference primitive variables directly)
import "@atlantum/core/primitives.css";Themes
Apply a theme by importing its CSS and setting the data-theme attribute on the root element:
import "@atlantum/core/foundation.css";
import "@atlantum/core/themes/dark.css";<html data-theme="dark">…</html>| Import | Activates |
|---|---|
@atlantum/core/themes/dark.css |
Dark theme overrides (data-theme="dark") |
@atlantum/core/themes/professional.css |
Professional theme (data-theme="professional") |
@atlantum/core/themes/none.css |
Strips all theme overrides (flat palette) |
@atlantum/core/index.css |
All of the above bundled together |
CSS Variables
All semantic tokens are available as CSS custom properties on :root. Reference them directly in your styles:
.card {
background: var(--bg-surface-primary);
color: var(--fg-neutral-loud-enabled);
border: 1px solid var(--border-neutral-calm-enabled);
}Token categories:
| Prefix | Description |
|---|---|
--bg-* |
Background fills (surfaces, accents, states) |
--fg-* |
Foreground / text colors |
--border-* |
Border colors |
--brand-* |
Brand palette primitives |
--accent-* |
Accent palette primitives |
--gap-* |
Spacing aliases |
JS / TypeScript API
import { tokens } from "@atlantum/core";
import type { TokenName, TokenOverrides } from "@atlantum/core";tokens
Object that maps semantic token names to their CSS variable strings. Use with AtlantumUIProvider for runtime token overrides:
import { tokens } from "@atlantum/core";
const overrides: TokenOverrides = {
[tokens.bgAccentLoudEnabled]: "#7c3aed",
[tokens.brand500]: "#6d28d9",
};TokenName
Union type of all token CSS variable names (e.g. "--bg-accent-loud-enabled").
TokenOverrides
Partial<Record<TokenName, string>> — map of token names to override values, passed to AtlantumUIProvider.
Changelog
See CHANGELOG.md for the full version history.
License
MIT