diff --git a/.claude/skills/update-design-tokens/SKILL.md b/.claude/skills/update-design-tokens/SKILL.md index 8bb65881..97803ecd 100644 --- a/.claude/skills/update-design-tokens/SKILL.md +++ b/.claude/skills/update-design-tokens/SKILL.md @@ -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 @@ -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 diff --git a/.claude/skills/update-design-tokens/references/derived-token-map.md b/.claude/skills/update-design-tokens/references/derived-token-map.md index b2faa360..b0f1f98a 100644 --- a/.claude/skills/update-design-tokens/references/derived-token-map.md +++ b/.claude/skills/update-design-tokens/references/derived-token-map.md @@ -18,17 +18,19 @@ python3 /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 /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 diff --git a/CLAUDE.md b/CLAUDE.md index 5df6310d..9eb04c0f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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`, diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/dark/stream_tokens.dart b/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/dark/stream_tokens.dart index 4a783860..0a112977 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/dark/stream_tokens.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/dark/stream_tokens.dart @@ -7,10 +7,13 @@ class StreamTokens { static const baseTransparentWhite10 = Color(0x1AFFFFFF); static const baseTransparentWhite20 = Color(0x33FFFFFF); static const baseTransparentWhite30 = Color(0x4DFFFFFF); + 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); @@ -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; @@ -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); @@ -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); @@ -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); diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/light/stream_tokens.dart b/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/light/stream_tokens.dart index 8595b4e3..32d4b2cf 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/light/stream_tokens.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/internal/tokens/light/stream_tokens.dart @@ -7,10 +7,13 @@ class StreamTokens { static const baseTransparentWhite10 = Color(0x1AFFFFFF); static const baseTransparentWhite20 = Color(0x33FFFFFF); static const baseTransparentWhite30 = Color(0x4DFFFFFF); + 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); @@ -411,27 +414,6 @@ class StreamTokens { static const buttonPaddingXWithLabelMd = 16; static const buttonPaddingXWithLabelSm = 16; static const buttonPaddingXWithLabelXs = 12; - static const buttonPrimaryBg = Color(0xFF005FFF); - static const buttonPrimaryBgLiquidGlass = Color(0x00FFFFFF); - static const buttonPrimaryText = Color(0xFF005FFF); - static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF); - static const buttonPrimaryTextOnDark = Color(0xFFFFFFFF); - static const buttonPrimaryBorder = Color(0xFFA5C5FF); - static const buttonPrimaryBorderOnDark = Color(0xFFFFFFFF); - static const buttonSecondaryBg = Color(0xFFEBEEF1); - static const buttonSecondaryBgLiquidGlass = Color(0xFFFFFFFF); - static const buttonSecondaryText = Color(0xFF1A1B25); - static const buttonSecondaryTextOnAccent = Color(0xFF1A1B25); - static const buttonSecondaryTextOnDark = Color(0xFFFFFFFF); - static const buttonSecondaryBorder = Color(0xFFD5DBE1); - static const buttonSecondaryBorderOnDark = Color(0xFFFFFFFF); - static const buttonDestructiveBg = Color(0xFFD90D10); - static const buttonDestructiveBgLiquidGlass = Color(0xFFFFFFFF); - static const buttonDestructiveText = Color(0xFFD90D10); - static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF); - static const buttonDestructiveTextOnDark = Color(0xFFFFFFFF); - static const buttonDestructiveBorder = Color(0xFFD90D10); - static const buttonDestructiveBorderOnDark = Color(0xFFFFFFFF); static const iconSizeXs = 12; static const iconSizeSm = 16; static const iconSizeMd = 20; @@ -444,13 +426,6 @@ class StreamTokens { static const emojiLg = 32; static const emojiXl = 48; static const emoji2xl = 64; - static const backgroundCoreApp = Color(0xFFFFFFFF); - static const backgroundCoreSurfaceDefault = Color(0xFFEBEEF1); - static const backgroundCoreSurfaceSubtle = Color(0xFFF6F8FA); - static const backgroundCoreSurfaceCard = Color(0xFFF6F8FA); - static const backgroundCoreSurfaceStrong = Color(0xFFD5DBE1); - static const backgroundCoreInverse = Color(0xFF000000); - static const backgroundCoreOnAccent = Color(0xFFFFFFFF); static const backgroundCoreHighlight = Color(0xFFFEF9DA); static const backgroundCoreOverlayLight = Color(0xBFFFFFFF); static const backgroundCoreOverlayDark = Color(0x401A1B25); @@ -459,145 +434,19 @@ class StreamTokens { static const backgroundUtilityHover = Color(0x1A1A1B25); static const backgroundUtilityPressed = Color(0x261A1B25); static const backgroundUtilitySelected = Color(0x331A1B25); - static const backgroundUtilityDisabled = Color(0xFFEBEEF1); - static const backgroundElevationElevation0 = Color(0xFFFFFFFF); - static const backgroundElevationElevation1 = Color(0xFFFFFFFF); - static const backgroundElevationElevation2 = Color(0xFFFFFFFF); - static const backgroundElevationElevation3 = Color(0xFFFFFFFF); static const borderUtilityHover = Color(0x1A1A1B25); static const borderUtilityPressed = Color(0x331A1B25); static const borderUtilitySelected = Color(0x261A1B25); - static const borderUtilityFocused = Color(0xFFC3D9FF); - static const borderUtilityActive = Color(0xFF005FFF); - static const borderUtilitySuccess = Color(0xFF00A46E); - static const borderUtilityWarning = Color(0xFFF6BF57); - static const borderUtilityError = Color(0xFFD90D10); - static const borderUtilityDisabled = Color(0xFFEBEEF1); - static const borderUtilityDisabledOnSurface = Color(0xFFD5DBE1); static const borderCoreDefault = Color(0xFFD5DBE1); static const borderCoreSubtle = Color(0xFFEBEEF1); static const borderCoreStrong = Color(0xFFA3ACBA); - static const borderCoreInverse = Color(0xFFFFFFFF); - static const borderCoreOnAccent = Color(0xFFFFFFFF); - static const borderCoreOnSurface = Color(0xFFA3ACBA); static const borderCoreOpacitySubtle = Color(0x1A1A1B25); static const borderCoreOpacityStrong = Color(0x401A1B25); - static const borderCoreOnInverse = Color(0xFFFFFFFF); - static const chatBgIncoming = Color(0xFFEBEEF1); - static const chatBgOutgoing = Color(0xFFE3EDFF); - static const chatBgAttachmentIncoming = Color(0xFFD5DBE1); - static const chatBgAttachmentOutgoing = Color(0xFFC3D9FF); - static const chatTextIncoming = Color(0xFF1A1B25); - static const chatTextOutgoing = Color(0xFF091A3B); - static const chatTextUsername = Color(0xFF414552); - static const chatTextTimestamp = Color(0xFF687385); - static const chatTextTypingIndicator = Color(0xFF1A1B25); - static const chatTextRead = Color(0xFF005FFF); - static const chatTextMention = Color(0xFF005FFF); - static const chatTextLink = Color(0xFF005FFF); - static const chatTextReaction = Color(0xFF414552); - static const chatTextSystem = Color(0xFF414552); - static const chatBorderIncoming = Color(0xFFEBEEF1); - static const chatBorderOutgoing = Color(0xFFE3EDFF); - static const chatBorderOnChatIncoming = Color(0xFFA3ACBA); - static const chatBorderOnChatOutgoing = Color(0xFF78A8FF); - static const chatReplyIndicatorIncoming = Color(0xFF87909F); - static const chatReplyIndicatorOutgoing = Color(0xFF4586FF); - static const chatWaveformBar = Color(0x401A1B25); - static const chatWaveformBarPlaying = Color(0xFF005FFF); - static const chatPollProgressTrackIncoming = Color(0xFFD5DBE1); - static const chatPollProgressTrackOutgoing = Color(0xFFA5C5FF); - static const chatPollProgressFillIncoming = Color(0xFF687385); - static const chatPollProgressFillOutgoing = Color(0xFF005FFF); - static const chatThreadConnectorIncoming = Color(0xFFD5DBE1); - static const chatThreadConnectorOutgoing = Color(0xFFC3D9FF); - static const inputTextDefault = Color(0xFF1A1B25); - static const inputTextPlaceholder = Color(0xFF687385); - static const inputTextDisabled = Color(0xFFA3ACBA); - static const inputTextIcon = Color(0xFF687385); - static const inputSendIcon = Color(0xFF005FFF); - static const inputSendIconDisabled = Color(0xFFA3ACBA); - static const reactionBg = Color(0xFFFFFFFF); - static const reactionBorder = Color(0xFFD5DBE1); - static const reactionText = Color(0xFF1A1B25); - static const reactionEmoji = Color(0xFF1A1B25); - static const presenceBgOnline = Color(0xFF00A46E); - static const presenceBorder = Color(0xFFFFFFFF); - static const presenceBgOffline = Color(0xFF687385); static const systemText = Color(0xFF000000); - static const systemBgBlur = Color(0x03FFFFFF); - static const systemCaret = Color(0xFF005FFF); static const systemScrollbar = Color(0x80000000); - static const badgeBgDefault = Color(0xFFFFFFFF); - static const badgeBgPrimary = Color(0xFF005FFF); - static const badgeBgNeutral = Color(0xFF687385); - static const badgeBgError = Color(0xFFD90D10); - static const badgeBgInverse = Color(0xFF000000); - static const badgeBgOverlay = Color(0xBF000000); - static const badgeText = Color(0xFF1A1B25); - static const badgeTextOnInverse = Color(0xFFFFFFFF); - static const badgeTextOnAccent = Color(0xFFFFFFFF); - static const badgeBorder = Color(0xFFFFFFFF); - static const controlRemoveControlBg = Color(0xFF000000); - static const controlRemoveControlIcon = Color(0xFFFFFFFF); - static const controlRemoveControlBorder = Color(0xFFFFFFFF); - static const controlProgressBarFill = Color(0xFF687385); - static const controlProgressBarTrack = Color(0xFFD5DBE1); - static const controlToggleSwitchBg = Color(0xFF687385); - static const controlToggleSwitchBgSelected = Color(0xFF005FFF); - static const controlToggleSwitchBgDisabled = Color(0xFFEBEEF1); - static const controlToggleSwitchKnob = Color(0xFFFFFFFF); - static const controlPlaybackToggleText = Color(0xFF1A1B25); - static const controlPlaybackToggleBorder = Color(0xFFD5DBE1); - static const controlCheckboxBg = Color(0x00FFFFFF); - static const controlCheckboxBorder = Color(0xFFD5DBE1); - static const controlCheckboxBgSelected = Color(0xFF005FFF); - static const controlCheckboxIcon = Color(0xFFFFFFFF); - static const controlPlayButtonBg = Color(0xBF000000); - static const controlPlayButtonIcon = Color(0xFFFFFFFF); - static const controlPlaybackThumbBgDefault = Color(0xFFFFFFFF); - static const controlPlaybackThumbBorderDefault = Color(0x401A1B25); - static const controlPlaybackThumbBgActive = Color(0xFF005FFF); - static const controlPlaybackThumbBorderActive = Color(0xFFFFFFFF); - static const controlRadioButtonBg = Color(0x00FFFFFF); - static const controlRadioButtonBorder = Color(0xFFD5DBE1); - static const controlRadioButtonBgSelected = Color(0xFF005FFF); - static const controlRadioButtonIndicator = Color(0xFFFFFFFF); - static const controlRadioCheckBg = Color(0x00FFFFFF); - static const controlRadioCheckBorder = Color(0xFFD5DBE1); - static const controlRadioCheckBgSelected = Color(0xFF005FFF); - static const controlRadioCheckIcon = Color(0xFFFFFFFF); - static const controlChipBorder = Color(0xFFD5DBE1); - static const controlChipText = Color(0xFF1A1B25); - static const textPrimary = Color(0xFF1A1B25); - static const textSecondary = Color(0xFF414552); - static const textTertiary = Color(0xFF687385); - static const textOnInverse = Color(0xFFFFFFFF); - static const textOnAccent = Color(0xFFFFFFFF); - static const textDisabled = Color(0xFFA3ACBA); - static const textLink = Color(0xFF005FFF); - static const avatarPaletteBg1 = Color(0xFFC3D9FF); - static const avatarPaletteBg2 = Color(0xFFA9E4EA); - static const avatarPaletteBg3 = Color(0xFF8FEBBD); - static const avatarPaletteBg4 = Color(0xFFD4D7FF); - static const avatarPaletteBg5 = Color(0xFFFCD579); - static const avatarPaletteText1 = Color(0xFF091A3B); - static const avatarPaletteText2 = Color(0xFF002124); - static const avatarPaletteText3 = Color(0xFF002213); - static const avatarPaletteText4 = Color(0xFF1A114D); - static const avatarPaletteText5 = Color(0xFF331302); - static const avatarBgDefault = Color(0xFFC3D9FF); - static const avatarBgPlaceholder = Color(0xFFD5DBE1); - static const avatarTextDefault = Color(0xFF091A3B); - static const avatarTextPlaceholder = Color(0xFF687385); - static const avatarPresenceBgOnline = Color(0xFF00A46E); - static const avatarPresenceBgOffline = Color(0xFF687385); - static const avatarPresenceBorder = Color(0xFFFFFFFF); - static const accentPrimary = Color(0xFF005FFF); static const accentSuccess = Color(0xFF00A46E); static const accentWarning = Color(0xFFF6BF57); static const accentError = Color(0xFFD90D10); - static const accentNeutral = Color(0xFF687385); static const brand50 = Color(0xFFF3F7FF); static const brand100 = Color(0xFFE3EDFF); static const brand150 = Color(0xFFC3D9FF); @@ -609,8 +458,6 @@ class StreamTokens { static const brand700 = Color(0xFF19418D); static const brand800 = Color(0xFF142F63); static const brand900 = Color(0xFF091A3B); - static const skeletonLoadingBase = Color(0x00FFFFFF); - static const skeletonLoadingHighlight = Color(0xBFFFFFFF); static const chrome0 = Color(0xFFFFFFFF); static const chrome50 = Color(0xFFF6F8FA); static const chrome100 = Color(0xFFEBEEF1); diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart b/packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart index 53484e2d..baf7f9c2 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/stream_colors.dart @@ -48,8 +48,11 @@ abstract final class StreamColors { /// The white color with 20% opacity. static const white20 = tokens.StreamTokens.baseTransparentWhite20; + /// The white color with 30% opacity. + static const white30 = tokens.StreamTokens.baseTransparentWhite30; + /// The white color with 50% opacity. - static const white50 = Color(0x80FFFFFF); + static const white50 = tokens.StreamTokens.baseTransparentWhite50; /// The white color with 70% opacity. static const white70 = tokens.StreamTokens.baseTransparentWhite70; @@ -64,10 +67,13 @@ abstract final class StreamColors { static const black10 = tokens.StreamTokens.baseTransparentBlack10; /// The black color with 50% opacity. - static const black50 = Color(0x80000000); + static const black50 = tokens.StreamTokens.baseTransparentBlack50; + + /// The black color with 70% opacity. + static const black70 = tokens.StreamTokens.baseTransparentBlack70; /// The black color with 75% opacity. - static const black75 = Color(0xBF000000); + static const black75 = tokens.StreamTokens.baseTransparentBlack75; /// The slate color swatch. static final slate = StreamColorSwatch(