@cocotte/astro-tokens

Theme-agnostic CSS variable contract + TypeScript token types for Cocotte brand marketing sites built on Astro.

What this package is

• A contract: a list of CSS variable names every Cocotte brand site declares values for.
• A set of TypeScript types (ColorToken, TypographyToken, SpacingToken, MotionToken, LayoutToken) for autocomplete + type safety when referencing those variables.
• Two helpers — `cssVar(token)` and `cssVarWithFallback(token, fallback)` — for ergonomic inline-style references.

What this package is NOT

• It is not a theme. No opinionated colors, fonts, or sizes.
• It is not a component library. See `@cocotte/astro-chrome` for that.

Usage

```astro

import '@cocotte/astro-tokens/tokens.css'; // contract (variable names) import '../styles/tokens.css'; // brand values import { cssVar, type ColorToken } from '@cocotte/astro-tokens';

const accent: ColorToken = '--color-accent-1';

<button style={`background: ${cssVar(accent)}`}>Click ```

Each brand site (FWT, Cocotte, Cocotte tech, Sansonnet, Demimonde) provides its own `src/styles/tokens.css` declaring the variable values:

```css :root { --color-ink: #ffffff; --color-paper: #0d0214; --color-accent-1: #ff2a90; /* ...etc */ } ```