From 718d32990d355f82cb1c1aba14ecfc0f8656853c Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Tue, 19 Jul 2022 13:36:02 +0300 Subject: [PATCH] feat(theme) Add TS interface for Theme (#11877) Update typography Tokens Use new Theme interface --- react/features/base/ui/Tokens.ts | 46 ++++++---- react/features/base/ui/types.ts | 84 +++++++++++++++++++ .../components/web/DisplayNameBadge.tsx | 5 +- .../web/RoomParticipantContextMenu.tsx | 3 +- .../components/web/ReactionsMenu.tsx | 3 +- 5 files changed, 117 insertions(+), 24 deletions(-) create mode 100644 react/features/base/ui/types.ts diff --git a/react/features/base/ui/Tokens.ts b/react/features/base/ui/Tokens.ts index 3e558f2b2..850ce85e9 100644 --- a/react/features/base/ui/Tokens.ts +++ b/react/features/base/ui/Tokens.ts @@ -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 } }; diff --git a/react/features/base/ui/types.ts b/react/features/base/ui/types.ts new file mode 100644 index 000000000..c2a7be47c --- /dev/null +++ b/react/features/base/ui/types.ts @@ -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; + } +} diff --git a/react/features/display-name/components/web/DisplayNameBadge.tsx b/react/features/display-name/components/web/DisplayNameBadge.tsx index f668756bf..9ab650034 100644 --- a/react/features/display-name/components/web/DisplayNameBadge.tsx +++ b/react/features/display-name/components/web/DisplayNameBadge.tsx @@ -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; 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 38b3b0e71..99e5bf2e2 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 @@ -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, diff --git a/react/features/reactions/components/web/ReactionsMenu.tsx b/react/features/reactions/components/web/ReactionsMenu.tsx index d7b716e4f..0fe405b2e 100644 --- a/react/features/reactions/components/web/ReactionsMenu.tsx +++ b/react/features/reactions/components/web/ReactionsMenu.tsx @@ -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',