Skip to content

chore(ui): prune the unused vendored color tokens #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
renefloor merged 5 commits into from
Sep 11, 2026
Merged

chore(ui): prune the unused vendored color tokens #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19e44f8
chore(ui): drop the pre-namespace-split elevation constants
renefloor Sep 10, 2026
d9a9e86
chore(ui): drop the derived component tokens from the vendored file
renefloor Sep 10, 2026
13c57c9
chore(ui): drop root-semantic constants the color scheme re-derives
renefloor Sep 10, 2026
afdda2e
docs(ui): refresh the token docs this prune invalidates
renefloor Sep 11, 2026
90d3b2e
feat(ui): back every StreamColors primitive with a token
renefloor Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .claude/skills/update-design-tokens/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,9 +272,9 @@ Upstream's generator flattens `group/subgroup/name` into camelCase. The
because Flutter has no such layer:

```
upstream token vendored constant colorScheme field
border/utility/warning borderUtilityWarning borderWarning
background/core/on-accent backgroundCoreOnAccent backgroundOnAccent
upstream token vendored constant colorScheme field
border/utility/selected borderUtilitySelected borderSelected
background/core/highlight backgroundCoreHighlight backgroundHighlight
```

Some fields also shorten further where the upstream suffix carried no meaning
Expand Down Expand Up @@ -313,7 +313,7 @@ print(d['border']['core']['on-elevation'])"
```

Quote it rather than inventing prose — it is the designer's statement of intent,
and matching wording is what lets the next person recognise the field as that
and matching wording is what lets the next person recognize the field as that
token. Swap upstream's token paths for `[fieldName]` references.

**Read the claim against the resolved light and dark values first**, and note
Expand Down
16 changes: 9 additions & 7 deletions .claude/skills/update-design-tokens/references/derived-token-map.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ python3 <skill>/scripts/flatten_tokens.py --diff 4ef9b54 origin/main tokens/core
```

Read it as *"every semantic change up to here has been triaged"*, not *"the vendored
files mirror this commit"*. They do not, and knowingly so: the vendored set is
neither a subset nor a superset of upstream. Some names pre-date upstream's
core/chat/video namespace split and survive only here (`backgroundElevationElevation0`,
`avatarPaletteBg1`); many upstream names — mostly derived tokens — are deliberately
not vendored; and `light/` and `dark/` do not even hold the same set. Compare them
yourself rather than trusting a count that rots:
files mirror this commit"*. They do not, and knowingly so: the vendored set is a
strict **subset** of upstream. Every name here exists upstream under the same
spelling, but a large share of upstream's names are deliberately absent — mostly
derived tokens a component re-derives from a `colorScheme` field instead.

Two properties also hold as of this commit: every vendored color constant has a
reader, and `light/` and `dark/` declare the same set. Neither is a claim about
upstream, so check the subset relation yourself rather than trusting a count that
rots:

```bash
python3 <skill>/scripts/flatten_tokens.py tokens/core/semantics/light.json
```
Adopting the namespace split is its own migration, not part of a routine sync.

## Derived-token map

