@sublimee/tokens

AI-first package doc for the Sublime semantic token layer.

If you are an AI agent reading the installed npm package directly, start with AI_INDEX.md.

Use This Package When

• you need the shared semantic design vocabulary,
• you want to theme Sublime components,
• you want stable color and motion names instead of hardcoded aesthetics.

First Move

import "@sublimee/tokens/tokens.css";

or

@import "@sublimee/tokens/tokens.css";

Core Rule

Tokens describe purpose, not appearance.

Prefer:

• surface-0
• text-primary
• interactive-accent

Avoid:

• hardcoded brand colors inside reusable library work
• aesthetic names that do not explain role

Primary Token Families

• --sublime-color-*
• --sublime-space-*
• --sublime-shadow-*
• --sublime-radius-*
• --sublime-font-*
• --sublime-duration-*
• --sublime-ease-*
• --sublime-transition-*

Typical Use

@import "@sublimee/tokens/tokens.css";

:root {
  --sublime-color-interactive-accent: #ec4899;
  --sublime-radius-button: 9999px;
}

<button
  className="bg-[var(--sublime-color-surface-1)] text-[var(--sublime-color-text-primary)]"
>
  Click me
</button>

Task Routing

Brand customization

Override semantic custom properties instead of rewriting component styles.

Dark mode

Use the token system's theme handling through:

• .dark on an ancestor,
• [data-theme="dark"] on an ancestor,
• or system preference as fallback.

Type-safe token references

import type {
  SublimeColorToken,
  SublimeSpaceToken,
  SublimeToken,
} from "@sublimee/tokens";

Role In The System

This package does not provide UI on its own.

Its job is to let the UI packages ship strong defaults that stay customizable without drifting away from the system.

License

MIT