@geolonia/design-tokens

Geolonia brand design tokens — color, typography, spacing, radii, breakpoints — as CSS custom properties plus JSON / typed JS. One source of truth so internal apps stop re-encoding the same styling by hand.

Built from tokens.css (the designer-owned source) at the repo root. The values are the design team's domain; this package is just the distribution.

Install

Published to the public npm registry (npmjs) under the @geolonia scope — no auth or .npmrc setup required:

npm install @geolonia/design-tokens
# or: pnpm add @geolonia/design-tokens

CDN (no build step)

For plain HTML pages with no bundler, load the CSS custom properties straight from a CDN. The URL pins an exact version for stability — bump it on upgrade:

<link rel="stylesheet" href="https://unpkg.com/@geolonia/[email protected]/dist/tokens.css">
<!-- or jsDelivr: https://cdn.jsdelivr.net/npm/@geolonia/[email protected]/dist/tokens.css -->

GitHub Packages (alternative)

The same version is also published to GitHub Packages. Unlike npmjs it requires a GitHub token with read:packages and an .npmrc that scopes @geolonia there, so prefer the public npm registry above unless you specifically need this copy:

@geolonia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

NODE_AUTH_TOKEN is a GitHub token with read:packages — a personal access token locally, or secrets.GITHUB_TOKEN in GitHub Actions.

Use

// 1) CSS custom properties — injects the :root { --color-…; … } block
import "@geolonia/design-tokens/tokens.css";

// 2) Typed JS object — e.g. for a Mantine theme or JS-in-CSS
import { tokens } from "@geolonia/design-tokens";
tokens["color-action-primary"]; // "#1E4FB8"

// 3) Raw JSON
import tokens from "@geolonia/design-tokens/tokens.json" with { type: "json" };

Maintainers: release & versioning steps live in the repo's docs/build-deploy-release.md (this file is the package's npmjs landing page, kept consumer-focused).