stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/store/OfflineDB.ts

@@ -67,6 +67,8 @@ export class OfflineDB extends AbstractOfflineDB {
 
   addPendingTask = api.addPendingTask;
 
+  updatePendingTask = api.updatePendingTask;
+
   deletePendingTask = api.deletePendingTask;
 
   deleteReaction = api.deleteReaction;

package/src/store/apis/__tests__/updatePendingTask.test.ts

@@ -0,0 +1,66 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { addPendingTask, getPendingTasks, updatePendingTask } from '..';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { BetterSqlite } from '../../../test-utils/BetterSqlite';
+import { SqliteClient } from '../../SqliteClient';
+
+describe('updatePendingTask', () => {
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+    jest.clearAllMocks();
+  });
+
+  it('should replace an existing pending task row by id without changing its createdAt ordering', async () => {
+    const channelId = uuidv4();
+    const originalMessage = generateMessage({
+      cid: `messaging:${channelId}`,
+      id: uuidv4(),
+      text: 'original text',
+    });
+
+    await addPendingTask({
+      channelId,
+      channelType: 'messaging',
+      messageId: originalMessage.id,
+      payload: [originalMessage, {}],
+      type: 'send-message',
+    });
+
+    const [originalRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [originalTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    const editedMessage = {
+      ...originalMessage,
+      text: 'edited text',
+    };
+
+    await updatePendingTask({
+      id: originalTask.id,
+      task: {
+        channelId,
+        channelType: 'messaging',
+        messageId: originalMessage.id,
+        payload: [editedMessage, {}],
+        type: 'send-message',
+      },
+    });
+
+    const [updatedRow] = await BetterSqlite.selectFromTable('pendingTasks');
+    const [updatedTask] = await getPendingTasks({ messageId: originalMessage.id });
+
+    expect(updatedRow.id).toBe(originalRow.id);
+    expect(updatedRow.createdAt).toBe(originalRow.createdAt);
+    expect(updatedRow.type).toBe('send-message');
+    expect(JSON.parse(updatedRow.payload)[0].text).toBe('edited text');
+    expect(updatedTask.id).toBe(originalTask.id);
+    expect(updatedTask.type).toBe('send-message');
+    expect(updatedTask.payload[0].text).toBe('edited text');
+  });
+});

package/src/store/apis/index.ts

@@ -13,6 +13,7 @@ export * from './getLastSyncedAt';
 export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
+export * from './updatePendingTask';
 export * from './updateReaction';
 export * from './insertReaction';
 export * from './deleteReaction';

package/src/store/apis/updatePendingTask.ts

@@ -0,0 +1,24 @@
+import type { DBUpdatePendingTaskType } from 'stream-chat';
+
+import { mapTaskToStorable } from '../mappers/mapTaskToStorable';
+import { createUpdateQuery } from '../sqlite-utils/createUpdateQuery';
+import { SqliteClient } from '../SqliteClient';
+
+export const updatePendingTask = async ({ id, task }: DBUpdatePendingTaskType) => {
+  const storableTask = mapTaskToStorable(task);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { createdAt, id: taskId, ...nextTask } = storableTask;
+
+  const query = createUpdateQuery('pendingTasks', nextTask, {
+    id,
+  });
+
+  SqliteClient.logger?.('info', 'updatePendingTask', {
+    id,
+    task: nextTask,
+  });
+
+  await SqliteClient.executeSql.apply(null, query);
+
+  return [query];
+};

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;

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',

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