fix: final token bump

isekovanic · isekovanic · commit c5f5511a61e7 · 2026-04-03T13:45:19.000+02:00
diff --git a/examples/SampleApp/src/theme/useLegacyColors.ts b/examples/SampleApp/src/theme/useLegacyColors.ts
@@ -10,14 +10,14 @@ export const useLegacyColors = () => {
     () => ({
       accent_blue: semantics.accentPrimary,
       accent_red: semantics.accentError,
-      bg_gradient_end: semantics.backgroundCoreSurface,
+      bg_gradient_end: semantics.backgroundCoreSurfaceDefault,
       bg_gradient_start: semantics.backgroundCoreSurfaceSubtle,
       black: semantics.textPrimary,
       button_background: semantics.buttonPrimaryBg,
       button_text: semantics.buttonPrimaryTextOnAccent,
       grey: semantics.textSecondary,
       grey_gainsboro: semantics.borderCoreDefault,
-      grey_whisper: semantics.backgroundCoreSurface,
+      grey_whisper: semantics.backgroundCoreSurfaceDefault,
       icon_background: semantics.backgroundCoreApp,
       overlay: semantics.badgeBgOverlay,
       white: semantics.backgroundCoreApp,
diff --git a/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx b/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx
@@ -46,7 +46,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingHorizontal: primitives.spacingMd,
         paddingVertical: primitives.spacingLg,
         ...container,
diff --git a/package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx b/package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx
@@ -38,7 +38,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingVertical: primitives.spacingXs,
         paddingHorizontal: primitives.spacingSm,
         ...container,
diff --git a/package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx b/package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx
@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingVertical: primitives.spacingXs,
         paddingHorizontal: primitives.spacingSm,
         ...container,
diff --git a/package/src/components/ChannelList/Skeleton.tsx b/package/src/components/ChannelList/Skeleton.tsx
@@ -16,7 +16,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
   return (
     <View style={style}>
       <NativeShimmerView
-        baseColor={semantics.backgroundCoreSurface}
+        baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
         style={StyleSheet.absoluteFillObject}
diff --git a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx
@@ -143,12 +143,12 @@ const useStyles = () => {
           justifyContent: 'center',
         },
         elipsis: {
-          backgroundColor: semantics.backgroundCoreSurface,
+          backgroundColor: semantics.backgroundCoreSurfaceDefault,
         },
         standard: {
           backgroundColor: semantics.accentPrimary,
         },
       }),
-    [semantics.accentPrimary, semantics.backgroundCoreSurface],
+    [semantics.accentPrimary, semantics.backgroundCoreSurfaceDefault],
   );
 };
