diff --git a/css/_base.scss b/css/_base.scss index ea5a83df96..2a4e3f7609 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -45,7 +45,7 @@ body { .jitsi-icon { &-default svg { - fill: white; + fill: var(--icon-default-color, white); } } diff --git a/css/_mini_toolbox.scss b/css/_mini_toolbox.scss index 14f8737d6f..11c20e83b8 100644 --- a/css/_mini_toolbox.scss +++ b/css/_mini_toolbox.scss @@ -1,5 +1,5 @@ .always-on-top-toolbox { - background-color: $newToolbarBackgroundColor; + background-color: var(--toolbox-background-color, $newToolbarBackgroundColor); border-radius: 3px; display: flex; z-index: $toolbarZ; diff --git a/css/_toolbars.scss b/css/_toolbars.scss index d1327a9a00..90c7525c20 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -2,7 +2,7 @@ * Round badge. */ .badge-round { - background-color: #165ECC; + background-color: var(--toolbar-badge-background, #165ECC); border-radius: 50%; box-sizing: border-box; color: #FFFFFF; @@ -93,7 +93,7 @@ .toolbox-content-wrapper::after { content: ''; - background: $newToolbarBackgroundColor; + background: var(--toolbox-background-color, $newToolbarBackgroundColor); padding-bottom: env(safe-area-inset-bottom, 0); } diff --git a/css/premeeting/_lobby.scss b/css/premeeting/_lobby.scss index bfaf9b6e4a..22c026f614 100644 --- a/css/premeeting/_lobby.scss +++ b/css/premeeting/_lobby.scss @@ -60,7 +60,7 @@ } #notification-participant-list { - background-color: $newToolbarBackgroundColor; + background-color: var(--toolbox-background-color, $newToolbarBackgroundColor); border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; left: 0; diff --git a/react/features/base/label/components/web/Label.tsx b/react/features/base/label/components/web/Label.tsx index 9488a021a1..8e1e5e64f9 100644 --- a/react/features/base/label/components/web/Label.tsx +++ b/react/features/base/label/components/web/Label.tsx @@ -56,9 +56,9 @@ const useStyles = makeStyles()(theme => { label: { ...theme.typography.labelRegular, alignItems: 'center', - background: theme.palette.ui04, + background: theme.palette.labelBackground, borderRadius: '4px', - color: theme.palette.text01, + color: theme.palette.labelText, display: 'flex', margin: '0 2px', padding: '6px', @@ -72,11 +72,11 @@ const useStyles = makeStyles()(theme => { cursor: 'pointer' }, [COLORS.white]: { - background: theme.palette.ui09, - color: theme.palette.text04, + background: theme.palette.labelWhiteBackground, + color: theme.palette.labelWhiteText, '& svg': { - fill: theme.palette.icon04 + fill: theme.palette.labelWhiteIcon } }, [COLORS.green]: { diff --git a/react/features/base/premeeting/components/web/ActionButton.tsx b/react/features/base/premeeting/components/web/ActionButton.tsx index 8e1d61893e..4acc44f6bd 100644 --- a/react/features/base/premeeting/components/web/ActionButton.tsx +++ b/react/features/base/premeeting/components/web/ActionButton.tsx @@ -84,7 +84,7 @@ const useStyles = makeStyles()(theme => { ...theme.typography.bodyLongBold, borderRadius: theme.shape.borderRadius, boxSizing: 'border-box', - color: theme.palette.text01, + color: theme.palette.actionButtonText, cursor: 'pointer', display: 'inline-block', marginBottom: '16px', @@ -95,20 +95,20 @@ const useStyles = makeStyles()(theme => { border: 0, '&.primary': { - background: theme.palette.action01, - color: theme.palette.text01, + background: theme.palette.prejoinActionButtonPrimary, + color: theme.palette.prejoinActionButtonPrimaryText, '&:hover': { - backgroundColor: theme.palette.action01Hover + backgroundColor: theme.palette.prejoinActionButtonPrimaryHover } }, '&.secondary': { - background: theme.palette.action02, - color: theme.palette.text04, + background: theme.palette.prejoinActionButtonSecondary, + color: theme.palette.prejoinActionButtonSecondaryText, '&:hover': { - backgroundColor: theme.palette.action02Hover + backgroundColor: theme.palette.prejoinActionButtonSecondaryHover } }, @@ -120,7 +120,7 @@ const useStyles = makeStyles()(theme => { }, '&.disabled': { - background: theme.palette.disabled01, + background: theme.palette.prejoinActionButtonDisabled, border: '1px solid #5E6D7A', color: '#AFB6BC', cursor: 'initial', diff --git a/react/features/base/premeeting/components/web/PreMeetingScreen.tsx b/react/features/base/premeeting/components/web/PreMeetingScreen.tsx index 314eac6590..c59471ce5a 100644 --- a/react/features/base/premeeting/components/web/PreMeetingScreen.tsx +++ b/react/features/base/premeeting/components/web/PreMeetingScreen.tsx @@ -109,7 +109,7 @@ const useStyles = makeStyles()(theme => { position: 'absolute', inset: '0 0 0 0', display: 'flex', - backgroundColor: theme.palette.ui01, + backgroundColor: theme.palette.preMeetingBackground, zIndex: 252, '@media (max-width: 720px)': { @@ -163,7 +163,7 @@ const useStyles = makeStyles()(theme => { }, title: { ...theme.typography.heading4, - color: `${theme.palette.text01}!important`, + color: theme.palette.prejoinTitleText, marginBottom: theme.spacing(3), textAlign: 'center', @@ -179,7 +179,7 @@ const useStyles = makeStyles()(theme => { roomName: { ...theme.typography.heading5, - color: theme.palette.text01, + color: theme.palette.prejoinRoomNameText, display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/react/features/base/premeeting/components/web/RecordingWarning.tsx b/react/features/base/premeeting/components/web/RecordingWarning.tsx index 0323208f37..d0aaf108fb 100644 --- a/react/features/base/premeeting/components/web/RecordingWarning.tsx +++ b/react/features/base/premeeting/components/web/RecordingWarning.tsx @@ -6,7 +6,7 @@ const useStyles = makeStyles()(theme => { return { warning: { bottom: 0, - color: theme.palette.text03, + color: theme.palette.prejoinRecordingWarningText, display: 'flex', justifyContent: 'center', ...theme.typography.bodyShortRegular, diff --git a/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx b/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx index 4bc69f47d7..b83e4885b0 100644 --- a/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx +++ b/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx @@ -11,8 +11,8 @@ import { setUnsafeRoomConsent } from '../../actions.web'; const useStyles = makeStyles()(theme => { return { warning: { - backgroundColor: theme.palette.warning01, - color: theme.palette.text04, + backgroundColor: theme.palette.prejoinWarningBackground, + color: theme.palette.prejoinWarningText, ...theme.typography.bodyShortRegular, padding: theme.spacing(3), borderRadius: theme.shape.borderRadius, diff --git a/react/features/base/react/components/web/InlineDialogFailure.tsx b/react/features/base/react/components/web/InlineDialogFailure.tsx index c85d395507..f1e093709f 100644 --- a/react/features/base/react/components/web/InlineDialogFailure.tsx +++ b/react/features/base/react/components/web/InlineDialogFailure.tsx @@ -9,11 +9,11 @@ import { getSupportUrl } from '../../functions'; const useStyles = makeStyles()(theme => { return { dialog: { - backgroundColor: theme.palette.ui01, - border: `1px solid ${theme.palette.ui04}`, + backgroundColor: theme.palette.dialogBackground, + border: `1px solid ${theme.palette.inlineDialogBorder}`, borderRadius: `${Number(theme.shape.borderRadius)}px`, boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)', - color: theme.palette.text01, + color: theme.palette.dialogText, ...theme.typography.bodyShortRegular, padding: `${theme.spacing(3)} 10`, '& .retry-button': { diff --git a/react/features/base/tooltip/components/Tooltip.tsx b/react/features/base/tooltip/components/Tooltip.tsx index 482b137754..8941cb12ce 100644 --- a/react/features/base/tooltip/components/Tooltip.tsx +++ b/react/features/base/tooltip/components/Tooltip.tsx @@ -22,11 +22,11 @@ interface IProps { const useStyles = makeStyles()(theme => { return { container: { - backgroundColor: theme.palette.uiBackground, + backgroundColor: theme.palette.tooltipBackground, borderRadius: '3px', padding: theme.spacing(2), ...theme.typography.labelRegular, - color: theme.palette.text01, + color: theme.palette.tooltipText, position: 'relative', '&.mounting-animation': { diff --git a/react/features/base/ui/Tokens.ts b/react/features/base/ui/Tokens.ts index e3b3e6472b..70dffda02b 100644 --- a/react/features/base/ui/Tokens.ts +++ b/react/features/base/ui/Tokens.ts @@ -1,3 +1,4 @@ +/* eslint-disable @stylistic/no-multi-spaces */ // Mapping between the token used and the color export const colorMap = { // ----- Surfaces ----- @@ -7,7 +8,7 @@ export const colorMap = { // - JitsiMeetView.java uiBackground: 'surface01', - // Container backgrounds + // Container backgrounds (legacy tokens) ui01: 'surface02', ui02: 'surface03', ui03: 'ui02', @@ -47,6 +48,426 @@ export const colorMap = { // Focus focus01: 'focus01', + // ----- Semantic Tokens (component-based, backwards compatible) ----- + + // Dialog/Modal Components + dialogBackground: 'surface02', // Main dialog background (same as ui01) + dialogOverlay: 'surface03', // Overlay/backdrop (same as ui02) + dialogBorder: 'ui02', // Dialog borders + dialogText: 'textColor01', // Primary dialog text (same as text01) + dialogSecondaryText: 'textColor02', // Secondary dialog text (same as text02) + + // Large Video + largeVideoBackground: 'surface03', // Main video area background (same as ui02) + largeVideoPlaceholder: 'surface03', // Placeholder when no video (same as ui02) + + // Filmstrip + filmstripBackground: 'surface03', // Filmstrip container background (same as ui02) + filmstripBackgroundHover: 'uiBackground', // Filmstrip background on hover/focus + filmstripDragHandle: 'icon02', // Filmstrip resize drag handle color + filmstripDragHandleHover: 'icon01', // Filmstrip resize drag handle hover color + thumbnailBackground: 'surface03', // Individual thumbnail background (same as ui02) + thumbnailBorder: 'ui03', // Thumbnail borders (same as ui03) + thumbnailHover: 'hover05', // Thumbnail hover state (same as action03Hover) + thumbnailTintBackground: 'uiBackground', // Thumbnail tint overlay background + thumbnailRaisedHandIcon: 'uiBackground', // Thumbnail raised hand indicator icon + thumbnailVideoBackground: 'uiBackground', // Thumbnail video/placeholder background + + // Chat + chatBackground: 'surface02', // Chat panel background (same as ui01) + chatBackdrop: 'ui04', // Chat screen background (same as ui10) + chatEmptyText: 'ui03', // Empty component text + chatInputBackground: 'surface03', // Chat input field background (same as ui02) + chatInputBorder: 'surface03', // Chat input border (same as ui02) + chatLink: 'action01', // Chat link color (same as link01) + chatLobbyMessageBubble: 'support06', // Lobby message bubble background + chatLobbyMessageNotice: 'surface01', // Lobby message notice text + chatLobbyRecipientContainer: 'support06', // Lobby recipient container background + chatMessageLocal: 'surface05', // Local participant message bubble (same as ui04) + chatMessagePrivate: 'support05', // Private/DM message bubble + chatMessageRemote: 'surface03', // Remote participant message bubble (same as ui02) + chatMessageText: 'textColor01', // Chat message text + chatPrivateNotice: 'textColor02', // Private message notice text + chatRecipientCancelIcon: 'icon01', // Recipient cancel icon color + chatRecipientContainer: 'support05', // Recipient container background + chatRecipientText: 'textColor01', // Recipient text color + chatReplyIcon: 'icon01', // Reply icon color + chatSenderName: 'textColor02', // Sender display name color + chatTimestamp: 'ui03', // Chat timestamp text + + // Toolbox/Toolbar + toolboxBackground: 'surface02', // Main toolbox background + drawerBackground: 'surface02', // Drawer/side panel background + toolboxIconHover: 'surface05', // Toolbox icon hover background + toolboxIconActive: 'ui02', // Toolbox icon active/pressed background + toolboxIconToggled: 'ui02', // Toolbox icon toggled background + toolbarButton: 'action01', // Toolbar button color + toolbarButtonHover: 'hover01', // Toolbar button hover (same as action01Hover) + toolbarButtonActive: 'active01', // Toolbar button active/pressed state + toolbarIcon: 'icon01', // Toolbar icon color + toolbarIconHover: 'icon01', // Toolbar icon hover state + toolbarIconActive: 'action01', // Toolbar icon active/toggled state + + // Overflow Menu (More Actions) + overflowMenuBackground: 'surface02', // Overflow menu background + overflowMenuBorder: 'surface05', // Overflow menu border + overflowMenuItemText: 'text01', // Overflow menu item text + overflowMenuItemIcon: 'text01', // Overflow menu item icon + overflowMenuItemHover: 'surface03', // Overflow menu item hover background + overflowMenuItemDisabled: 'text03', // Overflow menu item disabled text/icon + overflowMenuSeparator: 'ui03', // Overflow menu group separator + + // Participants Pane + participantsPaneBackground: 'surface02', // Participants list background + participantItemBackground: 'surface03', // Individual participant item background + participantItemHover: 'hover05', // Participant item hover + participantItemBorder: 'ui02', // Participant item border + participantCounterBadge: 'ui02', // Participant counter badge background + participantCounterText: 'text01', // Participant counter text + participantModeratorLabel: 'text03', // Moderator label text + participantSectionText: 'text02', // Section header/subtitle text + participantActionButton: 'action02', // Action button background + participantLinkText: 'link01', // Link text color + participantWarningText: 'warning02', // Warning text color + participantRaisedHandBadge: 'warning02', // Raised hand indicator background + participantRaisedHandIcon: 'icon04', // Raised hand icon color + + // Lobby + lobbyBackground: 'surface02', // Lobby screen background (same as ui01) + lobbyPreviewBackground: 'surface03', // Video preview background (same as ui02) + + // Speaker Stats + speakerStatsBackground: 'surface02', // Speaker stats panel background + speakerStatsRowBackground: 'ui02', // Individual stat row background + speakerStatsRowAlternate: 'ui03', // Alternate row background + speakerStatsBorder: 'surface03', // Speaker stats borders + speakerStatsHeaderBackground: 'ui09', // Header background + speakerStatsSearchBackground: 'field01', // Search input background + speakerStatsSearchBorder: 'ui05', // Search input border + speakerStatsSearchText: 'text01', // Search input text + speakerStatsSearchPlaceholder: 'text03', // Search placeholder + speakerStatsSearchIcon: 'icon03', // Search icon color + speakerStatsLabelText: 'text03', // Label text color + speakerStatsSuccessBar: 'success02', // Success/progress bar + speakerStatsAvatarLeft: 'surface05', // Avatar background for participants who left + + // Pre-meeting/Prejoin + preMeetingBackground: 'surface02', // Pre-meeting screen container background + preMeetingPreview: 'ui01', // Video preview in pre-meeting + prejoinDialogBackground: 'uiBackground', // Prejoin dialog background + prejoinDialogDelimiter: 'ui03', // Prejoin dialog delimiter line + prejoinDialogDelimiterText: 'text01', // Prejoin dialog delimiter text + prejoinTitleText: 'text01', // Prejoin title text color + prejoinRoomNameText: 'text01', // Prejoin room name text color + prejoinWarningBackground: 'warning01', // Warning banner background + prejoinWarningText: 'text04', // Warning banner text + prejoinRecordingWarningText: 'text03', // Recording warning text + prejoinActionButtonPrimary: 'action01', // Primary action button + prejoinActionButtonPrimaryHover: 'action01Hover', // Primary button hover + prejoinActionButtonPrimaryText: 'text01', // Primary button text + prejoinActionButtonSecondary: 'action02', // Secondary action button + prejoinActionButtonSecondaryHover: 'action02Hover', // Secondary button hover + prejoinActionButtonSecondaryText: 'text04', // Secondary button text + prejoinActionButtonDanger: 'actionDanger', // Danger button (leave) + prejoinActionButtonDisabled: 'disabled01', // Disabled button + prejoinCountryPickerBackground: 'ui01', // Country picker background + prejoinCountryPickerBorder: 'ui03', // Country picker border + prejoinCountryPickerText: 'text01', // Country picker text + prejoinCountryRowBackground: 'action03', // Country row background + prejoinCountryRowHover: 'action03Hover', // Country row hover + prejoinDeviceStatusOk: 'success01', // Device status OK background + prejoinDeviceStatusWarning: 'warning01', // Device status warning background + prejoinDeviceStatusText: 'uiBackground', // Device status text + + // Notifications + notificationBackground: 'ui04', // Notification background + notificationNormalIcon: 'action01', // Normal notification icon + notificationError: 'iconError', // Error notification icon + notificationSuccess: 'success01', // Success notification icon + notificationWarning: 'warning01', // Warning notification icon + notificationText: 'text04', // Notification text + notificationActionText: 'action01', // Notification action text + notificationErrorText: 'textError', // Error notification text + notificationActionFocus: 'action01', // Notification action focus outline + notificationCloseIcon: 'icon04', // Notification close icon + + // Forms/Inputs + inputBackground: 'field01', // Input field background + inputBorder: 'surface03', // Input field border (same as ui02) + inputText: 'textColor01', // Input field text (same as text01) + inputPlaceholder: 'textColor02', // Input placeholder text (same as text02) + + // Breakout Rooms + breakoutRoomBackground: 'ui01', // Breakout rooms panel background + breakoutRoomItemBackground: 'surface03', // Individual breakout room background + breakoutRoomArrowBackground: 'ui02', // Breakout room arrow container background + + // Settings + settingsBackground: 'ui01', // Settings dialog background + settingsSectionBackground: 'ui02', // Settings section background + settingsTabText: 'text01', // Settings tab text + settingsShortcutKey: 'surface05', // Keyboard shortcut key background + settingsVideoPreviewBorder: 'action01Hover', // Video preview border (selected) + settingsErrorIcon: 'iconError', // Error icon color + + // Visitors + visitorsCountBadge: 'warning02', // Visitors count badge background + visitorsCountText: 'uiBackground', // Visitors count badge text + visitorsCountIcon: 'icon04', // Visitors count icon + visitorsQueueBackground: 'ui01', // Visitors queue panel background + visitorsQueueText: 'text01', // Visitors queue text + visitorsArrowBackground: 'ui02', // Visitors arrow container background + + // Welcome Page + welcomeBackground: 'surface01', // Welcome page background (same as uiBackground) + welcomeCard: 'ui01', // Welcome page tab bar background + welcomeTabActive: 'icon01', // Welcome page active tab icon + welcomeTabInactive: 'icon03', // Welcome page inactive tab icon + + // ----- Form Components ----- + + // Input + inputLabel: 'text01', // Input field label text + inputFieldBackground: 'ui02', // Input field background color + inputFieldBorder: 'ui02', // Input field border color + inputFieldText: 'text01', // Input field text color + inputFieldPlaceholder: 'text02', // Input field placeholder text + inputFieldDisabled: 'text03', // Input field disabled text + inputFieldError: 'textError', // Input field error state + inputFieldFocus: 'focus01', // Input field focus outline + inputClearButton: 'transparent', // Input clear button background + inputBottomLabel: 'text02', // Input bottom label text + inputBottomLabelError: 'textError', // Input bottom label error text + + // Select + selectLabel: 'text01', // Select label text + selectBackground: 'ui02', // Select background color + selectText: 'text01', // Select text color + selectDisabled: 'text03', // Select disabled text + selectError: 'textError', // Select error state + selectFocus: 'focus01', // Select focus outline + selectIcon: 'icon01', // Select dropdown icon (enabled) + selectIconDisabled: 'icon03', // Select dropdown icon (disabled) + selectBottomLabel: 'text02', // Select bottom label text + selectBottomLabelError: 'textError', // Select bottom label error text + + // MultiSelect + multiSelectBackground: 'ui01', // MultiSelect dropdown background + multiSelectBorder: 'ui04', // MultiSelect dropdown border + multiSelectItemText: 'text01', // MultiSelect item text + multiSelectItemHover: 'ui02', // MultiSelect item hover background + multiSelectItemDisabled: 'text03', // MultiSelect disabled item text + + // Checkbox + checkboxLabel: 'text01', // Checkbox label text + checkboxBorder: 'icon03', // Checkbox border color + checkboxChecked: 'action01', // Checkbox checked background + checkboxDisabledBackground: 'ui02', // Checkbox disabled background + checkboxDisabledBorder: 'surface05', // Checkbox disabled border + checkboxDisabledChecked: 'ui02', // Checkbox disabled checked background + checkboxIcon: 'icon01', // Checkbox check icon (enabled) + checkboxIconDisabled: 'icon03', // Checkbox check icon (disabled) + + // Switch + switchBackground: 'ui01', // Switch background (unchecked) + switchBackgroundOn: 'action01', // Switch background (checked) + switchToggle: 'ui04', // Switch toggle circle + switchToggleDisabled: 'ui03', // Switch toggle circle (disabled) + switchFocus: 'focus01', // Switch focus outline + + // Tabs + tabText: 'text02', // Tab text (unselected) + tabTextHover: 'text01', // Tab text (hover) + tabTextSelected: 'text01', // Tab text (selected) + tabTextDisabled: 'text03', // Tab text (disabled) + tabBorder: 'ui05', // Tab bottom border (unselected) + tabBorderHover: 'ui10', // Tab bottom border (hover) + tabBorderSelected: 'action01', // Tab bottom border (selected) + tabBorderDisabled: 'ui05', // Tab bottom border (disabled) + tabFocus: 'focus01', // Tab focus outline + tabBadgeBackground: 'warning01', // Tab count badge background + tabBadgeText: 'text04', // Tab count badge text + + // ListItem + listItemText: 'text01', // List item text color + listItemBackground: 'ui01', // List item default background + listItemHover: 'surface03', // List item hover background + listItemHighlighted: 'surface03', // List item highlighted/active background + listItemBoxShadow: 'ui02', // List item actions box shadow color + + // ClickableIcon + clickableIconBackground: 'transparent', // Clickable icon background + clickableIconHover: 'ui02', // Clickable icon hover background + clickableIconActive: 'ui03', // Clickable icon active/pressed background + clickableIconFocus: 'focus01', // Clickable icon focus outline + + // Label + labelBackground: 'ui04', // Label default background + labelText: 'text01', // Label text color + labelWhiteBackground: 'ui08', // Label white variant background + labelWhiteText: 'text04', // Label white variant text + labelWhiteIcon: 'surface01', // Label white variant icon + + // Tooltip + tooltipBackground: 'uiBackground', // Tooltip background color + tooltipText: 'text01', // Tooltip text color + + // Polls + pollsBackground: 'surface03', // Poll container background + pollsTitle: 'text01', // Poll title text + pollsSubtitle: 'text02', // Poll subtitle/secondary text + pollsQuestion: 'text01', // Poll question text + pollsAnswer: 'text01', // Poll answer text + pollsBarBackground: 'ui03', // Poll results bar background + pollsBarPercentage: 'text01', // Poll results percentage text + pollsVotersBackground: 'ui03', // Poll voters list background + pollsVotersText: 'text01', // Poll voters list text + pollsSeparator: 'ui03', // Poll section separator + pollsSendLabel: 'text01', // Poll send button label + pollsSendDisabled: 'text03', // Poll send button disabled label + pollsPaneBackground: 'ui01', // Poll pane container background + pollsPaneBorder: 'ui05', // Poll pane border + pollsCreateBackground: 'uiBackground', // Poll create dialog background + pollsCreateBorder: 'ui06', // Poll create dialog border + + // Video Quality / Slider + sliderKnob: 'text01', // Slider knob/thumb color + sliderTrack: 'text03', // Slider track color + sliderFocus: 'ui06', // Slider focus outline + videoQualityText: 'text01', // Video quality dialog text + videoQualityBackground: 'surface02', // Video quality dialog background + + // Connection Indicator + connectionIndicatorLost: 'ui05', // Connection indicator lost status + connectionIndicatorOther: 'action01', // Connection indicator other status + + // Device Selection + deviceSelectorBackground: 'ui01', // Device selector background + deviceSelectorText: 'text01', // Device selector text + deviceSelectorBorder: 'ui03', // Device selector border + deviceSelectorTextBackground: 'uiBackground', // Device selector text-only background + deviceSelectorVideoPreview: 'uiBackground', // Device selector video preview background + + // Invite / Dial-in + dialInBackground: 'ui01', // Dial-in summary background + dialInText: 'text01', // Dial-in summary text + dialInSecondaryText: 'text02', // Dial-in summary secondary text + + // Reactions + reactionsMenuBackground: 'ui01', // Reactions menu background + reactionsMenuBorder: 'ui02', // Reactions menu border + + // Recording / Live Stream + recordingBackground: 'ui01', // Recording panel background + recordingText: 'text01', // Recording panel text + recordingHighlightButton: 'ui04', // Recording highlight button background + recordingHighlightButtonDisabled: 'text02', // Recording highlight button disabled background + recordingHighlightButtonIcon: 'ui02', // Recording highlight button icon color + recordingHighlightButtonIconDisabled: 'text03', // Recording highlight button disabled icon color + recordingNotificationText: 'surface01', // Recording notification text color + recordingNotificationAction: 'action01', // Recording notification action color + + // Virtual Background + virtualBackgroundBackground: 'ui01', // Virtual background picker background + virtualBackgroundText: 'text01', // Virtual background picker text + virtualBackgroundBorder: 'ui03', // Virtual background item border + virtualBackgroundPreview: 'uiBackground', // Virtual background preview container + + // Conference / Meeting + conferenceTimerText: 'text01', // Conference timer text + conferenceSubjectText: 'text01', // Conference subject text + conferenceNoticeBackground: 'uiBackground', // Conference notice background + conferenceNoticeText: 'text01', // Conference notice text + conferenceRaisedHandLabelText: 'uiBackground', // Raised hands count label text + conferenceRaisedHandLabelIcon: 'surface01', // Raised hands count label icon + + // Subtitle Messages + subtitleMessageBackground: 'ui02', // Subtitle message background + subtitleMessageText: 'text01', // Subtitle message text + subtitleMessageSender: 'text02', // Subtitle message sender name + subtitleMessageTime: 'text03', // Subtitle message timestamp + + // Language Selector + languageSelectorBackground: 'ui01', // Language selector background + languageSelectorText: 'text01', // Language selector text + languageSelectorHover: 'ui02', // Language selector item hover + + // Video Menu + videoMenuBackground: 'ui01', // Video menu background + videoMenuBorder: 'ui02', // Video menu border + videoMenuText: 'text01', // Video menu text + videoMenuSliderBackground: 'ui03', // Video menu slider background + + // File Sharing + fileSharingBackground: 'ui01', // File sharing panel background + fileSharingText: 'text01', // File sharing text + fileSharingEmptyText: 'text02', // File sharing empty state text + fileSharingEmptyIcon: 'icon03', // File sharing empty state icon + fileSharingItemBackground: 'surface03', // File sharing item background + fileSharingItemBorder: 'ui02', // File sharing item hover/border + + // Gifs + gifsBackground: 'ui01', // GIFs panel background + gifsText: 'text01', // GIFs panel text + + // Whiteboard + whiteboardBackground: 'ui03', // Whiteboard background + whiteboardText: 'text01', // Whiteboard panel text + + // Salesforce + salesforceSearchBackground: 'field01', // Salesforce search input background + salesforceSearchBorder: 'ui05', // Salesforce search input border + salesforceSearchText: 'dialogText', // Salesforce search input text + salesforceSearchPlaceholder: 'text03', // Salesforce search placeholder + salesforceSearchIcon: 'text03', // Salesforce search icon + + // Security Dialog + securityDialogBackground: 'ui01', // Security dialog background + securityDialogText: 'text01', // Security dialog text + securityDialogSecondaryText: 'text02', // Security dialog secondary text + securityDialogBorder: 'ui07', // Security dialog border color + + // Deep Linking + deepLinkingBackground: 'ui01', // Deep linking page content pane background + deepLinkingBorder: 'ui03', // Deep linking page content pane border + deepLinkingText: 'text01', // Deep linking page text + deepLinkingSeparator: 'ui03', // Deep linking separator line + deepLinkingLabelText: 'text02', // Deep linking label text + deepLinkingLink: 'link01', // Deep linking link color + + // Base React Components + baseReactBackground: 'ui01', // Base react component background + baseReactText: 'text01', // Base react component text + baseReactBorder: 'ui03', // Base react component border + + // Inline Dialog + inlineDialogBackground: 'ui01', // Inline dialog background + inlineDialogText: 'text01', // Inline dialog text + inlineDialogBorder: 'ui02', // Inline dialog border + + // Pre-meeting / Action Button + actionButtonBackground: 'ui01', // Action button background (different from main buttons) + actionButtonText: 'text01', // Action button text + actionButtonBorder: 'ui03', // Action button border + + // Audio Route Picker + audioRoutePickerBackground: 'ui01', // Audio route picker background + audioRoutePickerText: 'text01', // Audio route picker text + audioRoutePickerBorder: 'ui03', // Audio route picker border + + // Etherpad + etherpadBackground: 'ui01', // Etherpad panel background + etherpadText: 'text01', // Etherpad panel text + + // Display Name + displayNameBackground: 'ui01', // Display name background + displayNameText: 'text01', // Display name text + + // Car Mode + carModeBackground: 'ui01', // Car mode background + carModeText: 'text01', // Car mode text + carModeBorder: 'ui03', // Car mode border + // ----- Links ----- link01: 'action01', diff --git a/react/features/base/ui/components/web/BaseDialog.tsx b/react/features/base/ui/components/web/BaseDialog.tsx index b0c43599fe..8e52dec53c 100644 --- a/react/features/base/ui/components/web/BaseDialog.tsx +++ b/react/features/base/ui/components/web/BaseDialog.tsx @@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => { width: '100%', height: '100%', position: 'fixed', - color: theme.palette.text01, + color: theme.palette.dialogText, ...theme.typography.bodyLongRegular, top: 0, left: 0, @@ -49,13 +49,13 @@ const useStyles = makeStyles()(theme => { height: '100%', top: 0, left: 0, - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.dialogOverlay, opacity: 0.75 }, modal: { - backgroundColor: theme.palette.ui01, - border: `1px solid ${theme.palette.ui03}`, + backgroundColor: theme.palette.dialogBackground, + border: `1px solid ${theme.palette.dialogBorder}`, boxShadow: '0px 4px 25px 4px rgba(20, 20, 20, 0.6)', borderRadius: `${theme.shape.borderRadius}px`, display: 'flex', diff --git a/react/features/base/ui/components/web/Checkbox.tsx b/react/features/base/ui/components/web/Checkbox.tsx index 6ec1a55835..96b5327354 100644 --- a/react/features/base/ui/components/web/Checkbox.tsx +++ b/react/features/base/ui/components/web/Checkbox.tsx @@ -47,7 +47,7 @@ const useStyles = makeStyles()(theme => { return { formControl: { ...theme.typography.bodyLongRegular, - color: theme.palette.text01, + color: theme.palette.checkboxLabel, display: 'inline-flex', alignItems: 'center', @@ -76,10 +76,10 @@ const useStyles = makeStyles()(theme => { backgroundColor: 'transparent', margin: '3px', font: 'inherit', - color: theme.palette.icon03, + color: theme.palette.checkboxBorder, width: '18px', height: '18px', - border: `2px solid ${theme.palette.icon03}`, + border: `2px solid ${theme.palette.checkboxBorder}`, borderRadius: '3px', display: 'grid', @@ -90,7 +90,7 @@ const useStyles = makeStyles()(theme => { width: '18px', height: '18px', opacity: 0, - backgroundColor: theme.palette.action01, + backgroundColor: theme.palette.checkboxChecked, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -104,11 +104,11 @@ const useStyles = makeStyles()(theme => { }, '&:disabled': { - backgroundColor: theme.palette.ui03, - borderColor: theme.palette.ui04, + backgroundColor: theme.palette.checkboxDisabledBackground, + borderColor: theme.palette.checkboxDisabledBorder, '&::before': { - backgroundColor: theme.palette.ui04 + backgroundColor: theme.palette.checkboxDisabledChecked } }, @@ -173,7 +173,7 @@ const Checkbox = ({ diff --git a/react/features/base/ui/components/web/ClickableIcon.tsx b/react/features/base/ui/components/web/ClickableIcon.tsx index 8cb19e9839..92d1b5f818 100644 --- a/react/features/base/ui/components/web/ClickableIcon.tsx +++ b/react/features/base/ui/components/web/ClickableIcon.tsx @@ -16,22 +16,22 @@ const useStyles = makeStyles()(theme => { return { button: { padding: '2px', - backgroundColor: theme.palette.action03, + backgroundColor: theme.palette.clickableIconBackground, border: 0, outline: 0, borderRadius: `${theme.shape.borderRadius}px`, '&:hover': { - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.clickableIconHover }, '&.focus-visible': { outline: 0, - boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}` + boxShadow: `0px 0px 0px 2px ${theme.palette.clickableIconFocus}` }, '&:active': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.clickableIconActive }, '&.is-mobile': { diff --git a/react/features/base/ui/components/web/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx index 6dfa53f09e..b351463fb1 100644 --- a/react/features/base/ui/components/web/ContextMenu.tsx +++ b/react/features/base/ui/components/web/ContextMenu.tsx @@ -133,11 +133,11 @@ const MAX_HEIGHT = 400; const useStyles = makeStyles()(theme => { return { contextMenu: { - backgroundColor: theme.palette.ui01, - border: `1px solid ${theme.palette.ui04}`, + backgroundColor: theme.palette.overflowMenuBackground, + border: `1px solid ${theme.palette.overflowMenuBorder}`, borderRadius: `${Number(theme.shape.borderRadius)}px`, boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)', - color: theme.palette.text01, + color: theme.palette.overflowMenuItemText, ...theme.typography.bodyShortRegular, marginTop: '48px', position: 'absolute', diff --git a/react/features/base/ui/components/web/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx index d6ee2dc19a..6030ee18ea 100644 --- a/react/features/base/ui/components/web/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -122,11 +122,11 @@ const useStyles = makeStyles()(theme => { }, '&:hover': { - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.overflowMenuItemHover }, '&:active': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.overflowMenuItemHover }, '&.focus-visible': { @@ -137,7 +137,7 @@ const useStyles = makeStyles()(theme => { selected: { borderLeft: `3px solid ${theme.palette.action01Hover}`, paddingLeft: '13px', - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.overflowMenuItemHover }, contextMenuItemDisabled: { @@ -146,19 +146,19 @@ const useStyles = makeStyles()(theme => { contextMenuItemIconDisabled: { '& svg': { - fill: `${theme.palette.text03} !important` + fill: `${theme.palette.overflowMenuItemDisabled} !important` } }, contextMenuItemLabelDisabled: { - color: theme.palette.text03, + color: theme.palette.overflowMenuItemDisabled, '&:hover': { background: 'none' }, '& svg': { - fill: theme.palette.text03 + fill: theme.palette.overflowMenuItemDisabled } }, @@ -168,13 +168,13 @@ const useStyles = makeStyles()(theme => { contextMenuItemIcon: { '& svg': { - fill: theme.palette.icon01 + fill: theme.palette.overflowMenuItemIcon } }, text: { ...theme.typography.bodyShortRegular, - color: theme.palette.text01 + color: theme.palette.overflowMenuItemText }, drawerText: { diff --git a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx index 004e1a3ff4..0d14f9fe74 100644 --- a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx +++ b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx @@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => { }, '& + &:not(:empty)': { - borderTop: `1px solid ${theme.palette.ui03}` + borderTop: `1px solid ${theme.palette.overflowMenuSeparator}` }, '&:first-of-type': { diff --git a/react/features/base/ui/components/web/Dialog.tsx b/react/features/base/ui/components/web/Dialog.tsx index 34bed70127..b07c20fc4e 100644 --- a/react/features/base/ui/components/web/Dialog.tsx +++ b/react/features/base/ui/components/web/Dialog.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => { }, title: { - color: theme.palette.text01, + color: theme.palette.dialogText, ...theme.typography.heading5, margin: 0, padding: 0 diff --git a/react/features/base/ui/components/web/DialogWithTabs.tsx b/react/features/base/ui/components/web/DialogWithTabs.tsx index a86bfa81e1..708b45c17c 100644 --- a/react/features/base/ui/components/web/DialogWithTabs.tsx +++ b/react/features/base/ui/components/web/DialogWithTabs.tsx @@ -42,7 +42,7 @@ const useStyles = makeStyles()(theme => { flexDirection: 'column', minWidth: '211px', maxWidth: '100%', - borderRight: `1px solid ${theme.palette.ui03}`, + borderRight: `1px solid ${theme.palette.dialogBorder}`, [`@media (max-width: ${MOBILE_BREAKPOINT}px)`]: { width: '100%', @@ -70,7 +70,7 @@ const useStyles = makeStyles()(theme => { title: { ...theme.typography.heading5, - color: `${theme.palette.text01} !important`, + color: `${theme.palette.dialogText} !important`, margin: 0, padding: 0 }, diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx index c07f87d7f2..344c946006 100644 --- a/react/features/base/ui/components/web/Input.tsx +++ b/react/features/base/ui/components/web/Input.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles()(theme => { }, label: { - color: theme.palette.text01, + color: theme.palette.inputLabel, ...theme.typography.bodyShortRegular, marginBottom: theme.spacing(2), @@ -64,9 +64,9 @@ const useStyles = makeStyles()(theme => { }, input: { - backgroundColor: theme.palette.ui03, - background: theme.palette.ui03, - color: theme.palette.text01, + backgroundColor: theme.palette.inputFieldBackground, + background: theme.palette.inputFieldBackground, + color: theme.palette.inputFieldText, ...theme.typography.bodyShortRegular, padding: '10px 16px', borderRadius: theme.shape.borderRadius, @@ -76,16 +76,16 @@ const useStyles = makeStyles()(theme => { width: '100%', '&::placeholder': { - color: theme.palette.text02 + color: theme.palette.inputFieldPlaceholder }, '&:focus': { outline: 0, - boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}` + boxShadow: `0px 0px 0px 2px ${theme.palette.inputFieldFocus}` }, '&:disabled': { - color: theme.palette.text03 + color: theme.palette.inputFieldDisabled }, '&.is-mobile': { @@ -99,7 +99,7 @@ const useStyles = makeStyles()(theme => { }, '&.error': { - boxShadow: `0px 0px 0px 2px ${theme.palette.textError}` + boxShadow: `0px 0px 0px 2px ${theme.palette.inputFieldError}` }, '&.clearable-input': { paddingRight: '46px' @@ -131,7 +131,7 @@ const useStyles = makeStyles()(theme => { right: '16px', top: '10px', cursor: 'pointer', - backgroundColor: theme.palette.action03, + backgroundColor: theme.palette.inputClearButton, border: 0, padding: 0 }, @@ -139,14 +139,14 @@ const useStyles = makeStyles()(theme => { bottomLabel: { marginTop: theme.spacing(2), ...theme.typography.labelRegular, - color: theme.palette.text02, + color: theme.palette.inputBottomLabel, '&.is-mobile': { ...theme.typography.bodyShortRegular }, '&.error': { - color: theme.palette.textError + color: theme.palette.inputBottomLabelError } } }; diff --git a/react/features/base/ui/components/web/ListItem.tsx b/react/features/base/ui/components/web/ListItem.tsx index 9506371989..65f636ad8d 100644 --- a/react/features/base/ui/components/web/ListItem.tsx +++ b/react/features/base/ui/components/web/ListItem.tsx @@ -83,7 +83,7 @@ const useStyles = makeStyles()(theme => { return { container: { alignItems: 'center', - color: theme.palette.text01, + color: theme.palette.listItemText, display: 'flex', ...theme.typography.bodyShortBold, margin: `0 -${participantsPaneTheme.panePadding}px`, @@ -93,7 +93,7 @@ const useStyles = makeStyles()(theme => { minHeight: '40px', '&:hover, &:focus-within': { - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.listItemHover, '& .indicators': { display: 'none' @@ -103,8 +103,8 @@ const useStyles = makeStyles()(theme => { display: 'flex', position: 'relative', top: 'auto', - boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`, - backgroundColor: theme.palette.ui02 + boxShadow: `-15px 0px 10px -5px ${theme.palette.listItemBoxShadow}`, + backgroundColor: theme.palette.listItemHover } }, @@ -115,14 +115,14 @@ const useStyles = makeStyles()(theme => { }, highlighted: { - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.listItemHighlighted, '& .actions': { display: 'flex', position: 'relative', top: 'auto', - boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`, - backgroundColor: theme.palette.ui02 + boxShadow: `-15px 0px 10px -5px ${theme.palette.listItemBoxShadow}`, + backgroundColor: theme.palette.listItemHighlighted } }, @@ -170,20 +170,20 @@ const useStyles = makeStyles()(theme => { actionsContainer: { position: 'absolute', top: '-1000px', - boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`, - backgroundColor: theme.palette.ui02 + boxShadow: `-15px 0px 10px -5px ${theme.palette.listItemBoxShadow}`, + backgroundColor: theme.palette.listItemHover }, actionsPermanent: { display: 'flex', - boxShadow: `-15px 0px 10px -5px ${theme.palette.ui01}`, - backgroundColor: theme.palette.ui01 + boxShadow: `-15px 0px 10px -5px ${theme.palette.listItemBackground}`, + backgroundColor: theme.palette.listItemBackground }, actionsVisible: { display: 'flex', - boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`, - backgroundColor: theme.palette.ui02 + boxShadow: `-15px 0px 10px -5px ${theme.palette.listItemBoxShadow}`, + backgroundColor: theme.palette.listItemHighlighted } }; }); diff --git a/react/features/base/ui/components/web/MultiSelect.tsx b/react/features/base/ui/components/web/MultiSelect.tsx index 667e1eb54f..823b848e57 100644 --- a/react/features/base/ui/components/web/MultiSelect.tsx +++ b/react/features/base/ui/components/web/MultiSelect.tsx @@ -38,8 +38,8 @@ const useStyles = makeStyles()(theme => { }, marginTop: theme.spacing(2), width: '100%', - backgroundColor: theme.palette.ui01, - border: `1px solid ${theme.palette.ui04}`, + backgroundColor: theme.palette.multiSelectBackground, + border: `1px solid ${theme.palette.multiSelectBorder}`, borderRadius: `${Number(theme.shape.borderRadius)}px`, ...theme.typography.bodyShortRegular, zIndex: 2, @@ -57,7 +57,7 @@ const useStyles = makeStyles()(theme => { inlineSize: 'calc(100% - 38px)', overflowWrap: 'break-word', marginLeft: theme.spacing(2), - color: theme.palette.text01, + color: theme.palette.multiSelectItemText, '&.with-remove': { // 60px because of the icon before the content and the remove button inlineSize: 'calc(100% - 60px)', @@ -76,15 +76,15 @@ const useStyles = makeStyles()(theme => { cursor: 'pointer', padding: `10px ${theme.spacing(3)}`, '&:hover': { - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.multiSelectItemHover } }, '&.disabled': { cursor: 'not-allowed', '&:hover': { - backgroundColor: theme.palette.ui01 + backgroundColor: theme.palette.multiSelectBackground }, - color: theme.palette.text03 + color: theme.palette.multiSelectItemDisabled } }, errorMessage: { diff --git a/react/features/base/ui/components/web/Select.tsx b/react/features/base/ui/components/web/Select.tsx index 7a2f1c4864..4688f992d7 100644 --- a/react/features/base/ui/components/web/Select.tsx +++ b/react/features/base/ui/components/web/Select.tsx @@ -70,7 +70,7 @@ const useStyles = makeStyles()(theme => { }, label: { - color: theme.palette.text01, + color: theme.palette.selectLabel, ...theme.typography.bodyShortRegular, marginBottom: theme.spacing(2), @@ -84,11 +84,11 @@ const useStyles = makeStyles()(theme => { }, select: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.selectBackground, borderRadius: `${theme.shape.borderRadius}px`, width: '100%', ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.selectText, padding: '10px 16px', paddingRight: '42px', border: 0, @@ -99,11 +99,11 @@ const useStyles = makeStyles()(theme => { '&:focus': { outline: 0, - boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}` + boxShadow: `0px 0px 0px 2px ${theme.palette.selectFocus}` }, '&:disabled': { - color: theme.palette.text03 + color: theme.palette.selectDisabled }, '&.is-mobile': { @@ -113,7 +113,7 @@ const useStyles = makeStyles()(theme => { }, '&.error': { - boxShadow: `0px 0px 0px 2px ${theme.palette.textError}` + boxShadow: `0px 0px 0px 2px ${theme.palette.selectError}` } }, @@ -132,14 +132,14 @@ const useStyles = makeStyles()(theme => { bottomLabel: { marginTop: theme.spacing(2), ...theme.typography.labelRegular, - color: theme.palette.text02, + color: theme.palette.selectBottomLabel, '&.is-mobile': { ...theme.typography.bodyShortRegular }, '&.error': { - color: theme.palette.textError + color: theme.palette.selectBottomLabelError } } }; @@ -180,7 +180,7 @@ const Select = ({ diff --git a/react/features/base/ui/components/web/Switch.tsx b/react/features/base/ui/components/web/Switch.tsx index 0a369e25b5..dd33c2839a 100644 --- a/react/features/base/ui/components/web/Switch.tsx +++ b/react/features/base/ui/components/web/Switch.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => { return { container: { position: 'relative', - backgroundColor: theme.palette.ui05, + backgroundColor: theme.palette.switchBackground, borderRadius: '12px', width: '40px', height: '24px', @@ -29,11 +29,11 @@ const useStyles = makeStyles()(theme => { display: 'inline-block', '&.disabled': { - backgroundColor: theme.palette.ui05, + backgroundColor: theme.palette.switchBackground, cursor: 'default', '& .toggle': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.switchToggleDisabled } }, @@ -45,7 +45,7 @@ const useStyles = makeStyles()(theme => { }, containerOn: { - backgroundColor: theme.palette.action01 + backgroundColor: theme.palette.switchBackgroundOn }, toggle: { @@ -55,7 +55,7 @@ const useStyles = makeStyles()(theme => { zIndex: 5, top: '4px', left: '4px', - backgroundColor: theme.palette.ui10, + backgroundColor: theme.palette.switchToggle, borderRadius: '100%', transition: '.3s', @@ -87,7 +87,7 @@ const useStyles = makeStyles()(theme => { '&.focus-visible + .toggle-checkbox-ring': { outline: 0, - boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}` + boxShadow: `0px 0px 0px 2px ${theme.palette.switchFocus}` } }, diff --git a/react/features/base/ui/components/web/Tabs.tsx b/react/features/base/ui/components/web/Tabs.tsx index de2a4cd2a0..e5a9ea2404 100644 --- a/react/features/base/ui/components/web/Tabs.tsx +++ b/react/features/base/ui/components/web/Tabs.tsx @@ -29,13 +29,13 @@ const useStyles = makeStyles()(theme => { tab: { ...theme.typography.bodyShortBold, - color: theme.palette.text02, + color: theme.palette.tabText, flex: 1, padding: '14px', background: 'none', border: 0, appearance: 'none', - borderBottom: `2px solid ${theme.palette.ui05}`, + borderBottom: `2px solid ${theme.palette.tabBorder}`, transition: 'color, border-color 0.2s', display: 'flex', alignItems: 'center', @@ -43,25 +43,25 @@ const useStyles = makeStyles()(theme => { borderRadius: 0, '&:hover': { - color: theme.palette.text01, - borderColor: theme.palette.ui10 + color: theme.palette.tabTextHover, + borderColor: theme.palette.tabBorderHover }, '&.focus-visible': { outline: 0, - boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`, + boxShadow: `0px 0px 0px 2px ${theme.palette.tabFocus}`, border: 0, - color: theme.palette.text01 + color: theme.palette.tabTextSelected }, '&.selected': { - color: theme.palette.text01, - borderColor: theme.palette.action01 + color: theme.palette.tabTextSelected, + borderColor: theme.palette.tabBorderSelected }, '&:disabled': { - color: theme.palette.text03, - borderColor: theme.palette.ui05 + color: theme.palette.tabTextDisabled, + borderColor: theme.palette.tabBorderDisabled }, '&.is-mobile': { @@ -72,9 +72,9 @@ const useStyles = makeStyles()(theme => { badge: { ...theme.typography.labelBold, alignItems: 'center', - backgroundColor: theme.palette.warning01, + backgroundColor: theme.palette.tabBadgeBackground, borderRadius: theme.spacing(2), - color: theme.palette.text04, + color: theme.palette.tabBadgeText, display: 'inline-flex', height: theme.spacing(3), justifyContent: 'center', diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index 070ea5028d..519ae4e05d 100644 --- a/react/features/base/ui/constants.web.ts +++ b/react/features/base/ui/constants.web.ts @@ -11,6 +11,23 @@ export * from './constants.any'; */ export const commonStyles = (theme: Theme) => { return { + ':root': { + // Inject semantic tokens as CSS custom properties for use in SCSS + '--toolbox-background-color': theme.palette.toolboxBackground, + '--drawer-background-color': theme.palette.drawerBackground, + '--toolbar-button-color': theme.palette.toolbarButton, + '--toolbar-button-hover-color': theme.palette.toolbarButtonHover, + '--toolbar-button-active-color': theme.palette.toolbarButtonActive, + '--toolbar-icon-color': theme.palette.toolbarIcon, + '--toolbar-icon-hover-color': theme.palette.toolbarIconHover, + '--toolbar-icon-active-color': theme.palette.toolbarIconActive, + '--overflow-menu-background-color': theme.palette.overflowMenuBackground, + '--overflow-menu-item-text-color': theme.palette.overflowMenuItemText, + '--overflow-menu-item-icon-color': theme.palette.overflowMenuItemIcon, + '--overflow-menu-item-hover-color': theme.palette.overflowMenuItemHover, + '--overflow-menu-item-disabled-color': theme.palette.overflowMenuItemDisabled + }, + '.empty-list': { listStyleType: 'none', margin: 0, @@ -39,7 +56,7 @@ export const commonStyles = (theme: Theme) => { '.overflow-menu-item': { alignItems: 'center', - color: theme.palette.text01, + color: theme.palette.overflowMenuItemText, cursor: 'pointer', display: 'flex', fontSize: '0.875rem', @@ -59,20 +76,20 @@ export const commonStyles = (theme: Theme) => { '&.disabled': { cursor: 'initial', - color: theme.palette.text03, + color: theme.palette.overflowMenuItemDisabled, '&:hover': { background: 'none' }, '& svg': { - fill: theme.palette.text03 + fill: theme.palette.overflowMenuItemDisabled } }, '@media (hover: hover) and (pointer: fine)': { '&:hover': { - background: theme.palette.action02Hover + background: theme.palette.overflowMenuItemHover }, '&.unclickable:hover': { background: 'inherit' @@ -100,14 +117,14 @@ export const commonStyles = (theme: Theme) => { }, '& svg': { - fill: theme.palette.text01, + fill: theme.palette.overflowMenuItemIcon, height: 20, width: 20 } }, '.prejoin-dialog': { - backgroundColor: theme.palette.uiBackground, + backgroundColor: theme.palette.prejoinDialogBackground, boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.5)', borderRadius: theme.shape.borderRadius, color: '#fff', @@ -173,7 +190,7 @@ export const commonStyles = (theme: Theme) => { }, '.prejoin-dialog-delimiter': { - background: theme.palette.ui03, + background: theme.palette.prejoinDialogDelimiter, border: '0', height: '1px', margin: '0', @@ -194,8 +211,8 @@ export const commonStyles = (theme: Theme) => { }, '.prejoin-dialog-delimiter-txt': { - background: theme.palette.uiBackground, - color: theme.palette.text01, + background: theme.palette.prejoinDialogBackground, + color: theme.palette.prejoinDialogDelimiterText, fontSize: '0.75rem', textTransform: 'uppercase' as const, padding: `0 ${theme.spacing(2)}` @@ -219,11 +236,11 @@ export const commonStyles = (theme: Theme) => { '@media (hover: hover) and (pointer: fine)': { '&:hover': { - backgroundColor: theme.palette.ui04 + backgroundColor: theme.palette.toolboxIconHover }, '&:active': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.toolboxIconActive } }, [theme.breakpoints.down(320)]: { @@ -232,7 +249,7 @@ export const commonStyles = (theme: Theme) => { }, '&.toggled': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.toolboxIconToggled }, '&.disabled': { @@ -240,13 +257,13 @@ export const commonStyles = (theme: Theme) => { backgroundColor: `${theme.palette.disabled01} !important`, '& svg': { - fill: `${theme.palette.text03} !important` + fill: `${theme.palette.icon03} !important` } } }, '.toolbox-button': { - color: theme.palette.text01, + color: theme.palette.toolbarIcon, cursor: 'pointer', display: 'inline-block', lineHeight: '3rem', @@ -254,7 +271,7 @@ export const commonStyles = (theme: Theme) => { }, '.toolbox-content-items': { - background: theme.palette.ui01, + background: theme.palette.toolboxBackground, borderRadius: 6, margin: '0 auto', padding: 6, diff --git a/react/features/base/ui/types.d.ts b/react/features/base/ui/types.d.ts new file mode 100644 index 0000000000..cd4eb6560d --- /dev/null +++ b/react/features/base/ui/types.d.ts @@ -0,0 +1,11 @@ +import '@mui/material/styles'; + +import { IPalette, ITypography } from './types'; + +declare module '@mui/material/styles' { + interface Palette extends IPalette {} + interface PaletteOptions extends Partial {} + + interface Typography extends ITypography {} + interface TypographyOptions extends Partial {} +} diff --git a/react/features/base/ui/types.ts b/react/features/base/ui/types.ts index 0cd52e03c0..4c94f04180 100644 --- a/react/features/base/ui/types.ts +++ b/react/features/base/ui/types.ts @@ -5,6 +5,7 @@ interface ITypographyType { lineHeight: string; } +/* eslint-disable typescript-sort-keys/interface */ export interface IPalette { action01: string; action01Active: string; @@ -58,6 +59,324 @@ export interface IPalette { uiBackground: string; warning01: string; warning02: string; + + // Semantic tokens (component-based, more descriptive names) + breakoutRoomArrowBackground: string; + breakoutRoomBackground: string; + breakoutRoomItemBackground: string; + chatBackground: string; + chatBackdrop: string; + chatEmptyText: string; + chatInputBackground: string; + chatInputBorder: string; + chatLink: string; + chatLobbyMessageBubble: string; + chatLobbyMessageNotice: string; + chatLobbyRecipientContainer: string; + chatMessageLocal: string; + chatMessagePrivate: string; + chatMessageRemote: string; + chatMessageText: string; + chatPrivateNotice: string; + chatRecipientCancelIcon: string; + chatRecipientContainer: string; + chatRecipientText: string; + chatReplyIcon: string; + chatSenderName: string; + chatTimestamp: string; + dialogBackground: string; + dialogBorder: string; + dialogOverlay: string; + dialogSecondaryText: string; + dialogText: string; + drawerBackground: string; + filmstripBackground: string; + filmstripBackgroundHover: string; + filmstripDragHandle: string; + filmstripDragHandleHover: string; + inputBackground: string; + inputBorder: string; + inputPlaceholder: string; + inputText: string; + largeVideoBackground: string; + largeVideoPlaceholder: string; + lobbyBackground: string; + lobbyPreviewBackground: string; + notificationActionFocus: string; + notificationActionText: string; + notificationBackground: string; + notificationCloseIcon: string; + notificationError: string; + notificationErrorText: string; + notificationNormalIcon: string; + notificationSuccess: string; + notificationText: string; + notificationWarning: string; + overflowMenuBackground: string; + overflowMenuBorder: string; + overflowMenuItemDisabled: string; + overflowMenuItemHover: string; + overflowMenuItemIcon: string; + overflowMenuItemText: string; + overflowMenuSeparator: string; + participantActionButton: string; + participantCounterBadge: string; + participantCounterText: string; + participantItemBackground: string; + participantItemBorder: string; + participantItemHover: string; + participantLinkText: string; + participantModeratorLabel: string; + participantRaisedHandBadge: string; + participantRaisedHandIcon: string; + participantSectionText: string; + participantsPaneBackground: string; + participantWarningText: string; + preMeetingBackground: string; + preMeetingPreview: string; + prejoinActionButtonDanger: string; + prejoinActionButtonDisabled: string; + prejoinActionButtonPrimary: string; + prejoinActionButtonPrimaryHover: string; + prejoinActionButtonPrimaryText: string; + prejoinActionButtonSecondary: string; + prejoinActionButtonSecondaryHover: string; + prejoinActionButtonSecondaryText: string; + prejoinCountryPickerBackground: string; + prejoinCountryPickerBorder: string; + prejoinCountryPickerText: string; + prejoinCountryRowBackground: string; + prejoinCountryRowHover: string; + prejoinDeviceStatusOk: string; + prejoinDeviceStatusText: string; + prejoinDeviceStatusWarning: string; + prejoinDialogBackground: string; + prejoinDialogDelimiter: string; + prejoinDialogDelimiterText: string; + prejoinRecordingWarningText: string; + prejoinRoomNameText: string; + prejoinTitleText: string; + prejoinWarningBackground: string; + prejoinWarningText: string; + settingsBackground: string; + settingsErrorIcon: string; + settingsSectionBackground: string; + settingsShortcutKey: string; + settingsTabText: string; + settingsVideoPreviewBorder: string; + speakerStatsAvatarLeft: string; + speakerStatsBackground: string; + speakerStatsBorder: string; + speakerStatsHeaderBackground: string; + speakerStatsLabelText: string; + speakerStatsRowAlternate: string; + speakerStatsRowBackground: string; + speakerStatsSearchBackground: string; + speakerStatsSearchBorder: string; + speakerStatsSearchIcon: string; + speakerStatsSearchPlaceholder: string; + speakerStatsSearchText: string; + speakerStatsSuccessBar: string; + thumbnailBackground: string; + thumbnailBorder: string; + thumbnailHover: string; + thumbnailRaisedHandIcon: string; + thumbnailTintBackground: string; + thumbnailVideoBackground: string; + toolbarButton: string; + toolbarButtonActive: string; + toolbarButtonHover: string; + toolbarIcon: string; + toolbarIconActive: string; + toolbarIconHover: string; + toolboxBackground: string; + toolboxIconActive: string; + toolboxIconHover: string; + toolboxIconToggled: string; + visitorsArrowBackground: string; + visitorsCountBadge: string; + visitorsCountIcon: string; + visitorsCountText: string; + visitorsQueueBackground: string; + visitorsQueueText: string; + welcomeBackground: string; + welcomeCard: string; + welcomeTabActive: string; + welcomeTabInactive: string; + + // Form components + actionButtonBackground: string; + actionButtonBorder: string; + actionButtonText: string; + audioRoutePickerBackground: string; + audioRoutePickerBorder: string; + audioRoutePickerText: string; + baseReactBackground: string; + baseReactBorder: string; + baseReactText: string; + carModeBackground: string; + carModeBorder: string; + carModeText: string; + checkboxBorder: string; + checkboxChecked: string; + checkboxDisabledBackground: string; + checkboxDisabledBorder: string; + checkboxDisabledChecked: string; + checkboxIcon: string; + checkboxIconDisabled: string; + checkboxLabel: string; + clickableIconActive: string; + clickableIconBackground: string; + clickableIconFocus: string; + clickableIconHover: string; + conferenceNoticeBackground: string; + conferenceNoticeText: string; + conferenceRaisedHandLabelIcon: string; + conferenceRaisedHandLabelText: string; + conferenceSubjectText: string; + conferenceTimerText: string; + connectionIndicatorLost: string; + connectionIndicatorOther: string; + deepLinkingBackground: string; + deepLinkingBorder: string; + deepLinkingLabelText: string; + deepLinkingLink: string; + deepLinkingSeparator: string; + deepLinkingText: string; + deviceSelectorBackground: string; + deviceSelectorBorder: string; + deviceSelectorText: string; + deviceSelectorTextBackground: string; + deviceSelectorVideoPreview: string; + dialInBackground: string; + dialInSecondaryText: string; + dialInText: string; + displayNameBackground: string; + displayNameText: string; + etherpadBackground: string; + etherpadText: string; + fileSharingBackground: string; + fileSharingEmptyIcon: string; + fileSharingEmptyText: string; + fileSharingItemBackground: string; + fileSharingItemBorder: string; + fileSharingText: string; + gifsBackground: string; + gifsText: string; + inlineDialogBackground: string; + inlineDialogBorder: string; + inlineDialogText: string; + inputBottomLabel: string; + inputBottomLabelError: string; + inputClearButton: string; + inputFieldBackground: string; + inputFieldBorder: string; + inputFieldDisabled: string; + inputFieldError: string; + inputFieldFocus: string; + inputFieldPlaceholder: string; + inputFieldText: string; + inputLabel: string; + labelBackground: string; + labelText: string; + labelWhiteBackground: string; + labelWhiteIcon: string; + labelWhiteText: string; + languageSelectorBackground: string; + languageSelectorHover: string; + languageSelectorText: string; + listItemBackground: string; + listItemBoxShadow: string; + listItemHighlighted: string; + listItemHover: string; + listItemText: string; + multiSelectBackground: string; + multiSelectBorder: string; + multiSelectItemDisabled: string; + multiSelectItemHover: string; + multiSelectItemText: string; + pollsAnswer: string; + pollsBackground: string; + pollsBarBackground: string; + pollsBarPercentage: string; + pollsCreateBackground: string; + pollsCreateBorder: string; + pollsPaneBackground: string; + pollsPaneBorder: string; + pollsQuestion: string; + pollsSendDisabled: string; + pollsSendLabel: string; + pollsSeparator: string; + pollsSubtitle: string; + pollsTitle: string; + pollsVotersBackground: string; + pollsVotersText: string; + reactionsMenuBackground: string; + reactionsMenuBorder: string; + recordingBackground: string; + recordingHighlightButton: string; + recordingHighlightButtonDisabled: string; + recordingHighlightButtonIcon: string; + recordingHighlightButtonIconDisabled: string; + recordingNotificationAction: string; + recordingNotificationText: string; + recordingText: string; + securityDialogBackground: string; + securityDialogBorder: string; + securityDialogSecondaryText: string; + securityDialogText: string; + selectBackground: string; + selectBottomLabel: string; + selectBottomLabelError: string; + selectDisabled: string; + selectError: string; + selectFocus: string; + selectIcon: string; + selectIconDisabled: string; + selectLabel: string; + selectText: string; + sliderFocus: string; + sliderKnob: string; + sliderTrack: string; + subtitleMessageBackground: string; + subtitleMessageSender: string; + subtitleMessageText: string; + subtitleMessageTime: string; + switchBackground: string; + switchBackgroundOn: string; + switchFocus: string; + switchToggle: string; + switchToggleDisabled: string; + tabBadgeBackground: string; + tabBadgeText: string; + tabBorder: string; + tabBorderDisabled: string; + tabBorderHover: string; + tabBorderSelected: string; + tabFocus: string; + tabText: string; + tabTextDisabled: string; + tabTextHover: string; + tabTextSelected: string; + tooltipBackground: string; + tooltipText: string; + videoMenuBackground: string; + videoMenuBorder: string; + videoMenuSliderBackground: string; + videoMenuText: string; + videoQualityBackground: string; + videoQualityText: string; + virtualBackgroundBackground: string; + virtualBackgroundBorder: string; + virtualBackgroundPreview: string; + virtualBackgroundText: string; + whiteboardBackground: string; + whiteboardText: string; + salesforceSearchBackground: string; + salesforceSearchBorder: string; + salesforceSearchIcon: string; + salesforceSearchPlaceholder: string; + salesforceSearchText: string; } export interface ITypography { diff --git a/react/features/base/ui/utils.ts b/react/features/base/ui/utils.ts index 25b07b1a3a..0e8e469577 100644 --- a/react/features/base/ui/utils.ts +++ b/react/features/base/ui/utils.ts @@ -11,13 +11,49 @@ import * as tokens from './tokens.json'; */ export function createColorTokens(colorMap: Object): any { const allTokens = merge({}, tokens, jitsiTokens); + const result: any = {}; - return Object.entries(colorMap) - .reduce((result, [ token, value ]: [any, string]) => { - const color = allTokens[value as keyof typeof allTokens] || value; + // First pass: resolve tokens that reference allTokens directly + Object.entries(colorMap).forEach(([ token, value ]: [any, string]) => { + const color = allTokens[value as keyof typeof allTokens] || value; - return Object.assign(result, { [token]: color }); - }, {}); + result[token] = color; + }); + + // Second pass: resolve semantic tokens that reference other colorMap entries + // Recursively resolve until we get actual color values + const resolveToken = (value: string, depth = 0): string => { + // Prevent infinite loops + if (depth > 10) { + return value; + } + + // If it's already a color (starts with # or rgb/rgba), return it + if (value.startsWith('#') || value.startsWith('rgb')) { + return value; + } + + // Look up in the result map first (for colorMap token references) + if (result[value]) { + return resolveToken(result[value], depth + 1); + } + + // Then look up in allTokens + const resolved = allTokens[value as keyof typeof allTokens]; + + if (resolved && resolved !== value && typeof resolved === 'string') { + return resolveToken(resolved, depth + 1); + } + + return value; + }; + + // Third pass: recursively resolve all values + Object.entries(result).forEach(([ token, value ]) => { + result[token] = resolveToken(String(value)); + }); + + return result; } /** diff --git a/react/features/chat/components/web/Chat.tsx b/react/features/chat/components/web/Chat.tsx index 8d4fdb8e58..78a8eec35d 100644 --- a/react/features/chat/components/web/Chat.tsx +++ b/react/features/chat/components/web/Chat.tsx @@ -107,7 +107,7 @@ interface IProps extends AbstractProps { const useStyles = makeStyles<{ _isResizing: boolean; width: number; }>()((theme, { _isResizing, width }) => { return { container: { - backgroundColor: theme.palette.ui01, + backgroundColor: theme.palette.chatBackground, flexShrink: 0, overflow: 'hidden', position: 'relative', @@ -146,7 +146,7 @@ const useStyles = makeStyles<{ _isResizing: boolean; width: number; }>()((theme, padding: `${theme.spacing(3)} ${theme.spacing(4)}`, alignItems: 'center', boxSizing: 'border-box', - color: theme.palette.text01, + color: theme.palette.chatMessageText, ...theme.typography.heading6, lineHeight: 'unset', fontWeight: theme.typography.heading6.fontWeight as any, diff --git a/react/features/chat/components/web/ChatInput.tsx b/react/features/chat/components/web/ChatInput.tsx index 2b9398f45c..6fe2568b61 100644 --- a/react/features/chat/components/web/ChatInput.tsx +++ b/react/features/chat/components/web/ChatInput.tsx @@ -37,7 +37,7 @@ const styles = (_theme: Theme, { _chatWidth }: IProps) => { } }, chatDisabled: { - borderTop: `1px solid ${_theme.palette.ui02}`, + borderTop: `1px solid ${_theme.palette.chatInputBorder}`, boxSizing: 'border-box' as const, padding: _theme.spacing(4), textAlign: 'center' as const, diff --git a/react/features/chat/components/web/ChatMessage.tsx b/react/features/chat/components/web/ChatMessage.tsx index 2f2b776643..feac8c8d9f 100644 --- a/react/features/chat/components/web/ChatMessage.tsx +++ b/react/features/chat/components/web/ChatMessage.tsx @@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme: Theme) => { chatMessage: { display: 'inline-flex', padding: '12px', - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.chatMessageRemote, borderRadius: '4px 12px 12px 12px', maxWidth: '100%', marginTop: '4px', @@ -66,21 +66,21 @@ const useStyles = makeStyles()((theme: Theme) => { }, '&.privatemessage': { - backgroundColor: theme.palette.support05 + backgroundColor: theme.palette.chatMessagePrivate }, '&.local': { - backgroundColor: theme.palette.ui04, + backgroundColor: theme.palette.chatMessageLocal, borderRadius: '12px 4px 12px 12px', '&.privatemessage': { - backgroundColor: theme.palette.support05 + backgroundColor: theme.palette.chatMessagePrivate }, '&.local': { - backgroundColor: theme.palette.ui04, + backgroundColor: theme.palette.chatMessageLocal, borderRadius: '12px 4px 12px 12px', '&.privatemessage': { - backgroundColor: theme.palette.support05 + backgroundColor: theme.palette.chatMessagePrivate } }, @@ -91,7 +91,7 @@ const useStyles = makeStyles()((theme: Theme) => { }, '&.lobbymessage': { - backgroundColor: theme.palette.support05 + backgroundColor: theme.palette.chatMessagePrivate } }, '&.error': { @@ -100,7 +100,7 @@ const useStyles = makeStyles()((theme: Theme) => { fontWeight: 100 }, '&.lobbymessage': { - backgroundColor: theme.palette.support05 + backgroundColor: theme.palette.chatMessagePrivate } }, sideBySideContainer: { @@ -146,7 +146,7 @@ const useStyles = makeStyles()((theme: Theme) => { }, displayName: { ...theme.typography.labelBold, - color: theme.palette.text02, + color: theme.palette.chatSenderName, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', @@ -155,18 +155,18 @@ const useStyles = makeStyles()((theme: Theme) => { }, userMessage: { ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.chatMessageText, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, privateMessageNotice: { ...theme.typography.labelRegular, - color: theme.palette.text02, + color: theme.palette.chatPrivateNotice, marginTop: theme.spacing(1) }, timestamp: { ...theme.typography.labelRegular, - color: theme.palette.text03, + color: theme.palette.chatTimestamp, marginTop: theme.spacing(1), marginLeft: theme.spacing(1), whiteSpace: 'nowrap', @@ -174,12 +174,12 @@ const useStyles = makeStyles()((theme: Theme) => { }, reactionsPopover: { padding: theme.spacing(2), - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.chatInputBackground, borderRadius: theme.shape.borderRadius, maxWidth: '150px', maxHeight: '400px', overflowY: 'auto', - color: theme.palette.text01 + color: theme.palette.chatMessageText }, reactionItem: { display: 'flex', diff --git a/react/features/chat/components/web/ClosedCaptionsTab.tsx b/react/features/chat/components/web/ClosedCaptionsTab.tsx index a0c763d5a3..1773f9022c 100644 --- a/react/features/chat/components/web/ClosedCaptionsTab.tsx +++ b/react/features/chat/components/web/ClosedCaptionsTab.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => { padding: '16px', flex: 1, boxSizing: 'border-box', - color: theme.palette.text01 + color: theme.palette.chatMessageText }, container: { display: 'flex', @@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => { boxSizing: 'border-box', flexDirection: 'column', gap: '16px', - color: theme.palette.text01, + color: theme.palette.chatMessageText, textAlign: 'center' }, emptyIcon: { @@ -62,7 +62,7 @@ const useStyles = makeStyles()(theme => { }, emptyState: { ...theme.typography.bodyLongBold, - color: theme.palette.text02 + color: theme.palette.chatSenderName } }; }); @@ -103,7 +103,7 @@ const ClosedCaptionsTab = ({
{ t('closedCaptionsTab.emptyState') } diff --git a/react/features/chat/components/web/EmojiSelector.tsx b/react/features/chat/components/web/EmojiSelector.tsx index 82e4ff2f3c..17f17284b7 100644 --- a/react/features/chat/components/web/EmojiSelector.tsx +++ b/react/features/chat/components/web/EmojiSelector.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme: Theme) => { display: 'flex', flexDirection: 'row', borderRadius: '4px', - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.chatInputBackground }, emojiButton: { diff --git a/react/features/chat/components/web/FileMessage.tsx b/react/features/chat/components/web/FileMessage.tsx index 57a35cf4a5..2df4eb5986 100644 --- a/react/features/chat/components/web/FileMessage.tsx +++ b/react/features/chat/components/web/FileMessage.tsx @@ -46,12 +46,12 @@ const useStyles = makeStyles()(theme => { // Add background to button container to hide text underneath in chat context '& > div:last-child': { - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.chatMessageRemote, paddingLeft: theme.spacing(2) }, '&:hover > div:last-child': { - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.chatInputBackground } }, @@ -66,7 +66,7 @@ const useStyles = makeStyles()(theme => { deletedFileMessage: { ...theme.typography.bodyShortRegular, fontStyle: 'italic', - color: theme.palette.text02, + color: theme.palette.fileSharingEmptyText, padding: theme.spacing(1, 0) } }; diff --git a/react/features/chat/components/web/MessageMenu.tsx b/react/features/chat/components/web/MessageMenu.tsx index 3645718bdb..40a7ba3d49 100644 --- a/react/features/chat/components/web/MessageMenu.tsx +++ b/react/features/chat/components/web/MessageMenu.tsx @@ -39,14 +39,14 @@ const useStyles = makeStyles()(theme => { } }, menuPanel: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.chatInputBackground, borderRadius: theme.shape.borderRadius, boxShadow: theme.shadows[3], overflow: 'hidden' }, copiedMessage: { position: 'fixed', - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.chatInputBackground, color: 'white', padding: '4px 8px', borderRadius: '4px', diff --git a/react/features/chat/components/web/MessageRecipient.tsx b/react/features/chat/components/web/MessageRecipient.tsx index 0bf5f11830..cfa9558382 100644 --- a/react/features/chat/components/web/MessageRecipient.tsx +++ b/react/features/chat/components/web/MessageRecipient.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => { backgroundColor: theme.palette.support05, borderRadius: theme.shape.borderRadius, ...theme.typography.bodyShortRegular, - color: theme.palette.text01 + color: theme.palette.chatRecipientText }, text: { diff --git a/react/features/chat/components/web/SubtitleMessage.tsx b/react/features/chat/components/web/SubtitleMessage.tsx index 85b1569d5f..8f0af9ce89 100644 --- a/react/features/chat/components/web/SubtitleMessage.tsx +++ b/react/features/chat/components/web/SubtitleMessage.tsx @@ -22,7 +22,7 @@ interface IProps extends ISubtitle { const useStyles = makeStyles()(theme => { return { messageContainer: { - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.subtitleMessageBackground, borderRadius: '4px 12px 12px 12px', padding: '12px', maxWidth: '100%', @@ -39,7 +39,7 @@ const useStyles = makeStyles()(theme => { messageHeader: { ...theme.typography.labelBold, - color: theme.palette.text02, + color: theme.palette.subtitleMessageSender, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', @@ -49,14 +49,14 @@ const useStyles = makeStyles()(theme => { messageText: { ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.subtitleMessageText, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, timestamp: { ...theme.typography.labelRegular, - color: theme.palette.text03, + color: theme.palette.subtitleMessageTime, marginTop: theme.spacing(1) }, diff --git a/react/features/conference/components/web/ConferenceTimerDisplay.tsx b/react/features/conference/components/web/ConferenceTimerDisplay.tsx index 6a191ba0c9..00c4b7e922 100644 --- a/react/features/conference/components/web/ConferenceTimerDisplay.tsx +++ b/react/features/conference/components/web/ConferenceTimerDisplay.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles()(theme => { return { timer: { ...theme.typography.labelRegular, - color: theme.palette.text01, + color: theme.palette.conferenceTimerText, padding: '6px 8px', backgroundColor: 'rgba(0, 0, 0, 0.8)', boxSizing: 'border-box', diff --git a/react/features/conference/components/web/Notice.tsx b/react/features/conference/components/web/Notice.tsx index b6fec94210..cec26cb7f8 100644 --- a/react/features/conference/components/web/Notice.tsx +++ b/react/features/conference/components/web/Notice.tsx @@ -15,8 +15,8 @@ const useStyles = makeStyles()(theme => { }, message: { - backgroundColor: theme.palette.uiBackground, - color: theme.palette.text01, + backgroundColor: theme.palette.conferenceNoticeBackground, + color: theme.palette.conferenceNoticeText, padding: '3px', borderRadius: '5px' } diff --git a/react/features/conference/components/web/RaisedHandsCountLabel.tsx b/react/features/conference/components/web/RaisedHandsCountLabel.tsx index 76c8f2ddb7..db8cc31a20 100644 --- a/react/features/conference/components/web/RaisedHandsCountLabel.tsx +++ b/react/features/conference/components/web/RaisedHandsCountLabel.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles()(theme => { return { label: { backgroundColor: theme.palette.warning02, - color: theme.palette.uiBackground + color: theme.palette.conferenceRaisedHandLabelText } }; }); @@ -35,7 +35,7 @@ const RaisedHandsCountLabel = () => { accessibilityText = { t('raisedHandsLabel') } className = { styles.label } icon = { IconRaiseHand } - iconColor = { theme.palette.icon04 } + iconColor = { theme.palette.conferenceRaisedHandLabelIcon } id = 'raisedHandsCountLabel' onClick = { onClick } text = { `${raisedHandsCount}` } /> diff --git a/react/features/conference/components/web/SubjectText.tsx b/react/features/conference/components/web/SubjectText.tsx index 00e4611064..0ef62665be 100644 --- a/react/features/conference/components/web/SubjectText.tsx +++ b/react/features/conference/components/web/SubjectText.tsx @@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => { return { container: { ...theme.typography.bodyLongRegular, - color: theme.palette.text01, + color: theme.palette.conferenceSubjectText, padding: '2px 16px', backgroundColor: 'rgba(0, 0, 0, 0.6)', maxWidth: '324px', diff --git a/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx b/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx index 3bc02f054f..34d09f902c 100644 --- a/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx +++ b/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx @@ -14,13 +14,13 @@ import Input from '../../../base/ui/components/web/Input'; const useStyles = makeStyles()(theme => { return { content: { - color: theme.palette.text01 + color: theme.palette.dialogText }, info: { - background: theme.palette.ui01, + background: theme.palette.dialogBackground, ...theme.typography.labelRegular, - color: theme.palette.text02, + color: theme.palette.dialogSecondaryText, marginTop: theme.spacing(2) }, diff --git a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx index 7e1b0208e2..3ba98347ce 100644 --- a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx +++ b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx @@ -179,7 +179,7 @@ const styles = (theme: Theme) => { }, '&.status-lost': { - backgroundColor: theme.palette.ui05 + backgroundColor: theme.palette.connectionIndicatorLost }, '&.status-other': { diff --git a/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx b/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx index 20fc528764..feac6b60af 100644 --- a/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx +++ b/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx @@ -33,12 +33,12 @@ const useStyles = makeStyles()((theme: Theme) => { contentPane: { display: 'flex', flexDirection: 'column', - background: theme.palette.ui01, - border: `1px solid ${theme.palette.ui03}`, + background: theme.palette.deepLinkingBackground, + border: `1px solid ${theme.palette.deepLinkingBorder}`, padding: 40, borderRadius: 16, maxWidth: 410, - color: theme.palette.text01 + color: theme.palette.deepLinkingText }, logo: { marginBottom: 32 @@ -66,14 +66,14 @@ const useStyles = makeStyles()((theme: Theme) => { marginTop: 40, height: 1, maxWidth: 390, - background: theme.palette.ui03 + background: theme.palette.deepLinkingSeparator }, label: { marginTop: 40, ...theme.typography.labelRegular, - color: theme.palette.text02, + color: theme.palette.deepLinkingLabelText, '& a': { - color: theme.palette.link01 + color: theme.palette.deepLinkingLink } } }; diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx b/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx index 40d36584f1..12caf93339 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx +++ b/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx @@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme: Theme) => { flexDirection: 'column', padding: `${PADDINGS.topBottom}px ${PADDINGS.leftRight}px`, maxWidth: 410, - color: theme.palette.text01 + color: theme.palette.deepLinkingText }, launchingMeetingLabel: { marginTop: 24, @@ -89,7 +89,7 @@ const useStyles = makeStyles()((theme: Theme) => { marginTop: '32px', height: 1, width: `calc(100% + ${2 * PADDINGS.leftRight}px)`, - background: theme.palette.ui03 + background: theme.palette.deepLinkingSeparator } }; }); diff --git a/react/features/device-selection/components/AudioInputPreview.web.tsx b/react/features/device-selection/components/AudioInputPreview.web.tsx index 7565172268..082a14dd1b 100644 --- a/react/features/device-selection/components/AudioInputPreview.web.tsx +++ b/react/features/device-selection/components/AudioInputPreview.web.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles()(theme => { flex: 1, height: '4px', borderRadius: '1px', - backgroundColor: theme.palette.ui04, + backgroundColor: theme.palette.labelBackground, marginRight: theme.spacing(1), '&:last-of-type': { diff --git a/react/features/device-selection/components/DeviceHidContainer.web.tsx b/react/features/device-selection/components/DeviceHidContainer.web.tsx index 40ef8582f7..ff1ac159ca 100644 --- a/react/features/device-selection/components/DeviceHidContainer.web.tsx +++ b/react/features/device-selection/components/DeviceHidContainer.web.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => { label: { ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.deviceSelectorText, marginBottom: theme.spacing(2) }, diff --git a/react/features/device-selection/components/DeviceSelector.web.tsx b/react/features/device-selection/components/DeviceSelector.web.tsx index 6b30ff4402..a2056c207d 100644 --- a/react/features/device-selection/components/DeviceSelector.web.tsx +++ b/react/features/device-selection/components/DeviceSelector.web.tsx @@ -56,11 +56,11 @@ const useStyles = makeStyles()(theme => { width: '100%', boxSizing: 'border-box', borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.uiBackground, + backgroundColor: theme.palette.deviceSelectorTextBackground, padding: '10px 16px', textAlign: 'center', ...theme.typography.bodyShortRegular, - border: `1px solid ${theme.palette.ui03}` + border: `1px solid ${theme.palette.deviceSelectorBorder}` } }; }); diff --git a/react/features/device-selection/components/VideoInputPreview.web.tsx b/react/features/device-selection/components/VideoInputPreview.web.tsx index f13a56499f..21d594ccba 100644 --- a/react/features/device-selection/components/VideoInputPreview.web.tsx +++ b/react/features/device-selection/components/VideoInputPreview.web.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles()(theme => { borderRadius: '3px', overflow: 'hidden', marginBottom: theme.spacing(4), - backgroundColor: theme.palette.uiBackground + backgroundColor: theme.palette.deviceSelectorVideoPreview }, video: { @@ -42,7 +42,7 @@ const useStyles = makeStyles()(theme => { }, errorText: { - color: theme.palette.text01, + color: theme.palette.deviceSelectorText, left: 0, position: 'absolute', right: 0, diff --git a/react/features/feedback/components/FeedbackDialog.web.tsx b/react/features/feedback/components/FeedbackDialog.web.tsx index ba96f54b6d..7ed78a07cd 100644 --- a/react/features/feedback/components/FeedbackDialog.web.tsx +++ b/react/features/feedback/components/FeedbackDialog.web.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles()(theme => { ratingLabel: { ...theme.typography.bodyShortBold, - color: theme.palette.text01, + color: theme.palette.dialogText, marginBottom: theme.spacing(2), height: '20px' }, diff --git a/react/features/file-sharing/components/web/FileItem.tsx b/react/features/file-sharing/components/web/FileItem.tsx index 772c52ca76..3a94a531cb 100644 --- a/react/features/file-sharing/components/web/FileItem.tsx +++ b/react/features/file-sharing/components/web/FileItem.tsx @@ -84,7 +84,7 @@ const useStyles = makeStyles()(theme => { }, fileItem: { - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.fileSharingItemBackground, borderRadius: theme.shape.borderRadius, boxSizing: 'border-box', display: 'flex', @@ -106,7 +106,7 @@ const useStyles = makeStyles()(theme => { }, '&:hover': { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.fileSharingItemBorder, '& .actionIconVisibility': { opacity: 1 @@ -186,7 +186,7 @@ const useStyles = makeStyles()(theme => { }, progressBar: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.fileSharingItemBorder, borderRadius: theme.shape.borderRadius, height: 4, overflow: 'hidden', @@ -275,7 +275,7 @@ const FileItem = ({ <>
@@ -320,7 +320,7 @@ const FileItem = ({ onClick = { handleDownload } type = 'button'> @@ -335,7 +335,7 @@ const FileItem = ({ onClick = { handleRemove } type = 'button'> diff --git a/react/features/file-sharing/components/web/FileSharing.tsx b/react/features/file-sharing/components/web/FileSharing.tsx index 0684016e67..2c516c507a 100644 --- a/react/features/file-sharing/components/web/FileSharing.tsx +++ b/react/features/file-sharing/components/web/FileSharing.tsx @@ -32,8 +32,8 @@ const useStyles = makeStyles()(theme => { }, dropZone: { - backgroundColor: theme.palette.ui02, - border: `2px dashed ${theme.palette.ui03}`, + backgroundColor: theme.palette.fileSharingItemBackground, + border: `2px dashed ${theme.palette.fileSharingItemBorder}`, borderRadius: theme.shape.borderRadius, bottom: 0, left: 0, @@ -44,7 +44,7 @@ const useStyles = makeStyles()(theme => { zIndex: 0, '&.dragging': { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.fileSharingItemBorder, borderColor: theme.palette.action01, opacity: 0.8, zIndex: 2 @@ -85,7 +85,7 @@ const useStyles = makeStyles()(theme => { noFilesText: { ...theme.typography.bodyLongBold, - color: theme.palette.text02, + color: theme.palette.fileSharingEmptyText, padding: '0 24px', textAlign: 'center' }, @@ -189,7 +189,7 @@ const FileSharing = () => { tabIndex = { 0 }> diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx index d4dc66125d..a102633416 100644 --- a/react/features/filmstrip/components/web/Filmstrip.tsx +++ b/react/features/filmstrip/components/web/Filmstrip.tsx @@ -79,7 +79,7 @@ function styles(theme: Theme, props: IProps) { zIndex: 1, '&:hover, &:focus-within': { - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.filmstripBackground } }, @@ -156,10 +156,10 @@ function styles(theme: Theme, props: IProps) { }, filmstripBackground: { - backgroundColor: theme.palette.uiBackground, + backgroundColor: theme.palette.filmstripBackgroundHover, '&:hover, &:focus-within': { - backgroundColor: theme.palette.uiBackground + backgroundColor: theme.palette.filmstripBackgroundHover } }, @@ -198,7 +198,7 @@ function styles(theme: Theme, props: IProps) { '&:hover': { '& .dragHandle': { - backgroundColor: theme.palette.icon01 + backgroundColor: theme.palette.filmstripDragHandleHover } }, @@ -206,7 +206,7 @@ function styles(theme: Theme, props: IProps) { visibility: 'visible' as const, '& .dragHandle': { - backgroundColor: theme.palette.icon01 + backgroundColor: theme.palette.filmstripDragHandleHover } }, @@ -224,7 +224,7 @@ function styles(theme: Theme, props: IProps) { }, dragHandle: { - backgroundColor: theme.palette.icon02, + backgroundColor: theme.palette.filmstripDragHandle, height: '100px', width: '3px', borderRadius: '1px' diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx index c2d5adff2f..4e58ac1dff 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx @@ -67,7 +67,7 @@ const RaisedHandIndicator = ({
diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx index 277143df6a..e86ad4500d 100644 --- a/react/features/filmstrip/components/web/Thumbnail.tsx +++ b/react/features/filmstrip/components/web/Thumbnail.tsx @@ -305,7 +305,7 @@ const defaultStyles = (theme: Theme) => { height: '100%', width: '100%', borderRadius: '4px', - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.thumbnailBackground }, borderIndicator: { @@ -341,7 +341,7 @@ const defaultStyles = (theme: Theme) => { justifyContent: 'center', alignItems: 'center', overflow: 'hidden', - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.thumbnailBackground, '& img': { maxWidth: '100%', @@ -356,7 +356,7 @@ const defaultStyles = (theme: Theme) => { zIndex: 1, width: '100%', height: '100%', - backgroundColor: `${theme.palette.uiBackground}`, + backgroundColor: theme.palette.thumbnailTintBackground, opacity: 0.8 }, diff --git a/react/features/filmstrip/functions.web.ts b/react/features/filmstrip/functions.web.ts index 61ae85b1b6..1562038bba 100644 --- a/react/features/filmstrip/functions.web.ts +++ b/react/features/filmstrip/functions.web.ts @@ -840,5 +840,5 @@ export function isTopPanelEnabled(state: IReduxState) { * @returns {string} The background color. */ export function getThumbnailBackgroundColor(theme: Theme): string { - return theme.palette.uiBackground; + return theme.palette.thumbnailVideoBackground; } diff --git a/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx b/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx index efec4ec8ad..d5adb19dbb 100644 --- a/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx +++ b/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme: Theme) => { marginTop: 32, maxWidth: 310, padding: '16px 12px', - background: theme.palette.ui02, + background: theme.palette.dialInBackground, textAlign: 'center', display: 'flex', flexDirection: 'column', @@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme: Theme) => { separator: { width: '100%', height: 1, - background: theme.palette.ui04, + background: theme.palette.labelBackground, marginBottom: 18 }, pinLabel: { diff --git a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx b/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx index cd1c16adbe..b9a55070f8 100644 --- a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx +++ b/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx @@ -94,7 +94,7 @@ const styles = (theme: Theme) => { display: 'flex', flexDirection: 'column' as const, background: '#1E1E1E', - color: theme.palette.text01 + color: theme.palette.dialInText }, scrollable: { height: '100dvh', diff --git a/react/features/large-video/components/ScreenSharePlaceholder.web.tsx b/react/features/large-video/components/ScreenSharePlaceholder.web.tsx index 0e60041e43..11a8a8a07b 100644 --- a/react/features/large-video/components/ScreenSharePlaceholder.web.tsx +++ b/react/features/large-video/components/ScreenSharePlaceholder.web.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => { overlayContainer: { width: '100%', height: '100%', - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.largeVideoPlaceholder, display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -31,13 +31,13 @@ const useStyles = makeStyles()(theme => { height: '56px', boxSizing: 'border-box', border: '3px solid', - borderColor: theme.palette.text01, + borderColor: theme.palette.dialogText, borderRadius: '6px' }, laptopStand: { width: '40px', height: '4px', - backgroundColor: theme.palette.text01, + backgroundColor: theme.palette.dialogText, boxSizing: 'border-box', borderRadius: '6px', marginTop: '4px' @@ -49,7 +49,7 @@ const useStyles = makeStyles()(theme => { lineHeight: '1.75rem', marginTop: '24px', letterSpacing: '-0.012em', - color: theme.palette.text01 + color: theme.palette.dialogText }, showSharing: { fontStyle: 'normal', diff --git a/react/features/notifications/components/web/Notification.tsx b/react/features/notifications/components/web/Notification.tsx index 54ee3bdc7d..cdec0d9d5c 100644 --- a/react/features/notifications/components/web/Notification.tsx +++ b/react/features/notifications/components/web/Notification.tsx @@ -39,7 +39,7 @@ interface IProps extends INotificationProps { const useStyles = makeStyles()((theme: Theme) => { return { container: { - backgroundColor: theme.palette.ui10, + backgroundColor: theme.palette.notificationBackground, padding: '8px 16px 8px 20px', display: 'flex', position: 'relative' as const, @@ -85,19 +85,19 @@ const useStyles = makeStyles()((theme: Theme) => { borderRadius: '4px', '&.normal': { - backgroundColor: theme.palette.action01 + backgroundColor: theme.palette.notificationNormalIcon }, '&.error': { - backgroundColor: theme.palette.iconError + backgroundColor: theme.palette.notificationError }, '&.success': { - backgroundColor: theme.palette.success01 + backgroundColor: theme.palette.notificationSuccess }, '&.warning': { - backgroundColor: theme.palette.warning01 + backgroundColor: theme.palette.notificationWarning } }, @@ -113,7 +113,7 @@ const useStyles = makeStyles()((theme: Theme) => { display: 'flex', flexDirection: 'column' as const, justifyContent: 'space-between', - color: theme.palette.text04, + color: theme.palette.notificationText, flex: 1, margin: '0 8px', @@ -150,7 +150,7 @@ const useStyles = makeStyles()((theme: Theme) => { border: 0, outline: 0, backgroundColor: 'transparent', - color: theme.palette.action01, + color: theme.palette.notificationActionText, ...theme.typography.bodyShortBold, marginRight: theme.spacing(3), padding: 0, @@ -161,11 +161,11 @@ const useStyles = makeStyles()((theme: Theme) => { }, '&.destructive': { - color: theme.palette.textError + color: theme.palette.notificationErrorText }, '&:focus-visible': { - outline: `2px solid ${theme.palette.action01}`, + outline: `2px solid ${theme.palette.notificationActionFocus}`, outlineOffset: 2 } }, @@ -203,10 +203,10 @@ const Notification = ({ ); const ICON_COLOR = { - error: theme.palette.iconError, - normal: theme.palette.action01, - success: theme.palette.success01, - warning: theme.palette.warning01 + error: theme.palette.notificationError, + normal: theme.palette.notificationNormalIcon, + success: theme.palette.notificationSuccess, + warning: theme.palette.notificationWarning }; const onDismiss = useCallback(() => { @@ -359,10 +359,10 @@ const Notification = ({ ))}
- { !disableClosing && ( + {!disableClosing && ( { }, arrowContainer: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.breakoutRoomArrowBackground, width: '24px', height: '24px', borderRadius: '6px', diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx index f66a5e34a1..4a2d971b51 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx @@ -49,7 +49,7 @@ interface IProps { const useStyles = makeStyles()(theme => { return { text: { - color: theme.palette.text02, + color: theme.palette.participantSectionText, padding: '10px 16px', height: '40px', overflow: 'hidden', diff --git a/react/features/participants-pane/components/web/CurrentVisitorsList.tsx b/react/features/participants-pane/components/web/CurrentVisitorsList.tsx index d3be9ace92..dc9aa73166 100644 --- a/react/features/participants-pane/components/web/CurrentVisitorsList.tsx +++ b/react/features/participants-pane/components/web/CurrentVisitorsList.tsx @@ -45,11 +45,11 @@ const useStyles = makeStyles()(theme => { cursor: 'pointer', padding: `${theme.spacing(1)} 0`, ...theme.typography.bodyShortBold, - color: theme.palette.text02, + color: theme.palette.participantSectionText, flexShrink: 0 }, arrowContainer: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.visitorsArrowBackground, width: '24px', height: '24px', borderRadius: '6px', diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx index bd385beac4..f235953a92 100644 --- a/react/features/participants-pane/components/web/FooterContextMenu.tsx +++ b/react/features/participants-pane/components/web/FooterContextMenu.tsx @@ -56,7 +56,7 @@ const useStyles = makeStyles()(theme => { text: { ...theme.typography.bodyShortRegular, - color: theme.palette.text02, + color: theme.palette.participantSectionText, padding: '10px 16px', height: '40px', overflow: 'hidden', diff --git a/react/features/participants-pane/components/web/LobbyParticipants.tsx b/react/features/participants-pane/components/web/LobbyParticipants.tsx index 5d30996f4d..ed2bd6c582 100644 --- a/react/features/participants-pane/components/web/LobbyParticipants.tsx +++ b/react/features/participants-pane/components/web/LobbyParticipants.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => { }, drawerItem: { alignItems: 'center', - color: theme.palette.text01, + color: theme.palette.participantCounterText, display: 'flex', padding: '12px 16px', ...theme.typography.bodyShortRegularLarge, @@ -35,7 +35,7 @@ const useStyles = makeStyles()(theme => { '&:hover': { cursor: 'pointer', - background: theme.palette.action02 + background: theme.palette.participantActionButton } }, icon: { @@ -48,11 +48,11 @@ const useStyles = makeStyles()(theme => { }, heading: { ...theme.typography.bodyShortBold, - color: theme.palette.text02 + color: theme.palette.participantSectionText }, link: { ...theme.typography.labelBold, - color: theme.palette.link01, + color: theme.palette.participantLinkText, cursor: 'pointer' } }; diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx index 0fd727982e..e2e7a84c49 100644 --- a/react/features/participants-pane/components/web/MeetingParticipants.tsx +++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx @@ -23,10 +23,10 @@ import MeetingParticipantItems from './MeetingParticipantItems'; const useStyles = makeStyles()(theme => { return { headingW: { - color: theme.palette.warning02 + color: theme.palette.participantWarningText }, heading: { - color: theme.palette.text02, + color: theme.palette.participantSectionText, ...theme.typography.bodyShortBold, marginBottom: theme.spacing(3), diff --git a/react/features/participants-pane/components/web/ParticipantItem.tsx b/react/features/participants-pane/components/web/ParticipantItem.tsx index 7cf4c1692f..830d778a82 100644 --- a/react/features/participants-pane/components/web/ParticipantItem.tsx +++ b/react/features/participants-pane/components/web/ParticipantItem.tsx @@ -110,7 +110,7 @@ const useStyles = makeStyles()(theme => { moderatorLabel: { ...theme.typography.labelBold, - color: theme.palette.text03 + color: theme.palette.participantModeratorLabel }, avatar: { diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx index 5598a9babd..e0f16b0387 100644 --- a/react/features/participants-pane/components/web/ParticipantsCounter.tsx +++ b/react/features/participants-pane/components/web/ParticipantsCounter.tsx @@ -7,11 +7,11 @@ import { getParticipantCountForDisplay } from '../../../base/participants/functi const useStyles = makeStyles()(theme => { return { badge: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.participantCounterBadge, borderRadius: '100%', height: '16px', minWidth: '16px', - color: theme.palette.text01, + color: theme.palette.participantCounterText, ...theme.typography.labelBold, pointerEvents: 'none', position: 'absolute', diff --git a/react/features/participants-pane/components/web/ParticipantsPane.tsx b/react/features/participants-pane/components/web/ParticipantsPane.tsx index 4480044c1c..fc363f45cd 100644 --- a/react/features/participants-pane/components/web/ParticipantsPane.tsx +++ b/react/features/participants-pane/components/web/ParticipantsPane.tsx @@ -43,7 +43,7 @@ interface IStylesProps { const useStyles = makeStyles()((theme, { isChatOpen }) => { return { participantsPane: { - backgroundColor: theme.palette.ui01, + backgroundColor: theme.palette.participantsPaneBackground, flexShrink: 0, position: 'relative', transition: 'width .16s ease-in-out', diff --git a/react/features/participants-pane/components/web/RaisedHandIndicator.tsx b/react/features/participants-pane/components/web/RaisedHandIndicator.tsx index cf4566ebf3..d13ee25457 100644 --- a/react/features/participants-pane/components/web/RaisedHandIndicator.tsx +++ b/react/features/participants-pane/components/web/RaisedHandIndicator.tsx @@ -7,7 +7,7 @@ import { IconRaiseHand } from '../../../base/icons/svg'; const useStyles = makeStyles()(theme => { return { indicator: { - backgroundColor: theme.palette.warning02, + backgroundColor: theme.palette.participantRaisedHandBadge, borderRadius: `${Number(theme.shape.borderRadius) / 2}px`, height: '24px', width: '24px' @@ -21,7 +21,7 @@ export const RaisedHandIndicator = () => { return (
diff --git a/react/features/participants-pane/components/web/VisitorsList.tsx b/react/features/participants-pane/components/web/VisitorsList.tsx index 23ecaea63a..5af865e8d6 100644 --- a/react/features/participants-pane/components/web/VisitorsList.tsx +++ b/react/features/participants-pane/components/web/VisitorsList.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => { margin: `${theme.spacing(3)} 0` }, headingW: { - color: theme.palette.warning02 + color: theme.palette.participantWarningText }, drawerActions: { listStyleType: 'none', @@ -29,7 +29,7 @@ const useStyles = makeStyles()(theme => { }, drawerItem: { alignItems: 'center', - color: theme.palette.text01, + color: theme.palette.visitorsQueueText, display: 'flex', padding: '12px 16px', ...theme.typography.bodyShortRegularLarge, @@ -40,7 +40,7 @@ const useStyles = makeStyles()(theme => { '&:hover': { cursor: 'pointer', - background: theme.palette.action02 + background: theme.palette.participantActionButton } }, icon: { @@ -53,11 +53,11 @@ const useStyles = makeStyles()(theme => { }, heading: { ...theme.typography.bodyShortBold, - color: theme.palette.text02 + color: theme.palette.participantSectionText }, link: { ...theme.typography.labelBold, - color: theme.palette.link01, + color: theme.palette.participantLinkText, cursor: 'pointer' } }; diff --git a/react/features/polls/components/web/PollAnswer.tsx b/react/features/polls/components/web/PollAnswer.tsx index b1acd3e47f..094203ca71 100644 --- a/react/features/polls/components/web/PollAnswer.tsx +++ b/react/features/polls/components/web/PollAnswer.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => { container: { margin: '24px', padding: '16px', - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.pollsBackground, borderRadius: '8px', wordBreak: 'break-word' }, @@ -31,12 +31,12 @@ const useStyles = makeStyles()(theme => { }, question: { ...theme.typography.heading6, - color: theme.palette.text01, + color: theme.palette.pollsQuestion, marginBottom: '8px' }, creator: { ...theme.typography.bodyShortRegular, - color: theme.palette.text02 + color: theme.palette.pollsSubtitle }, answerList: { listStyleType: 'none', diff --git a/react/features/polls/components/web/PollCreate.tsx b/react/features/polls/components/web/PollCreate.tsx index abefc79efe..df0babc8dc 100644 --- a/react/features/polls/components/web/PollCreate.tsx +++ b/react/features/polls/components/web/PollCreate.tsx @@ -22,12 +22,12 @@ const useStyles = makeStyles()(theme => { }, header: { ...theme.typography.heading6, - color: theme.palette.text01, + color: theme.palette.pollsTitle, margin: '24px 0 16px' }, questionContainer: { paddingBottom: '24px', - borderBottom: `1px solid ${theme.palette.ui03}` + borderBottom: `1px solid ${theme.palette.pollsSeparator}` }, answerList: { listStyleType: 'none', diff --git a/react/features/polls/components/web/PollResults.tsx b/react/features/polls/components/web/PollResults.tsx index ec9f0131dc..2ff9eccad8 100644 --- a/react/features/polls/components/web/PollResults.tsx +++ b/react/features/polls/components/web/PollResults.tsx @@ -8,7 +8,7 @@ const useStyles = makeStyles()(theme => { container: { margin: '24px', padding: '16px', - backgroundColor: theme.palette.ui02, + backgroundColor: theme.palette.pollsBackground, borderRadius: '8px', wordBreak: 'break-word' }, @@ -17,12 +17,12 @@ const useStyles = makeStyles()(theme => { }, question: { ...theme.typography.heading6, - color: theme.palette.text01, + color: theme.palette.pollsQuestion, marginBottom: '8px' }, creator: { ...theme.typography.bodyShortRegular, - color: theme.palette.text02 + color: theme.palette.pollsSubtitle }, resultList: { listStyleType: 'none', @@ -38,7 +38,7 @@ const useStyles = makeStyles()(theme => { flexShrink: 1, overflowWrap: 'anywhere', ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.pollsAnswer, marginBottom: '4px' }, answerResultContainer: { @@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => { minWidth: '10em' }, barContainer: { - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.pollsBarBackground, borderRadius: '4px', height: '6px', maxWidth: '160px', @@ -65,7 +65,7 @@ const useStyles = makeStyles()(theme => { flex: 1, textAlign: 'right', ...theme.typography.bodyShortBold, - color: theme.palette.text01 + color: theme.palette.pollsBarPercentage }, voters: { margin: 0, @@ -73,13 +73,13 @@ const useStyles = makeStyles()(theme => { listStyleType: 'none', display: 'flex', flexDirection: 'column', - backgroundColor: theme.palette.ui03, + backgroundColor: theme.palette.pollsVotersBackground, borderRadius: theme.shape.borderRadius, padding: '8px 16px', '& li': { ...theme.typography.bodyShortRegular, - color: theme.palette.text01, + color: theme.palette.pollsVotersText, margin: 0, marginBottom: '2px', diff --git a/react/features/polls/components/web/PollsList.tsx b/react/features/polls/components/web/PollsList.tsx index f9e49d822d..24e19827d1 100644 --- a/react/features/polls/components/web/PollsList.tsx +++ b/react/features/polls/components/web/PollsList.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles()(theme => { }, emptyMessage: { ...theme.typography.bodyLongBold, - color: theme.palette.text02, + color: theme.palette.pollsSubtitle, padding: '0 24px', textAlign: 'center' } diff --git a/react/features/prejoin/components/web/Prejoin.tsx b/react/features/prejoin/components/web/Prejoin.tsx index 544025803c..fe87abe3ff 100644 --- a/react/features/prejoin/components/web/Prejoin.tsx +++ b/react/features/prejoin/components/web/Prejoin.tsx @@ -164,14 +164,14 @@ const useStyles = makeStyles()(theme => { avatarName: { ...theme.typography.bodyShortBoldLarge, - color: theme.palette.text01, + color: theme.palette.prejoinTitleText, marginBottom: theme.spacing(5), textAlign: 'center' }, error: { - backgroundColor: theme.palette.actionDanger, - color: theme.palette.text01, + backgroundColor: theme.palette.prejoinActionButtonDanger, + color: theme.palette.prejoinActionButtonPrimaryText, borderRadius: theme.shape.borderRadius, width: '100%', ...theme.typography.labelRegular, @@ -190,8 +190,8 @@ const useStyles = makeStyles()(theme => { dropdownButtons: { width: '300px', padding: '8px 0', - backgroundColor: theme.palette.action02, - color: theme.palette.text04, + backgroundColor: theme.palette.prejoinActionButtonSecondary, + color: theme.palette.prejoinActionButtonSecondaryText, borderRadius: theme.shape.borderRadius, position: 'relative', top: `-${theme.spacing(3)}`, diff --git a/react/features/prejoin/components/web/country-picker/CountryDropdown.tsx b/react/features/prejoin/components/web/country-picker/CountryDropdown.tsx index 82df4c2b20..abec4a075c 100644 --- a/react/features/prejoin/components/web/country-picker/CountryDropdown.tsx +++ b/react/features/prejoin/components/web/country-picker/CountryDropdown.tsx @@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => { height: '190px', width: '343px', overflowY: 'auto', - backgroundColor: theme.palette.ui01 + backgroundColor: theme.palette.prejoinCountryPickerBackground } }; }); diff --git a/react/features/prejoin/components/web/country-picker/CountryPicker.tsx b/react/features/prejoin/components/web/country-picker/CountryPicker.tsx index b16800b523..fee251f3f2 100644 --- a/react/features/prejoin/components/web/country-picker/CountryPicker.tsx +++ b/react/features/prejoin/components/web/country-picker/CountryPicker.tsx @@ -47,7 +47,7 @@ const useStyles = makeStyles()(theme => { border: 0, borderRadius: theme.shape.borderRadius, display: 'flex', - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.prejoinCountryPickerBorder }, input: { @@ -55,7 +55,7 @@ const useStyles = makeStyles()(theme => { margin: 0, border: 0, background: 'transparent', - color: theme.palette.text01, + color: theme.palette.prejoinCountryPickerText, flexGrow: 1, ...theme.typography.bodyShortRegular } diff --git a/react/features/prejoin/components/web/country-picker/CountryRow.tsx b/react/features/prejoin/components/web/country-picker/CountryRow.tsx index 2b4e60dc53..972fccc064 100644 --- a/react/features/prejoin/components/web/country-picker/CountryRow.tsx +++ b/react/features/prejoin/components/web/country-picker/CountryRow.tsx @@ -21,10 +21,10 @@ const useStyles = makeStyles()(theme => { display: 'flex', padding: '10px', alignItems: 'center', - backgroundColor: theme.palette.action03, + backgroundColor: theme.palette.prejoinCountryRowBackground, '&:hover': { - backgroundColor: theme.palette.action03Hover + backgroundColor: theme.palette.prejoinCountryRowHover } }, @@ -33,7 +33,7 @@ const useStyles = makeStyles()(theme => { }, text: { - color: theme.palette.text01, + color: theme.palette.prejoinCountryPickerText, ...theme.typography.bodyShortRegular, flexGrow: 1, overflow: 'hidden', diff --git a/react/features/prejoin/components/web/country-picker/CountrySelector.tsx b/react/features/prejoin/components/web/country-picker/CountrySelector.tsx index 97db7c7c0c..66a8bf86bf 100644 --- a/react/features/prejoin/components/web/country-picker/CountrySelector.tsx +++ b/react/features/prejoin/components/web/country-picker/CountrySelector.tsx @@ -24,9 +24,9 @@ const useStyles = makeStyles()(theme => { display: 'flex', alignItems: 'center', cursor: 'pointer', - backgroundColor: theme.palette.ui01, - borderRight: `1px solid ${theme.palette.ui03}`, - color: theme.palette.text01, + backgroundColor: theme.palette.prejoinCountryPickerBackground, + borderRight: `1px solid ${theme.palette.prejoinCountryPickerBorder}`, + color: theme.palette.prejoinCountryPickerText, ...theme.typography.bodyShortRegular, position: 'relative', width: '88px', diff --git a/react/features/prejoin/components/web/preview/DeviceStatus.tsx b/react/features/prejoin/components/web/preview/DeviceStatus.tsx index b485621f82..2c748137e7 100644 --- a/react/features/prejoin/components/web/preview/DeviceStatus.tsx +++ b/react/features/prejoin/components/web/preview/DeviceStatus.tsx @@ -25,9 +25,9 @@ const useStyles = makeStyles<{ deviceStatusType?: string; }>()((theme, { deviceS '&.device-status-error': { alignItems: 'flex-start', - backgroundColor: theme.palette.warning01, + backgroundColor: theme.palette.prejoinDeviceStatusWarning, borderRadius: '6px', - color: theme.palette.uiBackground, + color: theme.palette.prejoinDeviceStatusText, padding: '12px 16px', textAlign: 'left', marginTop: theme.spacing(2) @@ -41,7 +41,7 @@ const useStyles = makeStyles<{ deviceStatusType?: string; }>()((theme, { deviceS width: '16px', height: '16px', borderRadius: '100%', - backgroundColor: deviceStatusType === 'ok' ? theme.palette.success01 : ColorPalette.darkGrey, + backgroundColor: deviceStatusType === 'ok' ? theme.palette.prejoinDeviceStatusOk : ColorPalette.darkGrey, flexShrink: 0 } }; diff --git a/react/features/reactions/components/web/ReactionsMenu.tsx b/react/features/reactions/components/web/ReactionsMenu.tsx index 8266a08565..39315c292a 100644 --- a/react/features/reactions/components/web/ReactionsMenu.tsx +++ b/react/features/reactions/components/web/ReactionsMenu.tsx @@ -113,7 +113,7 @@ const useStyles = makeStyles()((theme, props: IProps) => { overflow: { width: 'auto', paddingBottom: 'max(env(safe-area-inset-bottom, 0), 16px)', - backgroundColor: theme.palette.ui01, + backgroundColor: theme.palette.reactionsMenuBackground, boxShadow: 'none', borderRadius: 0, position: 'relative', diff --git a/react/features/recording/components/Recording/web/HighlightButton.tsx b/react/features/recording/components/Recording/web/HighlightButton.tsx index 85b0023092..e9abb0c400 100644 --- a/react/features/recording/components/Recording/web/HighlightButton.tsx +++ b/react/features/recording/components/Recording/web/HighlightButton.tsx @@ -60,17 +60,17 @@ const styles = (theme: Theme) => { position: 'relative' as const }, disabled: { - background: theme.palette.text02 + background: theme.palette.recordingHighlightButtonDisabled }, regular: { - background: theme.palette.ui10 + background: theme.palette.recordingHighlightButton }, highlightNotification: { - backgroundColor: theme.palette.ui10, + backgroundColor: theme.palette.recordingHighlightButton, borderRadius: '6px', boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)', boxSizing: 'border-box' as const, - color: theme.palette.uiBackground, + color: theme.palette.recordingNotificationText, fontSize: '0.875rem', fontWeight: 400, left: '4px', @@ -80,7 +80,7 @@ const styles = (theme: Theme) => { width: 320 }, highlightNotificationButton: { - color: theme.palette.action01, + color: theme.palette.recordingNotificationAction, cursor: 'pointer', fontWeight: 600, marginTop: '8px' @@ -203,7 +203,7 @@ export class HighlightButton extends AbstractHighlightButton {