@eocrm/design-tokens

Shared EOCRM visual tokens for web and Kotlin Multiplatform/Compose. The npm package contains generated Sass; the Maven artifact contains a generated, strongly typed Compose API. Both are published with the same version as @eocrm/design-system.

Live playground (tokens and components, rendered from main): https://eocrm.github.io/design-system/

Web

The package is public on npmjs (no .npmrc or token needed):

npm install @eocrm/design-tokens

Import the light/theme-neutral contract and dark-theme overrides:

@use '@eocrm/design-tokens/styles/tokens.scss';
@use '@eocrm/design-tokens/styles/dark.scss';

React consumers import the compiled @eocrm/design-system/styles/global.css (or tokens.css) and do not need this package; install it for Sass variables or the contract directly.

Kotlin Multiplatform and Compose

GitHub Packages requires authentication even for public Maven packages. For local development, use a classic personal access token with read:packages; keep gpr.user and gpr.key in your user-level ~/.gradle/gradle.properties, not in a repository. In GitHub Actions, grant the consuming repository access to the package and use the workflow's GITHUB_TOKEN.

repositories {
    maven {
        url = uri("https://maven.pkg.github.com/eocrm/design-system")
        credentials {
            username = providers.gradleProperty("gpr.user").orNull
            password = providers.gradleProperty("gpr.key").orNull
        }
    }
}

dependencies {
    commonMainImplementation("com.eocrm.design:design-tokens-compose:1.2.3")
}

Use the generated theme objects directly:

import com.eocrm.design.tokens.EocrmDarkTokens
import com.eocrm.design.tokens.EocrmLightTokens

val background = EocrmLightTokens.colors.background
val darkBackground = EocrmDarkTokens.colors.background
val spacing = EocrmLightTokens.dimensions.space4

The artifact supports JVM, Android, iOS device (iosArm64), and Apple Silicon iOS simulator (iosSimulatorArm64). It intentionally does not publish an Intel iosX64 target.

Accents

tokens.json may have a root accents key: { "<name>": { "<tokenId>": { "light": "#rrggbb", "dark": "#rrggbb" } } }. Each accent emits a [data-accent='<name>'] block overriding those tokens in every theme block (light, forced dark, OS dark), and a Compose Eocrm<Name>LightTokens / Eocrm<Name>DarkTokens pair. The validator rejects:

• unknown-accent-token — the token id does not exist
• accent-non-color — the token is not a colour
• accent-unthemed — the base token is not light/dark themed
• accent-alias — the value is an alias instead of a colour
• invalid-token-value — a malformed colour

Contributing

src/tokens.json is the only editable source of token values. Do not edit anything under generated/ or generated Kotlin files under compose/src/commonMain; regeneration replaces them.

npm run tokens:validate
npm run tokens:generate
npm run tokens:test
npm run tokens:check
packages/design-tokens/compose/gradlew --no-daemon -p packages/design-tokens/compose jvmTest assemble

Commit generated outputs alongside source changes. tokens:check validates the schema and semantic contract, runs tests, and fails on generated drift.

See Shared design ownership for the boundary between neutral tokens, React components, Compose product UI, and native platform behavior.

License

Apache License 2.0.