fix(design-system) Remove tokens that are not part of DS (#13122)

Replace tokens with ones that are part of the Design System and are either the same or very similar
2 years ago · 1bf0bd6bca
parent 5706d077e2
commit 1bf0bd6bca
33 changed files with 74 additions and 191 deletions
--- a/config.js
+++ b/config.js
@ -1277,7 +1277,6 @@ var config = {
                ui03: "violet",
                ui04: "magenta",
                ui05: "blueviolet",
-                field02Hover: 'red',
                action01: 'green',
                action01Hover: 'lightgreen',
                disabled01: 'beige',
--- a/react/features/base/dialog/components/native/styles.js
+++ b/react/features/base/dialog/components/native/styles.js
@ -113,7 +113,7 @@ export const bottomSheetStyles = {
        /**
         * Additional style that is not directly used as a style object.
         */
-        underlayColor: BaseTheme.palette.underlay01
+        underlayColor: BaseTheme.palette.ui04
    },

    /**
@ -136,17 +136,17 @@ export const bottomSheetStyles = {
     * Bottom sheet's background color with footer.
     */
    sheetFooter: {
-        backgroundColor: BaseTheme.palette.bottomSheet
+        backgroundColor: BaseTheme.palette.ui01
    }
 };

 export default {
    dialogButton: {
-        ...BaseTheme.typography.labelButton
+        ...BaseTheme.typography.bodyLongBold
    },

    destructiveDialogButton: {
-        ...BaseTheme.typography.labelButton,
+        ...BaseTheme.typography.bodyLongBold,
        color: BaseTheme.palette.actionDanger
    }
 };
@ -258,7 +258,7 @@ ColorSchemeRegistry.register('Dialog', {
    },

    topBorderContainer: {
-        borderTopColor: BaseTheme.palette.dividerColor,
+        borderTopColor: BaseTheme.palette.ui07,
        borderTopWidth: 1
    }
 });
--- a/react/features/base/ui/Tokens.ts
+++ b/react/features/base/ui/Tokens.ts
@ -42,21 +42,7 @@ export const colors = {
    support06: '#6A50D3',
    support07: '#4380E2',
    support08: '#00A8B3',
-    support09: '#2AA076',
-
-    // The following tokens are not in the Design System and they should be removed
-    // after we replace them in the components.
-    primary10: '#17A0DB',
-    primary11: '#1081B2',
-    surface00: '#111111',
-    surface12: '#AAAAAA',
-    surface13: '#495258',
-    surface14: '#555555',
-    surface15: '#474747',
-    surface16: '#131519',
-    surface17: '#161618',
-    warning07: '#FFD740',
-    disabled01: '#00000040'
+    support09: '#2AA076'
 };

 // Mapping between the token used and the color
@ -170,48 +156,7 @@ export const colorMap = {
    support06: 'support06',
    support07: 'support07',
    support08: 'support08',
-    support09: 'support09',
-
-    // The following mappings are not in the Design System and they should be removed
-    // after we replace them in the components.
-    ui00: 'surface00',
-    ui12: 'surface11',
-    ui13: 'surface14',
-    ui14: 'surface15',
-    ui15: 'surface12',
-    ui16: 'surface16',
-    action04: 'primary11',
-    action03Focus: 'surface07',
-    action03Disabled: 'transparent',
-    actionDisabled: 'surface09',
-    icon05: 'surface04',
-    text05: 'surface06',
-    text06: 'surface03',
-    text07Info: 'surface02',
-    screen01Header: 'primary10',
-    screen02Header: 'surface17',
-    underlay01: 'surface13',
-    bottomSheet: 'surface00',
-    dividerColor: 'surface12',
-    indicatorColor: 'surface12',
-    section01: 'surface10',
-    border01: 'surface08',
-    border02: 'surface06',
-    border03: 'surface04',
-    border05: 'surface07',
-    borderError: 'error06',
-    warning03: 'warning07',
-    tab01Disabled: 'disabled01',
-    switch01Enabled: 'success04',
-    switch01Disabled: 'surface06',
-    video01Disabled: 'disabled01',
-    field01Hover: 'surface03',
-    field01Focus: 'primary05',
-    field01Disabled: 'surface05',
-    field02: 'surface11',
-    field02Hover: 'primary09',
-    field02Focus: 'primary05',
-    field02Disabled: 'surface06'
+    support09: 'support09'
 };