diff --git a/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx b/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx
@@ -36,7 +36,7 @@ jest.mock('../../../contexts', () => ({
     theme: {
       semantics: {
         accentPrimary: '#00f',
-        backgroundCoreSurface: '#fff',
+        backgroundCoreSurfaceDefault: '#fff',
         textOnAccent: '#000',
         textPrimary: '#111',
       },
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
@@ -75,7 +75,7 @@ export const VideoAttachmentMetadataPill = ({
 
   return durationLabel ? (
     <View style={styles.durationContainer}>
-      <Recorder height={12} width={12} pathFill={semantics.textInverse} />
+      <Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
       <Text style={styles.durationText}>{durationLabel}</Text>
     </View>
   ) : null;
@@ -91,7 +91,7 @@ const useStyles = () => {
     },
   } = useTheme();
 
-  const { badgeBgInverse, textInverse } = semantics;
+  const { badgeBgInverse, textOnInverse } = semantics;
 
   return useMemo(
     () =>
@@ -111,11 +111,11 @@ const useStyles = () => {
         durationText: {
           fontSize: primitives.typographyFontSizeXxs,
           fontWeight: primitives.typographyFontWeightBold,
-          color: textInverse,
+          color: textOnInverse,
           marginLeft: primitives.spacingXxs,
           ...durationText,
         },
       }),
-    [badgeBgInverse, textInverse, durationContainer, durationText],
+    [badgeBgInverse, textOnInverse, durationContainer, durationText],
   );
 };
diff --git a/package/src/components/MessageList/NetworkDownIndicator.tsx b/package/src/components/MessageList/NetworkDownIndicator.tsx
@@ -52,7 +52,7 @@ const useStyles = () => {
         right: 0,
         top: 0,
         justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         ...errorNotification,
       },
       errorText: {
diff --git a/package/src/components/ThreadList/ThreadListItemSkeleton.tsx b/package/src/components/ThreadList/ThreadListItemSkeleton.tsx
@@ -16,7 +16,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
   return (
     <View style={style}>
       <NativeShimmerView
-        baseColor={semantics.backgroundCoreSurface}
+        baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
         style={StyleSheet.absoluteFillObject}
diff --git a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
@@ -63,7 +63,7 @@ export const ThreadListUnreadBanner = () => {
         {
           backgroundColor: pressed
             ? semantics.backgroundUtilityPressed
-            : semantics.backgroundCoreSurface,
+            : semantics.backgroundCoreSurfaceDefault,
         },
       ]}
     >
@@ -90,7 +90,7 @@ const useStyles = () => {
         ...threadListUnreadBanner.text,
       },
       container: {
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/package/src/components/ui/Badge/ImgurBadge.tsx b/package/src/components/ui/Badge/ImgurBadge.tsx
@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
       },
       text: {
-        color: semantics.badgeTextInverse,
+        color: semantics.badgeTextOnInverse,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
diff --git a/package/src/components/ui/GiphyChip.tsx b/package/src/components/ui/GiphyChip.tsx
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textInverse} height={16} width={16} />
+      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textInverse} height={16} width={16} />
+        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );
@@ -59,7 +59,7 @@ const useStyles = () => {
           height: 24,
         },
         text: {
-          color: semantics.textInverse,
+          color: semantics.textOnInverse,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,
diff --git a/package/src/theme/generated/StreamTokens.types.ts b/package/src/theme/generated/StreamTokens.types.ts
@@ -366,15 +366,14 @@ export interface ChatSemantics {
   backgroundCoreElevation1: ColorValue;
   backgroundCoreElevation2: ColorValue;
   backgroundCoreElevation3: ColorValue;
-  backgroundCoreElevation4: ColorValue;
   backgroundCoreHighlight: ColorValue;
   backgroundCoreInverse: ColorValue;
   backgroundCoreOnAccent: ColorValue;
   backgroundCoreOverlayDark: ColorValue;
   backgroundCoreOverlayLight: ColorValue;
   backgroundCoreScrim: ColorValue;
-  backgroundCoreSurface: ColorValue;
   backgroundCoreSurfaceCard: ColorValue;
+  backgroundCoreSurfaceDefault: ColorValue;
   backgroundCoreSurfaceStrong: ColorValue;
   backgroundCoreSurfaceSubtle: ColorValue;
   backgroundUtilityDisabled: ColorValue;
@@ -389,17 +388,20 @@ export interface ChatSemantics {
   badgeBgPrimary: ColorValue;
   badgeBorder: ColorValue;
   badgeText: ColorValue;
-  badgeTextInverse: ColorValue;
   badgeTextOnAccent: ColorValue;
+  badgeTextOnInverse: ColorValue;
   borderCoreDefault: ColorValue;
   borderCoreInverse: ColorValue;
   borderCoreOnAccent: ColorValue;
+  borderCoreOnInverse: ColorValue;
+  borderCoreOnSurface: ColorValue;
   borderCoreOpacityStrong: ColorValue;
   borderCoreOpacitySubtle: ColorValue;
   borderCoreStrong: ColorValue;
   borderCoreSubtle: ColorValue;
   borderUtilityActive: ColorValue;
   borderUtilityDisabled: ColorValue;
+  borderUtilityDisabledOnSurface: ColorValue;
   borderUtilityError: ColorValue;
   borderUtilityFocused: ColorValue;
   borderUtilityHover: ColorValue;
@@ -484,6 +486,8 @@ export interface ChatSemantics {
   controlCheckboxBgSelected: ColorValue;
   controlCheckboxBorder: ColorValue;
   controlCheckboxIcon: ColorValue;
+  controlChipBorder: ColorValue;
+  controlChipText: ColorValue;
   controlPlaybackThumbBgActive: ColorValue;
   controlPlaybackThumbBgDefault: ColorValue;
   controlPlaybackThumbBorderActive: ColorValue;
@@ -529,9 +533,9 @@ export interface ChatSemantics {
   systemScrollbar: ColorValue;
   systemText: ColorValue;
   textDisabled: ColorValue;
-  textInverse: ColorValue;
   textLink: ColorValue;
   textOnAccent: ColorValue;
+  textOnInverse: ColorValue;
   textPrimary: ColorValue;
   textSecondary: ColorValue;
   textTertiary: ColorValue;
diff --git a/package/src/theme/generated/dark/StreamTokens.android.ts b/package/src/theme/generated/dark/StreamTokens.android.ts
@@ -423,23 +423,22 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText5: foundations.colors.yellow100,
   avatarPresenceBgOffline: '$accentNeutral',
   avatarPresenceBgOnline: '$accentSuccess',
-  avatarPresenceBorder: '$borderCoreInverse',
+  avatarPresenceBorder: '$borderCoreOnInverse',
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$chrome500',
-  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreApp: '$chrome0',
   backgroundCoreElevation0: '$chrome0',
   backgroundCoreElevation1: '$chrome50',
   backgroundCoreElevation2: '$chrome100',
   backgroundCoreElevation3: '$chrome200',
-  backgroundCoreElevation4: '$chrome300',
   backgroundCoreHighlight: foundations.colors.yellow800,
-  backgroundCoreInverse: '$chrome900',
-  backgroundCoreOnAccent: '$chrome0',
+  backgroundCoreInverse: '$chrome1000',
+  backgroundCoreOnAccent: '$chrome1000',
   backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
   backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
-  backgroundCoreSurface: '$chrome100',
   backgroundCoreSurfaceCard: '$chrome100',
+  backgroundCoreSurfaceDefault: '$chrome100',
   backgroundCoreSurfaceStrong: '$chrome150',
   backgroundCoreSurfaceSubtle: '$chrome50',
   backgroundUtilityDisabled: '$chrome100',
@@ -452,19 +451,22 @@ export const semantics: IStreamTokens['semantics'] = {
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreInverse',
+  badgeBorder: '$borderCoreOnInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
+  badgeTextOnInverse: '$textOnInverse',
   borderCoreDefault: '$chrome200',
-  borderCoreInverse: '$chrome1000',
-  borderCoreOnAccent: '$chrome0',
+  borderCoreInverse: '$chrome0',
+  borderCoreOnAccent: '$chrome1000',
+  borderCoreOnInverse: '$chrome0',
+  borderCoreOnSurface: '$chrome300',
   borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
   borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
   borderCoreStrong: '$chrome300',
   borderCoreSubtle: '$chrome100',
   borderUtilityActive: '$accentPrimary',
   borderUtilityDisabled: '$chrome100',
+  borderUtilityDisabledOnSurface: '$chrome150',
   borderUtilityError: '$accentError',
   borderUtilityFocused: '$brand150',
   borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
@@ -486,38 +488,38 @@ export const semantics: IStreamTokens['semantics'] = {
   buttonDestructiveBg: '$accentError',
   buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textInverse',
+  buttonDestructiveBorderOnDark: '$textOnInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textInverse',
+  buttonDestructiveTextOnDark: '$textOnInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textInverse',
-  buttonPrimaryText: '$textLink',
+  buttonPrimaryBorderOnDark: '$borderCoreOnInverse',
+  buttonPrimaryText: '$accentPrimary',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textInverse',
-  buttonSecondaryBg: '$backgroundCoreSurface',
+  buttonPrimaryTextOnDark: '$textOnInverse',
+  buttonSecondaryBg: '$backgroundCoreSurfaceDefault',
   buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreInverse',
+  buttonSecondaryBorderOnDark: '$borderCoreOnInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textInverse',
+  buttonSecondaryTextOnDark: '$textOnInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
-  chatBgIncoming: '$backgroundCoreSurface',
+  chatBgIncoming: '$backgroundCoreSurfaceDefault',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
   chatBorderOutgoing: '$brand100',
   chatPollProgressFillIncoming: '$controlProgressBarFill',
-  chatPollProgressFillOutgoing: foundations.colors.baseWhite,
+  chatPollProgressFillOutgoing: '$accentPrimary',
   chatPollProgressTrackIncoming: '$controlProgressBarTrack',
   chatPollProgressTrackOutgoing: '$brand200',
-  chatReplyIndicatorIncoming: foundations.colors.neutral500,
-  chatReplyIndicatorOutgoing: '$brand700',
+  chatReplyIndicatorIncoming: '$chrome400',
+  chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
   chatTextMention: '$textLink',
@@ -549,13 +551,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlCheckboxBgSelected: '$accentPrimary',
   controlCheckboxBorder: '$borderCoreDefault',
   controlCheckboxIcon: '$textOnAccent',
+  controlChipBorder: '$borderCoreDefault',
+  controlChipText: '$textPrimary',
   controlPlaybackThumbBgActive: '$accentPrimary',
-  controlPlaybackThumbBgDefault: '$backgroundCoreInverse',
+  controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
   controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
   controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonBg: 'rgba(0, 0, 0, 0.75)',
   controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
@@ -568,12 +572,12 @@ export const semantics: IStreamTokens['semantics'] = {
   controlRadioCheckBorder: '$borderCoreDefault',
   controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreInverse',
-  controlRemoveControlIcon: '$textInverse',
+  controlRemoveControlBorder: '$borderCoreOnInverse',
+  controlRemoveControlIcon: '$textOnInverse',
   controlToggleSwitchBg: '$accentNeutral',
   controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundCoreElevation4',
+  controlToggleSwitchKnob: '$backgroundCoreOnAccent',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -588,15 +592,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
   skeletonLoadingBase: foundations.colors.baseTransparent0,
-  skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
+  skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
-  systemText: foundations.colors.baseWhite,
+  systemText: '$chrome1000',
   textDisabled: '$chrome300',
-  textInverse: '$chrome0',
   textLink: '$brand600',
   textOnAccent: '$chrome1000',
+  textOnInverse: '$chrome0',
   textPrimary: '$chrome900',
   textSecondary: '$chrome700',
   textTertiary: '$chrome500',
diff --git a/package/src/theme/generated/dark/StreamTokens.ios.ts b/package/src/theme/generated/dark/StreamTokens.ios.ts
diff --git a/package/src/theme/generated/dark/StreamTokens.web.ts b/package/src/theme/generated/dark/StreamTokens.web.ts
diff --git a/package/src/theme/generated/light/StreamTokens.android.ts b/package/src/theme/generated/light/StreamTokens.android.ts
diff --git a/package/src/theme/generated/light/StreamTokens.ios.ts b/package/src/theme/generated/light/StreamTokens.ios.ts
diff --git a/package/src/theme/generated/light/StreamTokens.web.ts b/package/src/theme/generated/light/StreamTokens.web.ts
