diff --git a/src/base/Collapse/Collapse.tsx b/src/base/Collapse/Collapse.tsx new file mode 100644 index 00000000..4279b06a --- /dev/null +++ b/src/base/Collapse/Collapse.tsx @@ -0,0 +1,5 @@ +import { Collapse as MuiCollapse, CollapseProps as MuiCollapseProps } from '@mui/material'; + +export function Collapse(props: MuiCollapseProps): JSX.Element { + return ; +} diff --git a/src/base/Collapse/index.tsx b/src/base/Collapse/index.tsx new file mode 100644 index 00000000..96e70dfc --- /dev/null +++ b/src/base/Collapse/index.tsx @@ -0,0 +1,5 @@ +import { CollapseProps } from '@mui/material'; +import { Collapse } from './Collapse'; + +export { Collapse }; +export type { CollapseProps }; diff --git a/src/base/CssBaseLine/CssBaseLine.tsx b/src/base/CssBaseLine/CssBaseLine.tsx new file mode 100644 index 00000000..5e93be8d --- /dev/null +++ b/src/base/CssBaseLine/CssBaseLine.tsx @@ -0,0 +1,8 @@ +import { + CssBaseline as MuiCssBaseline, + CssBaselineProps as MuiCssBaselineProps +} from '@mui/material'; + +export function CssBaseline(props: MuiCssBaselineProps): JSX.Element { + return ; +} diff --git a/src/base/CssBaseLine/index.tsx b/src/base/CssBaseLine/index.tsx new file mode 100644 index 00000000..94ea1a71 --- /dev/null +++ b/src/base/CssBaseLine/index.tsx @@ -0,0 +1,5 @@ +import { CssBaselineProps } from '@mui/material'; +import { CssBaseline } from './CssBaseLine'; + +export { CssBaseline }; +export type { CssBaselineProps }; diff --git a/src/base/ListItemText/ListItemText.tsx b/src/base/ListItemText/ListItemText.tsx new file mode 100644 index 00000000..158ef40d --- /dev/null +++ b/src/base/ListItemText/ListItemText.tsx @@ -0,0 +1,8 @@ +import { + ListItemText as MuiListItemText, + ListItemTextProps as MuiListItemTextProps +} from '@mui/material'; + +export function ListItemText(props: MuiListItemTextProps): JSX.Element { + return ; +} diff --git a/src/base/ListItemText/index.tsx b/src/base/ListItemText/index.tsx new file mode 100644 index 00000000..e9a59e7f --- /dev/null +++ b/src/base/ListItemText/index.tsx @@ -0,0 +1,5 @@ +import { ListItemTextProps } from '@mui/material'; +import { ListItemText } from './ListItemText'; + +export { ListItemText }; +export type { ListItemTextProps }; diff --git a/src/base/OutlinedInput/OutlinedInput.tsx b/src/base/OutlinedInput/OutlinedInput.tsx new file mode 100644 index 00000000..a8edd7df --- /dev/null +++ b/src/base/OutlinedInput/OutlinedInput.tsx @@ -0,0 +1,8 @@ +import { + OutlinedInput as MuiOutlinedInput, + OutlinedInputProps as MuiOutlinedInputProps +} from '@mui/material'; + +export function OutlinedInput(props: MuiOutlinedInputProps): JSX.Element { + return ; +} diff --git a/src/base/OutlinedInput/index.tsx b/src/base/OutlinedInput/index.tsx new file mode 100644 index 00000000..4904b277 --- /dev/null +++ b/src/base/OutlinedInput/index.tsx @@ -0,0 +1,5 @@ +import { OutlinedInputProps } from '@mui/material'; +import { OutlinedInput } from './OutlinedInput'; + +export { OutlinedInput }; +export type { OutlinedInputProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index 327a0440..b34b4228 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -19,7 +19,9 @@ export * from './Checkbox'; export * from './Chip'; export * from './CircularProgress'; export * from './ClickAwayListener'; +export * from './Collapse'; export * from './Container'; +export * from './CssBaseLine'; export * from './Dialog'; export * from './DialogActions'; export * from './DialogContent'; @@ -41,10 +43,12 @@ export * from './ListItemAvatar'; export * from './ListItemButton'; export * from './ListItemIcon'; export * from './ListItemSecondaryAction'; +export * from './ListItemText'; export * from './ListSubheader'; export * from './Menu'; export * from './MenuItem'; export * from './MenuList'; +export * from './OutlinedInput'; export * from './Pagination'; export * from './Paper'; export * from './Popper'; diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx index c80a2fe0..51345307 100644 --- a/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -1,26 +1,32 @@ -import { styled } from '@mui/system'; +import { styled } from '@mui/material'; import React from 'react'; import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; import { Box } from '../../base/Box'; import { Link } from '../../base/Link'; import { Typography } from '../../base/Typography'; -import { BLACK, KEPPEL } from '../../theme/colors'; -import { DARK_JUNGLE_GREEN } from '../../theme/colors/colors'; -const ErrorMessage = styled(Typography)(() => ({ - color: BLACK, +const ErrorMessage = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.default, fontWeight: 'normal', marginTop: '2px', marginBottom: '2px', fontSize: '1.15rem' })); -const StyledLink = styled(Link)(() => ({ - color: KEPPEL, +const StyledLink = styled(Link)(({ theme }) => ({ + color: theme.palette.border.brand, textDecoration: 'underline', cursor: 'pointer' })); +const CodeMessage = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.code, + color: theme.palette.text.tertiary, + padding: '.85rem', + borderRadius: '.2rem', + marginBlock: '.5rem' +})); + interface FallbackComponentProps extends FallbackProps { resetErrorBoundary: () => void; children?: React.ReactNode; @@ -30,17 +36,9 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme return (

Uh-oh!😔 Please pardon the mesh.

-
+ {(error as Error).message} -
+ We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't work, please check out our support channels{' '} diff --git a/src/custom/ModalCard/style.tsx b/src/custom/ModalCard/style.tsx index 8db54c51..edf06687 100644 --- a/src/custom/ModalCard/style.tsx +++ b/src/custom/ModalCard/style.tsx @@ -4,15 +4,12 @@ import { BLACK, BUTTON_MODAL, BUTTON_MODAL_DARK, - CULTURED, - NOT_FOUND, SLIGHT_BLACK_2, - SLIGHT_BLUE, - WHITE + SLIGHT_BLUE } from '../../theme/colors/colors'; export const ContentContainer = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'light' ? WHITE : NOT_FOUND + backgroundColor: theme.palette.background.default })); export const ModalWrapper = styled('div')(() => ({ @@ -42,13 +39,15 @@ export const HeaderModal = styled('div')(({ theme }) => { const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK; const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2; + const iconColor = theme.palette.icon?.inverse; + return { display: 'flex', borderRadius: '5px 5px 0px 0px', justifyContent: 'space-between', padding: '11px 16px', height: '52px', - fill: CULTURED, + fill: iconColor, boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)', background: `linear-gradient(90deg, ${startColor}, ${endColor})`, filter: diff --git a/src/custom/TooltipIcon.tsx b/src/custom/TooltipIcon.tsx index 49e0005f..c93d18fb 100644 --- a/src/custom/TooltipIcon.tsx +++ b/src/custom/TooltipIcon.tsx @@ -5,7 +5,7 @@ import Tooltip from '../patches/Tooltip'; interface TooltipIconProps { title: string; - onClick: (event: React.MouseEvent) => void; + onClick?: (event: React.MouseEvent) => void; icon: React.ReactNode; arrow?: boolean; style?: React.CSSProperties; diff --git a/src/custom/TransferModal/TransferList/style.tsx b/src/custom/TransferModal/TransferList/style.tsx index 9cb463b8..00475200 100644 --- a/src/custom/TransferModal/TransferList/style.tsx +++ b/src/custom/TransferModal/TransferList/style.tsx @@ -1,26 +1,24 @@ import { styled } from '@mui/material'; import { Button, Chip, Grid, Paper, Typography } from '../../../base'; -import { ALICE_BLUE, BLACK, DARK_TEAL, KEPPEL, WHITE, accentGrey } from '../../../theme'; -import { STEEL_GRAY } from '../../../theme/colors/colors'; -export const StyledChip = styled(Chip)({ +export const StyledChip = styled(Chip)(({ theme }) => ({ padding: '5px 6px !important', - color: BLACK, + color: theme.palette.text.default, fontSize: '0.875rem', textTransform: 'uppercase', fontWeight: 400, height: 'unset', borderRadius: '100px', - border: `0.5px solid ${accentGrey[40]}`, - background: WHITE, + border: `0.5px solid ${theme.palette.border?.normal}`, + background: theme.palette.background.default, maxWidth: '14.375rem' -}); +})); -export const StyledPaper = styled(Paper)({ +export const StyledPaper = styled(Paper)(({ theme }) => ({ width: 300, height: 280, overflow: 'auto', - backgroundColor: ALICE_BLUE, + backgroundColor: theme.palette.background.blur?.heavy, borderRadius: '10px', boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset', '@media (max-width: 843px)': { @@ -32,26 +30,26 @@ export const StyledPaper = styled(Paper)({ '@media (max-width: 375px)': { width: '100%' } -}); +})); -export const ListHeading = styled(Typography)({ +export const ListHeading = styled(Typography)(({ theme }) => ({ paddingBottom: '15px', - color: STEEL_GRAY, + color: theme.palette.text?.default, textAlign: 'center', fontSize: '1rem', letterSpacing: '0.15px' -}); +})); -export const TransferButton = styled(Button)({ +export const TransferButton = styled(Button)(({ theme }) => ({ margin: '5px 0', padding: '7px 0', borderRadius: '10px', - borderColor: DARK_TEAL, + borderColor: theme.palette.border?.strong, boxShadow: 'none', '&:hover': { - borderColor: KEPPEL + borderColor: theme.palette.border?.brand } -}); +})); export const ListGrid = styled(Grid)({ padding: '0 1rem', diff --git a/src/theme/README.md b/src/theme/README.md index e69de29b..f9c47af1 100644 --- a/src/theme/README.md +++ b/src/theme/README.md @@ -0,0 +1,75 @@ +# Sistent Theme Palette + +This document provides an overview of the custom palette used for theme components. + +## Palette Options + +### Interactiveness + +Defines the interaction color options used in the palette. + +- `default`: Default interaction color. +- `hover`: Color on hover. +- `disabled`: Color when disabled (optional). +- `pressed`: Color when pressed. +- `secondary`: Secondary interaction color. +- `tertiary`: Tertiary interaction color. + +### TypeBackground + +Defines the extended background color options used in the palette. + +- `secondary`: Secondary background color. +- `graphics`: Graphics background color. +- `tertiary`: Tertiary background color. +- `hover`: Hover background color. +- `blur`: Blur effect colors (heavy and light). +- `brand`: Brand interaction colors. +- `cta`: Call to action interaction colors. +- `info`: Information interaction colors. +- `success`: Success interaction colors. +- `warning`: Warning interaction colors. +- `error`: Error interaction colors. +- `code`: Code background color. + +To add a new background color, add a new key to the `TypeBackground` type and update the `background` property in the `PaletteColor` type. + +### TypeText + +Defines the extended text color options used in the palette. + +- `default`: Default text color. +- `secondary`: Secondary text color. +- `tertiary`: Tertiary text color. +- `inverse`: Inverse text color. +- `brand`: Brand text color. +- `info`: Information text color. +- `success`: Success text color. +- `warning`: Warning text color. +- `error`: Error text color. + +To add a new text color, add a new key to the `TypeText` type and update the `text` property in the `PaletteColor` type. + +### PaletteColor + +Defines the color options for the palette. + +### SimplePaletteColorOptions + +Defines the simple palette color options. + +## Palette Configuration + +The palette configuration includes the following sections: + +### lightModePalette + +Defines the palette options for the light mode. + +### darkModePalette + +Defines the palette options for the dark mode. + +## Color Definitions + +The color definitions are imported from the `./colors` module and include various shades and hues used throughout the palette. diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 75af1f93..b9d11789 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -48,11 +48,35 @@ export const common = { white: WHITE }; -export const keppel = {}; - -export const carribean = {}; - -export const saffron = {}; +export const keppel = { + 70: '#daf3eb', + 60: '#93E6D1', + 50: '#41CCB3', + 40: '#00B39F', + 30: '#007763', + 20: '#006661', + 10: '#00403f' +}; + +export const carribean = { + 70: '#E6FFF6', + 60: '#A3FFE0', + 50: '#78FAD3', + 40: '#00D3A9', + 30: '#00AD90', + 20: '#006157', + 10: '#003B37' +}; + +export const saffron = { + 70: '#FFFEE6', + 60: '#fffbbd', + 50: '#ffeb6b', + 40: '#ebc017', + 30: '#c4990a', + 20: '#785400', + 10: '#523600' +}; /** * Grayscale Colors @@ -71,6 +95,7 @@ export const charcoal = { }; export const accentGrey = { + 100: '#F6F8F8', 90: '#E8EFF3', 80: '#C9DBE3', 70: '#ABBDC5', @@ -86,13 +111,13 @@ export const accentGrey = { * Function Colors */ export const blue = { - 70: '#EBF6FF', - 60: '#99CCFF', - 50: '#4797FF', - 40: '#1E77FC', - 30: '#0F58D6', - 20: '#043DB0', - 10: '#001B63' + 70: '#F0FBFF', + 60: '#9EDDFF', + 50: '#75CAFF', + 40: '#2196F3', + 30: '#1272CC', + 20: '#0754A6', + 10: '#003980' }; export const green = { diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index e06ff535..e25a304c 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -42,6 +42,7 @@ export { blue, buttonDelete, buttonDisabled, + carribean, casper, charcoal, common, @@ -52,11 +53,15 @@ export { eerieBlack, green, jungleGreen, + keppel, notificationColors, patternsBlue, primaryColor, red, redDelete, + saffron, + slateGray, + socialIcons, tabMenu, tableBackgroundHover, white, diff --git a/src/theme/components/appbar.modifiter.ts b/src/theme/components/appbar.modifiter.ts index 0a68afca..fc393fba 100644 --- a/src/theme/components/appbar.modifiter.ts +++ b/src/theme/components/appbar.modifiter.ts @@ -5,12 +5,12 @@ export const MuiAppBar: Components['MuiAppBar'] = { root: ({ theme }) => { const { palette: { - primary: { main } + background: { default: defaultBackground } } } = theme; return { elevation: 2, - background: main + background: defaultBackground }; } } diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index b63e5046..9ba9bc6a 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -1,32 +1,39 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN, WHITE, buttonDisabled } from '../colors'; export const MuiButton: Components['MuiButton'] = { styleOverrides: { root: ({ theme }) => { const { palette: { - secondary: { main } - } + background: { brand }, + text: { tertiary, default: defaultText } + }, + typography: { textB2SemiBold } } = theme; return { + ...textB2SemiBold, '&.MuiButton-contained': { - color: WHITE, - backgroundColor: main, + color: defaultText, + backgroundColor: brand?.default, '&:hover': { - backgroundColor: CARIBBEAN_GREEN + backgroundColor: brand?.hover } }, '&.MuiButton-outlined': { - border: `1px solid ${main}`, + border: `1px solid ${brand?.default}`, '&:hover': { - backgroundColor: CARIBBEAN_GREEN, - color: WHITE + backgroundColor: brand?.hover, + color: defaultText } }, '&.MuiButton-contained.Mui-disabled': { - color: buttonDisabled.main, - backgroundColor: buttonDisabled.main + color: tertiary, + backgroundColor: brand?.disabled + }, + '&.MuiButton-outlined.Mui-disabled': { + border: `1px solid ${tertiary}`, + backgroundColor: brand?.disabled, + color: tertiary } }; } diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts index 9f762350..34aef50b 100644 --- a/src/theme/components/checkbox.modifier.ts +++ b/src/theme/components/checkbox.modifier.ts @@ -1,30 +1,38 @@ import { Components, Theme } from '@mui/material'; -import { CHARCOAL, connected, darkSlateGray } from '../colors'; export const MuiCheckbox: Components['MuiCheckbox'] = { styleOverrides: { - root: { - color: 'transparent', - '&.Mui-checked': { - color: darkSlateGray.main, + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { brand }, + border: { strong } + } + } = theme; + return { + color: 'transparent', + '&.Mui-checked': { + color: defaultText, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + borderColor: brand?.default, + marginLeft: '0px', + padding: '0px' + } + }, '& .MuiSvgIcon-root': { width: '1.25rem', height: '1.25rem', - borderColor: connected.main, - marginLeft: '0px', + border: `.75px solid ${strong}`, + borderRadius: '2px', padding: '0px' + }, + '&:hover': { + backgroundColor: 'transparent' } - }, - '& .MuiSvgIcon-root': { - width: '1.25rem', - height: '1.25rem', - border: `.75px solid ${CHARCOAL}`, - borderRadius: '2px', - padding: '0px' - }, - '&:hover': { - backgroundColor: 'transparent' - } + }; } } }; diff --git a/src/theme/components/collapse.modifier.ts b/src/theme/components/collapse.modifier.ts index 5c37e179..a7d58f88 100644 --- a/src/theme/components/collapse.modifier.ts +++ b/src/theme/components/collapse.modifier.ts @@ -1,5 +1,4 @@ import { Components, Theme } from '@mui/material'; -import { patternsBlue } from '../colors'; declare module '@mui/material/Collapse' { interface CollapseProps { @@ -19,12 +18,14 @@ export const MuiCollapse: Components['MuiCollapse'] = { props: { variant: 'submenu' }, style: ({ theme }) => { const { - palette: { cultured } + palette: { + background: { hover, secondary } + } } = theme; return { - backgroundColor: cultured.main, + backgroundColor: hover, '&:active': { - backgroundColor: patternsBlue.main + backgroundColor: secondary } }; } diff --git a/src/theme/components/formlabel.modifier.ts b/src/theme/components/formlabel.modifier.ts index 2e3a2201..67b1626c 100644 --- a/src/theme/components/formlabel.modifier.ts +++ b/src/theme/components/formlabel.modifier.ts @@ -1,12 +1,18 @@ import { Components, Theme } from '@mui/material'; -import { connected } from '../colors'; export const MuiFormLabel: Components['MuiFormLabel'] = { styleOverrides: { - root: { - '&.Mui-focused': { - color: connected.main - } + root: ({ theme }) => { + const { + palette: { + background: { brand } + } + } = theme; + return { + '&.Mui-focused': { + color: brand?.default + } + }; } } }; diff --git a/src/theme/components/input.modifier.ts b/src/theme/components/input.modifier.ts index 3ffe787f..d42899ea 100644 --- a/src/theme/components/input.modifier.ts +++ b/src/theme/components/input.modifier.ts @@ -1,18 +1,24 @@ import { Components, Theme } from '@mui/material/styles'; -import { CARIBBEAN_GREEN } from '../colors'; export const MuiInput: Components['MuiInput'] = { styleOverrides: { - root: { - '&:before': { - borderBottom: '2px solid rgba(0, 0, 0, 0.5)' - }, - '&.Mui-focused:after': { - borderBottom: ` 2px solid ${CARIBBEAN_GREEN}` - }, - '&:hover:not(.Mui-disabled):before': { - borderBottom: `2px solid ${CARIBBEAN_GREEN}` - } + root: ({ theme }) => { + const { + palette: { + background: { graphics } + } + } = theme; + return { + '&:before': { + borderBottom: '2px solid rgba(0, 0, 0, 0.5)' + }, + '&.Mui-focused:after': { + borderBottom: ` 2px solid ${graphics?.default}` + }, + '&:hover:not(.Mui-disabled):before': { + borderBottom: `2px solid ${graphics?.default}` + } + }; } } }; diff --git a/src/theme/components/link.modifier.ts b/src/theme/components/link.modifier.ts index 8175292c..b5248407 100644 --- a/src/theme/components/link.modifier.ts +++ b/src/theme/components/link.modifier.ts @@ -1,26 +1,33 @@ import { Components, Theme } from '@mui/material'; -import { connected, darkTeal } from '../colors'; export const MuiLink: Components['MuiLink'] = { styleOverrides: { - root: { - fontWeight: '600', - textDecoration: 'none', - color: darkTeal.main, - '&:visited': { - textDecoration: 'none' - }, - '&:hover': { - textDecoration: 'underline' - }, - '&.keppel': { - color: connected.main - }, - '&.Mui-disabled': { + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { brand } + } + } = theme; + return { + fontWeight: '600', + textDecoration: 'none', + color: defaultText, + '&:visited': { + textDecoration: 'none' + }, '&:hover': { - cursor: 'not-allowed' + textDecoration: 'underline' + }, + '&.keppel': { + color: brand?.default + }, + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } } - } + }; } } }; diff --git a/src/theme/components/listitem.modifier.ts b/src/theme/components/listitem.modifier.ts index 7ce9d7e0..349af2f1 100644 --- a/src/theme/components/listitem.modifier.ts +++ b/src/theme/components/listitem.modifier.ts @@ -1,63 +1,90 @@ import { Components, ListItemProps, Theme } from '@mui/material'; -import { DARK_SLATE_GRAY, PATTERNS_BLUE } from '../colors'; + +declare module '@mui/material/ListItem' { + interface ListItemPropsVariantOverrides { + menu: true; + submenu: true; + } +} export const MuiListItem: Components['MuiListItem'] = { + styleOverrides: { + root: {} + }, variants: [ { props: { variant: 'menu' } as ListItemProps, - style: { - textTransform: 'none', - margin: '.5rem 0rem .5rem .5rem', - padding: '0rem', - color: DARK_SLATE_GRAY, - fontSize: '.9rem', - fill: DARK_SLATE_GRAY, - '&.Mui-selected': { - fontWeight: 'bold', - color: DARK_SLATE_GRAY, - fill: DARK_SLATE_GRAY, - '&:hover': { - color: DARK_SLATE_GRAY, - '& svg': { - fill: DARK_SLATE_GRAY + style: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + icon: { default: defaultIcon }, + background: { brand } + } + } = theme; + return { + textTransform: 'none', + margin: '.5rem 0rem .5rem .5rem', + padding: '0rem', + color: defaultText, + fontSize: '.9rem', + fill: defaultText, + '&.Mui-selected': { + fontWeight: 'bold', + color: defaultText, + fill: defaultText, + '&:hover': { + color: defaultText, + '& svg': { + fill: defaultIcon + } } + }, + '&:has(> .MuiListItem-root.MuiMenuItem-root)': { + backgroundColor: brand?.default + }, + '& svg': { + marginRight: '.75rem', + paddingLeft: '0rem', + marginLeft: '0rem' } - }, - '&:li:has(> .MuiMenuItem)': { - backgroundColor: 'green' - }, - '& svg': { - marginRight: '.75rem', - paddingLeft: '0rem', - marginLeft: '0rem' - } + }; } }, { props: { variant: 'submenu' } as ListItemProps, - style: { - textTransform: 'none', - margin: '.0rem 0rem 0rem .5rem', - justifyContent: 'center', - alignItems: 'center', - color: DARK_SLATE_GRAY, - fontSize: '.9rem', - fill: DARK_SLATE_GRAY, - '&.Mui-selected': { - fontWeight: 'bold', - backgroundColor: PATTERNS_BLUE, - color: DARK_SLATE_GRAY, - fill: DARK_SLATE_GRAY, - '&:hover': { - color: DARK_SLATE_GRAY, - '& svg': { - fill: DARK_SLATE_GRAY + style: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + icon: { default: defaultIcon }, + background: { secondary } + } + } = theme; + return { + textTransform: 'none', + margin: '.0rem 0rem 0rem .5rem', + justifyContent: 'center', + alignItems: 'center', + color: defaultText, + fontSize: '.9rem', + fill: defaultText, + '&.Mui-selected': { + fontWeight: 'bold', + backgroundColor: secondary, + color: defaultText, + fill: defaultText, + '&:hover': { + color: defaultText, + '& svg': { + fill: defaultIcon + } } + }, + '& svg': { + marginRight: '.5rem' } - }, - '& svg': { - marginRight: '.5rem' - } + }; } } ] diff --git a/src/theme/components/menuitem.modifier.ts b/src/theme/components/menuitem.modifier.ts index 8c514ae3..c0030b15 100644 --- a/src/theme/components/menuitem.modifier.ts +++ b/src/theme/components/menuitem.modifier.ts @@ -1,27 +1,33 @@ import { Components, Theme } from '@mui/material'; -import { darkTeal } from '../colors'; export const MuiMenuItem: Components['MuiMenuItem'] = { styleOverrides: { - root: { - '&:hover': { - '& li': { - color: darkTeal.dark, - fill: darkTeal.dark + root: ({ theme }) => { + const { + palette: { + text: { tertiary } } - }, - - '& svg': { + } = theme; + return { '&:hover': { - fill: darkTeal.dark - } - }, + '& li': { + color: tertiary, + fill: tertiary + } + }, - '&.Mui-disabled': { - '&:hover': { - cursor: 'not-allowed' + '& svg': { + '&:hover': { + fill: tertiary + } + }, + + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } } - } + }; } } }; diff --git a/src/theme/components/outlinedinput.modifier.ts b/src/theme/components/outlinedinput.modifier.ts index bf4f5cdb..a0f17e86 100644 --- a/src/theme/components/outlinedinput.modifier.ts +++ b/src/theme/components/outlinedinput.modifier.ts @@ -1,25 +1,31 @@ import { Components, Theme } from '@mui/material'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { CARIBBEAN_GREEN, KEPPEL } from '../colors'; export const MuiOutlinedInput: Components['MuiOutlinedInput'] = { styleOverrides: { notchedOutline: { borderColor: 'rgba(0, 0, 0, 0.5)' }, - root: { - [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: CARIBBEAN_GREEN - }, - [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { - borderColor: CARIBBEAN_GREEN - }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: KEPPEL - }, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: KEPPEL - } + root: ({ theme }) => { + const { + palette: { + background: { graphics, brand } + } + } = theme; + return { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: graphics?.default + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: graphics?.default + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: brand?.default + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: brand?.default + } + }; } } }; diff --git a/src/theme/components/pagination.modifier.ts b/src/theme/components/pagination.modifier.ts index 63da1dc7..9b7244aa 100644 --- a/src/theme/components/pagination.modifier.ts +++ b/src/theme/components/pagination.modifier.ts @@ -1,18 +1,25 @@ import { Components, Theme } from '@mui/material'; -import { anakiwa, connected, white } from '../colors'; +import { white } from '../colors'; export const MuiPagination: Components['MuiPagination'] = { styleOverrides: { - root: { - button: { - '&:hover': { - backgroundColor: anakiwa.main - }, - '&.Mui-selected': { - color: white.main, - backgroundColor: connected.main + root: ({ theme }) => { + const { + palette: { + background: { brand } } - } + } = theme; + return { + button: { + '&:hover': { + backgroundColor: brand?.hover + }, + '&.Mui-selected': { + color: white.main, + backgroundColor: brand?.default + } + } + }; } } }; diff --git a/src/theme/components/switch.modifier.ts b/src/theme/components/switch.modifier.ts index 236dedee..a99052e5 100644 --- a/src/theme/components/switch.modifier.ts +++ b/src/theme/components/switch.modifier.ts @@ -1,24 +1,31 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN, CHARCOAL } from '../colors'; export const MuiSwitch: Components['MuiSwitch'] = { styleOverrides: { - root: { - '& .MuiSwitch-switchBase': { - color: CHARCOAL, - '&:hover': { - backgroundColor: 'rgba(60, 73, 79, 0.06)' + root: ({ theme }) => { + const { + palette: { + background: { graphics }, + border: { strong } } - }, - '& .MuiSwitch-switchBase.Mui-checked': { - color: CARIBBEAN_GREEN, - '&:hover': { - backgroundColor: 'rgba(0, 211, 169, 0.06)' + } = theme; + return { + '& .MuiSwitch-switchBase': { + color: strong, + '&:hover': { + backgroundColor: 'rgba(60, 73, 79, 0.06)' + } + }, + '& .MuiSwitch-switchBase.Mui-checked': { + color: graphics?.default, + '&:hover': { + backgroundColor: 'rgba(0, 211, 169, 0.06)' + } + }, + '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { + backgroundColor: graphics?.default } - }, - '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { - backgroundColor: CARIBBEAN_GREEN - } + }; } } }; diff --git a/src/theme/components/tab.modifier.ts.ts b/src/theme/components/tab.modifier.ts.ts index 68aa34f5..835ce0ea 100644 --- a/src/theme/components/tab.modifier.ts.ts +++ b/src/theme/components/tab.modifier.ts.ts @@ -1,15 +1,22 @@ import { Components, Theme } from '@mui/material'; -import { actionIcon, white } from '../colors'; export const MuiTab: Components['MuiTab'] = { styleOverrides: { - root: { - '&.Mui-selected': { - color: actionIcon.main, - backgroundColor: white.main - }, - backgroundColor: actionIcon.main, - color: white.main + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { default: defaultBackground } + } + } = theme; + return { + '&.Mui-selected': { + color: defaultText, + backgroundColor: defaultBackground + }, + backgroundColor: defaultText, + color: defaultBackground + }; } } }; diff --git a/src/theme/components/textfield.modifier.ts b/src/theme/components/textfield.modifier.ts index b4d43e22..c6bd08de 100644 --- a/src/theme/components/textfield.modifier.ts +++ b/src/theme/components/textfield.modifier.ts @@ -1,15 +1,21 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN } from '../colors'; export const MuiTextField: Components['MuiTextField'] = { styleOverrides: { - root: { - '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)', - '--TextField-brandBorderHoverColor': CARIBBEAN_GREEN, - '--TextField-brandBorderFocusedColor': CARIBBEAN_GREEN, - '& label.Mui-focused': { - color: 'var(--TextField-brandBorderFocusedColor)' - } + root: ({ theme }) => { + const { + palette: { + background: { graphics } + } + } = theme; + return { + '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)', + '--TextField-brandBorderHoverColor': graphics?.default, + '--TextField-brandBorderFocusedColor': graphics?.default, + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)' + } + }; } } }; diff --git a/src/theme/index.tsx b/src/theme/index.tsx index b79bd9f0..5eb98ba9 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -1,2 +1,5 @@ +export { darkModePalette, lightModePalette } from './palette'; +export { typography } from './typography'; + export { default as SistentThemeProvider } from './ThemeProvider'; export * from './colors'; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index de8d0db6..9d2a3be7 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -1,133 +1,388 @@ -import { PaletteOptions, lighten } from '@mui/material'; -import { - CHARCOAL, - KEPPEL, - accentGrey, - actionIcon, - buttonDelete, - common, - cultured, - notificationColors -} from './colors'; +import { PaletteOptions, alpha } from '@mui/material'; +import * as Colors from './colors'; declare module '@mui/material/styles' { - interface PaletteColor { - darker?: string; + // Defines the interaction color options used in the palette. + interface Interactiveness { + default: string; + hover: string; + disabled?: string; + pressed: string; + secondary: string; + tertiary: string; } - interface SimplePaletteColorOptions { - darker?: string; + // Defines the extended background color options used in the palette. + interface TypeBackground { + secondary?: string; + supplementary?: string; + graphics?: { + default: string; + }; + tertiary?: string; + hover?: string; + blur?: { + heavy: string; + light: string; + }; + //additional color palette {neutral} + neutral?: { + default: string; + hover: string; + pressed: string; + }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; } - interface Palette { - neutral?: Palette['primary']; - cultured: { - main: string; + + // Defines the extended text color options used in the palette. + interface TypeText { + default?: string; + secondary: string; + tertiary?: string; + inverse?: string; + brand?: string; + info?: string; + success?: string; + warning?: string; + error?: string; + neutral?: { + default: string; + alt: string; + }; + constant?: { + white: string; }; - actionIcon: { - main: string; + } + + // Defines the color options for the palette + interface PaletteColor { + secondary?: string; + supplementary?: string; + blur?: { + heavy: string; + light: string; + }; + neutral?: { + default: string; hover: string; + pressed: string; + alt: string; + }; + constant?: { + white: string; + }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; + } + + // Defines the simple palette color options. + interface SimplePaletteColorOptions { + secondary?: string; + supplementary?: string; + blur?: { + heavy: string; + light: string; }; - buttonDelete: { - main: string; + neutral?: { + default: string; hover: string; + pressed: string; + alt: string; + }; + constant?: { + white: string; }; + inverse?: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; } - interface PaletteOptions { - neutral?: PaletteOptions['primary']; - cultured?: { - main?: string; + + /* Defines the palette containing border and icon color options. + To define any additional custom color options, you can extend the interface here. + */ + interface Palette { + border: { + default: string; + strong: string; + brand: string; + normal: string; + neutral?: { + default: string; + alt: string; + }; + }; + icon: { + default: string; + secondary: string; + brand: string; + inverse: string; + weather: string; + disabled: string; + neutral?: { + default: string; + alt: string; + }; }; - actionIcon?: { - main?: string; - hover?: string; + } + + // Defines the options available for the palette. + interface PaletteOptions { + border: { + default: string; + strong: string; + brand: string; + normal: string; + neutral?: { + default: string; + alt: string; + }; }; - buttonDelete?: { - main?: string; - hover?: string; + icon: { + default: string; + secondary: string; + brand: string; + inverse: string; + weather: string; + disabled: string; + neutral?: { + default: string; + alt: string; + }; }; } } export const lightModePalette: PaletteOptions = { - primary: { - main: CHARCOAL, - light: lighten(CHARCOAL, 0.7), - contrastText: common.white - }, - secondary: { - main: KEPPEL - }, background: { - default: accentGrey[90], - paper: accentGrey[90] - }, - info: { - main: notificationColors.info.main - }, - error: { - main: notificationColors.error.main, - dark: notificationColors.error.dark - }, - warning: { - main: notificationColors.warning.main, - light: notificationColors.warning.light, - contrastText: common.white - }, - success: { - main: notificationColors.success.main + default: Colors.charcoal[100], + secondary: Colors.accentGrey[90], + tertiary: Colors.accentGrey[80], + hover: Colors.charcoal[90], + supplementary: Colors.accentGrey[40], + blur: { + heavy: alpha(Colors.charcoal[90], 0.8), + light: alpha(Colors.charcoal[90], 0.5) + }, + neutral: { + default: Colors.charcoal[40], + hover: Colors.charcoal[30], + pressed: Colors.charcoal[20] + }, + inverse: Colors.charcoal[10], + brand: { + default: Colors.keppel[40], + hover: Colors.keppel[50], + disabled: Colors.charcoal[90], + pressed: Colors.keppel[60], + secondary: Colors.keppel[50], + tertiary: Colors.keppel[70] + }, + graphics: { + default: Colors.carribean[30] + }, + cta: { + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[60], + tertiary: Colors.saffron[70] + }, + info: { + default: Colors.blue[40], + hover: Colors.blue[20], + pressed: Colors.blue[10], + secondary: Colors.blue[60], + tertiary: Colors.blue[70] + }, + success: { + default: Colors.green[30], + hover: Colors.green[20], + pressed: Colors.green[10], + secondary: Colors.green[60], + tertiary: Colors.green[70] + }, + warning: { + default: Colors.yellow[30], + hover: Colors.yellow[20], + pressed: Colors.yellow[10], + secondary: Colors.yellow[60], + tertiary: Colors.yellow[70] + }, + error: { + default: Colors.red[30], + hover: Colors.red[20], + pressed: Colors.red[10], + secondary: Colors.red[60], + tertiary: Colors.red[70] + }, + code: Colors.charcoal[90] }, - common: { - black: common.black, - white: common.white + text: { + default: Colors.charcoal[10], + secondary: Colors.charcoal[40], + tertiary: Colors.charcoal[70], + inverse: Colors.charcoal[100], + brand: Colors.keppel[40], + info: Colors.blue[40], + success: Colors.green[30], + warning: Colors.yellow[30], + error: Colors.red[30], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + }, + constant: { + white: Colors.charcoal[100] + } }, - cultured: { - main: cultured.main + border: { + default: Colors.charcoal[90], + strong: Colors.charcoal[30], + brand: Colors.keppel[40], + normal: Colors.charcoal[60], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } }, - actionIcon: { - main: actionIcon.main, - hover: actionIcon.hover - }, - buttonDelete: { - main: buttonDelete.main, - hover: buttonDelete.hover - }, - neutral: {}, - text: {} + icon: { + default: Colors.accentGrey[10], + secondary: Colors.charcoal[40], + brand: Colors.keppel[40], + inverse: Colors.charcoal[100], + weather: Colors.accentGrey[50], + disabled: Colors.charcoal[70], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } + } }; export const darkModePalette: PaletteOptions = { - primary: { - main: KEPPEL, - light: lighten(KEPPEL, 0.7), - contrastText: common.white - }, - secondary: { - main: KEPPEL - }, background: { - default: accentGrey[10], - paper: accentGrey[10] + default: Colors.charcoal[10], + secondary: Colors.accentGrey[10], + tertiary: Colors.accentGrey[30], + hover: Colors.charcoal[20], + supplementary: Colors.accentGrey[40], + blur: { + heavy: alpha(Colors.charcoal[10], 0.8), + light: alpha(Colors.charcoal[10], 0.5) + }, + neutral: { + default: Colors.accentGrey[100], + hover: Colors.charcoal[90], + pressed: Colors.charcoal[80] + }, + brand: { + default: Colors.keppel[40], + hover: Colors.keppel[50], + disabled: Colors.charcoal[20], + pressed: Colors.keppel[60], + secondary: Colors.keppel[20], + tertiary: Colors.keppel[10] + }, + graphics: { + default: Colors.carribean[40] + }, + cta: { + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[20], + tertiary: Colors.saffron[10] + }, + info: { + default: Colors.blue[40], + hover: Colors.blue[50], + pressed: Colors.blue[60], + secondary: Colors.blue[20], + tertiary: Colors.blue[10] + }, + success: { + default: Colors.green[40], + hover: Colors.green[50], + pressed: Colors.green[60], + secondary: Colors.green[20], + tertiary: Colors.green[10] + }, + warning: { + default: Colors.yellow[40], + hover: Colors.yellow[50], + pressed: Colors.yellow[60], + secondary: Colors.yellow[20], + tertiary: Colors.yellow[10] + }, + error: { + default: Colors.red[40], + hover: Colors.red[50], + pressed: Colors.red[60], + secondary: Colors.red[20], + tertiary: Colors.red[10] + }, + code: Colors.accentGrey[90] }, - info: { - main: notificationColors.info.main, - contrastText: common.white + text: { + default: Colors.charcoal[100], + secondary: Colors.charcoal[40], + tertiary: Colors.charcoal[60], + inverse: Colors.charcoal[10], + brand: Colors.keppel[40], + info: Colors.blue[40], + success: Colors.green[40], + warning: Colors.yellow[40], + error: Colors.red[40], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + }, + constant: { + white: Colors.charcoal[100] + } }, - error: { - main: notificationColors.error.main, - dark: notificationColors.error.dark, - contrastText: common.white + border: { + default: Colors.accentGrey[10], + strong: Colors.accentGrey[60], + brand: Colors.keppel[40], + normal: Colors.accentGrey[30], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } }, - warning: { - main: notificationColors.warning.main, - light: notificationColors.warning.light, - contrastText: common.white - }, - success: { - main: notificationColors.success.main, - contrastText: common.white - }, - common: { - black: common.black, - white: common.white - }, - neutral: {} + + icon: { + default: Colors.accentGrey[90], + secondary: Colors.charcoal[80], + brand: Colors.keppel[40], + inverse: Colors.charcoal[10], + weather: Colors.saffron[40], + disabled: Colors.charcoal[50], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } + } }; diff --git a/src/theme/typography.ts b/src/theme/typography.ts index c2ed4312..ce99a375 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -1,72 +1,125 @@ -import { PaletteMode } from '@mui/material'; +import { PaletteMode, createTheme } from '@mui/material'; import { TypographyOptions } from '@mui/material/styles/createTypography'; import { common } from './colors'; +declare module '@mui/material/styles' { + interface TypographyVariants { + textH1Bold: React.CSSProperties; + textH2Medium: React.CSSProperties; + textH3Medium: React.CSSProperties; + textB1Regular: React.CSSProperties; + textB2SemiBold: React.CSSProperties; + textB3Regular: React.CSSProperties; + textL1Bold: React.CSSProperties; + textL2Regular: React.CSSProperties; + textC1Regular: React.CSSProperties; + textC2Regular: React.CSSProperties; + } + + // allow configuration using `createTheme` + interface TypographyVariantsOptions { + textH1Bold: React.CSSProperties; + textH2Medium: React.CSSProperties; + textH3Medium: React.CSSProperties; + textB1Regular: React.CSSProperties; + textB2SemiBold: React.CSSProperties; + textB3Regular: React.CSSProperties; + textL1Bold: React.CSSProperties; + textL2Regular: React.CSSProperties; + textC1Regular: React.CSSProperties; + textC2Regular: React.CSSProperties; + } +} + +const theme = createTheme(); + export const typography = (mode: PaletteMode): TypographyOptions => { return { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - body1: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px' - }, - body2: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px', - fontWeight: 'normal', - lineHeight: '28px' - }, - h1: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '64px', - lineHeight: '80px', - fontWeight: 'bold' - }, - h2: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textH1Bold: { + fontFamily: ['Qanelas Soft'].join(','), fontSize: '52px', lineHeight: '64px', - fontWeight: 'bold' + fontWeight: 700, + [theme.breakpoints.down('sm')]: { + fontSize: '32px', + lineHeight: '40px' + } }, - h3: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textH2Medium: { + fontFamily: ['Qanelas Soft'].join(','), fontSize: '32px', lineHeight: '40px', - fontWeight: 'bold' + fontWeight: 500, + [theme.breakpoints.down('sm')]: { + fontSize: '24px', + lineHeight: '36px' + } }, - h4: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textH3Medium: { + fontFamily: ['Qanelas Soft'].join(','), fontSize: '1.5rem', lineHeight: '2.25rem', - fontWeight: 600 + fontWeight: 500, + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem', + fontWeight: 700 + } }, - h5: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textB1Regular: { + fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, fontSize: '1rem', - fontWeight: 'bold', - lineHeight: '1.75rem' + fontWeight: 400, + lineHeight: '1.75rem', + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem' + } }, - h6: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textB2SemiBold: { + fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, - fontSize: '12px', - fontWeight: 'bold', - lineHeight: '16px', - textTransform: 'uppercase' + fontSize: '1rem', + fontWeight: 600, + lineHeight: '1.75rem', + textTransform: 'capitalize', + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem' + } }, - subtitle1: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px', - fontWeight: 500, - lineHeight: '28px' + textB3Regular: { + fontFamily: ['Open Sans'].join(','), + fontSize: '0.875rem', + fontWeight: 400, + lineHeight: '1.5rem' }, - subtitle2: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '12px', - fontWeight: 500, - lineHeight: '24px' + textL1Bold: { + fontFamily: ['Qanelas Soft'].join(','), + fontSize: '0.75rem', + fontWeight: 700, + lineHeight: '1rem' + }, + textL2Regular: { + fontFamily: ['Open Sans'].join(','), + fontSize: '0.75rem', + fontWeight: 400, + lineHeight: '1.5rem' + }, + textC1Regular: { + fontFamily: ['Consolas'].join(','), + fontSize: '0.75rem', + fontWeight: 400, + lineHeight: '1.5rem' + }, + textC2Regular: { + fontFamily: ['Consolas'].join(','), + fontSize: '1rem', + fontWeight: 400, + lineHeight: '1.75rem' }, - button: {}, caption: {}, overline: {} };