Skip to content

Add docs to color tokens#4061

Merged
laevandus merged 4 commits intodevelopfrom
doc/document-and-group-color-tokens
Apr 14, 2026
Merged

Add docs to color tokens#4061
laevandus merged 4 commits intodevelopfrom
doc/document-and-group-color-tokens

Conversation

@laevandus
Copy link
Copy Markdown
Contributor

@laevandus laevandus commented Apr 10, 2026

🔗 Issue Links

IOS-1560

🎯 Goal

Add documentation to the ColorPalette tokens based on the Figma Design System, making it easier for SDK consumers to
understand and customize the color system.

📝 Summary

  • Added /// doc comments to all 120 public ColorPalette properties with descriptions sourced from the Figma Design
    System
  • Added // MARK: section headers to group tokens by semantic category (Accent, Background, Text, Border, Avatar,
    Badge, Button, Chat, Control, Input, Presence, Reaction, Navigation, Utilities)
  • Regrouped properties from alphabetical order to semantic categories matching the Figma design system hierarchy

🛠 Implementation

  • Foundational token descriptions (Accent, Background, Text, Border) are taken directly from the Figma Design System
    reference
  • Component token descriptions (Badge, Button, Chat, Control, etc.) are derived from naming conventions and usage
    patterns
  • Properties are reordered by category but the values and defaults are unchanged — this is a purely
    documentation/organizational change with no behavioral impact

🎨 Showcase

Add relevant screenshots and/or videos/gifs to easily see what this PR changes, if applicable.

Before After
img img

🧪 Manual Testing Notes

Explain how this change can be tested manually, if applicable.

☑️ Contributor Checklist

  • I have signed the Stream CLA (required)
  • This change should be manually QAed
  • Changelog is updated with client-facing changes
  • Changelog is updated with new localization keys
  • New code is covered by unit tests
  • Documentation has been updated in the docs-content repo

Summary by CodeRabbit

  • New Features

    • Expanded the public color palette with many new semantic tokens (accent, surface, text, border, avatar, badge, button, chat, control, input, presence, reaction, navigation).
  • Refactor

    • Reorganized color tokens into a clearer, grouped taxonomy for consistent theming.
  • Documentation

    • Added comprehensive inline docs for public color tokens to aid designers and themers.

@laevandus laevandus requested a review from a team as a code owner April 10, 2026 09:52
@laevandus laevandus added the 📋 Docs Work related to docs/wiki label Apr 10, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 10, 2026

Caution

Review failed

An error occurred during the review process. Please try again later.

📝 Walkthrough

Walkthrough

Reorganized Appearance.ColorPalette into semantic groups (Accent, Background/Surface, Text, Border, Avatar, Badge, Button, Chat, Control, Input, Presence, Reaction, Navigation/Utilities) and added many new public lazy color tokens; behavior and UIKit wiring remain unchanged. (45 words)

Changes

Cohort / File(s) Summary
Color Palette Reorganization
Sources/StreamChatCommonUI/Appearance+ColorPalette.swift
Restructured the file into grouped MARK sections and added ~60 new public lazy UIColor tokens (e.g., accentPrimary, accentSuccess, backgroundCoreSurface*, textPrimary/Secondary/Tertiary/Disabled/Link/OnAccent/OnInverse, borderCore* and borderCoreOpacity*, avatar/badge/button/chat/control/input/presence/reaction tokens such as chatTextTimestamp, chatPollProgress*, controlPlaybackThumb*, etc.). Several previous top-level tokens were removed and reintroduced under the new taxonomy with updated doc comments; navigation tokens and highlightedColorForColor remain with unchanged behavior.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰🎨 I hopped through code and made a new plan,
Grouped every hue where each color can stand,
Accents and surfaces, borders in line,
Tokens arranged like carrots in kind,
A small rabbit's touch — tidy, bright, and grand.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add docs to color tokens' accurately summarizes the main change—adding documentation to ColorPalette color tokens organized by semantic categories from the Figma Design System.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch doc/document-and-group-color-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.

@@ -8,124 +8,276 @@ import UIKit

