Package Exports

@geenius/tokens
@geenius/tokens/css/base.css
@geenius/tokens/css/presets/all.css
@geenius/tokens/css/presets/berry.css
@geenius/tokens/css/presets/forest.css
@geenius/tokens/css/presets/lagoon.css
@geenius/tokens/css/presets/ocean.css
@geenius/tokens/css/presets/slate.css
@geenius/tokens/css/presets/sunset.css
@geenius/tokens/css/tailwind-bridge.css
@geenius/tokens/css/themes/blue.css
@geenius/tokens/css/themes/golden.css
@geenius/tokens/css/themes/teal.css
@geenius/tokens/json/invariants.json
@geenius/tokens/json/presets/berry.json
@geenius/tokens/json/presets/forest.json
@geenius/tokens/json/presets/lagoon.json
@geenius/tokens/json/presets/ocean.json
@geenius/tokens/json/presets/slate.json
@geenius/tokens/json/presets/sunset.json
@geenius/tokens/json/themes/blue.dark.json
@geenius/tokens/json/themes/blue.light.json
@geenius/tokens/json/themes/golden.dark.json
@geenius/tokens/json/themes/golden.light.json
@geenius/tokens/json/themes/teal.dark.json
@geenius/tokens/json/themes/teal.light.json

Readme

@geenius/tokens

Single source of truth for Geenius design tokens: OKLCH semantic colors, spacing, radii, shadows, durations, easing, fonts, layout measurements, density overrides, accent presets, generated CSS, DTCG JSON, and typed TypeScript data.

Tokens are authored in src/. scripts/generate.ts emits the published dist/css/*, dist/json/*, and dist/ts/* assets.

Installation

pnpm add @geenius/tokens

Usage

CSS Composition

Import the base token contract first, then one palette theme:

@import "@geenius/tokens/css/base.css";
@import "@geenius/tokens/css/themes/blue.css";

Tailwind 4 consumers import the bridge after the selected theme:

@import "tailwindcss";
@import "@geenius/tokens/css/base.css";
@import "@geenius/tokens/css/themes/blue.css";
@import "@geenius/tokens/css/tailwind-bridge.css";

Vanilla CSS / BEM consumers use only the base and theme files. The Tailwind bridge is not needed in CSS-only pipelines.

Namespace Rule

Tokens use a single global --gn-* namespace. Artifacts (packages, boilerplates, apps) may ship a tokens.local.css file for per-artifact overrides, but every declaration inside it must use the canonical global --gn-* namespace. Artifact- scoped names like --gn-<artifact>-* or --gn-local-* are not allowed — tokens are always named globally so they remain reusable across the ecosystem. BEM class names (.gn-<artifact>-*) are unrelated to this rule and continue to use per-artifact prefixes for selector collision avoidance.

Dark Mode

The v2 package does not publish an @geenius/tokens/dark subpath. Dark values ship inside base.css and every theme stylesheet.

Force dark mode with a root attribute:

<html data-theme="dark">
  <body>...</body>
</html>

Force light mode with data-theme="light". When no forcing attribute is set, the generated CSS includes an OS fallback:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* dark --gn-* values */
  }
}

Accent Presets

Presets are additive. They add --gn-preset-<name>-accent, --gn-preset-<name>-glow, and --gn-preset-<name>-gradient without changing the active palette.

@import "@geenius/tokens/css/base.css";
@import "@geenius/tokens/css/themes/blue.css";
@import "@geenius/tokens/css/presets/sunset.css";

.cta {
  --gn-accent: var(--gn-preset-sunset-accent);
  background: var(--gn-preset-sunset-gradient);
}

TypeScript / React Native

Non-CSS consumers can read the same token values from the root export:

import {
  COLOR_ROLES,
  blue,
  invariants,
  lagoon,
  palettes,
  presets,
  type ColorRole,
} from "@geenius/tokens";

const accent = blue.light.accent;
const cardPadding = invariants.spacing["4"];
const presetAccent = lagoon.accent;
const roles: ColorRole[] = [...COLOR_ROLES];
const themeNames = Object.keys(palettes);
const presetNames = Object.keys(presets);

Design Tools

DTCG JSON assets are published for Style Dictionary, Tokens Studio for Figma, and similar tools:

@geenius/tokens/json/invariants.json
@geenius/tokens/json/themes/<palette>.<light|dark>.json
@geenius/tokens/json/presets/<name>.json

API Reference

TypeScript Exports

Export	Kind	Purpose
`COLOR_ROLES`	value	Canonical semantic color-role tuple
`invariants`	value	Spacing, radius, shadow, duration, easing, font, and layout tokens
`densities`	value	Compact and spacious spacing overrides
`golden`, `blue`, `teal`	values	Light/dark palette objects
`lagoon`, `ocean`, `sunset`, `berry`, `forest`, `slate`	values	Additive accent preset objects
`palettes`	value	Palette registry keyed by name
`presets`	value	Accent preset registry keyed by name
`ColorRole`, `ColorMap`, `Palette`, `Invariants`	types	Palette and color-role contracts
`DensityName`, `DensityOverride`	types	Density-mode contracts
`Preset`	type	Accent preset contract

CSS Subpaths

@geenius/tokens/css/base.css
@geenius/tokens/css/tailwind-bridge.css
@geenius/tokens/css/themes/golden.css
@geenius/tokens/css/themes/blue.css
@geenius/tokens/css/themes/teal.css
@geenius/tokens/css/presets/all.css
@geenius/tokens/css/presets/lagoon.css
@geenius/tokens/css/presets/ocean.css
@geenius/tokens/css/presets/sunset.css
@geenius/tokens/css/presets/berry.css
@geenius/tokens/css/presets/forest.css
@geenius/tokens/css/presets/slate.css

JSON Subpaths

@geenius/tokens/json/invariants.json
@geenius/tokens/json/themes/golden.light.json
@geenius/tokens/json/themes/golden.dark.json
@geenius/tokens/json/themes/blue.light.json
@geenius/tokens/json/themes/blue.dark.json
@geenius/tokens/json/themes/teal.light.json
@geenius/tokens/json/themes/teal.dark.json
@geenius/tokens/json/presets/lagoon.json
@geenius/tokens/json/presets/ocean.json
@geenius/tokens/json/presets/sunset.json
@geenius/tokens/json/presets/berry.json
@geenius/tokens/json/presets/forest.json
@geenius/tokens/json/presets/slate.json

Variants

@geenius/tokens is a foundation package with axes: none.

Surface	Status
React / SolidJS UI variants	Not applicable
Vanilla CSS variants	Not applicable
React Native variant	Not applicable; use the root TypeScript exports
DB providers	Not applicable
Storybook apps	Not applicable

Repository Layout

src/
  types.ts
  invariants.ts
  palette/
  preset/
  index.ts
scripts/
  generate.ts
dist/
  css/
  json/
  ts/

The deeper package specification lives in the monorepo docs at ../../.docs/DOCS/PACKAGES/TOKENS.md.

Testing

From geenius-packages/geenius-tokens:

pnpm run type-check
pnpm run test:unit
pnpm run test:contracts
pnpm run test:gauntlet

test:unit covers palette parity, snapshot output, and deterministic generation. test:contracts covers exports, dist contracts, manifest contracts, and packed import behavior. Run test:gauntlet before release-level changes.

Visual Demo

pnpm run demo

The demo serves demo/index.html at http://localhost:4173/demo/ with theme, mode, density, and preset controls for manually inspecting the token contract.