Expand Down
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ melos run gen-l10n # regenerate localizations
Dart constants, built by `melos run generate:icons` from the source SVGs in
`packages/stream_core_flutter/assets_source/icons/`. Those SVGs are copied from the
[design-system-tokens](https://github.com/GetStream/design-system-tokens/tree/main/assets/icons)
repo. Multicolour file-type icons are not part of the font — they ship as runtime
repo. Multicolor file-type icons are not part of the font — they ship as runtime
assets in `assets/file_type/` and are resolved by path by `StreamFileTypeIcon`.

Glyph code points are append-only and recorded in `assets_source/icon_log.g.txt`,
Expand Down
160 changes: 3 additions & 157 deletions ...ages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/dark/stream_tokens.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ class StreamTokens {
static const baseTransparentWhite10 = Color(0x1AFFFFFF);
static const baseTransparentWhite20 = Color(0x33FFFFFF);
static const baseTransparentWhite30 = Color(0x4DFFFFFF);

@xsahil03x xsahil03x Sep 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we not want white 30 and black 70 in stream colors? I think its good to have the primitive colors even if we are not using them in themes. Or maybe better to only have these and remove the different ones from StreamColors

@renefloor renefloor Sep 11, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, and the second half of it turned out to be the bigger one.

Agreed on keeping the primitives — but the token file is the wrong home for that. internal/tokens/ is excluded from the barrels and the class has a private constructor, so a constant left there unreferenced is not "available even though themes don't use it", it is unreachable by anyone. StreamColors is the public primitive palette, so that is where a primitive has to surface. Added white30 and black70 there, which also makes them referenced, so check:tokens stays honest without an allowlist entry.

On "remove the different ones" — they are not different, which is what makes this worth doing. All three baked hexes in StreamColors match an upstream token exactly:

member value upstream token
white50 0x80FFFFFF baseTransparentWhite50
black50 0x80000000 baseTransparentBlack50
black75 0xBF000000 baseTransparentBlack75

Every other member of the class already read a token. So these three were the same baked-hex-instead-of-a-token hazard the skill warns about for component defaults, one layer up in the public palette — the values happened to be right, with nothing keeping them right. They read their tokens now.

Net: five tokens added to both modes, StreamColors has no Color(0x…) literals left, and light/ and dark/ stay in agreement at 348 each.

One thing I did not do: vendor all 19 transparent primitives upstream publishes. That widens the public API permanently and felt like your call rather than something to fold into a prune — happy to add the rest if you want the full set.

static const baseTransparentWhite50 = Color(0x80FFFFFF);
static const baseTransparentWhite70 = Color(0xB3FFFFFF);
static const baseTransparentBlack5 = Color(0x0D000000);
static const baseTransparentBlack10 = Color(0x1A000000);
static const baseTransparentBlack50 = Color(0x80000000);
static const baseTransparentBlack70 = Color(0xB3000000);
static const baseTransparentBlack75 = Color(0xBF000000);
static const baseBlack = Color(0xFF000000);
static const baseWhite = Color(0xFFFFFFFF);
static const slate50 = Color(0xFFF6F8FA);
Expand Down Expand Up @@ -411,27 +414,6 @@ class StreamTokens {
static const buttonPaddingXWithLabelMd = 16;
static const buttonPaddingXWithLabelSm = 16;
static const buttonPaddingXWithLabelXs = 12;
static const buttonPrimaryBg = Color(0xFF4586FF);
static const buttonPrimaryBgLiquidGlass = Color(0x00FFFFFF);
static const buttonPrimaryText = Color(0xFFA5C5FF);
static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF);
static const buttonPrimaryTextOnDark = Color(0xFF000000);
static const buttonPrimaryBorder = Color(0xFF1B53BD);
static const buttonPrimaryBorderOnDark = Color(0xFF000000);
static const buttonSecondaryBg = Color(0xFF323232);
static const buttonSecondaryBgLiquidGlass = Color(0xFF000000);
static const buttonSecondaryText = Color(0xFFF8F8F8);
static const buttonSecondaryTextOnAccent = Color(0xFFF8F8F8);
static const buttonSecondaryTextOnDark = Color(0xFF000000);
static const buttonSecondaryBorder = Color(0xFF565656);
static const buttonSecondaryBorderOnDark = Color(0xFF000000);
static const buttonDestructiveBg = Color(0xFFFC526A);
static const buttonDestructiveBgLiquidGlass = Color(0xFF000000);
static const buttonDestructiveText = Color(0xFFFC526A);
static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF);
static const buttonDestructiveTextOnDark = Color(0xFF000000);
static const buttonDestructiveBorder = Color(0xFFFC526A);
static const buttonDestructiveBorderOnDark = Color(0xFF000000);
static const iconSizeXs = 12;
static const iconSizeSm = 16;
static const iconSizeMd = 20;
Expand All @@ -444,13 +426,6 @@ class StreamTokens {
static const emojiLg = 32;
static const emojiXl = 48;
static const emoji2xl = 64;
static const backgroundCoreApp = Color(0xFF000000);
static const backgroundCoreSurfaceDefault = Color(0xFF323232);
static const backgroundCoreSurfaceSubtle = Color(0xFF1C1C1C);
static const backgroundCoreSurfaceCard = Color(0xFF323232);
static const backgroundCoreSurfaceStrong = Color(0xFF464646);
static const backgroundCoreInverse = Color(0xFFFFFFFF);
static const backgroundCoreOnAccent = Color(0xFFFFFFFF);
static const backgroundCoreHighlight = Color(0xFF5F1A05);
static const backgroundCoreOverlayLight = Color(0xBF000000);
static const backgroundCoreOverlayDark = Color(0x80000000);
Expand All @@ -459,146 +434,19 @@ class StreamTokens {
static const backgroundUtilityHover = Color(0x26FFFFFF);
static const backgroundUtilityPressed = Color(0x33FFFFFF);
static const backgroundUtilitySelected = Color(0x40FFFFFF);
static const backgroundUtilityDisabled = Color(0xFF323232);
static const backgroundElevationElevation0 = Color(0xFF000000);
static const backgroundElevationElevation1 = Color(0xFF1C1C1C);
static const backgroundElevationElevation2 = Color(0xFF323232);
static const backgroundElevationElevation3 = Color(0xFF565656);
static const borderUtilityFocus = Color(0x4078A8FF);
static const borderUtilityError = Color(0xFFFC526A);
static const borderUtilityWarning = Color(0xFFFCD579);
static const borderUtilitySuccess = Color(0xFF00C384);
static const borderUtilitySelected = Color(0x26FFFFFF);
static const borderUtilityDisabled = Color(0xFF323232);
static const borderUtilityFocused = Color(0xFF19418D);
static const borderUtilityActive = Color(0xFF4586FF);
static const borderUtilityHover = Color(0x1AFFFFFF);
static const borderUtilityPressed = Color(0x33FFFFFF);
static const borderUtilityDisabledOnSurface = Color(0xFF464646);
static const borderCoreDefault = Color(0xFF565656);
static const borderCoreSubtle = Color(0xFF323232);
static const borderCoreStrong = Color(0xFF6A6A6A);
static const borderCoreInverse = Color(0xFF000000);
static const borderCoreOnAccent = Color(0xFFFFFFFF);
static const borderCoreOpacitySubtle = Color(0x33FFFFFF);
static const borderCoreOpacityStrong = Color(0x40FFFFFF);
static const borderCoreOnInverse = Color(0xFF000000);
static const borderCoreOnSurface = Color(0xFF6A6A6A);
static const chatBgIncoming = Color(0xFF323232);
static const chatBgOutgoing = Color(0xFF142F63);
static const chatBgAttachmentIncoming = Color(0xFF464646);
static const chatBgAttachmentOutgoing = Color(0xFF19418D);
static const chatTextIncoming = Color(0xFFF8F8F8);
static const chatTextOutgoing = Color(0xFFF3F7FF);
static const chatTextUsername = Color(0xFFD8D8D8);
static const chatTextTimestamp = Color(0xFFABABAB);
static const chatTextTypingIndicator = Color(0xFFF8F8F8);
static const chatTextRead = Color(0xFF4586FF);
static const chatTextMention = Color(0xFFA5C5FF);
static const chatTextLink = Color(0xFFA5C5FF);
static const chatTextReaction = Color(0xFFD8D8D8);
static const chatTextSystem = Color(0xFFD8D8D8);
static const chatBorderIncoming = Color(0xFF323232);
static const chatBorderOutgoing = Color(0xFF142F63);
static const chatBorderOnChatIncoming = Color(0xFF6A6A6A);
static const chatBorderOnChatOutgoing = Color(0xFF005FFF);
static const chatReplyIndicatorIncoming = Color(0xFF8F8F8F);
static const chatReplyIndicatorOutgoing = Color(0xFF4586FF);
static const chatWaveformBar = Color(0x40FFFFFF);
static const chatWaveformBarPlaying = Color(0xFF4586FF);
static const chatPollProgressTrackIncoming = Color(0xFF464646);
static const chatPollProgressTrackOutgoing = Color(0xFF1B53BD);
static const chatPollProgressFillIncoming = Color(0xFFABABAB);
static const chatPollProgressFillOutgoing = Color(0xFF4586FF);
static const chatThreadConnectorIncoming = Color(0xFF565656);
static const chatThreadConnectorOutgoing = Color(0xFF19418D);
static const inputTextDefault = Color(0xFFF8F8F8);
static const inputTextPlaceholder = Color(0xFFABABAB);
static const inputTextDisabled = Color(0xFF6A6A6A);
static const inputTextIcon = Color(0xFFABABAB);
static const inputSendIcon = Color(0xFF4586FF);
static const inputSendIconDisabled = Color(0xFF6A6A6A);
static const reactionBg = Color(0xFF565656);
static const reactionBorder = Color(0xFF565656);
static const reactionText = Color(0xFFF8F8F8);
static const reactionEmoji = Color(0xFFF8F8F8);
static const presenceBgOnline = Color(0xFF00C384);
static const presenceBorder = Color(0xFF000000);
static const presenceBgOffline = Color(0xFFABABAB);
static const systemText = Color(0xFFFFFFFF);
static const systemBgBlur = Color(0x03000000);
static const systemScrollbar = Color(0x80FFFFFF);
static const systemCaret = Color(0xFF4586FF);
static const badgeBgDefault = Color(0xFF565656);
static const badgeBgPrimary = Color(0xFF4586FF);
static const badgeBgNeutral = Color(0xFFABABAB);
static const badgeBgError = Color(0xFFFC526A);
static const badgeBgInverse = Color(0xFFFFFFFF);
static const badgeBgOverlay = Color(0xBF000000);
static const badgeText = Color(0xFFF8F8F8);
static const badgeTextOnInverse = Color(0xFF000000);
static const badgeTextOnAccent = Color(0xFFFFFFFF);
static const badgeBorder = Color(0xFF000000);
static const controlRemoveControlBg = Color(0xFFFFFFFF);
static const controlRemoveControlIcon = Color(0xFF000000);
static const controlRemoveControlBorder = Color(0xFF000000);
static const controlProgressBarFill = Color(0xFFABABAB);
static const controlProgressBarTrack = Color(0xFF464646);
static const controlToggleSwitchBg = Color(0xFFABABAB);
static const controlToggleSwitchBgSelected = Color(0xFF4586FF);
static const controlToggleSwitchBgDisabled = Color(0xFF323232);
static const controlToggleSwitchKnob = Color(0xFFFFFFFF);
static const controlPlaybackToggleText = Color(0xFFF8F8F8);
static const controlPlaybackToggleBorder = Color(0xFF565656);
static const controlCheckboxBg = Color(0x00FFFFFF);
static const controlCheckboxBorder = Color(0xFF565656);
static const controlCheckboxBgSelected = Color(0xFF4586FF);
static const controlCheckboxIcon = Color(0xFFFFFFFF);
static const controlPlayButtonBg = Color(0xBF000000);
static const controlPlayButtonIcon = Color(0xFFFFFFFF);
static const controlPlaybackThumbBgDefault = Color(0xFFFFFFFF);
static const controlPlaybackThumbBorderActive = Color(0xFFFFFFFF);
static const controlPlaybackThumbBgActive = Color(0xFF4586FF);
static const controlPlaybackThumbBorderDefault = Color(0x40FFFFFF);
static const controlRadioButtonBg = Color(0x00FFFFFF);
static const controlRadioButtonBorder = Color(0xFF565656);
static const controlRadioButtonBgSelected = Color(0xFF4586FF);
static const controlRadioButtonIndicator = Color(0xFFFFFFFF);
static const controlRadioCheckBg = Color(0x00FFFFFF);
static const controlRadioCheckBorder = Color(0xFF565656);
static const controlRadioCheckBgSelected = Color(0xFF4586FF);
static const controlRadioCheckIcon = Color(0xFFFFFFFF);
static const controlChipBorder = Color(0xFF565656);
static const controlChipText = Color(0xFFF8F8F8);
static const textPrimary = Color(0xFFF8F8F8);
static const textSecondary = Color(0xFFD8D8D8);
static const textTertiary = Color(0xFFABABAB);
static const textOnInverse = Color(0xFF000000);
static const textOnAccent = Color(0xFFFFFFFF);
static const textDisabled = Color(0xFF6A6A6A);
static const textLink = Color(0xFFA5C5FF);
static const avatarPaletteBg1 = Color(0xFF1B53BD);
static const avatarPaletteBg2 = Color(0xFF006970);
static const avatarPaletteBg3 = Color(0xFF006643);
static const avatarPaletteBg4 = Color(0xFF553BD8);
static const avatarPaletteBg5 = Color(0xFFA82C00);
static const avatarPaletteText1 = Color(0xFFE3EDFF);
static const avatarPaletteText2 = Color(0xFFD1F3F6);
static const avatarPaletteText3 = Color(0xFFBDFCDB);
static const avatarPaletteText4 = Color(0xFFECEDFF);
static const avatarPaletteText5 = Color(0xFFFCEDB9);
static const avatarBgDefault = Color(0xFF1B53BD);
static const avatarBgPlaceholder = Color(0xFF464646);
static const avatarTextDefault = Color(0xFFE3EDFF);
static const avatarTextPlaceholder = Color(0xFFABABAB);
static const avatarPresenceBgOnline = Color(0xFF00C384);
static const avatarPresenceBgOffline = Color(0xFFABABAB);
static const avatarPresenceBorder = Color(0xFF000000);
static const accentPrimary = Color(0xFF4586FF);
static const accentSuccess = Color(0xFF00C384);
static const accentWarning = Color(0xFFFCD579);
static const accentError = Color(0xFFFC526A);
static const accentNeutral = Color(0xFFABABAB);
static const brand50 = Color(0xFF091A3B);
static const brand100 = Color(0xFF142F63);
static const brand150 = Color(0xFF19418D);
Expand All @@ -610,8 +458,6 @@ class StreamTokens {
static const brand700 = Color(0xFFC3D9FF);
static const brand800 = Color(0xFFE3EDFF);
static const brand900 = Color(0xFFF3F7FF);
static const skeletonLoadingBase = Color(0x00FFFFFF);
static const skeletonLoadingHighlight = Color(0xBF000000);
static const chrome0 = Color(0xFF000000);
static const chrome50 = Color(0xFF1C1C1C);
static const chrome100 = Color(0xFF323232);
Expand Down
Loading
Loading