fix(theme) Fix tokens (#11822)

Fix elements to use correct tokens

config.js

@@ -1134,7 +1134,7 @@ var config = {
                 field02Hover: 'red',
                 action01: 'green',
                 action01Hover: 'lightgreen',
-                action02Disabled: 'beige',
+                disabled01: 'beige',
                 success02: 'cadetblue',
                 action02Hover: 'aliceblue'
             },

react/features/base/components/participants-pane-list/ListItem.js

@@ -92,7 +92,7 @@ const useStyles = makeStyles(theme => {
             minHeight: '40px',
 
             '&:hover': {
-                backgroundColor: theme.palette.action02Active,
+                backgroundColor: theme.palette.ui02,
 
                 '& .indicators': {
                     display: 'none'
@@ -100,8 +100,8 @@ const useStyles = makeStyles(theme => {
 
                 '& .actions': {
                     display: 'flex',
-                    boxShadow: `-15px 0px 10px -5px ${theme.palette.action02Active}`,
-                    backgroundColor: theme.palette.action02Active
+                    boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
+                    backgroundColor: theme.palette.ui02
                 }
             },
 
@@ -113,7 +113,7 @@ const useStyles = makeStyles(theme => {
         },
 
         highlighted: {
-            backgroundColor: theme.palette.action02Active
+            backgroundColor: theme.palette.ui02
         },
 
         detailsContainer: {
@@ -159,8 +159,8 @@ const useStyles = makeStyles(theme => {
 
         actionsContainer: {
             display: 'none',
-            boxShadow: `-15px 0px 10px -5px ${theme.palette.action02Active}`,
-            backgroundColor: theme.palette.action02Active
+            boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
+            backgroundColor: theme.palette.ui02
         },
 
         actionsPermanent: {
@@ -171,8 +171,8 @@ const useStyles = makeStyles(theme => {
 
         actionsVisible: {
             display: 'flex',
-            boxShadow: `-15px 0px 10px -5px ${theme.palette.action02Active}`,
-            backgroundColor: theme.palette.action02Active
+            boxShadow: `-15px 0px 10px -5px ${theme.palette.ui02}`,
+            backgroundColor: theme.palette.ui02
         }
     };
 });

react/features/base/dialog/components/web/ModalHeader.js

@@ -61,7 +61,7 @@ const styles = theme => {
             },
 
             '&:hover': {
-                background: theme.palette.action02
+                background: theme.palette.ui04
             }
         },
         header: {

react/features/base/premeeting/components/web/ActionButton.js

@@ -130,7 +130,7 @@ const styles = theme => {
             },
 
             '&.disabled': {
-                background: theme.palette.action01Disabled,
+                background: theme.palette.disabled01,
                 border: '1px solid #5E6D7A',
                 color: '#AFB6BC',
                 cursor: 'initial',

react/features/base/react/components/native/IconButton.tsx

@@ -31,7 +31,7 @@ const IconButton: React.FC<IconButtonProps> = ({
         iconButtonContainerStyles = styles.iconButtonContainerPrimary;
         rippleColor = BaseTheme.palette.action01;
     } else if (type === SECONDARY) {
-        color = BaseTheme.palette.icon02;
+        color = BaseTheme.palette.icon04;
         iconButtonContainerStyles = styles.iconButtonContainerSecondary;
         rippleColor = BaseTheme.palette.action02;
     } else if (type === TERTIARY) {

react/features/base/react/components/native/styles.js

@@ -188,7 +188,7 @@ export default {
 
     buttonLabelSecondary: {
         ...buttonLabel,
-        color: BaseTheme.palette.text02
+        color: BaseTheme.palette.text0
     },
 
     buttonLabelDestructive: {

react/features/base/ui/Tokens.ts

@@ -1,12 +1,10 @@
-// @flow
-
 // Default color palette
 export const colors = {
     error03: '#7A141F',
     error04: '#A21B29',
     error05: '#CB2233',
-    error06: '#E04757',
-    error08: '#EAA7AD',
+    error06: '#D83848',
+    error08: '#F24D5F',
 
     primary01: '#00112D',
     primary02: '#00225A',
@@ -14,14 +12,10 @@ export const colors = {
     primary04: '#0045B3',
     primary05: '#0056E0',
     primary06: '#246FE5',
-    primary07: '#669AEC',
+    primary07: '#4687ED',
     primary08: '#99BBF3',
     primary09: '#CCDDF9',
-    primary10: '#17A0DB',
-    primary11: '#1081B2',
-    primary12: '#B8C7E0',
 
-    surface00: '#111111',
     surface01: '#040404',
     surface02: '#141414',
     surface03: '#292929',
@@ -33,21 +27,12 @@ export const colors = {
     surface09: '#C2C2C2',
     surface10: '#E0E0E0',
     surface11: '#FFF',
-    surface12: '#AAAAAA',
-    surface13: '#495258',
-    surface14: '#555555',
-    surface15: '#474747',
-    surface16: '#131519',
-    surface17: '#161618',
 
     success04: '#189B55',
     success05: '#1EC26A',
 
     warning05: '#F8AE1A',
     warning06: '#FFD600',
-    warning07: '#FFD740',
-
-    disabled01: '#00000040',
 
     support01: '#FF9B42',
     support02: '#F96E57',
@@ -57,250 +42,173 @@ export const colors = {
     support06: '#6A50D3',
     support07: '#4380E2',
     support08: '#00A8B3',
-    support09: '#2AA076'
+    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',
+    primary12: '#B8C7E0',
+    surface00: '#111111',
+    surface12: '#AAAAAA',
+    surface13: '#495258',
+    surface14: '#555555',
+    surface15: '#474747',
+    surface16: '#131519',
+    surface17: '#161618',
+    warning07: '#FFD740',
+    disabled01: '#00000040'
 };
 
 // Mapping between the token used and the color
 export const colorMap = {
+    // ----- Surfaces -----
+
     // Default page background
     uiBackground: 'surface01',
 
-    // Container background
-    ui00: 'surface00',
+    // Container backgrounds
     ui01: 'surface02',
     ui02: 'surface03',
     ui03: 'surface04',
     ui04: 'surface05',
     ui05: 'surface06',
-    ui12: 'surface11',
-    ui13: 'surface14',
-    ui14: 'surface15',
-    ui15: 'surface12',
-    ui16: 'surface16',
 
-    // Primary buttons
-    action01: 'primary05',
-    action04: 'primary11',
+    // ----- Actions -----
 
-    // Screen header
-    screen01Header: 'primary10',
-    screen02Header: 'surface17',
-
-    // Status bar
-    status01Bar: 'primary11',
-
-    actionDisabled: 'surface09',
-
-    // Hover state for primary buttons
-    action01Hover: 'primary06',
-
-    // Active state for primary buttons
+    // Primary
+    action01: 'primary06',
+    action01Hover: 'primary07',
     action01Active: 'primary04',
 
-    // Focus border color
-    action01Focus: 'primary08',
-
-    // Disabled state for primary buttons
-    action01Disabled: 'primary02',
-
-    // Secondary buttons
+    // Secondary
     action02: 'surface10',
+    action02Hover: 'surface11',
+    action02Active: 'surface09',
 
-    // Hover state for secondary buttons
-    action02Hover: 'surface05',
-
-    // Active state for secondary buttons
-    action02Active: 'surface03',
-
-    // Focus border color
-    action02Focus: 'surface07',
-
-    // Disabled state for secondary buttons
-    action02Disabled: 'surface02',
-
-    // Tertiary buttons
-    action03: 'transparent',
-
-    // Hover state for tertiary buttons
-    action03Hover: 'surface05',
-
-    // Active state for tertiary buttons
-    action03Active: 'surface03',
-
-    // Focus border color
-    action03Focus: 'surface07',
-
-    // Disabled state for tertiary buttons
-    action03Disabled: 'transparent',
-
-    // Danger button background
+    // Destructive
     actionDanger: 'error05',
-
-    // Hover state for danger buttons
     actionDangerHover: 'error06',
-
-    // Active state for danger buttons
     actionDangerActive: 'error04',
 
-    // Focus border color
-    actionDangerFocus: 'error08',
+    // Tertiary
+    action03: 'transparent',
+    action03Hover: 'surface04',
+    action03Active: 'surface03',
 
-    // Disabled state for danger buttons
-    actionDangerDisabled: 'error03',
+    // Disabled
+    disabled01: 'surface09',
 
-    // Underlay color for buttons
-    underlay01: 'surface13',
+    // Focus
+    focus01: 'primary07',
 
-    // Bottom sheet background
-    bottomSheet: 'surface00',
+    // ----- Links -----
 
-    // Primary text – default color for body copy & headers
-    text01: 'surface11',
-
-    // Secondary text with medium contrast
-    text02: 'surface01',
-
-    // Tertiary text with low contrast – placeholders, disabled actions, label for disabled buttons
-    text03: 'surface07',
-
-    // Text for bottom sheet items
-    text04: 'surface12',
-
-    // Text for drawer menu displayed name
-    text05: 'surface06',
-
-    // Text for saved input values
-    text06: 'surface03',
-
-    // Text info
-    text07Info: 'surface02',
-
-    // error messages
-    textError: 'error06',
-
-    // Primary color for icons
-    icon01: 'surface11',
-
-    // Secondary color for input fields
-    icon02: 'surface01',
-
-    // Tertiary color for disabled actions
-    icon03: 'surface07',
-
-    // Quaternary color for disabled actions
-    icon04: 'surface14',
-
-    // Quinary color for disabled actions
-    icon05: 'surface04',
-
-    // Error message
-    iconError: 'error06',
-
-    // Forms
-    // Default background for input fields
-    field01: 'surface01',
-
-    // Hover background for input fields
-    field01Hover: 'surface03',
-
-    // Focus border color
-    field01Focus: 'primary05',
-
-    // Disabled background for input fields
-    field01Disabled: 'surface05',
-
-    // Background for high-contrast input fields
-    field02: 'surface11',
-
-    // Color for the section divider
-    dividerColor: 'surface12',
-
-    // Color for indicator
-    indicatorColor: 'surface12',
-
-    // Background for high-contrast input fields on hover
-    field02Hover: 'primary09',
-
-    // Focus border color
-    field02Focus: 'primary05',
-
-    // Disabled background for high-contrast input fields
-    field02Disabled: 'surface06',
-
-    // Background for section header
-    section01: 'surface10',
-
-    // Active color for section header
-    section01Active: 'primary04',
-
-    // Inactive color for section header
-    section01Inactive: 'surface01',
-
-    // Borders
-    // Border for the input fields in hover state
-    border01: 'surface08',
-
-    // Border for the input fields
-    border02: 'surface06',
-
-    // Line separators
-    border03: 'surface04',
-    border04: 'primary12',
-    border05: 'surface07',
-
-    // Color for error border & message
-    borderError: 'error06',
-
-    // Links
-    // Default color for links
     link01: 'primary07',
-
-    // Color for links in the hover state
     link01Hover: 'primary08',
-
-    // Color for links in the active state
     link01Active: 'primary06',
 
-    // Support
-    // Color for positive messages applied to icons & borders
+    // ----- Text -----
+
+    // Primary
+    text01: 'surface11',
+
+    // Secondary
+    text02: 'surface09',
+
+    // Tertiary
+    text03: 'surface07',
+
+    // High-contrast
+    text04: 'surface01',
+
+    // Error
+    textError: 'error08',
+
+    // ----- Icons -----
+
+    // Primary
+    icon01: 'surface11',
+
+    // Secondary
+    icon02: 'surface09',
+
+    // Tertiary
+    icon03: 'surface07',
+
+    // High-contrast
+    icon04: 'surface01',
+
+    // Error
+    iconError: 'error06',
+
+    // ----- Forms -----
+
+    field01: 'surface04',
+
+    // ----- Feedback -----
+
+    // Success
     success01: 'success05',
+    success02: 'success04',
 
-    // Color for positive messages applied to backgrounds
-    success02: 'success05',
-
-    // Color for warning messages applied to icons, borders & backgrounds
+    // Warning
     warning01: 'warning05',
-
-    // Color for indicating a raised hand
     warning02: 'warning06',
 
-    // Color for indicating recording info
-    warning03: 'warning07',
+    // ----- Support -----
 
-    // Color for disabled tab
-    tab01Disabled: 'disabled01',
-
-    // Color for enabled switch
-    switch01Enabled: 'success04',
-
-    // Color for disabled switch
-    switch01Disabled: 'surface06',
-
-    // Color for disabled video switch
-    video01Disabled: 'disabled01',
-
-    // Backgrounds for avatars
     support01: 'support01',
     support02: 'support02',
     support03: 'support03',
     support04: 'support04',
     support05: 'support05',
     support06: 'support06',
+    support07: 'support07',
     support08: 'support08',
     support09: 'support09',
 
-    // Used for avatars and raise hand badge
-    support07: 'support07'
+    // 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',
+    border04: 'primary12',
+    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'
 };
 
 

react/features/base/ui/constants.js

@@ -239,7 +239,7 @@ export const commonStyles = (theme: Object) => {
 
             '@media (hover: hover) and (pointer: fine)': {
                 '&:hover': {
-                    background: theme.palette.action02Hover
+                    background: theme.palette.ui04
                 }
             },
             [theme.breakpoints.down('320')]: {
@@ -248,12 +248,12 @@ export const commonStyles = (theme: Object) => {
             },
 
             '&.toggled': {
-                background: theme.palette.ui02
+                background: theme.palette.ui03
             },
 
             '&.disabled': {
                 cursor: 'initial !important',
-                backgroundColor: `${theme.palette.action02Disabled} !important`,
+                backgroundColor: `${theme.palette.disabled01} !important`,
 
                 '& svg': {
                     fill: `${theme.palette.text03} !important`

react/features/participants-pane/components/native/styles.js

@@ -269,7 +269,7 @@ export default {
         height: MD_ITEM_HEIGHT,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: BaseTheme.palette.border02,
+        borderColor: BaseTheme.palette.ui05,
         backgroundColor: BaseTheme.palette.uiBackground,
         borderRadius: BaseTheme.shape.borderRadius,
         marginLeft: BaseTheme.spacing[3],

react/features/participants-pane/components/web/ClearableInput.js

@@ -65,7 +65,7 @@ const useStyles = makeStyles(theme => {
             alignItems: 'center',
             justifyContent: 'flex-start',
             height: '20px',
-            border: `1px solid ${theme.palette.border02}`,
+            border: `1px solid ${theme.palette.ui05}`,
             backgroundColor: theme.palette.uiBackground,
             position: 'relative',
             borderRadius: '6px',

react/features/participants-pane/components/web/ParticipantPaneBaseButton.js

@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => {
     return {
         button: {
             alignItems: 'center',
-            backgroundColor: theme.palette.action02,
+            backgroundColor: theme.palette.ui03,
             border: 0,
             borderRadius: `${theme.shape.borderRadius}px`,
             display: 'flex',
@@ -53,7 +53,7 @@ const useStyles = makeStyles(theme => {
             lineHeight: `${theme.typography.labelButton.lineHeight}px`,
 
             '&:hover': {
-                backgroundColor: theme.palette.action02Hover
+                backgroundColor: theme.palette.ui04
             },
 
             [`@media (max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {

react/features/polls/components/native/styles.js

@@ -83,7 +83,7 @@ export const resultsStyles = createStyleSheet({
 
     voters: {
         backgroundColor: BaseTheme.palette.ui04,
-        borderColor: BaseTheme.palette.border03,
+        borderColor: BaseTheme.palette.ui03,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
         padding: BaseTheme.spacing[2],

react/features/recording/components/LiveStream/native/styles.js

@@ -78,7 +78,7 @@ export default createStyleSheet({
      */
     streamKeyInput: {
         alignSelf: 'stretch',
-        borderColor: BaseTheme.palette.border02,
+        borderColor: BaseTheme.palette.ui05,
         borderBottomWidth: 1,
         color: BaseTheme.palette.text01,
         fontSize: 14,

react/features/salesforce/components/native/styles.js

@@ -34,7 +34,7 @@ export default {
     },
     recordsSearch: {
         backgroundColor: BaseTheme.palette.field01,
-        borderColor: BaseTheme.palette.border02,
+        borderColor: BaseTheme.palette.ui05,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
         color: BaseTheme.palette.text01,
@@ -101,7 +101,7 @@ export default {
     notes: {
         alignItems: 'flex-start',
         backgroundColor: BaseTheme.palette.field01,
-        borderColor: BaseTheme.palette.border02,
+        borderColor: BaseTheme.palette.ui05,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
         color: BaseTheme.palette.field02,

react/features/salesforce/components/web/SalesforceLinkDialog.js

@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => {
             backgroundColor: theme.palette.field01,
             border: '1px solid',
             borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.border02,
+            borderColor: theme.palette.ui05,
             color: theme.palette.text01,
             padding: '10px 16px 10px 44px',
             width: '100%',
@@ -100,7 +100,7 @@ const useStyles = makeStyles(theme => {
             boxSizing: 'borderBox',
             overflow: 'hidden',
             border: '1px solid',
-            borderColor: theme.palette.border02,
+            borderColor: theme.palette.ui05,
             backgroundColor: theme.palette.field01,
             color: theme.palette.field02,
             borderRadius: theme.shape.borderRadius,

react/features/speaker-stats/components/web/SpeakerStats.js

@@ -64,7 +64,7 @@ const useStyles = makeStyles(theme => {
             width: 'calc(100% + 48px)',
             height: 1,
             left: -24,
-            backgroundColor: theme.palette.border02
+            backgroundColor: theme.palette.ui05
         },
         searchSwitchContainer: {
             display: 'flex',

react/features/speaker-stats/components/web/SpeakerStatsSearch.js

@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => {
             backgroundColor: theme.palette.field01,
             border: '1px solid',
             borderRadius: 6,
-            borderColor: theme.palette.border02,
+            borderColor: theme.palette.ui05,
             color: theme.palette.text01,
             padding: '10px 16px',
             width: '100%',

react/features/welcome/components/native/settings/components/styles.js

@@ -1,6 +1,6 @@
 import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
-export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
+export const PLACEHOLDER_COLOR = BaseTheme.palette.focus01;
 export const ENABLED_TRACK_COLOR = BaseTheme.palette.switch01Enabled;
 export const DISABLED_TRACK_COLOR = BaseTheme.palette.switch01Disabled;
 export const THUMB_COLOR = BaseTheme.palette.field02;
@@ -66,7 +66,7 @@ export default {
      */
     fieldSeparator: {
         borderBottomWidth: 1,
-        borderColor: BaseTheme.palette.border02
+        borderColor: BaseTheme.palette.ui05
     },
 
     /**

resources/custom-theme/custom-theme.json

@@ -19,13 +19,10 @@
       "screen01Header": "#17A0DB",
       "action01Hover": "#246FE5",
       "action01Active": "#0045B3",
-      "action01Focus": "#99BBF3",
-      "action01Disabled": "#00225A",
+      "disabled01": "#00225A",
       "action02": "#3D3D3D",
       "action02Hover": "#525252",
       "action02Active": "#292929",
-      "action02Focus": "#858585",
-      "action02Disabled": "#141414",
       "action03": "transparent",
       "action03Hover": "#525252",
       "action03Active": "#292929",
@@ -34,8 +31,6 @@
       "actionDanger": "#CB2233",
       "actionDangerHover": "#E04757",
       "actionDangerActive": "#A21B29",
-      "actionDangerFocus": "#EAA7AD",
-      "actionDangerDisabled": "#7A141F",
       "bottomSheet": "#111111",
       "text01": "#FFF",
       "text02": "#C2C2C2",
@@ -56,11 +51,7 @@
       "field02Focus": "#0056E0",
       "field02Disabled": "#666",
       "section01": "#E0E0E0",
-      "section01Active": "#0045B3",
-      "section01Inactive": "#040404",
       "border01": "#A3A3A3",
-      "border02": "#666",
-      "border03": "#3D3D3D",
       "borderError": "#E04757",
       "link01": "#669AEC",
       "link01Hover": "#99BBF3",