public extension Appearance {
@MainActor final class ColorPalette {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

No color changes, just docs from Figma (or autogenerated). Regrouped as well.

@laevandus laevandus enabled auto-merge (squash) April 10, 2026 09:54
@github-actions
Copy link
Copy Markdown

1 Message
📖 There seems to be app changes but CHANGELOG wasn't modified.
Please include an entry if the PR includes user-facing changes.
You can find it at CHANGELOG.md.

Generated by 🚫 Danger

Copy link
Copy Markdown

@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

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@Sources/StreamChatCommonUI/Appearance`+ColorPalette.swift:
- Around line 27-28: The documentation for backgroundCoreElevation0 is
incorrect—it's not "Always white" because the property returns chrome0 which
follows light/dark appearances; update the comment for the
backgroundCoreElevation0 property (referencing backgroundCoreElevation0 and
chrome0) to state that it's the base/background layer that uses chrome0 and may
vary with appearance (e.g., light/dark) rather than claiming it's always white.
🪄 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: 9fcb306e-b0a4-4c81-b00a-3346bd9a7d83

📥 Commits

Reviewing files that changed from the base of the PR and between f7295d3 and a96bff2.

📒 Files selected for processing (1)
  • Sources/StreamChatCommonUI/Appearance+ColorPalette.swift

Comment thread Sources/StreamChatCommonUI/Appearance+ColorPalette.swift Outdated
Copy link
Copy Markdown
Contributor

@martinmitrevski martinmitrevski left a comment

Choose a reason for hiding this comment

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

nice, we should also put something similar in the docs

Copy link
Copy Markdown

@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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
Sources/StreamChatCommonUI/Appearance+ColorPalette.swift (1)

278-298: ⚠️ Potential issue | 🟡 Minor

The navigation section isn't strictly SwiftUI-only.

This header reads too narrowly: navigationBarTitle in the same block updates UINavigationBar.appearance() directly, and the properties are still public on Appearance.ColorPalette. I'd either remove the platform qualifier here or scope it to the specific tokens that are truly SwiftUI-only.

✏️ Suggested doc fix
-        // MARK: - Navigation (SwiftUI SDK only)
+        // MARK: - Navigation
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@Sources/StreamChatCommonUI/Appearance`+ColorPalette.swift around lines 278 -
298, The "Navigation (SwiftUI SDK only)" header is misleading because properties
like navigationBarTitle, navigationBarSubtitle, navigationBarBackground,
navigationBarTintColor, and navigationBarGlyph live on Appearance.ColorPalette
and directly update UINavigationBar.appearance(); update the doc comment to
remove or broaden the "SwiftUI SDK only" qualifier (or alternatively mark only
truly SwiftUI-specific tokens) so the header accurately reflects that these
tokens apply to UIKit as well; ensure the comment above this block clearly
states which tokens are UIKit/SwiftUI shared versus any that are SwiftUI-only.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@Sources/StreamChatCommonUI/Appearance`+ColorPalette.swift:
- Around line 39-40: The doc for backgroundCoreSurfaceCard is misleading because
it states it "matches the surface in light mode" while backgroundCoreSurfaceCard
actually maps to chrome50 (lifted) and backgroundCoreSurfaceDefault maps to
chrome100; update the documentation comment on the backgroundCoreSurfaceCard
property to state that it is a slightly lifted card surface in both light and
dark modes (e.g., "Background for contained, card-style elements; a slightly
lifted surface (chrome50 in light, chrome100 in dark)"), and optionally mention
backgroundCoreSurfaceDefault for comparison to make the distinction clear.

---

Outside diff comments:
In `@Sources/StreamChatCommonUI/Appearance`+ColorPalette.swift:
- Around line 278-298: The "Navigation (SwiftUI SDK only)" header is misleading
because properties like navigationBarTitle, navigationBarSubtitle,
navigationBarBackground, navigationBarTintColor, and navigationBarGlyph live on
Appearance.ColorPalette and directly update UINavigationBar.appearance(); update
the doc comment to remove or broaden the "SwiftUI SDK only" qualifier (or
alternatively mark only truly SwiftUI-specific tokens) so the header accurately
reflects that these tokens apply to UIKit as well; ensure the comment above this
block clearly states which tokens are UIKit/SwiftUI shared versus any that are
SwiftUI-only.
🪄 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: a234e760-0af3-4e2b-af79-77ec8dbea685

📥 Commits

Reviewing files that changed from the base of the PR and between 03dd4ae and ba71393.

📒 Files selected for processing (1)
  • Sources/StreamChatCommonUI/Appearance+ColorPalette.swift

Comment on lines +39 to +40
/// Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode.
public lazy var backgroundCoreSurfaceCard: UIColor = UIColor(light: chrome50, dark: chrome100)
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix the backgroundCoreSurfaceCard doc wording.

The description says this token matches the default surface in light mode, but backgroundCoreSurfaceCard resolves to chrome50 while backgroundCoreSurfaceDefault resolves to chrome100. That means the card surface is lifted in light mode too, so the current doc is misleading for consumers comparing tokens.

✏️ Suggested doc fix
-        /// Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode.
+        /// Background for contained, card-style elements. Slightly lifted from the default surface, with additional separation in dark mode.
         public lazy var backgroundCoreSurfaceCard: UIColor = UIColor(light: chrome50, dark: chrome100)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/// Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode.
public lazy var backgroundCoreSurfaceCard: UIColor = UIColor(light: chrome50, dark: chrome100)
/// Background for contained, card-style elements. Slightly lifted from the default surface, with additional separation in dark mode.
public lazy var backgroundCoreSurfaceCard: UIColor = UIColor(light: chrome50, dark: chrome100)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@Sources/StreamChatCommonUI/Appearance`+ColorPalette.swift around lines 39 -
40, The doc for backgroundCoreSurfaceCard is misleading because it states it
"matches the surface in light mode" while backgroundCoreSurfaceCard actually
maps to chrome50 (lifted) and backgroundCoreSurfaceDefault maps to chrome100;
update the documentation comment on the backgroundCoreSurfaceCard property to
state that it is a slightly lifted card surface in both light and dark modes
(e.g., "Background for contained, card-style elements; a slightly lifted surface
(chrome50 in light, chrome100 in dark)"), and optionally mention
backgroundCoreSurfaceDefault for comparison to make the distinction clear.

@laevandus
Copy link
Copy Markdown
Contributor Author

nice, we should also put something similar in the docs

https://github.com/GetStream/docs-content/pull/1179

@github-actions
Copy link
Copy Markdown

Public Interface

🚀 No changes affecting the public interface.

@Stream-SDK-Bot
Copy link
Copy Markdown
Collaborator

SDK Size

title develop branch diff status
StreamChat 6.74 MB 6.74 MB 0 KB 🟢
StreamChatUI 4.29 MB 4.29 MB 0 KB 🟢
StreamChatCommonUI 0.75 MB 0.75 MB 0 KB 🟢

@sonarqubecloud
Copy link
Copy Markdown

@laevandus laevandus merged commit a9ace20 into develop Apr 14, 2026
15 checks passed
@laevandus laevandus deleted the doc/document-and-group-color-tokens branch April 14, 2026 11:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📋 Docs Work related to docs/wiki

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants