feat(ui): improve color config - #131
Conversation
|
Warning Review limit reached
Next review available in: 45 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughChangesTheme color generation now uses HCT-based shade ladders, supports seed-based schemes and brightness inference, and is covered by deterministic and golden tests. Theme Studio exposes customization state and per-field reset controls across color sections and the avatar palette. Theme customization
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant ThemeStudio
participant ThemeConfiguration
participant StreamTheme
participant StreamColorScheme
participant StreamColorSwatch
ThemeStudio->>ThemeConfiguration: set or reset color override
ThemeConfiguration->>StreamTheme: rebuild light or dark theme
StreamTheme->>StreamColorScheme: pass brand, chrome, and override values
StreamColorScheme->>StreamColorSwatch: generate color swatches
StreamColorSwatch-->>StreamColorScheme: return shade maps
StreamColorScheme-->>ThemeConfiguration: return rebuilt color scheme
ThemeConfiguration-->>ThemeStudio: notify listeners and refresh controls
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #131 +/- ##
==========================================
+ Coverage 47.45% 47.80% +0.34%
==========================================
Files 179 179
Lines 7259 7261 +2
==========================================
+ Hits 3445 3471 +26
+ Misses 3814 3790 -24 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
renefloor
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart (1)
223-229: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCover the explicit
chromeColorpath.All chrome assertions exercise fallback generation from
brandColor. Add distinct brand and chrome seeds for both factories so ignored overrides or incorrect precedence are caught.Suggested coverage
+ test('prefers an explicit chrome seed', () { + const chromeSeed = Color(0xFF2196F3); + final chrome = StreamTheme.light( + brandColor: const Color(0xFFF44336), + chromeColor: chromeSeed, + ).colorScheme.chrome; + + expect(chrome[500], chromeSeed); + });Add the equivalent assertion to the dark-theme group.
Also applies to: 449-455
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart` around lines 223 - 229, Extend the theme color generation tests around the light and dark factory groups to provide distinct brandColor and chromeColor seeds, then assert that each factory preserves the explicit chromeColor at its expected chrome shade while brandColor remains mapped to brand shade 500. Cover both StreamTheme.light and StreamTheme.dark so ignored overrides or incorrect precedence are detected.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/design_system_gallery/lib/config/theme_configuration.dart`:
- Around line 519-590: The scheme rebuild in ThemeConfiguration should use the
public color getters rather than private fields, while gating each effective
value with its corresponding *IsCustom flag so non-custom properties remain null
and SDK defaults are preserved. Update effectiveBrand, effectiveChrome, and all
arguments passed to buildScheme, including accent, text, background, and border
properties, to follow this getter-and-flag pattern.
In
`@apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart`:
- Around line 222-224: Update the customization section builders in the theme
customization panel to obtain ThemeConfiguration with context.watch rather than
context.read, including the builders covering the listed color controls,
custom-state flags, and reset/default presentation. Preserve the existing
callbacks and rendering logic while ensuring each section rebuilds directly when
ThemeConfiguration changes.
In `@packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart`:
- Around line 272-280: Update StreamColorSwatch.fromColor so the generated shade
map is computed before constructing the swatch, then use shades[500] as the
primary Color value instead of color.toARGB32(). Preserve the existing
brightness and saturation arguments passed to
StreamColorSwatchHelper.generateShadeMap.
---
Nitpick comments:
In
`@packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart`:
- Around line 223-229: Extend the theme color generation tests around the light
and dark factory groups to provide distinct brandColor and chromeColor seeds,
then assert that each factory preserves the explicit chromeColor at its expected
chrome shade while brandColor remains mapped to brand shade 500. Cover both
StreamTheme.light and StreamTheme.dark so ignored overrides or incorrect
precedence are detected.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f8809e68-894b-47ba-8c7e-55306db08cb7
⛔ Files ignored due to path filters (1)
packages/stream_core_flutter/test/theme/goldens/ci/stream_theme_color_generation.pngis excluded by!**/*.png
📒 Files selected for processing (9)
apps/design_system_gallery/lib/config/theme_configuration.dartapps/design_system_gallery/lib/widgets/theme_studio/color_picker_tile.dartapps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dartpackages/stream_core_flutter/CHANGELOG.mdpackages/stream_core_flutter/lib/src/theme/primitives/internal/stream_color_swatch_helper.dartpackages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dartpackages/stream_core_flutter/lib/src/theme/stream_theme.dartpackages/stream_core_flutter/test/theme/stream_theme_color_generation_golden_test.dartpackages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart`:
- Around line 210-211: Replace Swift-style shorthand with explicit Dart symbols:
in stream_color_scheme.dart at lines 210-211 and 431-432, use
StreamColorScheme.raw and Brightness.light/dark; in stream_theme.dart at lines
162-163, 214-215, and 266-272, use Brightness.light/dark and StreamTheme.raw;
and in stream_theme_color_generation_test.dart at lines 232-456, use
Brightness.dark for dark-generation cases.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4c5c20fd-0a80-43f1-98bd-4401e3270652
📒 Files selected for processing (4)
packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dartpackages/stream_core_flutter/lib/src/theme/stream_theme.dartpackages/stream_core_flutter/test/theme/stream_theme_color_generation_golden_test.dartpackages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/stream_core_flutter/test/theme/stream_theme_color_generation_golden_test.dart
There was a problem hiding this comment.
We also need to regenerate this file for the new brightness field.
| } | ||
|
|
||
| void resetToDefaults() { | ||
| _brandPrimaryColor = null; |
There was a problem hiding this comment.
we should keep this right? Also reset the _chromePrimaryColor
There was a problem hiding this comment.
It was duplicated, moved the other to the top now: 6a77ae7
| static Map<int, Color> generateShadeMap( | ||
| Color baseColor, { | ||
| Brightness brightness = Brightness.light, | ||
| double? saturation, | ||
| }) { | ||
| final hslBase = HSLColor.fromColor(baseColor); | ||
| var hslBase = HSLColor.fromColor(baseColor); | ||
| if (saturation != null) { | ||
| hslBase = hslBase.withSaturation(saturation); | ||
| } |
There was a problem hiding this comment.
Should we instead use HCT instead of HSL? I read a bit and Material and new Design systems now prefer to use HCT over the old HSL
There was a problem hiding this comment.
done: c0654af
Still discussing with Jurgen if it's a good idea, but looks fine so far.
| brightness: brightness, | ||
| ), | ||
| ) ?? | ||
| StreamColorSwatch.fromColor(brand, brightness: brightness, saturation: 0.1), |
There was a problem hiding this comment.
we should not provide any default here, as the default constructor already set the default chrome value if not available
There was a problem hiding this comment.
The default constructor sets it to our slightly blue-ish grey. I think it's nice that the fromSeed actually makes the chrome color automatically match the brand color.
| } | ||
|
|
||
| const StreamColorScheme.raw({ | ||
| this.brightness = Brightness.light, |
There was a problem hiding this comment.
lets keep it required here.
| this.brightness = Brightness.light, | |
| required this.brightness, |
There was a problem hiding this comment.
It's a new property and StreamColorScheme.raw is part of the public api, so adding a required field is a breaking change. That's why I made it optional with a default.
| factory StreamTheme.dark() => StreamTheme(brightness: .dark); | ||
|
|
||
| const StreamTheme.raw({ | ||
| required this.brightness, |
There was a problem hiding this comment.
I would also remove the brightness as the field and convert it into a getter instead similar to Material.
/// The overall theme brightness.
///
/// The default [TextStyle] color for the [textTheme] is black if the
/// theme is constructed with [Brightness.light] and white if the
/// theme is constructed with [Brightness.dark].
Brightness get brightness => colorScheme.brightness;
7cb3133 to
c0654af
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart (1)
172-183: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDark-mirror test only covers half the shade range.
mirrorhere stops at400: 400, leaving shades 500–900 (which mirror to 300, 200, 150, 100, 50 respectively per_darkMirror) unverified by this test.♻️ Proposed fix to cover the full mirror map
- const mirror = {50: 900, 100: 800, 150: 700, 200: 600, 300: 500, 400: 400}; + const mirror = { + 50: 900, 100: 800, 150: 700, 200: 600, 300: 500, 400: 400, + 600: 200, 700: 150, 800: 100, 900: 50, + };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart` around lines 172 - 183, Extend the `mirror` map in the dark-shade test to include shades 500, 600, 700, 800, and 900 mapped to their corresponding light shades 300, 200, 150, 100, and 50, so the loop validates the complete `_darkMirror` mapping while preserving the existing assertions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@packages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart`:
- Around line 172-183: Extend the `mirror` map in the dark-shade test to include
shades 500, 600, 700, 800, and 900 mapped to their corresponding light shades
300, 200, 150, 100, and 50, so the loop validates the complete `_darkMirror`
mapping while preserving the existing assertions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5dcd4758-71f8-422f-b3b6-c1ebaedcd524
⛔ Files ignored due to path filters (1)
packages/stream_core_flutter/test/theme/goldens/ci/stream_theme_color_generation.pngis excluded by!**/*.png
📒 Files selected for processing (11)
apps/design_system_gallery/lib/config/theme_configuration.dartapps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dartmelos.yamlpackages/stream_core_flutter/CHANGELOG.mdpackages/stream_core_flutter/lib/src/theme/primitives/internal/stream_color_swatch_helper.dartpackages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dartpackages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dartpackages/stream_core_flutter/lib/src/theme/stream_theme.dartpackages/stream_core_flutter/pubspec.yamlpackages/stream_core_flutter/test/theme/stream_theme_color_generation_golden_test.dartpackages/stream_core_flutter/test/theme/stream_theme_color_generation_test.dart
🚧 Files skipped from review as they are similar to previous changes (4)
- packages/stream_core_flutter/test/theme/stream_theme_color_generation_golden_test.dart
- apps/design_system_gallery/lib/config/theme_configuration.dart
- packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart
- apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart
2 participants
Submit a pull request
CLA
Description of the pull request
Currently the StreamTheme.light and StreamTheme.dark are quite useless as you can't even change your primary color. I've extended these factories to easily set your primary color and base your chrome color on that primary color. I've also updated the gallery so you can see which colors are automatically generated and which colors are specifically overriden in the gallery by the user.
Screenshots / Videos
design.system.colors.demo.mov
Summary by CodeRabbit