stream-chat-react-native-core 9.0.0-beta.16 → 9.0.0-beta.18

package/src/theme/generated/dark/StreamTokens.web.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',

package/src/theme/generated/light/StreamTokens.android.ts

@@ -423,23 +423,22 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText5: foundations.colors.yellow900,
   avatarPresenceBgOffline: '$accentNeutral',
   avatarPresenceBgOnline: '$accentSuccess',
-  avatarPresenceBorder: '$borderCoreInverse',
+  avatarPresenceBorder: '$borderCoreOnInverse',
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$chrome500',
-  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreApp: '$chrome0',
   backgroundCoreElevation0: '$chrome0',
   backgroundCoreElevation1: '$chrome0',
   backgroundCoreElevation2: '$chrome0',
   backgroundCoreElevation3: '$chrome0',
-  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreInverse: '$chrome900',
+  backgroundCoreInverse: '$chrome1000',
   backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
   backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
-  backgroundCoreSurface: '$chrome100',
   backgroundCoreSurfaceCard: '$chrome50',
+  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: '$chrome150',
   borderCoreInverse: '$chrome0',
   borderCoreOnAccent: '$chrome0',
+  borderCoreOnInverse: '$chrome0',
+  borderCoreOnSurface: '$chrome300',
   borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
   borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
   borderCoreStrong: '$chrome300',
   borderCoreSubtle: '$chrome100',
   borderUtilityActive: '$accentPrimary',
   borderUtilityDisabled: '$chrome100',
+  borderUtilityDisabledOnSurface: '$chrome150',
   borderUtilityError: '$accentError',
   borderUtilityFocused: '$brand150',
   borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
@@ -486,27 +488,27 @@ 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: '$borderCoreInverse',
-  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',
@@ -516,7 +518,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatPollProgressFillOutgoing: '$accentPrimary',
   chatPollProgressTrackIncoming: '$controlProgressBarTrack',
   chatPollProgressTrackOutgoing: '$brand200',
-  chatReplyIndicatorIncoming: foundations.colors.slate400,
+  chatReplyIndicatorIncoming: '$chrome400',
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
@@ -549,13 +551,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlCheckboxBgSelected: '$accentPrimary',
   controlCheckboxBorder: '$borderCoreDefault',
   controlCheckboxIcon: '$textOnAccent',
+  controlChipBorder: '$borderCoreDefault',
+  controlChipText: '$textPrimary',
   controlPlaybackThumbBgActive: '$accentPrimary',
   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.baseWhite,
+  skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
-  systemText: foundations.colors.baseBlack,
+  systemText: '$chrome1000',
   textDisabled: '$chrome300',
-  textInverse: '$chrome0',
   textLink: '$brand500',
   textOnAccent: '$chrome0',
+  textOnInverse: '$chrome0',
   textPrimary: '$chrome900',
   textSecondary: '$chrome700',
   textTertiary: '$chrome500',

package/src/theme/generated/light/StreamTokens.ios.ts

@@ -423,23 +423,22 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText5: foundations.colors.yellow900,
   avatarPresenceBgOffline: '$accentNeutral',
   avatarPresenceBgOnline: '$accentSuccess',
-  avatarPresenceBorder: '$borderCoreInverse',
+  avatarPresenceBorder: '$borderCoreOnInverse',
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$chrome500',
-  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreApp: '$chrome0',
   backgroundCoreElevation0: '$chrome0',
   backgroundCoreElevation1: '$chrome0',
   backgroundCoreElevation2: '$chrome0',
   backgroundCoreElevation3: '$chrome0',
-  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreInverse: '$chrome900',
+  backgroundCoreInverse: '$chrome1000',
   backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
   backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
-  backgroundCoreSurface: '$chrome100',
   backgroundCoreSurfaceCard: '$chrome50',
+  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: '$chrome150',
   borderCoreInverse: '$chrome0',
   borderCoreOnAccent: '$chrome0',
