AbsaOSS / AbsaOSS/cps-shared-ui

Refactor color token structure: separate internal vs public tokens

Open
#542 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
9
Forks
6
Avg merge
23h 46m
Merged PRs (30d)
5

Description

## Problem

The current color token architecture mixes internal palette values with public-facing semantic tokens, making it unclear which tokens are meant for internal theming and which should be consumed by host apps.

## Proposal

Establish a clear two-layer token structure:

1. **Internal palette files** — define raw color values per theme:
- `_colors-light.scss` — light theme palette
- `_colors-dark.scss` — dark theme palette

2. **Public token file** — `_colors.scss` exposes named semantic tokens that reference the internal palette. These are the only tokens consumer apps should use.

## Why

- Prevents host apps from depending on internal color values that may change between themes
- Makes it obvious which tokens are part of the public API
- Simplifies adding new themes in the future (just add a new palette file)
- Reduces confusion during code review and onboarding

## Out of scope

This issue is about restructuring and documenting the token layers — not changing any visual output. All resolved color values should remain the same.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.