@ -339,30 +284,6 @@ export const typography = {
        lineHeight: 26,
        fontWeight: font.weightSemiBold,
        letterSpacing: 0
-    },
-
-
-    // These styles are no longer part of the Design System.
-    // They should be replaced and removed.
-    heading7: {
-        fontSize: 14,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
-    },
-
-    labelButton: {
-        fontSize: 14,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
-    },
-
-    labelButtonLarge: {
-        fontSize: 16,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
    }
 };

--- a/react/features/base/ui/components/native/Switch.tsx
+++ b/react/features/base/ui/components/native/Switch.tsx
@ -41,6 +41,7 @@ const Switch = ({
 }: IProps) => (
    <NativeSwitch
        disabled = { disabled }
+        ios_backgroundColor = { DISABLED_TRACK_COLOR }
        onValueChange = { onChange }
        style = { style }
        thumbColor = { thumbColor }
--- a/react/features/base/ui/components/native/buttonStyles.ts
+++ b/react/features/base/ui/components/native/buttonStyles.ts
@ -35,7 +35,7 @@ export default {

    buttonDisabled: {
        ...button,
-        backgroundColor: BaseTheme.palette.actionDisabled
+        backgroundColor: BaseTheme.palette.ui08
    },

    buttonLabelPrimary: {
--- a/react/features/base/ui/components/native/switchStyles.ts
+++ b/react/features/base/ui/components/native/switchStyles.ts
@ -1,5 +1,5 @@
 import BaseTheme from '../BaseTheme.native';

 export const ENABLED_TRACK_COLOR = BaseTheme.palette.action01;
-export const DISABLED_TRACK_COLOR = BaseTheme.palette.switch01Disabled;
+export const DISABLED_TRACK_COLOR = BaseTheme.palette.ui05;
 export const THUMB_COLOR = BaseTheme.palette.icon01;
--- a/react/features/conference/components/native/carmode/AudioIcon.tsx
+++ b/react/features/conference/components/native/carmode/AudioIcon.tsx
@ -11,7 +11,7 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 *
 */
 const AudioIcon = (): JSX.Element => (<Icon
-    color = { BaseTheme.palette.text06 }
+    color = { BaseTheme.palette.ui02 }
    size = { 20 }
    src = { IconVolumeUp } />);

--- a/react/features/display-name/components/native/styles.js
+++ b/react/features/display-name/components/native/styles.js
@ -5,7 +5,7 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 export default {
    displayNameBackdrop: {
        alignSelf: 'center',
-        backgroundColor: BaseTheme.palette.ui16,
+        backgroundColor: BaseTheme.palette.ui01,
        borderRadius: BaseTheme.shape.borderRadius,
        paddingHorizontal: BaseTheme.spacing[3],
        paddingVertical: BaseTheme.spacing[1]
--- a/react/features/etherpad/components/native/styles.js
+++ b/react/features/etherpad/components/native/styles.js
@ -3,18 +3,18 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';


-export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
+export const INDICATOR_COLOR = BaseTheme.palette.ui07;

 export default {
    indicatorWrapper: {
        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
        height: '100%',
        justifyContent: 'center'
    },

    sharedDocContainer: {
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
        flex: 1,
        paddingRight: BaseTheme.spacing[3]
    },
@ -24,6 +24,6 @@ export default {
    },

    webView: {
-        backgroundColor: BaseTheme.palette.ui12
+        backgroundColor: BaseTheme.palette.ui10
    }
 };
--- a/react/features/filmstrip/components/native/styles.js
+++ b/react/features/filmstrip/components/native/styles.js
@ -105,7 +105,7 @@ export default {
    thumbnail: {
        alignItems: 'stretch',
        backgroundColor: BaseTheme.palette.ui02,
-        borderColor: BaseTheme.palette.border03,
+        borderColor: BaseTheme.palette.ui03,
        borderRadius: BaseTheme.shape.borderRadius,
        borderStyle: 'solid',
        borderWidth: 1,
--- a/react/features/invite/components/add-people-dialog/native/styles.js
+++ b/react/features/invite/components/add-people-dialog/native/styles.js
@ -29,7 +29,7 @@ export default {
    bottomBar: {
        alignItems: 'center',
        justifyContent: 'center',
-        backgroundColor: BaseTheme.palette.screen02Header,
+        backgroundColor: BaseTheme.palette.ui01,
        height: BaseTheme.spacing[10]
    },

@ -93,7 +93,7 @@ export default {
    },

    separator: {
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        borderBottomColor: BaseTheme.palette.ui07,
        borderBottomWidth: 1,
        marginLeft: 85
    },
--- a/react/features/invite/components/dial-in-summary/native/styles.js
+++ b/react/features/invite/components/dial-in-summary/native/styles.js
@ -2,9 +2,9 @@

 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';

-export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
+export const INDICATOR_COLOR = BaseTheme.palette.ui07;

-const WV_BACKGROUND = BaseTheme.palette.ui14;
+const WV_BACKGROUND = BaseTheme.palette.ui03;

 export default {

@ -15,7 +15,7 @@ export default {

    indicatorWrapper: {
        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
        height: '100%',
        justifyContent: 'center'
    },
--- a/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js
+++ b/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js
@ -251,7 +251,7 @@ class AudioRoutePickerDialog extends Component<Props, State> {
                key = { device.type }
                onPress = { this._onSelectDeviceFn(device) }
                style = { speakerDeviceIsNotSelected && borderRadiusHighlightStyles }
-                underlayColor = { BaseTheme.palette.underlay01 } >
+                underlayColor = { BaseTheme.palette.ui04 } >
                <View style = { styles.deviceRow } >
                    <Icon
                        src = { icon }
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@ -43,7 +43,7 @@ export const welcomeScreenOptions = {
    gestureEnabled: false,
    headerShown: true,
    headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
    },
    headerTitleStyle: {
        color: BaseTheme.palette.text01
@ -65,7 +65,7 @@ export const chatTabBarOptions = {
    },
    tabBarStyle: {
        backgroundColor: BaseTheme.palette.ui01,
-        borderBottomColor: BaseTheme.palette.border05,
+        borderBottomColor: BaseTheme.palette.ui06,
        borderBottomWidth: 0.4
    }
 };
@ -79,7 +79,7 @@ export const presentationScreenOptions = {
    headerLeft: () => screenHeaderCloseButton(goBack),
    headerStatusBarHeight: 0,
    headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
    },
    headerTitleStyle: {
        color: BaseTheme.palette.text01
@ -184,7 +184,7 @@ export const connectingScreenOptions = {
 export const preJoinScreenOptions = {
    gestureEnabled: false,
    headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
    },
    headerTitleStyle: {
        color: BaseTheme.palette.text01
--- a/react/features/notifications/components/native/styles.js
+++ b/react/features/notifications/components/native/styles.js
@ -10,7 +10,7 @@ const contentColumn = {

 const notification = {
    display: 'flex',
-    backgroundColor: BaseTheme.palette.ui12,
+    backgroundColor: BaseTheme.palette.ui10,
    borderRadius: BaseTheme.shape.borderRadius,
    borderLeftColor: BaseTheme.palette.link01Active,
    borderLeftWidth: 4,
--- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
@ -88,8 +88,8 @@ const useStyles = makeStyles()(theme => {
        roomName: {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap', // @ts-ignore
-            ...withPixelLineHeight(theme.typography.labelButton),
+            whiteSpace: 'nowrap',
+            ...withPixelLineHeight(theme.typography.bodyLongBold),
            padding: '12px 0'
        },

--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@ -85,7 +85,7 @@ export default {

    participantContent: {
        alignItems: 'center',
-        borderBottomColor: BaseTheme.palette.field01Hover,
+        borderBottomColor: BaseTheme.palette.ui02,
        borderBottomWidth: 2.4,
        display: 'flex',
        flexDirection: 'row',
@ -247,8 +247,8 @@ export default {

    contextMenuItemSectionAvatar: {
        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.bottomSheet,
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        backgroundColor: BaseTheme.palette.ui01,
+        borderBottomColor: BaseTheme.palette.ui07,
        borderBottomWidth: 1,
        borderTopLeftRadius: BaseTheme.spacing[3],
        borderTopRightRadius: BaseTheme.spacing[3],
@ -276,7 +276,7 @@ export default {
    },

    divider: {
-        backgroundColor: BaseTheme.palette.dividerColor
+        backgroundColor: BaseTheme.palette.ui07
    },

    inputContainer: {
--- a/react/features/participants-pane/components/web/LobbyParticipants.tsx
+++ b/react/features/participants-pane/components/web/LobbyParticipants.tsx
@ -49,8 +49,7 @@ const useStyles = makeStyles()(theme => {
            justifyContent: 'space-between'
        },
        heading: {
-            // @ts-ignore
-            ...withPixelLineHeight(theme.typography.heading7),
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
            color: theme.palette.text02
        },
        link: {
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@ -34,14 +34,11 @@ const useStyles = makeStyles()(theme => {
        },
        heading: {
            color: theme.palette.text02,
-
-            // @ts-ignore
-            ...withPixelLineHeight(theme.typography.labelButton),
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
            margin: `8px 0 ${participantsPaneTheme.panePadding}px`,

            [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                // @ts-ignore
-                ...withPixelLineHeight(theme.typography.labelButtonLarge)
+                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
            }
        },

--- a/react/features/polls/components/native/styles.js
+++ b/react/features/polls/components/native/styles.js
@ -40,7 +40,7 @@ export const dialogStyles = createStyleSheet({

    field: {
        borderWidth: 1,
-        borderColor: BaseTheme.palette.border05,
+        borderColor: BaseTheme.palette.ui06,
        borderRadius: BaseTheme.shape.borderRadius,
        color: BaseTheme.palette.text01,
        fontSize: 14,
@ -131,7 +131,7 @@ export const chatStyles = createStyleSheet({

    pollItemContainer: {
        backgroundColor: BaseTheme.palette.uiBackground,
-        borderColor: BaseTheme.palette.border05,
+        borderColor: BaseTheme.palette.ui06,
        borderRadius: BaseTheme.shape.borderRadius,
        boxShadow: BaseTheme.shape.boxShadow,
        borderWidth: 1,
--- a/react/features/recording/components/LiveStream/native/styles.js
+++ b/react/features/recording/components/LiveStream/native/styles.js
@ -11,7 +11,7 @@ export const ACTIVE_OPACITY = 0.3;
 /**
 * Underlay of the TouchableHighlight.
 */
-export const TOUCHABLE_UNDERLAY = BaseTheme.palette.action03Focus;
+export const TOUCHABLE_UNDERLAY = BaseTheme.palette.ui06;

 /**
 * The styles of the React {@code Components} of LiveStream.
@ -116,14 +116,14 @@ export default createStyleSheet({
     * Additional style for the selected item.
     */
    streamKeyPickerItemHighlight: {
-        backgroundColor: BaseTheme.palette.ui13
+        backgroundColor: BaseTheme.palette.ui04
    },

    /**
     * Overall wrapper for the picker.
     */
    streamKeyPickerWrapper: {
-        borderColor: BaseTheme.palette.dividerColor,
+        borderColor: BaseTheme.palette.ui07,
        borderRadius: 3,
        borderWidth: 1,
        flexDirection: 'column'
--- a/react/features/recording/components/Recording/styles.native.js
+++ b/react/features/recording/components/Recording/styles.native.js
@ -9,7 +9,7 @@ export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
 export const ICON_INFO = require('../../../../../images/icon-info.png');
 export const ICON_USERS = require('../../../../../images/icon-users.png');
 export const LOCAL_RECORDING = require('../../../../../images/downloadLocalRecording.png');
-export const TRACK_COLOR = BaseTheme.palette.ui15;
+export const TRACK_COLOR = BaseTheme.palette.ui07;


 // XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
@ -60,7 +60,7 @@ export default {
        marginRight: 12
    },
    highlightButton: {
-        backgroundColor: BaseTheme.palette.section01,
+        backgroundColor: BaseTheme.palette.ui09,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: BaseTheme.spacing[0],
@ -125,7 +125,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {

    headerInfo: {
        ...header,
-        backgroundColor: BaseTheme.palette.warning03,
+        backgroundColor: BaseTheme.palette.warning02,
        marginBottom: BaseTheme.spacing[4],
        paddingHorizontal: BaseTheme.spacing[3]
    },
@ -147,7 +147,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
    },

    switch: {
-        color: BaseTheme.palette.ui12
+        color: BaseTheme.palette.ui10
    },

    title: {
@ -156,7 +156,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {

    titleInfo: {
        ...title,
-        color: BaseTheme.palette.text07Info
+        color: BaseTheme.palette.ui01
    },

    text: {
--- a/react/features/recording/components/Recording/web/HighlightButton.tsx
+++ b/react/features/recording/components/Recording/web/HighlightButton.tsx
@ -62,11 +62,11 @@ const styles = (theme: Theme) => {
        disabled: {
            background: theme.palette.text02
        },
-        regular: { // @ts-ignore
-            background: theme.palette.field02
+        regular: {
+            background: theme.palette.ui10
        },
-        highlightNotification: { // @ts-ignore
-            backgroundColor: theme.palette.field02,
+        highlightNotification: {
+            backgroundColor: theme.palette.ui10,
            borderRadius: '6px',
            boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
            boxSizing: 'border-box' as const,
@ -79,8 +79,8 @@ const styles = (theme: Theme) => {
            top: '32px',
            width: 320
        },
-        highlightNotificationButton: { // @ts-ignore
-            color: theme.palette.field01Focus,
+        highlightNotificationButton: {
+            color: theme.palette.action01,
            cursor: 'pointer',
            fontWeight: '600',
            marginTop: '8px'
--- a/react/features/salesforce/components/native/styles.js
+++ b/react/features/salesforce/components/native/styles.js
@ -83,7 +83,7 @@ export default {
        padding: BaseTheme.spacing[3]
    },
    addNote: {
-        color: BaseTheme.palette.field02,
+        color: BaseTheme.palette.text01,
        margin: BaseTheme.spacing[3]
    },
    notes: {
@ -92,7 +92,7 @@ export default {
        borderColor: BaseTheme.palette.ui05,
        borderRadius: BaseTheme.shape.borderRadius,
        borderWidth: 1,
-        color: BaseTheme.palette.field02,
+        color: BaseTheme.palette.text01,
        lineHeight: 18,
        marginHorizontal: BaseTheme.spacing[3],
        marginVertical: BaseTheme.spacing[2],
--- a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx
+++ b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx
@ -116,9 +116,7 @@ const useStyles = makeStyles()(theme => {
            border: '1px solid',
            borderColor: theme.palette.ui05,
            backgroundColor: theme.palette.field01,
-
-            // @ts-ignore
-            color: theme.palette.field02,
+            color: theme.palette.text01,
            borderRadius: theme.shape.borderRadius,
            padding: '10px 16px'
        }
--- a/react/features/security/components/security-dialog/native/styles.js
+++ b/react/features/security/components/security-dialog/native/styles.js
@ -17,7 +17,7 @@ export default {
    },

    lobbyModeContainer: {
-        borderBottomColor: BaseTheme.palette.border01,
+        borderBottomColor: BaseTheme.palette.ui07,
        borderBottomWidth: 1,
        marginTop: BaseTheme.spacing[4]
    },
--- a/react/features/toolbox/components/native/styles.js
+++ b/react/features/toolbox/components/native/styles.js
@ -66,7 +66,7 @@ const reactionMenu = {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
-    backgroundColor: BaseTheme.palette.bottomSheet,
+    backgroundColor: BaseTheme.palette.ui01,
    padding: BaseTheme.spacing[3]
 };

@ -129,7 +129,7 @@ ColorSchemeRegistry.register('Toolbox', {
    },

    backgroundToggle: {
-        backgroundColor: BaseTheme.palette.ui13
+        backgroundColor: BaseTheme.palette.ui04
    },

    hangupMenuContainer: {
@ -149,7 +149,7 @@ ColorSchemeRegistry.register('Toolbox', {
            ...toolbarButton,
            backgroundColor: schemeColor('hangup')
        },
-        underlayColor: BaseTheme.palette.underlay01
+        underlayColor: BaseTheme.palette.ui04
    },

    reactionDialog: {
@ -177,7 +177,7 @@ ColorSchemeRegistry.register('Toolbox', {
    reactionButton: {
        gifButton,
        style: reactionButton,
-        underlayColor: BaseTheme.palette.ui13,
+        underlayColor: BaseTheme.palette.ui04,
        emoji: reactionEmoji
    },

--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@ -104,13 +104,13 @@ class VolumeSlider extends PureComponent<Props, State> {
                    size = { 24 }
                    src = { IconVolumeUp } />
                <Slider
-                    maximumTrackTintColor = { palette.field02 }
+                    maximumTrackTintColor = { palette.ui10 }
                    maximumValue = { VOLUME_SLIDER_SCALE }
                    minimumTrackTintColor = { palette.action01 }
                    minimumValue = { 0 }
                    onValueChange = { onVolumeChange }
                    style = { styles.sliderContainer }
-                    thumbTintColor = { palette.field02 }
+                    thumbTintColor = { palette.ui10 }
                    value = { volumeLevel } />
            </View>

--- a/react/features/video-menu/components/native/styles.js
+++ b/react/features/video-menu/components/native/styles.js
@ -11,7 +11,7 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 export default createStyleSheet({
    participantNameContainer: {
        alignItems: 'center',
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        borderBottomColor: BaseTheme.palette.ui07,
        borderBottomWidth: 0.4,
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
@ -66,11 +66,11 @@ export default createStyleSheet({
    },

    divider: {
-        backgroundColor: BaseTheme.palette.dividerColor
+        backgroundColor: BaseTheme.palette.ui07
    },

    dividerDialog: {
-        backgroundColor: BaseTheme.palette.dividerColor,
+        backgroundColor: BaseTheme.palette.ui07,
        marginBottom: BaseTheme.spacing[3]
    },

--- a/react/features/video-quality/components/Slider.web.tsx
+++ b/react/features/video-quality/components/Slider.web.tsx
@ -51,8 +51,8 @@ const useStyles = makeStyles()(theme => {
        width: 24
    };

-    const focused = { // @ts-ignore
-        outline: `1px solid ${theme.palette.action03Focus}`
+    const focused = {
+        outline: `1px solid ${theme.palette.ui06}`
    };

    return {
--- a/react/features/welcome/components/styles.js
+++ b/react/features/welcome/components/styles.js
@ -135,7 +135,7 @@ export default {
     */
    reducedUIContainer: {
        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.screen01Header,
+        backgroundColor: BaseTheme.palette.link01,
        flex: 1,
        justifyContent: 'center'
    },
@ -166,7 +166,7 @@ export default {
     */
    textInput: {
        backgroundColor: 'transparent',
-        borderColor: BaseTheme.palette.field02,
+        borderColor: BaseTheme.palette.ui10,
        borderRadius: 4,
        borderWidth: 1,
        color: TEXT_COLOR,
@ -193,13 +193,13 @@ export default {
    },

    insecureRoomNameWarningIcon: {
-        color: BaseTheme.palette.warning03,
+        color: BaseTheme.palette.warning02,
        fontSize: 24,
        marginRight: 10
    },

    insecureRoomNameWarningText: {
-        color: BaseTheme.palette.warning03,
+        color: BaseTheme.palette.warning02,
        flex: 1
    },

--- a/react/features/welcome/constants.tsx
+++ b/react/features/welcome/constants.tsx
@ -16,8 +16,8 @@ export const tabBarOptions = {
    tabBarLabelStyle: {
        fontSize: 12
    },
-    tabBarStyle: { // @ts-ignore
-        backgroundColor: BaseTheme.palette.screen02Header
+    tabBarStyle: {
+        backgroundColor: BaseTheme.palette.ui01
    }
 };

--- a/resources/custom-theme/custom-theme.json
+++ b/resources/custom-theme/custom-theme.json
@ -16,7 +16,6 @@
      "ui04": "#525252",
      "ui05": "#666",
      "action01": "#0056E0",
-      "screen01Header": "#17A0DB",
      "action01Hover": "#246FE5",
      "action01Active": "#0045B3",
      "disabled01": "#00225A",
@ -26,8 +25,6 @@
      "action03": "transparent",
      "action03Hover": "#525252",
      "action03Active": "#292929",
-      "action03Focus": "#858585",
-      "action03Disabled": "transparent",
      "actionDanger": "#CB2233",
      "actionDangerHover": "#E04757",
      "actionDangerActive": "#A21B29",
@ -42,17 +39,6 @@
      "icon03": "#858585",
      "iconError": "#E04757",
      "field01": "#040404",
-      "field01Hover": "#292929",
-      "field01Focus": "#0056E0",
-      "field01Disabled": "#525252",
-      "field02": "#FFF",
-      "dividerColor": "#AAAAAA",
-      "field02Hover": "#CCDDF9",
-      "field02Focus": "#0056E0",
-      "field02Disabled": "#666",
-      "section01": "#E0E0E0",
-      "border01": "#A3A3A3",
-      "borderError": "#E04757",
      "link01": "#669AEC",
      "link01Hover": "#99BBF3",
      "link01Active": "#246FE5",
@ -87,18 +73,6 @@
         "fontWeight": "600",
         "letterSpacing": 0.16
      },
-      "labelButton": {
-         "fontSize": 14,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
-      },
-      "labelButtonLarge": {
-         "fontSize": 16,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
-      },
      "bodyShortRegular": {
         "fontSize": 14,
         "lineHeight": 18,
@ -170,12 +144,6 @@
         "lineHeight": 26,
         "fontWeight": "600",
         "letterSpacing": 0
-      },
-      "heading7": {
-         "fontSize": 14,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
      }
   },
   "shape": {