@kollegioai/tokens

Kollegio's shared design token package — single source of truth for colors and typography across all repos.

Published to npmjs.com/package/@kollegioai/tokens.

What's in it

45 semantic color tokens across three categories, plus typography:

| Category | Examples | |---|---| | background* | backgroundPrimary, backgroundAI, backgroundDanger, backgroundSuccess | | content* | contentPrimaryStrong, contentAIStrong, contentWarningStrong | | border* | borderBrand, borderBrandLight, borderDanger, borderAi | | Typography | fontName, fontFamilyCss, fontFamily |

App-specific colors (e.g. gray1–23, calendarC1–8, activity colors in landing) stay local to each app and are not in this package.

Usage

Tailwind (landing-v2, counsellor)

// tailwind.config.ts
import { tailwindPreset } from '@kollegioai/tokens/tailwind';

export default {
  theme: {
    extend: {
      ...tailwindPreset.theme.extend,
      // add app-specific overrides below
    },
  },
};

Chakra UI v2 (counsellor)

// theme.ts
import { extendTheme } from '@chakra-ui/react';
import { kollegioChakraV2Theme } from '@kollegioai/tokens/chakra-v2';

const theme = extendTheme({
  colors: {
    ...kollegioChakraV2Theme.colors,
    // add app-specific extras below
  },
  fonts: kollegioChakraV2Theme.fonts,
});

Chakra UI v3 (client-src)

// theme.ts
import { colors as tokenColors } from '@kollegioai/tokens';

// Use tokenColors.backgroundPrimary, tokenColors.contentAIStrong, etc.
// inside the createSystem() token definitions

Font CSS

Each app loads the font independently. The package ships a ready-made @font-face declaration you can import:

/* in your global CSS */
@import '@kollegioai/tokens/fonts.css';

Changing a color

1. Edit src/colors.ts in this package
2. Bump the version in package.json (see versioning below)
3. Commit and push to main on the landing-v2 repo
4. GitHub Actions auto-publishes to npm
5. In each consumer repo, run npm install @kollegioai/tokens@latest to pull the new version

Versioning

This package follows semver:

| Change type | Version bump | Example | |---|---|---| | Adding a new token | patch | 1.0.0 → 1.0.1 | | Changing an existing token value | patch | 1.0.0 → 1.0.1 | | Renaming or removing a token | minor | 1.0.0 → 1.1.0 | | Breaking restructure of exports | major | 1.0.0 → 2.0.0 |

Edit the version in package.json:

{
  "version": "1.0.1"
}

Publishing

Auto-publish (normal workflow)

Pushing any change to packages/tokens/** on the main branch triggers .github/workflows/publish-tokens.yml, which builds and publishes automatically. No manual steps needed.

Manual publish (first time or if CI fails)

cd landing-v2/packages/tokens
npm run build
npm publish --access public

You must be authenticated first — see Access below.

Access

Who can publish

Anyone with the NPM_TOKEN secret or a local npm Automation token linked to the kollegioai npm org.

Getting an npm Automation token (for local publishing or new CI setup)

1. Go to npmjs.com → click your avatar → Access Tokens
2. Click Generate New Token → Automation
3. Copy the token

To use it locally:

npm set //registry.npmjs.org/:_authToken=YOUR_TOKEN_HERE

To use it in GitHub Actions:

Go to the repo where the workflow lives (landing-v2): Settings → Secrets and variables → Actions → New repository secret

• Name: NPM_TOKEN
• Value: paste the Automation token

Who can install

The package is public — anyone can install it with a plain npm install, no token required.

Local development

If you're iterating on the token package itself and want to test changes before publishing, use a file: reference in the consumer repo temporarily:

"@kollegioai/tokens": "file:../landing-v2/packages/tokens"

Remember to run npm run build inside packages/tokens after each change, then npm install in the consumer repo to pick up the new dist.

Switch back to "^x.x.x" before pushing.

Package structure

packages/tokens/
├── src/
│   ├── colors.ts       # all 45 color tokens — edit here to change values
│   ├── typography.ts   # font name and CSS string
│   ├── tailwind.ts     # tailwindPreset export
│   ├── chakra-v2.ts    # kollegioChakraV2Theme export
│   └── index.ts        # re-exports everything
├── fonts.css           # @font-face for ABC Diatype Rounded
├── package.json
└── tsconfig.json

Build output goes to dist/ (gitignored, generated by npm run build).