+  borderCoreOnInverse: '$chrome0',
+  borderCoreOnSurface: '$chrome300',
   borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
   borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
   borderCoreStrong: '$chrome300',
   borderCoreSubtle: '$chrome100',
   borderUtilityActive: '$accentPrimary',
   borderUtilityDisabled: '$chrome100',
+  borderUtilityDisabledOnSurface: '$chrome150',
   borderUtilityError: '$accentError',
   borderUtilityFocused: '$brand150',
   borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
@@ -486,27 +488,27 @@ 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: '$borderCoreInverse',
-  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',
@@ -516,7 +518,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatPollProgressFillOutgoing: '$accentPrimary',
   chatPollProgressTrackIncoming: '$controlProgressBarTrack',
   chatPollProgressTrackOutgoing: '$brand200',
-  chatReplyIndicatorIncoming: foundations.colors.slate400,
+  chatReplyIndicatorIncoming: '$chrome400',
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
@@ -549,13 +551,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlCheckboxBgSelected: '$accentPrimary',
   controlCheckboxBorder: '$borderCoreDefault',
   controlCheckboxIcon: '$textOnAccent',
+  controlChipBorder: '$borderCoreDefault',
+  controlChipText: '$textPrimary',
   controlPlaybackThumbBgActive: '$accentPrimary',
   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.baseWhite,
+  skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
-  systemText: foundations.colors.baseBlack,
+  systemText: '$chrome1000',
   textDisabled: '$chrome300',
-  textInverse: '$chrome0',
   textLink: '$brand500',
   textOnAccent: '$chrome0',
+  textOnInverse: '$chrome0',
   textPrimary: '$chrome900',
   textSecondary: '$chrome700',
   textTertiary: '$chrome500',

package/src/theme/generated/light/StreamTokens.web.ts

@@ -423,23 +423,22 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText5: foundations.colors.yellow900,
   avatarPresenceBgOffline: '$accentNeutral',
   avatarPresenceBgOnline: '$accentSuccess',
-  avatarPresenceBorder: '$borderCoreInverse',
+  avatarPresenceBorder: '$borderCoreOnInverse',
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$chrome500',
-  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreApp: '$chrome0',
   backgroundCoreElevation0: '$chrome0',
   backgroundCoreElevation1: '$chrome0',
   backgroundCoreElevation2: '$chrome0',
   backgroundCoreElevation3: '$chrome0',
-  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreInverse: '$chrome900',
+  backgroundCoreInverse: '$chrome1000',
   backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
   backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
-  backgroundCoreSurface: '$chrome100',
   backgroundCoreSurfaceCard: '$chrome50',
+  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: '$chrome150',
   borderCoreInverse: '$chrome0',
   borderCoreOnAccent: '$chrome0',
+  borderCoreOnInverse: '$chrome0',
+  borderCoreOnSurface: '$chrome300',
   borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
   borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
   borderCoreStrong: '$chrome300',
   borderCoreSubtle: '$chrome100',
   borderUtilityActive: '$accentPrimary',
   borderUtilityDisabled: '$chrome100',
+  borderUtilityDisabledOnSurface: '$chrome150',
   borderUtilityError: '$accentError',
   borderUtilityFocused: '$brand150',
   borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
@@ -486,27 +488,27 @@ 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: '$borderCoreInverse',
-  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',
@@ -516,7 +518,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatPollProgressFillOutgoing: '$accentPrimary',
   chatPollProgressTrackIncoming: '$controlProgressBarTrack',
   chatPollProgressTrackOutgoing: '$brand200',
-  chatReplyIndicatorIncoming: foundations.colors.slate400,
+  chatReplyIndicatorIncoming: '$chrome400',
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
@@ -549,13 +551,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlCheckboxBgSelected: '$accentPrimary',
   controlCheckboxBorder: '$borderCoreDefault',
   controlCheckboxIcon: '$textOnAccent',
