0.1.1 • Published 21h ago

@sovereign-workspace/design-tokens

Licence

Apache-2.0

Version

0.1.1

Deps

Size

29 kB

Vulns

Weekly

Summary Dependency Versions

@sovereign-workspace/design-tokens

The Sovereign Workspace design tokens — the CSS custom properties (colours, surfaces, text, borders, accents …) for light and dark mode. Import these and style your external app with var(--token) values, and it will match the workspace and follow its light/dark switch.

Full guide: https://sovereignworkspace.org/developers

Install

npm install @sovereign-workspace/design-tokens

Use

Import the stylesheet once (from your app entry, or a CSS @import):

import '@sovereign-workspace/design-tokens';

@import '@sovereign-workspace/design-tokens/tokens.css';

Then style everything with the tokens — never hard-code a colour:

.card {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}
.card button {
  background: var(--accent);
  color: var(--selected-text);
}

Follow the workspace theme

The tokens ship two palettes: the default (:root) is light; setting data-theme="dark" on <html> switches to dark. Pair this with @sovereign-workspace/sdk-iframe so your app tracks the workspace:

import { createWorkspaceSdk } from '@sovereign-workspace/sdk-iframe';
import '@sovereign-workspace/design-tokens';

const sdk = createWorkspaceSdk();

function apply(theme) {
  document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : '');
}

apply(await sdk.system.getTheme());          // match on load
sdk.system.onThemeChange(apply);             // …and on every switch

That's the whole integration: one import, getTheme on load, onThemeChange after. Your app now light/dark-matches the workspace automatically.

Token catalogue

Surfaces (--surface-primary/secondary/tertiary/overlay), text (--text-primary/secondary/muted), borders (--border-primary/subtle/window), interactive (--accent, --button-bg, --button-text, --input-bg, --input-border), banners, semantic colours (--color-error/success/info/ warning/link), and --selected-text for light text on coloured backgrounds. See the imported file for the full list — it is generated from the workspace's own stylesheet, so it is always the real, current set.

License

Apache-2.0