Skip to content

feat(ui): update tokens#46

Merged
xsahil03x merged 6 commits intomain-design-systemfrom
feature/update-tokens
Feb 4, 2026
Merged

feat(ui): update tokens#46
xsahil03x merged 6 commits intomain-design-systemfrom
feature/update-tokens

Conversation

@renefloor
Copy link
Collaborator

@renefloor renefloor commented Feb 4, 2026

Submit a pull request

CLA

  • I have signed the Stream CLA (required).
  • The code changes follow best practices
  • Code changes are tested (add some information if not applicable)

Description of the pull request

Update tokens based on this PR: https://github.com/GetStream/design-system-tokens/pull/15

border subtle now has the same color as surface, so I updated a lot of border colors in the gallery that weren't visible anymore on the surface background color.

image image

Summary by CodeRabbit

  • New Features

    • Added new color tokens: chipBg, chipText, and opacity variants for borders.
    • Added new typography styles: headingXs and numericXl.
    • Introduced backgroundCoreInverse and expanded chat/badge color tokens.
  • Style

    • Updated border color styling across design system components.
    • Refreshed color palette values for surfaces, chat elements, and badge styling.
    • Improved visual consistency with new border color token organization.

@renefloor renefloor requested a review from a team as a code owner February 4, 2026 11:53
@coderabbitai
Copy link

coderabbitai bot commented Feb 4, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

  • 🔍 Trigger a full review
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feature/update-tokens

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Feb 4, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main-design-system@c066cb4). Learn more about missing BASE report.

Additional details and impacted files
@@                  Coverage Diff                  @@
##             main-design-system      #46   +/-   ##
=====================================================
  Coverage                      ?   38.82%           
=====================================================
  Files                         ?       78           
  Lines                         ?     2009           
  Branches                      ?        0           
=====================================================
  Hits                          ?      780           
  Misses                        ?     1229           
  Partials                      ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@apps/design_system_gallery/lib/config/theme_configuration.dart`:
- Around line 361-364: In _rebuildTheme, the ColorScheme copyWith call currently
passes borderDefault and borderSubtle but omits borderStrong, borderOpacity10,
and borderOpacity25, so changes via their setters never make it into the theme;
update the copyWith invocation (the call in _rebuildTheme that uses
_borderDefault and _borderSubtle) to also pass _borderStrong, _borderOpacity10,
and _borderOpacity25 (using the same internal field names used by the setters)
so all border properties are applied to the resulting theme.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart`:
- Around line 575-576: Expose the chip tokens and create a chip theme: add
chipBg and chipText as properties on the StreamColors class (stream_colors.dart)
and initialize them from the corresponding tokens defined in stream_tokens.dart
so the color scheme exposes these values; then add a new component theme (e.g.,
StreamChipTheme or StreamChipThemeData) that consumes StreamColors.chipBg and
StreamColors.chipText and maps them to component properties (backgroundColor,
textColor, disabled states, padding/shape as needed) so consumers can access a
ready-made chip theme via the overall theme.

Comment on lines +575 to +576
static const chipBg = Color(0xFF19418D);
static const chipText = Color(0xFFE3EDFF);
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

rg -n "chipBg|chipText" packages --type dart

Repository: GetStream/stream-core-flutter

Length of output: 606


🏁 Script executed:

fd -n "color.*scheme\|theme" packages/stream_core_flutter/lib/src/theme --type f | head -20

Repository: GetStream/stream-core-flutter

Length of output: 303


🏁 Script executed:

find packages/stream_core_flutter/lib/src/theme -type f -name "*.dart" | head -20

Repository: GetStream/stream-core-flutter

Length of output: 1708


🏁 Script executed:

rg -n "chipBg|chipText" packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart -A 2 -B 2

Repository: GetStream/stream-core-flutter

Length of output: 55


🏁 Script executed:

cat packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart | head -100

Repository: GetStream/stream-core-flutter

Length of output: 3488


🏁 Script executed:

wc -l packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart

Repository: GetStream/stream-core-flutter

Length of output: 149


🏁 Script executed:

rg -n "chip" packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart -i

Repository: GetStream/stream-core-flutter

Length of output: 55


🏁 Script executed:

find packages/stream_core_flutter/lib/src/theme -type f -name "*chip*" -o -name "*Chip*"

Repository: GetStream/stream-core-flutter

Length of output: 55


🏁 Script executed:

rg -n "chipBg|chipText" packages --type dart -B 3 -A 3

Repository: GetStream/stream-core-flutter

Length of output: 1599


Wire chip tokens through color scheme and create chip theme component.

While chipBg and chipText are correctly defined in both light and dark token files with appropriate inverse colors, they are not exposed in the color scheme (stream_colors.dart) and have no component theme file. These tokens need to be added to StreamColors to make them accessible via the theme, and a chip theme component should be created if these tokens are meant for a specific chip component.

🤖 Prompt for AI Agents
In
`@packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart`
around lines 575 - 576, Expose the chip tokens and create a chip theme: add
chipBg and chipText as properties on the StreamColors class (stream_colors.dart)
and initialize them from the corresponding tokens defined in stream_tokens.dart
so the color scheme exposes these values; then add a new component theme (e.g.,
StreamChipTheme or StreamChipThemeData) that consumes StreamColors.chipBg and
StreamColors.chipText and maps them to component properties (backgroundColor,
textColor, disabled states, padding/shape as needed) so consumers can access a
ready-made chip theme via the overall theme.

- Add `backgroundDisabled` to `ThemeConfiguration` and customization panel
- Refactor color derivation logic for brand, accents, and borders in `_rebuildTheme`
- Update Material theme mappings for borders, dividers, and inputs
- Add `headingXs` to typography showcase
- Replace `Colors` with `StreamColors` for consistency
@xsahil03x xsahil03x merged commit 97a34d2 into main-design-system Feb 4, 2026
4 checks passed
@xsahil03x xsahil03x deleted the feature/update-tokens branch February 4, 2026 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants