[WebApp][MM-51266]: Add compass (MUI wrapper components) in common components package (#22942)

* wrap all the components using compass-components with compass-components theme provider Co-authored-by: @michelengelen Co-authored-by: Mattermost Build <build@mattermost.com>
2023-05-04 13:43:33 +05:30
--- a/webapp/platform/components/src/common/constants/theme.ts
+++ b/webapp/platform/components/src/common/constants/theme.ts
@@ -0,0 +1,139 @@
+import {Theme, ThemeKey} from '@mattermost/types/theme';
+
+export const THEMES: Record<ThemeKey, Theme> = {
+    denim: {
+        type: 'Denim',
+            sidebarBg: '#1e325c',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#ffffff',
+            sidebarTextHoverBg: '#28427b',
+            sidebarTextActiveBorder: '#5d89ea',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#192a4d',
+            sidebarHeaderTextColor: '#ffffff',
+            sidebarTeamBarBg: '#14213e',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#ffbc1f',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#ffffff',
+            mentionColor: '#1e325c',
+            centerChannelBg: '#ffffff',
+            centerChannelColor: '#3f4350',
+            newMessageSeparator: '#cc8f00',
+            linkColor: '#386fe5',
+            buttonBg: '#1c58d9',
+            buttonColor: '#ffffff',
+            errorTextColor: '#d24b4e',
+            mentionHighlightBg: '#ffd470',
+            mentionHighlightLink: '#1b1d22',
+            codeTheme: 'github',
+    },
+    sapphire: {
+        type: 'Sapphire',
+            sidebarBg: '#174ab5',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#ffffff',
+            sidebarTextHoverBg: '#2a58ba',
+            sidebarTextActiveBorder: '#57b5f0',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#1542a2',
+            sidebarHeaderTextColor: '#ffffff',
+            sidebarTeamBarBg: '#133a91',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#ffbc1f',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#ffffff',
+            mentionColor: '#174ab5',
+            centerChannelBg: '#ffffff',
+            centerChannelColor: '#3f4350',
+            newMessageSeparator: '#15b7b7',
+            linkColor: '#1c58d9',
+            buttonBg: '#1c58d9',
+            buttonColor: '#ffffff',
+            errorTextColor: '#d24b4e',
+            mentionHighlightBg: '#7ff0f0',
+            mentionHighlightLink: '#0d6e6e',
+            codeTheme: 'github',
+    },
+    quartz: {
+        type: 'Quartz',
+            sidebarBg: '#f4f4f6',
+            sidebarText: '#090a0b',
+            sidebarUnreadText: '#2d3039',
+            sidebarTextHoverBg: '#ebebed',
+            sidebarTextActiveBorder: '#32a4ec',
+            sidebarTextActiveColor: '#2d3039',
+            sidebarHeaderBg: '#e8e9ed',
+            sidebarHeaderTextColor: '#2d3039',
+            sidebarTeamBarBg: '#dddfe4',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#f5ab07',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#1c58d9',
+            mentionColor: '#ffffff',
+            centerChannelBg: '#ffffff',
+            centerChannelColor: '#3f4350',
+            newMessageSeparator: '#15b7b7',
+            linkColor: '#1c58d9',
+            buttonBg: '#1c58d9',
+            buttonColor: '#ffffff',
+            errorTextColor: '#d24b4e',
+            mentionHighlightBg: '#7ff0f0',
+            mentionHighlightLink: '#0d6e6e',
+            codeTheme: 'github',
+    },
+    indigo: {
+        type: 'Indigo',
+            sidebarBg: '#0f1a2e',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#ffffff',
+            sidebarTextHoverBg: '#222c3f',
+            sidebarTextActiveBorder: '#1279ba',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#152231',
+            sidebarHeaderTextColor: '#dddfe4',
+            sidebarTeamBarBg: '#05080f',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#f5ab00',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#1c58d9',
+            mentionColor: '#ffffff',
+            centerChannelBg: '#0a111f',
+            centerChannelColor: '#dddfe4',
+            newMessageSeparator: '#81a3ef',
+            linkColor: '#5d89ea',
+            buttonBg: '#386fe5',
+            buttonColor: '#ffffff',
+            errorTextColor: '#d24b4e',
+            mentionHighlightBg: '#133a91',
+            mentionHighlightLink: '#a4f4f4',
+            codeTheme: 'solarized-dark',
+    },
+    onyx: {
+        type: 'Onyx',
+            sidebarBg: '#121317',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#ffffff',
+            sidebarTextHoverBg: '#25262a',
+            sidebarTextActiveBorder: '#1592e0',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#1b1d22',
+            sidebarHeaderTextColor: '#dddfe4',
+            sidebarTeamBarBg: '#000000',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#f5ab00',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#1c58d9',
+            mentionColor: '#ffffff',
+            centerChannelBg: '#090a0b',
+            centerChannelColor: '#dddfe4',
+            newMessageSeparator: '#1adbdb',
+            linkColor: '#5d89ea',
+            buttonBg: '#386fe5',
+            buttonColor: '#ffffff',
+            errorTextColor: '#da6c6e',
+            mentionHighlightBg: '#0d6e6e',
+            mentionHighlightLink: '#a4f4f4',
+            codeTheme: 'monokai',
+    },
+};
--- a/webapp/platform/components/src/compass/components/base_modal/base_modal.tsx
+++ b/webapp/platform/components/src/compass/components/base_modal/base_modal.tsx
@@ -0,0 +1,59 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {memo} from 'react';
+import {styled} from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import MUIPaper, {PaperProps} from '@mui/material/Paper';
+import Slide from '@mui/material/Slide';
+import {TransitionProps} from '@mui/material/transitions';
+
+const Transition = React.forwardRef((
+    {children, ...props}: TransitionProps & {
+        children: React.ReactElement<any, any>;
+    },
+    ref: React.Ref<unknown>,
+) => {
+    return (
+        <Slide
+            direction='up'
+            ref={ref}
+            {...props}
+        >
+            {children}
+        </Slide>
+    );
+});
+
+const Paper = styled(MUIPaper)<PaperProps>(() => ({
+    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
+    borderRadius: 12,
+    backgroundColor: 'var(--center-channel-bg)',
+    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
+    minWidth: 600,
+}));
+
+type ModalProps = {
+    children: React.ReactNode | React.ReactNodeArray;
+    isOpen: boolean;
+    dialogClassName?: string;
+    dialogId?: string;
+    onClose?: () => void;
+}
+
+const BaseModal = ({children, isOpen, onClose, dialogClassName = '', dialogId = ''}: ModalProps) => (
+    <Dialog
+        open={isOpen}
+        TransitionComponent={Transition}
+        PaperComponent={Paper}
+        keepMounted={true}
+        onClose={onClose}
+        aria-describedby='alert-dialog-slide-description'
+        role='dialog'
+        className={dialogClassName}
+        id={dialogId}
+    >{children}
+    </Dialog>
+);
+
+export default BaseModal;
--- a/webapp/platform/components/src/compass/components/base_modal/modal_title.tsx
+++ b/webapp/platform/components/src/compass/components/base_modal/modal_title.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {styled} from '@mui/material/styles';
+import MUIDialogTitle, {DialogTitleProps as MUIDialogTitleProps} from '@mui/material/DialogTitle';
+
+import {CloseIcon} from '@mattermost/compass-icons/components';
+
+import Icon_button from '../icon_button/icon_button';
+
+type DialogTitleProps = MUIDialogTitleProps & { hasCloseButton: boolean };
+
+const StyledModalTitle = styled(MUIDialogTitle, {
+    shouldForwardProp: (prop) => prop !== 'hasCloseButton',
+})<DialogTitleProps>(({hasCloseButton}) => ({
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content max-content',
+    gap: 12,
+    fontFamily: 'Metropolis',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    fontSize: 22,
+    lineHeight: '28px',
+    color: 'var(--center-channel-color)',
+    alignItems: 'center',
+    padding: hasCloseButton ? '22px 26px 24px 32px' : '28px 32px 24px',
+}));
+
+const StyledModalTitleSection = styled('div')(() => ({
+    padding: '0 32px 24px 32px',
+    borderBottom: '1px solid rgba(var(--center-channel-text-rgb), 0.12)',
+}));
+
+type ModalTitleProps = {
+    title: string;
+    rightSection?: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode | React.ReactNode[];
+    onClose?: React.MouseEventHandler;
+}
+
+const ModalTitle = ({title, onClose, children, rightSection = null}: ModalTitleProps) => {
+    const hasCloseButton = Boolean(onClose);
+
+    return (
+        <>
+            <StyledModalTitle
+                hasCloseButton={hasCloseButton}
+                component={'div'}
+            >
+                {title}
+                {rightSection}
+                {hasCloseButton && (
+                    <Icon_button
+                        compact={true}
+                        type='button'
+                        onClick={onClose}
+                        IconComponent={CloseIcon}
+                    />
+                )}
+            </StyledModalTitle>
+            {children && (
+                <StyledModalTitleSection>
+                    {children}
+                </StyledModalTitleSection>
+            )}
+        </>
+    );
+};
+
+export default ModalTitle;
--- a/webapp/platform/components/src/compass/components/button/button.overrides.ts
+++ b/webapp/platform/components/src/compass/components/button/button.overrides.ts
@@ -0,0 +1,173 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {alpha, ComponentsProps, ComponentsVariants, emphasize, Theme} from '@mui/material';
+import {ComponentsOverrides} from '@mui/material/styles/overrides';
+
+import {blend} from '../../utils/color';
+
+const componentName = 'MuiButton';
+
+declare module '@mui/material/Button' {
+    interface ButtonPropsSizeOverrides {
+        'x-small': true;
+    }
+
+    interface ButtonPropsVariantOverrides {
+        quaternary: true;
+    }
+}
+
+const defaultProps: ComponentsProps[typeof componentName] = {
+    disableElevation: true,
+    disableRipple: true,
+    disableTouchRipple: true,
+    disableFocusRipple: true,
+};
+
+const getFocusStyles = (color: string) => ({
+    '&:not(.Mui-disabled)': {
+        '&:focus': {
+            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
+        },
+
+        '&:focus:not(:focus-visible)': {
+            boxShadow: 'none',
+        },
+
+        '&:focus:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
+        },
+    },
+});
+
+const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
+    containedPrimary: ({theme, ownerState}) => ({
+        backgroundColor: ownerState.inverted ? theme.palette.text.primary : theme.palette.primary.main,
+        color: ownerState.inverted ? theme.palette.primary.main : theme.palette.primary.contrastText,
+
+        '&:hover': {
+            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.08)) : emphasize(theme.palette.primary.main, 0.1),
+        },
+        '&:active': {
+            backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.16)) : emphasize(theme.palette.primary.main, 0.2),
+        },
+
+        ...getFocusStyles(theme.palette.primary.main),
+    }),
+    containedError: ({theme}) => ({
+        '&:hover': {
+            backgroundColor: emphasize(theme.palette.error.dark, 0.1),
+        },
+        '&:active': {
+            backgroundColor: emphasize(theme.palette.error.dark, 0.2),
+        },
+
+        ...getFocusStyles(theme.palette.error.main),
+    }),
+    outlinedPrimary: ({theme}) => ({
+        backgroundColor: alpha(theme.palette.primary.main, 0),
+
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        },
+
+        '&:active': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16),
+        },
+
+        ...getFocusStyles(theme.palette.primary.main),
+    }),
+    outlinedError: ({theme}) => ({
+        backgroundColor: alpha(theme.palette.error.main, 0),
+
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.error.main, 0.08),
+        },
+
+        '&:active': {
+            backgroundColor: alpha(theme.palette.error.main, 0.16),
+        },
+
+        ...getFocusStyles(theme.palette.error.main),
+    }),
+    textPrimary: ({theme}) => ({
+        backgroundColor: alpha(theme.palette.primary.main, 0.08),
+
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.12),
+        },
+
+        '&:active': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16),
+        },
+
+        ...getFocusStyles(theme.palette.primary.main),
+    }),
+    textError: ({theme, ownerState}) => ({
+        backgroundColor: ownerState.disabled ? theme.palette.action.disabledBackground : alpha(theme.palette.error.main, 0.12),
+
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.error.main, 0.12),
+        },
+
+        '&:active': {
+            backgroundColor: alpha(theme.palette.error.main, 0.16),
+        },
+
+        ...getFocusStyles(theme.palette.error.main),
+    }),
+};
+
+const variants: ComponentsVariants[typeof componentName] = [
+    {
+        props: {size: 'x-small'},
+        style: ({theme}) => ({
+            padding: '0.4rem 1rem',
+            ...theme.typography.b50,
+            margin: 0,
+            textTransform: 'none',
+        }),
+    },
+    {
+        props: {size: 'small'},
+        style: ({theme}) => ({
+            padding: '0.8rem 1.6rem',
+            ...theme.typography.b75,
+            margin: 0,
+            textTransform: 'none',
+        }),
+    },
+    {
+        props: {size: 'medium'},
+        style: ({theme}) => ({
+            padding: '1rem 2rem',
+            ...theme.typography.b100,
+            margin: 0,
+            textTransform: 'none',
+        }),
+    },
+    {
+        props: {size: 'large'},
+        style: ({theme}) => ({
+            padding: '1.2rem 2.4rem',
+            ...theme.typography.b200,
+            margin: 0,
+            textTransform: 'none',
+        }),
+    },
+    {
+        props: {variant: 'quaternary'},
+        style: () => ({
+            backgroundColor: 'red',
+        }),
+    },
+];
+
+const buttonOverrides = {
+    variants,
+    defaultProps,
+    styleOverrides,
+};
+
+export default buttonOverrides;
--- a/webapp/platform/components/src/compass/components/button/button.tsx
+++ b/webapp/platform/components/src/compass/components/button/button.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+const variantMap: Record<ButtonVariant, Exclude<MuiButtonProps['variant'], undefined>> = {
+    primary: 'contained',
+    secondary: 'outlined',
+    tertiary: 'text',
+};
+
+type ExcludedMuiProps =
+    | 'sx'
+    | 'classes'
+    | 'variant'
+    | 'disableElevation'
+    | 'disableRipple'
+    | 'disableFocusRipple';
+
+export type ButtonProps = Omit<MuiButtonProps, ExcludedMuiProps> & {
+    destructive?: boolean;
+    disabled?: boolean;
+    inverted?: boolean;
+    variant?: ButtonVariant;
+    children: React.ReactNode | React.ReactNode[];
+}
+
+export const Button = ({variant = 'primary', destructive, ...rest}: ButtonProps) => (
+    <MuiButton
+        {...rest}
+        color={destructive ? 'error' : 'primary'}
+        variant={variantMap[variant]}
+    />
+);
+
+export default Button;
--- a/webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx
+++ b/webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {memo} from 'react';
+import {styled} from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import MUIPaper, {PaperProps} from '@mui/material/Paper';
+import DialogActions from '@mui/material/DialogActions';
+import Slide from '@mui/material/Slide';
+import {TransitionProps} from '@mui/material/transitions';
+import BaseModal from "../base_modal/base_modal";
+
+const Transition = React.forwardRef((
+    {children, ...props}: TransitionProps & {
+        children: React.ReactElement<any, any>;
+    },
+    ref: React.Ref<unknown>,
+) => {
+    return (
+        <Slide
+            direction='up'
+            ref={ref}
+            {...props}
+        >
+            {children}
+        </Slide>
+    );
+});
+
+const Paper = styled(MUIPaper)<PaperProps>(() => ({
+    border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
+    borderRadius: 12,
+    backgroundColor: 'var(--center-channel-bg)',
+    boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
+    minWidth: 600,
+}));
+
+type ModalProps = {
+    children: React.ReactNode | React.ReactNodeArray;
+    isOpen: boolean;
+    dialogClassName?: string;
+    dialogId?: string;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+
+const GenericModal = ({children, isOpen, onClose, onConfirm, onCancel, dialogClassName = '', dialogId = ''}: ModalProps) => {
+    const hasActions = Boolean(onConfirm || onCancel);
+
+    const handleConfirmAction = () => {
+        onConfirm?.();
+        onClose?.();
+    };
+
+    const handleCancelAction = () => {
+        onCancel?.();
+        onClose?.();
+    };
+
+    return (
+            <BaseModal
+                isOpen={isOpen}
+                onClose={onClose}
+                aria-describedby='alert-dialog-slide-description'
+                dialogClassName={dialogClassName}
+                dialogId={dialogId}
+            >
+                {children}
+                {hasActions && (
+                    <DialogActions>
+                        {onCancel && <Button onClick={handleCancelAction}>{'Cancel'}</Button>}
+                        {onConfirm && <Button onClick={handleConfirmAction}>{'Confirm'}</Button>}
+                    </DialogActions>
+                )}
+            </BaseModal>
+    );
+};
+
+export default memo(GenericModal);
--- a/webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts
+++ b/webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts
@@ -0,0 +1,206 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {alpha, ComponentsProps, emphasize, Theme} from '@mui/material';
+import type {ComponentsVariants} from '@mui/material';
+import type {ComponentsOverrides} from '@mui/material/styles/overrides';
+
+const componentName = 'MuiIconButton';
+
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsSizeOverrides {
+        'x-small': true;
+    }
+    interface IconButtonPropsOverrides {
+        destructive: boolean;
+        compact: boolean;
+    }
+}
+
+const defaultProps: ComponentsProps[typeof componentName] = {
+    disableRipple: true,
+    disableTouchRipple: true,
+    disableFocusRipple: true,
+};
+
+export const getFocusStyles = (color: string) => ({
+    '&:not(.Mui-disabled)': {
+        '&:focus': {
+            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
+        },
+
+        '&:focus:not(:focus-visible)': {
+            boxShadow: 'none',
+        },
+
+        '&:focus:focus-visible': {
+            boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
+        },
+    },
+});
+
+const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
+    root: ({theme, ownerState}) => ({
+        backgroundColor: 'transparent',
+        color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.56),
+        borderRadius: 4,
+        margin: 0,
+
+        '&:hover': {
+            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.text.primary, 0.08),
+            color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.72),
+        },
+
+        '&:active': {
+            backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, 0.16),
+            color: ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main,
+        },
+
+        svg: {
+            margin: 0,
+            fill: 'currentColor',
+        },
+
+        ...getFocusStyles(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main),
+
+        ...(ownerState.color !== 'error' && {
+            '&.toggled:not(.inverted):not(.Mui-disabled)': {
+                backgroundColor: theme.palette.primary.main,
+                color: theme.palette.primary.contrastText,
+
+                '&:hover': {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.92),
+                    color: theme.palette.primary.contrastText,
+                },
+
+                '&:active': {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.16),
+                    color: theme.palette.primary.main,
+                },
+            },
+
+            '&.inverted:not(.Mui-disabled)': {
+                backgroundColor: 'transparent',
+                color: alpha(theme.palette.text.primary, 0.56),
+
+                '&:hover': {
+                    backgroundColor: alpha(theme.palette.text.primary, 0.08),
+                    color: theme.palette.text.primary,
+                },
+
+                '&:active': {
+                    backgroundColor: alpha(theme.palette.text.primary, 0.16),
+                    color: theme.palette.text.primary,
+                },
+
+                '&.toggled': {
+                    backgroundColor: theme.palette.text.primary,
+                    color: alpha(theme.palette.background.default, 0.56),
+
+                    '&:hover': {
+                        backgroundColor: alpha(theme.palette.text.primary, 0.92),
+                        color: alpha(theme.palette.background.default, 0.56),
+                    },
+
+                    '&:active': {
+                        backgroundColor: alpha(theme.palette.text.primary, 0.16),
+                        color: theme.palette.text.primary,
+                    },
+                },
+            },
+        }),
+
+        transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shorter}),
+    }),
+};
+
+const variants: ComponentsVariants[typeof componentName] = [
+    {
+        props: {size: 'x-small'},
+        style: ({theme}) => ({
+            padding: theme.spacing(0.5),
+
+            svg: {
+                width: '12px',
+                height: '12px',
+            },
+
+            ...theme.typography.b75,
+            lineHeight: 0,
+            fontWeight: 600,
+
+            '.MuiGrid-container': {
+                gap: theme.spacing(0.25),
+                maxHeight: theme.spacing(1.5),
+            },
+        }),
+    },
+    {
+        props: {size: 'small'},
+        style: ({theme}) => ({
+            padding: theme.spacing(0.75),
+
+            svg: {
+                width: '16px',
+                height: '16px',
+            },
+
+            ...theme.typography.b100,
+            lineHeight: 0,
+            fontWeight: 600,
+
+            '.MuiGrid-container': {
+                gap: theme.spacing(0.5),
+                maxHeight: theme.spacing(2),
+            },
+        }),
+    },
+    {
+        props: {size: 'medium'},
+        style: ({theme}) => ({
+            padding: theme.spacing(1),
+
+            svg: {
+                width: '20px',
+                height: '20px',
+            },
+
+            ...theme.typography.b200,
+            lineHeight: 0,
+            fontWeight: 600,
+
+            '.MuiGrid-container': {
+                gap: theme.spacing(0.75),
+                maxHeight: theme.spacing(2.5),
+            },
+        }),
+    },
+    {
+        props: {size: 'large'},
+        style: ({theme}) => ({
+            padding: theme.spacing(1),
+
+            svg: {
+                width: '28px',
+                height: '28px',
+            },
+
+            ...theme.typography.b300,
+            lineHeight: 0,
+            fontWeight: 600,
+
+            '.MuiGrid-container': {
+                gap: theme.spacing(0.75),
+                maxHeight: theme.spacing(3.5),
+            },
+        }),
+    },
+];
+
+const overrides = {
+    variants,
+    defaultProps,
+    styleOverrides,
+};
+
+export default overrides;
--- a/webapp/platform/components/src/compass/components/icon_button/icon_button.tsx
+++ b/webapp/platform/components/src/compass/components/icon_button/icon_button.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Grid} from '@mui/material';
+import classNames from 'classnames';
+import React from 'react';
+import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
+
+type ExcludedMuiProps = 'sx' | 'disableFocusRipple' | 'disableRipple' | 'color' | 'classes';
+
+type CustomProps = {
+    IconComponent: React.FC;
+    compact?: boolean;
+    toggled?: boolean;
+    inverted?: boolean;
+    destructive?: boolean;
+    label?: string;
+}
+
+type IconButtonProps = Omit<MuiIconButtonProps, ExcludedMuiProps> & CustomProps;
+
+const IconButton = ({IconComponent, label, destructive = false, compact = false, toggled = false, inverted = false, ...props}: IconButtonProps) => {
+    return (
+        <MuiIconButton
+            {...props}
+            className={classNames({compact, toggled, inverted})}
+            color={destructive ? 'error' : 'primary'}
+        >
+            <Grid
+                container={true}
+                m={compact ? 0 : 0.25}
+                alignItems='center'
+                alignContent='center'
+            >
+                <Grid item={true}>
+                    <IconComponent/>
+                </Grid>
+                {label && (
+                    <Grid
+                        item={true}
+                        pt={0.25}
+                    >
+                        {label}
+                    </Grid>
+                )}
+            </Grid>
+        </MuiIconButton>
+    );
+};
+
+export default IconButton;
--- a/webapp/platform/components/src/compass/components/index.ts
+++ b/webapp/platform/components/src/compass/components/index.ts
@@ -0,0 +1,16 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import Typography from './typography/typography';
+import Button, {ButtonProps} from './button/button';
+import IconButton from './icon_button/icon_button';
+
+export {
+    IconButton,
+    Button,
+    Typography,
+};
+
+export type {
+    ButtonProps,
+};
--- a/webapp/platform/components/src/compass/components/typography/typography.overrides.ts
+++ b/webapp/platform/components/src/compass/components/typography/typography.overrides.ts
@@ -0,0 +1,285 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {TypographyOptions} from '@mui/material/styles/createTypography';
+
+import {getFontMargin} from '../../utils/font';
+
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+
+        // body text variants
+        b25: React.CSSProperties;
+        b50: React.CSSProperties;
+        b75: React.CSSProperties;
+        b100: React.CSSProperties;
+        b200: React.CSSProperties;
+        b300: React.CSSProperties;
+
+        // heading variants
+        h25: React.CSSProperties;
+        h50: React.CSSProperties;
+        h75: React.CSSProperties;
+        h100: React.CSSProperties;
+        h200: React.CSSProperties;
+        h300: React.CSSProperties;
+        h400: React.CSSProperties;
+        h500: React.CSSProperties;
+        h600: React.CSSProperties;
+        h700: React.CSSProperties;
+        h800: React.CSSProperties;
+        h900: React.CSSProperties;
+        h1000: React.CSSProperties;
+    }
+
+    // allow configuration using `createTheme`
+    interface TypographyVariantsOptions {
+
+        // body text style properties
+        b25?: React.CSSProperties;
+        b50?: React.CSSProperties;
+        b75?: React.CSSProperties;
+        b100?: React.CSSProperties;
+        b200?: React.CSSProperties;
+        b300?: React.CSSProperties;
+
+        // heading style properties
+        h25?: React.CSSProperties;
+        h50?: React.CSSProperties;
+        h75?: React.CSSProperties;
+        h100?: React.CSSProperties;
+        h200?: React.CSSProperties;
+        h300?: React.CSSProperties;
+        h400?: React.CSSProperties;
+        h500?: React.CSSProperties;
+        h600?: React.CSSProperties;
+        h700?: React.CSSProperties;
+        h800?: React.CSSProperties;
+        h900?: React.CSSProperties;
+        h1000?: React.CSSProperties;
+    }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+
+        // enable our custom body text variants
+        b25: true;
+        b50: true;
+        b75: true;
+        b100: true;
+        b200: true;
+        b300: true;
+
+        // enable our custom heading variants
+        h25: true;
+        h50: true;
+        h75: true;
+        h100: true;
+        h200: true;
+        h300: true;
+        h400: true;
+        h500: true;
+        h600: true;
+        h700: true;
+        h800: true;
+        h900: true;
+        h1000: true;
+
+        // disable the MUI variants
+        h1: false;
+        h2: false;
+        h3: false;
+        h4: false;
+        h5: false;
+        h6: false;
+        body1: false;
+        body2: false;
+        button: false;
+        caption: false;
+        inherit: false;
+        overline: false;
+        subtitle1: false;
+        subtitle2: false;
+    }
+}
+
+const baseBodyStyles = {
+    fontFamily: 'Open Sans, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: 400,
+};
+
+const b25 = {
+    fontSize: '1rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(10, 0.75),
+    marginBottom: getFontMargin(10, 0.75),
+    ...baseBodyStyles,
+};
+const b50 = {
+    fontSize: '1.1rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(11, 0.75),
+    marginBottom: getFontMargin(11, 0.75),
+    ...baseBodyStyles,
+};
+const b75 = {
+    fontSize: '1.2rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(12, 0.75),
+    marginBottom: getFontMargin(12, 0.75),
+    ...baseBodyStyles,
+};
+const b100 = {
+    fontSize: '1.4rem',
+    lineHeight: '2rem',
+    marginTop: getFontMargin(14, 0.75),
+    marginBottom: getFontMargin(14, 0.75),
+    ...baseBodyStyles,
+};
+const b200 = {
+    fontSize: '1.6rem',
+    lineHeight: '2.4rem',
+    marginTop: getFontMargin(16, 0.75),
+    marginBottom: getFontMargin(16, 0.75),
+    ...baseBodyStyles,
+};
+const b300 = {
+    fontSize: '1.8rem',
+    lineHeight: '2.8rem',
+    marginTop: getFontMargin(18, 0.75),
+    marginBottom: getFontMargin(18, 0.75),
+    ...baseBodyStyles,
+};
+
+const baseHeadingStyles = {
+    fontFamily: 'Metropolis, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: 600,
+
+    '&:first-of-type': {
+        marginTop: 0,
+    },
+};
+
+const h25 = {
+    fontSize: '1rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(10, 8 / 9),
+    marginBottom: getFontMargin(10, 0.5),
+    ...baseHeadingStyles,
+    fontFamily: 'Open Sans, sans-serif',
+};
+const h50 = {
+    fontSize: '1.1rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(11, 8 / 9),
+    marginBottom: getFontMargin(11, 0.5),
+    ...baseHeadingStyles,
+    fontFamily: 'Open Sans, sans-serif',
+};
+const h75 = {
+    fontSize: '1.2rem',
+    lineHeight: '1.6rem',
+    marginTop: getFontMargin(12, 8 / 9),
+    marginBottom: getFontMargin(12, 0.5),
+    ...baseHeadingStyles,
+    fontFamily: 'Open Sans, sans-serif',
+};
+const h100 = {
+    fontSize: '1.4rem',
+    lineHeight: '2rem',
+    marginTop: getFontMargin(14, 8 / 9),
+    marginBottom: getFontMargin(14, 0.5),
+    ...baseHeadingStyles,
+    fontFamily: 'Open Sans, sans-serif',
+};
+const h200 = {
+    fontSize: '1.6rem',
+    lineHeight: '2.4rem',
+    marginTop: getFontMargin(16, 8 / 9),
+    marginBottom: getFontMargin(16, 0.5),
+    ...baseHeadingStyles,
+};
+const h300 = {
+    fontSize: '1.8rem',
+    lineHeight: '2.4rem',
+    marginTop: getFontMargin(18, 8 / 9),
+    marginBottom: getFontMargin(18, 0.5),
+    ...baseHeadingStyles,
+};
+const h400 = {
+    fontSize: '2rem',
+    lineHeight: '2.8rem',
+    marginTop: getFontMargin(18, 8 / 9),
+    marginBottom: getFontMargin(18, 0.5),
+    ...baseHeadingStyles,
+};
+const h500 = {
+    fontSize: '2.2rem',
+    lineHeight: '2.8rem',
+    marginTop: getFontMargin(22, 8 / 9),
+    marginBottom: getFontMargin(22, 0.5),
+    ...baseHeadingStyles,
+};
+const h600 = {
+    fontSize: '2.5rem',
+    lineHeight: '3rem',
+    marginTop: getFontMargin(25, 8 / 9),
+    marginBottom: getFontMargin(25, 0.5),
+    ...baseHeadingStyles,
+};
+const h700 = {
+    fontSize: '2.8rem',
+    lineHeight: '3.6rem',
+    marginTop: getFontMargin(28, 8 / 9),
+    marginBottom: getFontMargin(28, 0.5),
+    ...baseHeadingStyles,
+};
+const h800 = {
+    fontSize: '3.2rem',
+    lineHeight: '4rem',
+    marginTop: getFontMargin(32, 8 / 9),
+    marginBottom: getFontMargin(32, 0.5),
+    ...baseHeadingStyles,
+};
+const h900 = {
+    fontSize: '3.6rem',
+    lineHeight: '4.4rem',
+    marginTop: getFontMargin(36, 8 / 9),
+    marginBottom: getFontMargin(36, 0.5),
+    ...baseHeadingStyles,
+};
+const h1000 = {
+    fontSize: '4rem',
+    lineHeight: '4.8rem',
+    marginTop: getFontMargin(40, 8 / 9),
+    marginBottom: getFontMargin(40, 0.5),
+    ...baseHeadingStyles,
+};
+
+const typographyOverrides: TypographyOptions = {
+    b25,
+    b50,
+    b75,
+    b100,
+    b200,
+    b300,
+    h25,
+    h50,
+    h75,
+    h100,
+    h200,
+    h300,
+    h400,
+    h500,
+    h600,
+    h700,
+    h800,
+    h900,
+    h1000,
+};
+
+export default typographyOverrides;
--- a/webapp/platform/components/src/compass/components/typography/typography.tsx
+++ b/webapp/platform/components/src/compass/components/typography/typography.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Typography as MuiTypography, TypographyProps as MuiTypographyProps} from '@mui/material';
+
+type Props = Omit<MuiTypographyProps, 'variantMapping' | 'paragraph'> & {
+    gutterTop?: boolean;
+}
+
+const Typography = ({variant = 'b100', ...props}: Props) => {
+    const variantMap = {
+        b25: 'p',
+        b50: 'p',
+        b75: 'p',
+        b100: 'p',
+        b200: 'p',
+        b300: 'p',
+
+        h25: 'h6',
+        h50: 'h6',
+        h75: 'h6',
+        h100: 'h5',
+        h200: 'h5',
+        h300: 'h4',
+        h400: 'h4',
+        h500: 'h3',
+        h600: 'h3',
+        h700: 'h2',
+        h800: 'h2',
+        h900: 'h1',
+        h1000: 'h1',
+    };
+
+    return (
+        <MuiTypography
+            {...props}
+            variant={variant}
+            variantMapping={variantMap}
+        />
+    );
+};
+
+export default Typography;
--- a/webapp/platform/components/src/compass/index.ts
+++ b/webapp/platform/components/src/compass/index.ts
@@ -0,0 +1,10 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export * from './components';
+
+import ThemeProvider from './theme_provider/theme_provider';
+
+export {
+    ThemeProvider,
+};
--- a/webapp/platform/components/src/compass/theme_provider/overrides.ts
+++ b/webapp/platform/components/src/compass/theme_provider/overrides.ts
@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {ThemeOptions} from '@mui/material/styles/createTheme';
+
+import MuiButton from '../components/button/button.overrides';
+import MuiIconButton from '../components/icon_button/icon_button.overrides';
+import typographyOverrides from '../components/typography/typography.overrides';
+
+const components: ThemeOptions['components'] = {
+    MuiButton,
+    MuiIconButton,
+};
+
+const overrides: ThemeOptions = {
+    components,
+    typography: {
+        ...typographyOverrides,
+        htmlFontSize: 10,
+    },
+};
+
+export default overrides;
--- a/webapp/platform/components/src/compass/theme_provider/theme_provider.tsx
+++ b/webapp/platform/components/src/compass/theme_provider/theme_provider.tsx
@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {createTheme, ThemeProvider as MUIThemeProvider} from '@mui/material/styles';
+import {Theme} from "@mattermost/types/theme";
+
+import {createMUIThemeFromMMTheme} from './themes';
+
+import {THEMES} from '../../common/constants/theme';
+import overrides from './overrides';
+
+type Props = {
+    theme: Theme;
+}
+
+const ThemeProvider = ({theme = THEMES.onyx}: Props) => {
+    const MUITheme = createMUIThemeFromMMTheme(theme);
+    const combinedTheme = createTheme({
+        ...MUITheme,
+        ...overrides,
+    });
+
+    return (
+        <MUIThemeProvider
+            theme={combinedTheme}
+        />
+    );
+};
+
+export default ThemeProvider;
--- a/webapp/platform/components/src/compass/theme_provider/themes.ts
+++ b/webapp/platform/components/src/compass/theme_provider/themes.ts
@@ -0,0 +1,47 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {alpha} from '@mui/material';
+import {createTheme} from '@mui/material/styles';
+import {Theme} from '@mattermost/types/theme';
+
+import {THEMES} from '../../common/constants/theme';
+
+declare module '@mui/material/styles' {
+    interface Palette {
+        mention?: Palette['primary'];
+    }
+    interface PaletteOptions {
+        mention?: PaletteOptions['primary'];
+    }
+
+    interface PaletteColor {
+        darker?: string;
+    }
+    interface SimplePaletteColorOptions {
+        darker?: string;
+    }
+}
+
+export const createMUIThemeFromMMTheme = (theme: Theme) =>  createTheme({
+    palette: {
+        primary: {main: theme.buttonBg},
+        secondary: {main: theme.linkColor},
+        error: {main: theme.dndIndicator},
+        warning: {main: theme.awayIndicator},
+        info: {main: theme.mentionHighlightBg},
+        success: {main: theme.onlineIndicator},
+        text: {
+            primary: theme.centerChannelColor,
+        },
+        background: {
+            default: theme.centerChannelBg,
+        },
+        action: {
+            disabled: alpha(theme.centerChannelColor, 0.32),
+            disabledBackground: alpha(theme.centerChannelColor, 0.08),
+        },
+        tonalOffset: 0.05,
+    },
+});
+
--- a/webapp/platform/components/src/compass/utils/color.ts
+++ b/webapp/platform/components/src/compass/utils/color.ts
@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {decomposeColor, hslToRgb} from '@mui/material';
+import {normal} from 'color-blend';
+
+export const decomposeColorToRgb = (color: string) => {
+    if (color.startsWith('hsl')) {
+        return decomposeColor(hslToRgb(color));
+    }
+
+    return decomposeColor(color);
+};
+
+export const blend = (background: string, foreground: string) => {
+    const bg = decomposeColorToRgb(background);
+    const fg = decomposeColorToRgb(foreground);
+
+    const blended = normal({
+        r: bg.values[0],
+        g: bg.values[1],
+        b: bg.values[2],
+        a: bg.values[3] || 1,
+    }, {
+        r: fg.values[0],
+        g: fg.values[1],
+        b: fg.values[2],
+        a: fg.values[3] || 1,
+    });
+
+    return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`;
+};
--- a/webapp/platform/components/src/compass/utils/font.ts
+++ b/webapp/platform/components/src/compass/utils/font.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export const getFontMargin = (fontSize: number, multiplier: number): number =>
+    Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8);
--- a/webapp/platform/components/src/index.tsx
+++ b/webapp/platform/components/src/index.tsx
@@ -2,13 +2,14 @@
 // See LICENSE.txt for license information.

 // type
-export type {Props as GenericModalProps} from './generic_modal/generic_modal';
+export type {Props as LegacyGenericModalProps} from './legacy_generic_modal/legacy_generic_modal';
 export type {CircleSkeletonLoaderProps, RectangleSkeletonLoaderProps} from './skeleton_loader';
 export type {Props as FocusTrapProps} from './focus_trap';

 // components
-export * from './generic_modal/footer_content';
-export {GenericModal} from './generic_modal/generic_modal';
+export * from './compass';
+export * from './legacy_generic_modal/footer_content';
+export {LegacyGenericModal} from './legacy_generic_modal/legacy_generic_modal';
 export {CircleSkeletonLoader, RectangleSkeletonLoader} from './skeleton_loader';
 export * from './tour_tip';
 export * from './pulsating_dot';
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/snapshots/footer_pagination.test.tsx.snap
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/snapshots/footer_pagination.test.tsx.snap
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts
--- a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx
+++ b/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx
@@ -52,7 +52,7 @@ type State = {
    isFocalTrapActive: boolean;
 }

-export class GenericModal extends React.PureComponent<Props, State> {
+export class LegacyGenericModal extends React.PureComponent<Props, State> {
    static defaultProps: Partial<Props> = {
        show: true,
        id: 'genericModal',