Galaxy Tokens

@galaxy-ds/tokens package provides css, scss, js, ios and android tokens to unify styles accross all platforms and themes.

Current Use

• @galaxy-ds/tokens will be used within GUI (Bootstrap) providing css variables for desktop/web/mobile theme overrides

Figma

Galaxy uses Figma to bring design and code together turning Figma Styles to usable Tokens that can be used within any project for any platform.

Figma Design System

• GDS LEAP : Colors, Spacing, Typography

Figma plugins

• Figma Tokens

Use

To add to a project using npm:

# Using npm:
npm install --save @galaxy-ds/tokens

# OR Yarn:
yarn add @galaxy-ds/tokens

CSS

To make use of the css variables, import them into your code like so:

/* Inside css */
@import "@galaxy-ds/tokens/<theme>/<platform>/tokens.css";

JS

Use the package subpath exports — <theme>/<platform> (currently leap/web, leap/desktop, lawconnect/web, lawconnect/desktop). Bundlers get the tree-shakeable ES module, Node/Jest get the CommonJS build, and the bare @galaxy-ds/tokens entry defaults to the LEAP web set:

import * as tokens from "@galaxy-ds/tokens/leap/web";
// or pull only what you need (tree-shakeable):
import { ColorPrimaryMain } from "@galaxy-ds/tokens/leap/web";

Only the curated subpaths are public. The internal dist/... layout is no longer exported, so deep imports like @galaxy-ds/tokens/dist/leap/web/tokens.js no longer resolve under modern (exports-aware) resolution - import from the <theme>/<platform> subpaths instead.

SCSS

To make use of the scss variables, import them into your scss files like so:

@use '@galaxy-ds/tokens/<theme>/<platform>/tokens.scss';

Output

You should see something like this output:

Copying starter files...

desktop
✔︎  build/[BRAND]/desktop/tokens.css
✔︎  build/[BRAND]/desktop/tokens.scss
✔︎  build/[BRAND]/desktop/tokens.js

web
✔︎  build/[BRAND]/web/tokens.css
✔︎  build/[BRAND]/web/tokens.scss
✔︎  build/[BRAND]/web/tokens.js

android
✔︎ build/[BRAND]/android/tokens.colors.xml
✔︎ build/[BRAND]/android/tokens.dimens.xml
✔︎ build/[BRAND]/android/tokens.font_dimens.xml

ios
✔︎ build/[BRAND]/ios/tokens.h
 

Migrating to 3.0

3.0 reorganised the LEAP token set. The platform used to be baked into the token name; now it lives in the output path and has been dropped from the name. 3.0 also revalued the LEAP web typography — these are not pure renames (e.g. Open Sans → Segoe UI Variable, unitless line-heights like 1.25 → pixel values like 40px, and several sizes shifted):

The rule is mechanical: drop the platform segment (Web / Desktop) that followed Font/Radius.

Migrating with DEPRECATED_ (no silent surprises)

The old names are gone, so usages won't compile after upgrading — that's deliberate. We don't ship silent aliases, because the values changed: an alias that kept the old name but returned the new value would change your UI without any warning.

Instead, the LEAP web and desktop sets re-export every removed name under a DEPRECATED_ prefix, frozen to its 1.x value. So you get a clean, two-step migration:

1. Keep the old look — find-and-replace the old names to add the prefix (FontWebH1FontSize → DEPRECATED_FontWebH1FontSize). One mechanical pass, the build goes green, and the output is pixel-identical to 1.x.
2. Adopt the 3.0 look — at your own pace, swap each DEPRECATED_* for its replacement (DEPRECATED_FontWebH1FontSize → FontH1FontSize). grep DEPRECATED_ tells you what's left.

Every DEPRECATED_* constant carries an @deprecated JSDoc pointing at its replacement, and they are all removed in 4.0. The exhaustive old name → frozen value → replacement map lives in deprecated-tokens.json and is the source of truth for the build.

Other changes

• lawconnect brand is built again (dist/lawconnect/**). Drop any @galaxy-ds/[email protected] alias you were using to keep it alive.
• TypeScript declarations ship alongside every JS/CJS bundle, so tokens are typed instead of any.
• Bare @galaxy-ds/tokens imports resolve to the LEAP web set via a root barrel (main/types were previously broken).
• Contextual.Background.{Light,Dark} restored for LEAP — currently placeholder values mirroring Contextual.Info, pending design sign-off.