@fennec-corporation/tokens

Design tokens and CSS custom properties for the Fennec Corporation design system.

Installation

pnpm add @fennec-corporation/tokens

Usage

CSS Custom Properties

Import the compiled CSS variables into your stylesheet:

@import "@fennec-corporation/tokens/css";

This exposes semantic and brand custom properties for colors, typography, spacing, shadows, and radii.

Grounds

Fennec has three grounds: white, black and yellow. Each one sets the text, line, action and focus colours, so components follow the ground they sit on.

<body>...</body>                  <!-- white by default -->
<section data-ground="black">...</section>
<section data-ground="yellow">...</section>

.dark and [data-theme='dark'] are other names for the black ground.

JavaScript and TypeScript

Import tokens directly into JavaScript or TypeScript files:

import tokens from "@fennec-corporation/tokens";

JSON

Access the raw design tokens schema:

import tokensData from "@fennec-corporation/tokens/json";

Build

Compile token source files with Style Dictionary:

pnpm build

License

MPL-2.0