+  controlChipBorder: '$borderCoreDefault',
+  controlChipText: '$textPrimary',
   controlPlaybackThumbBgActive: '$accentPrimary',
   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.baseWhite,
+  skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
-  systemText: foundations.colors.baseBlack,
+  systemText: '$chrome1000',
   textDisabled: '$chrome300',
-  textInverse: '$chrome0',
   textLink: '$brand500',
   textOnAccent: '$chrome0',
+  textOnInverse: '$chrome0',
   textPrimary: '$chrome900',
   textSecondary: '$chrome700',
   textTertiary: '$chrome500',

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.16"
+  "version": "9.0.0-beta.18"
 }

package/lib/commonjs/icons/chevron-down.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","_jsxRuntime","_excluded","_this","_jsxFileName","ChevronTop","exports","_ref","height","width","rest","_objectWithoutProperties2","default","jsx","Svg","Object","assign","fill","viewBox","children","Path","d","strokeLinecap","strokeLinejoin","strokeWidth"],"sourceRoot":"../../../src","sources":["icons/chevron-down.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAAA,IAAAG,SAAA;AAAA,IAAAC,KAAA;EAAAC,YAAA;AAItC,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAAE,IAAA;EAAA,IAAMC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EAAA,OACjD,IAAAD,WAAA,CAAAY,GAAA,EAACb,eAAA,CAAAc,GAAG,EAAAC,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,MAAO;IAACT,MAAM,EAAEA,MAAO;IAACU,OAAO,EAAE,WAAY;IAACT,KAAK,EAAEA;EAAM,GAAKC,IAAI;IAAAS,QAAA,EAC7E,IAAAlB,WAAA,CAAAY,GAAA,EAACb,eAAA,CAAAoB,IAAI,EAAAL,MAAA,CAAAC,MAAA;MACHK,CAAC,EAAC,+BAA+B;MACjCC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC,OAAO;MACtBC,WAAW,EAAE;IAAI,GACbd,IAAI,CACT;EAAC,EACC,CAAC;AAAA,CACP","ignoreList":[]}

package/lib/module/icons/chevron-down.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","_jsxRuntime","_excluded","_this","_jsxFileName","ChevronTop","exports","_ref","height","width","rest","_objectWithoutProperties2","default","jsx","Svg","Object","assign","fill","viewBox","children","Path","d","strokeLinecap","strokeLinejoin","strokeWidth"],"sourceRoot":"../../../src","sources":["icons/chevron-down.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAAA,IAAAG,SAAA;AAAA,IAAAC,KAAA;EAAAC,YAAA;AAItC,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAAE,IAAA;EAAA,IAAMC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EAAA,OACjD,IAAAD,WAAA,CAAAY,GAAA,EAACb,eAAA,CAAAc,GAAG,EAAAC,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,MAAO;IAACT,MAAM,EAAEA,MAAO;IAACU,OAAO,EAAE,WAAY;IAACT,KAAK,EAAEA;EAAM,GAAKC,IAAI;IAAAS,QAAA,EAC7E,IAAAlB,WAAA,CAAAY,GAAA,EAACb,eAAA,CAAAoB,IAAI,EAAAL,MAAA,CAAAC,MAAA;MACHK,CAAC,EAAC,+BAA+B;MACjCC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC,OAAO;MACtBC,WAAW,EAAE;IAAI,GACbd,IAAI,CACT;EAAC,EACC,CAAC;AAAA,CACP","ignoreList":[]}

package/lib/typescript/icons/chevron-down.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IconProps } from './utils/base';
-export declare const ChevronTop: ({ height, width, ...rest }: IconProps) => React.JSX.Element;
-//# sourceMappingURL=chevron-down.d.ts.map

package/lib/typescript/icons/chevron-down.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chevron-down.d.ts","sourceRoot":"","sources":["../../../src/icons/chevron-down.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,4BAA4B,SAAS,sBAU/D,CAAC"}