ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2026-05-19 19:17:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WIP] feat(ui) add semantic tokens (#16772)

Browse Source
This commit is contained in:
Mihaela Dumitru
2026-02-06 15:06:54 +02:00
committed by GitHub
parent 28c72bfa7f
commit 9ea9f4c899
112 changed files with 1189 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
react/features/base/ui/components/web/BaseDialog.tsx
View File

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

16
react/features/base/ui/components/web/Checkbox.tsx
View File

@@ -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 = ({
<Icon
aria-hidden = { true }
className = 'checkmark'
color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
color = { disabled ? theme.palette.checkboxIconDisabled : theme.palette.checkboxIcon }
size = { 18 }
src = { IconCheck } />
</div>

8
react/features/base/ui/components/web/ClickableIcon.tsx
View File

@@ -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': {

6
react/features/base/ui/components/web/ContextMenu.tsx
View File

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

16
react/features/base/ui/components/web/ContextMenuItem.tsx
View File

@@ -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: {

2
react/features/base/ui/components/web/ContextMenuItemGroup.tsx
View File

@@ -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': {

2
react/features/base/ui/components/web/Dialog.tsx
View File

@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => {
},
title: {
color: theme.palette.text01,
color: theme.palette.dialogText,
...theme.typography.heading5,
margin: 0,
padding: 0

4
react/features/base/ui/components/web/DialogWithTabs.tsx
View File

@@ -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
},

22
react/features/base/ui/components/web/Input.tsx
View File

@@ -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
}
}
};

26
react/features/base/ui/components/web/ListItem.tsx
View File

@@ -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
}
};
});

12
react/features/base/ui/components/web/MultiSelect.tsx
View File

@@ -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: {

18
react/features/base/ui/components/web/Select.tsx
View File

@@ -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 = ({
</select>
<Icon
className = { cx(classes.icon, isMobile && 'is-mobile') }
color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
color = { disabled ? theme.palette.selectIconDisabled : theme.palette.selectIcon }
size = { 22 }
src = { IconArrowDown } />
</div>

12
react/features/base/ui/components/web/Switch.tsx
View File

@@ -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}`
}
},

24
react/features/base/ui/components/web/Tabs.tsx
View File

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