haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme) Add TS interface for Theme (#11877) 

Update typography Tokens
Use new Theme interface
This commit is contained in:
Robert Pintilii 2022-07-19 13:36:02 +03:00 committed by GitHub
parent 009588a3d8
commit 718d32990d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
react/features/base/ui/Tokens.ts
View File

@ -240,44 +240,30 @@ export const typography = {
letterSpacing: 0.16
},
labelButton: {
fontSize: 14,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
labelButtonLarge: {
fontSize: 16,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyShortRegular: {
fontSize: 14,
lineHeight: 18,
lineHeight: 20,
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBold: {
fontSize: 14,
lineHeight: 18,
lineHeight: 20,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyShortRegularLarge: {
fontSize: 16,
lineHeight: 24,
lineHeight: 22,
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBoldLarge: {
fontSize: 16,
lineHeight: 24,
lineHeight: 22,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
@ -303,6 +289,13 @@ export const typography = {
letterSpacing: 0
},
bodyLongBoldLarge: {
fontSize: 16,
lineHeight: 26,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading1: {
fontSize: 54,
lineHeight: 64,
@ -345,11 +338,28 @@ export const typography = {
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
}
};

84
react/features/base/ui/types.ts Normal file
View File

@ -0,0 +1,84 @@
interface TypographyType {
fontSize: number;
lineHeight: number;
fontWeight: string;
letterSpacing: number;
}
export interface Theme {
palette: {
uiBackground: string;
ui01: string;
ui02: string;
ui03: string;
ui04: string;
ui05: string;
action01: string;
action01Hover: string;
action01Active: string;
action02: string;
action02Hover: string;
action02Active: string;
actionDanger: string;
actionDangerHover: string;
actionDangerActive: string;
action03: string;
action03Hover: string;
action03Active: string;
disabled01: string;
focus01: string;
link01: string;
link01Hover: string;
link01Active: string;
text01: string;
text02: string;
text03: string;
text04: string;
textError: string;
icon01: string;
icon02: string;
icon03: string;
icon04: string;
iconError: string;
field01: string;
success01: string;
success02: string;
warning01: string;
warning02: string;
support01: string;
support02: string;
support03: string;
support04: string;
support05: string;
support06: string;
support07: string;
support08: string;
support09: string;
};
shape: {
borderRadius: number;
};
spacing: (index: number) => number;
typography: {
labelRegular: TypographyType;
labelBold: TypographyType;
bodyShortRegular: TypographyType;
bodyShortBold: TypographyType;
bodyShortRegularLarge: TypographyType;
bodyShortBoldLarge: TypographyType;
bodyLongRegular: TypographyType;
bodyLongRegularLarge: TypographyType;
bodyLongBold: TypographyType;
bodyLongBoldLarge: TypographyType;
heading1: TypographyType;
heading2: TypographyType;
heading3: TypographyType;
heading4: TypographyType;
heading5: TypographyType;
heading6: TypographyType;
};
breakpoints: {
down: (value: number) => string;
up: (value: number) => string;
}
}

5
react/features/display-name/components/web/DisplayNameBadge.tsx
View File

@ -1,10 +1,7 @@
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
interface Theme {
palette: any;
text01: string;
}
import { Theme } from '../../../base/ui/types';
const useStyles = makeStyles((theme: Theme) => {
const { text01 } = theme.palette;

3
react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx
View File

@ -12,6 +12,7 @@ import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/component
// @ts-ignore
import { isLocalParticipantModerator } from '../../../../../base/participants';
import { Theme } from '../../../../../base/ui/types';
// @ts-ignore
import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
@ -57,7 +58,7 @@ type Props = {
onSelect: Function
};
const useStyles = makeStyles((theme:any) => {
const useStyles = makeStyles((theme: Theme) => {
return {
text: {
color: theme.palette.text02,

3
react/features/reactions/components/web/ReactionsMenu.tsx
View File

@ -24,6 +24,7 @@ import { getLocalParticipant, hasRaisedHand, raiseHand } from '../../../base/par
// @ts-ignore
import { connect } from '../../../base/redux';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
import { GifsMenu, GifsMenuButton } from '../../../gifs/components';
@ -97,7 +98,7 @@ type Props = {
t: Function
};
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
overflow: {
width: 'auto',