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

Update typography Tokens
Use new Theme interface

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

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

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 {
+import { Theme } from '../../../base/ui/types';
-    palette: any;
-    text01: string;
-}
 
 const useStyles = makeStyles((theme: Theme) => {
     const { text01 } = theme.palette;

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,

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