Skip to content

fix: update dark-contrast config #86680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Valforte merged 7 commits into from
Apr 2, 2026
Merged

fix: update dark-contrast config #86680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a26c0a
fix: update dark-contrast config
truph01 Mar 30, 2026
ff6ba21
fix: update badge color
truph01 Mar 30, 2026
67c2b27
fix: allow to toggle switch by Enter key
truph01 Mar 30, 2026
635e2ce
fix: apply AI suggestion
truph01 Mar 30, 2026
667c02f
fix: update strong badge text color
truph01 Mar 30, 2026
bcb146d
Merge branch 'Expensify:main' into fix/79228-follow-up
truph01 Apr 1, 2026
f4f3999
fix update ourMentionBG and ourMentionText in dark contrast
truph01 Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@ function Badge({
!isStrong && !success && !error && styles.badgeDefaultText,
!isStrong && success && styles.badgeSuccessText,
!isStrong && error && styles.badgeDangerText,
isStrong && (success || error) && styles.badgeStrongText,
isStrong && success && styles.buttonSuccessText,
isStrong && error && styles.buttonDangerText,
textStyles,
isDeleted ? styles.offlineFeedbackDeleted : {},
]}
Expand Down
6 changes: 3 additions & 3 deletions src/components/SelectionList/BaseSelectionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import TextInput from './components/TextInput';
import useSearchFocusSync from './hooks/useSearchFocusSync';
import useSelectedItemFocusSync from './hooks/useSelectedItemFocusSync';
import ListItemRenderer from './ListItem/ListItemRenderer';
import type {ButtonOrCheckBoxRoles, DataDetailsType, ListItem, SelectionListProps} from './types';
import type {DataDetailsType, InteractiveElementRoles, ListItem, SelectionListProps} from './types';
import {getListboxRole} from './utils/getListboxRole';

const ANIMATED_HIGHLIGHT_DURATION =
Expand Down Expand Up @@ -263,8 +263,8 @@ function BaseSelectionList<TItem extends ListItem>({
selectRow(focusedOption);
};

// Disable `Enter` shortcut if the active element is a button or checkbox
const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles);
// Disable `Enter` shortcut if the active element is a button, checkbox, or switch
const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX, CONST.ROLE.SWITCH].includes(activeElementRole as InteractiveElementRoles);

useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
captureOnInputs: true,
Expand Down
6 changes: 3 additions & 3 deletions src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useFlattenedSections, {isItemSelected, shouldTreatItemAsDisabled} from '@
import useSearchFocusSync from '@components/SelectionList/hooks/useSearchFocusSync';
import useSelectedItemFocusSync from '@components/SelectionList/hooks/useSelectedItemFocusSync';
import ListItemRenderer from '@components/SelectionList/ListItem/ListItemRenderer';
import type {ButtonOrCheckBoxRoles} from '@components/SelectionList/types';
import type {InteractiveElementRoles} from '@components/SelectionList/types';
import {getListboxRole} from '@components/SelectionList/utils/getListboxRole';
import Text from '@components/Text';
import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
Expand Down Expand Up @@ -225,8 +225,8 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
[focusTextInput, scrollToIndex, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, getFocusedItem],
);

// Disable `Enter` shortcut if the active element is a button or checkbox
const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles);
// Disable `Enter` shortcut if the active element is a button, checkbox, or switch
const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX, CONST.ROLE.SWITCH].includes(activeElementRole as InteractiveElementRoles);

useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedItem, {
captureOnInputs: true,
Expand Down
4 changes: 2 additions & 2 deletions src/components/SelectionList/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ type ConfirmButtonOptions<TItem extends ListItem> = {
isDisabled?: boolean;
};

type ButtonOrCheckBoxRoles = 'button' | 'checkbox';
type InteractiveElementRoles = 'button' | 'checkbox' | 'switch';

type SelectionListHandle<TItem extends ListItem> = {
/** Scrolls to and highlights the specified items */
Expand Down Expand Up @@ -331,7 +331,7 @@ export type {
TextInputOptions,
ConfirmButtonOptions,
ListItem,
ButtonOrCheckBoxRoles,
InteractiveElementRoles,
SelectionListStyle,
SelectionListWithSectionsHandle,
SelectionListWithSectionsProps,
Expand Down
4 changes: 0 additions & 4 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1076,10 +1076,6 @@ const staticStyles = (theme: ThemeColors) =>
color: theme.badgeDangerText,
},

badgeStrongText: {
color: colors.white,
},

badgeText: {
color: theme.text,
fontSize: variables.fontSizeSmall,
Expand Down
5 changes: 4 additions & 1 deletion src/styles/theme/themes/dark-contrast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,12 @@ const darkContrastTheme = {
buttonSuccessText: colors.productLight900,
bordersBold: colors.productDark700,
buttonIcon: colors.productDark900,
mentionText: colors.blue600,
mentionText: colors.blue700,
textLight: colors.productLight900,
iconColorfulBackground: colors.yellow800,
mentionBG: colors.blue100,
ourMentionBG: colors.green100,
ourMentionText: colors.green700,
} satisfies ThemeColors;

export default darkContrastTheme;
Loading