diff --git a/.babelrc b/.babelrc index 1f6b0c3c0b..289abc9e4f 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,6 @@ { "plugins": [ - "@babel/plugin-transform-flow-strip-types" + "@babel/plugin-transform-flow-strip-types", + ["styled-jsx/babel"] ] } diff --git a/.eslintrc b/.eslintrc index d19b2d5412..8b25c0285b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -128,7 +128,15 @@ ] } ], - "import/extensions": ["error", "never"] + "import/extensions": ["error", "never"], + "react/no-unknown-property": [ + 2, + { + "ignore": [ + "jsx" + ] + } + ] }, "settings": { "import/resolver": { diff --git a/i18n/en.pot b/i18n/en.pot index cae303cf0b..105de08c29 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-08-10T10:42:21.141Z\n" -"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n" +"POT-Creation-Date: 2024-09-30T22:05:59.193Z\n" +"PO-Revision-Date: 2024-09-30T22:05:59.194Z\n" msgid "Choose one or more dates..." msgstr "Choose one or more dates..." @@ -875,8 +875,8 @@ msgstr "Show all" msgid "Program" msgstr "Program" -msgid "Organisation Unit" -msgstr "Organisation Unit" +msgid "Organisation Unittt" +msgstr "Organisation Unittt" msgid "Registration" msgstr "Registration" @@ -963,6 +963,9 @@ msgstr "Edit Event" msgid "View Event" msgstr "View Event" +msgid "Organisation Unit" +msgstr "Organisation Unit" + msgid "Selected program" msgstr "Selected program" diff --git a/package.json b/package.json index efb07db0ef..da2333dd3c 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "packages/rules-engine" ], "dependencies": { - "@dhis2/rules-engine-javascript": "101.4.1", "@dhis2/app-runtime": "^3.9.3", "@dhis2/d2-i18n": "^1.1.0", "@dhis2/d2-icons": "^1.0.1", @@ -18,6 +17,7 @@ "@dhis2/d2-ui-org-unit-tree": "^7.3.3", "@dhis2/d2-ui-rich-text": "^7.4.0", "@dhis2/d2-ui-sharing-dialog": "^7.3.3", + "@dhis2/rules-engine-javascript": "101.4.1", "@dhis2/ui": "^9.10.1", "@joakim_sm/react-infinite-calendar": "^2.4.2", "@material-ui/core": "3.9.4", @@ -63,7 +63,6 @@ "redux-observable": "^2.0.0", "reselect": "^4.1.7", "rxjs": "^7.5.5", - "styled-jsx": "^4", "typeface-roboto": "^0.0.75", "uuid": "^9.0.0" }, @@ -129,7 +128,8 @@ "jsdoc-export-default-interop": "^0.3.1", "node-fetch": "2", "redux-devtools-extension": "^2.13.9", - "wait-on": "^7.2.0" + "wait-on": "^7.2.0", + "styled-jsx": "^4" }, "resolutions": { "@dhis2/cli-app-scripts": "^10.4.0", diff --git a/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js b/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js index 3743fa5dc4..283a7aa25f 100644 --- a/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js +++ b/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js @@ -77,7 +77,7 @@ const getStyles = theme => ({ paddingBottom: theme.typography.pxToRem(15), }, fieldLabelMediaBased: { - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js b/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js index 228ecc71a6..704868d099 100644 --- a/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js +++ b/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js @@ -2,9 +2,12 @@ import React, { Component } from 'react'; import { Checkbox, Switch, spacersNum, FieldSet, Label } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; +import { theme } from '../../../../../styles/theme'; -const styles = theme => ({ - label: theme.typography.formFieldTitle, +const styles = () => ({ + label: { + fontSize: theme.typography.pxToRem(12), + }, checkbox: { marginTop: spacersNum.dp12, marginBottom: spacersNum.dp12, @@ -73,7 +76,7 @@ class D2TrueOnlyPlain extends Component { return ( diff --git a/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js b/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js index 26b4b4165d..4d2eb6d319 100644 --- a/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js +++ b/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js @@ -5,9 +5,12 @@ import { Checkbox, spacersNum, FieldSet, Label } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; import { multiOrientations } from './multiSelectBoxes.const'; import { FormGroup } from '../FormGroup.component'; +import { theme } from '../../../../../../styles/theme'; -const styles = theme => ({ - label: theme.typography.formFieldTitle, +const styles = () => ({ + label: { + size: theme.typography.pxToRem(12), + }, checkbox: { marginTop: spacersNum.dp8, marginBottom: spacersNum.dp16, diff --git a/src/core_modules/capture-core/components/Pages/New/NewPage.component.js b/src/core_modules/capture-core/components/Pages/New/NewPage.component.js index a7b070193b..de30a0f1b0 100644 --- a/src/core_modules/capture-core/components/Pages/New/NewPage.component.js +++ b/src/core_modules/capture-core/components/Pages/New/NewPage.component.js @@ -3,7 +3,8 @@ import React, { useEffect, useState } from 'react'; import { compose } from 'redux'; import { useSelector } from 'react-redux'; import type { ComponentType } from 'react'; -import withStyles from '@material-ui/core/styles/withStyles'; +import cx from 'classnames'; +// import withStyles from '@material-ui/core/styles/withStyles'; import { OrgUnitFetcher } from 'capture-core/components/OrgUnitFetcher'; import i18n from '@dhis2/d2-i18n'; import { Button } from '@dhis2/ui'; @@ -15,12 +16,14 @@ import { useScopeInfo } from '../../../hooks/useScopeInfo'; import { RegistrationDataEntry } from './RegistrationDataEntry'; import { NoWriteAccessMessage } from '../../NoWriteAccessMessage'; import { IncompleteSelectionsMessage } from '../../IncompleteSelectionsMessage'; +import { theme } from '../../../../../styles/theme'; -const getStyles = () => ({ +/* const getStyles = () => ({ container: { padding: '24px 24px 16px 24px', + backgroundColor: 'red', }, -}); +}); */ const NewPagePlain = ({ showMessageToSelectOrgUnitOnNewPage, @@ -28,7 +31,7 @@ const NewPagePlain = ({ showMessageThatCategoryOptionIsInvalidForOrgUnit, showDefaultViewOnNewPage, handleMainPageNavigation, - classes, + // classes, currentScopeId, newPageStatus, writeAccess, @@ -82,7 +85,7 @@ const NewPagePlain = ({ teiDisplayName={teiDisplayName} formIsOpen={newPageStatus === newPageStatuses.DEFAULT} /> -
+
{ !writeAccess ? }
+ ); }; @@ -161,5 +173,5 @@ export const NewPageComponent: ComponentType = compose( withLoadingIndicator(), withErrorMessageHandler(), - withStyles(getStyles), + // withStyles(getStyles), )(NewPagePlain); diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js index d8445f9570..6aee18c0b3 100644 --- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js +++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js @@ -4,11 +4,11 @@ import { withStyles } from '@material-ui/core/styles'; import i18n from '@dhis2/d2-i18n'; import { ComposedProgramSelector } from './ComposedProgramSelector.component'; -const getStyles = (theme: Theme) => ({ +const getStyles = () => ({ programLabel: { - paddingTop: '10px', - [theme.breakpoints.down(523)]: { - paddingTop: '0px !important', + paddingTop: '100px', + '@media (max-width: 523px)': { + paddingTop: '600px !important', }, }, }); diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js index ea39476d43..2048f77581 100644 --- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js +++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js @@ -6,14 +6,13 @@ import { withStyles } from '@material-ui/core/styles'; import { ComposedRegUnitSelector } from './ComposedRegUnitSelector.component'; import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../metaData'; -const getStyles = (theme: Theme) => ({ +const getStyles = () => ({ label: { paddingTop: '10px', - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, - }, -}); + } }); type Props = { selectedProgramId: ?string, @@ -56,7 +55,7 @@ class RegUnitSelectorPlain extends React.Component { // $FlowFixMe[cannot-spread-inexact] automated comment ({ +const getStyles = () => ({ programLabel: { paddingTop: '10px', - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js index e75b8513ea..942b12a8ba 100644 --- a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js +++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js @@ -6,10 +6,10 @@ import { withStyles } from '@material-ui/core/styles'; import { ComposedRegUnitSelector } from './ComposedRegUnitSelector.component'; import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../../metaData'; -const getStyles = (theme: Theme) => ({ +const getStyles = () => ({ label: { paddingTop: '10px', - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js b/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js index aa4520ca1c..871e4001bb 100644 --- a/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js +++ b/src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js @@ -67,7 +67,7 @@ const getStyles = theme => ({ paddingBottom: theme.typography.pxToRem(15), }, fieldLabelMediaBased: { - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js b/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js index e958a69644..4c06958ea9 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js +++ b/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js @@ -54,11 +54,11 @@ const tabMode = Object.freeze({ SCHEDULE: 'SCHEDULE', }); -const getStyles = (theme: Theme) => ({ +const getStyles = () => ({ dataEntryContainer: { }, fieldLabelMediaBased: { - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/ViewEventDataEntry/ViewEventDataEntry.component.js b/src/core_modules/capture-core/components/WidgetEventEdit/ViewEventDataEntry/ViewEventDataEntry.component.js index 550f589dc4..5d9ba2ca6e 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/ViewEventDataEntry/ViewEventDataEntry.component.js +++ b/src/core_modules/capture-core/components/WidgetEventEdit/ViewEventDataEntry/ViewEventDataEntry.component.js @@ -62,7 +62,7 @@ const getStyles = (theme: Theme) => ({ whiteSpace: 'nowrap', }, fieldLabelMediaBased: { - [theme.breakpoints.down(523)]: { + '@media (max-width: 523px)': { paddingTop: '0px !important', }, }, diff --git a/src/core_modules/capture-ui/FlatList/FlatList.component.js b/src/core_modules/capture-ui/FlatList/FlatList.component.js index 28a5753e60..f89a61d2e5 100644 --- a/src/core_modules/capture-ui/FlatList/FlatList.component.js +++ b/src/core_modules/capture-ui/FlatList/FlatList.component.js @@ -1,58 +1,62 @@ // @flow -import React, { type ComponentType } from 'react'; +import React from 'react'; import cx from 'classnames'; import { colors, spacersNum } from '@dhis2/ui'; -import { withStyles } from '@material-ui/core'; import type { Props } from './flatList.types'; -const itemStyles = { - overflow: 'hidden', - wordWrap: 'break-word', - textOverflow: 'ellipsis', - hyphens: 'auto', -}; - -const styles = { - itemRow: { - borderBottom: `1px solid ${colors.grey300}`, - display: 'flex', - fontSize: '14px', - lineHeight: '19px', - padding: `${spacersNum.dp12}px 0`, - '&.isLastItem': { - borderBottomWidth: 0, - }, - }, - itemKey: { - flex: '0 0 auto', - width: '128px', - color: colors.grey600, - marginRight: '20px', - ...itemStyles, - }, - itemValue: { - flex: 1, - ...itemStyles, - }, -}; - -const FlatListPlain = ({ list, classes, dataTest }: Props) => { +export const FlatList = ({ list, dataTest }: Props) => { const lastItemKey = list[list.length - 1]?.reactKey; - const renderItem = item => ( + /* const renderItem = item => (
-
{item.key}:
-
{item.value}
+
{item.key}:
+
{item.value}
- ); + ); */ return ( -
- {list.map(item => renderItem(item))} -
+ <> +
+ {list.map(item => ( +
+
{item.key}:
+
{item.value}
+
))} +
+ + ); }; - -export const FlatList: ComponentType<$Diff> = withStyles(styles)(FlatListPlain); diff --git a/src/styles/theme.js b/src/styles/theme.js new file mode 100644 index 0000000000..22c51d959d --- /dev/null +++ b/src/styles/theme.js @@ -0,0 +1,412 @@ +// @flow +import { theme as dhis2Theme, colors } from '@dhis2/ui'; + +const HTMLFONTSIZE = 16; + +export const theme = { + direction: 'ltr', + breakpoints: { + values: { + xs: 0, // phone + sm: 600, // tablet + md: 960, // small laptop + lg: 1280, // desktop + xl: 1920, // large screen + }, + }, + palette: { + type: 'light', + primary: { + main: '#1976D2', + dark: '#004BA0', + light: colors.blue600, + lightest: '#EAF4FF', + /* 50: dhis2Theme.primary050, + 100: dhis2Theme.primary100, + 200: dhis2Theme.primary200, + 300: dhis2Theme.primary300, + 400: dhis2Theme.primary400, + 500: dhis2Theme.primary500, + 600: dhis2Theme.primary600, + 700: dhis2Theme.primary700, + 800: dhis2Theme.primary800, + 900: dhis2Theme.primary900, */ + contrastText: '#fff', + }, + secondary: { + main: colors.teal600, + dark: '#004C40', + light: '#48A999', + lightest: colors.teal200, + /* 50: dhis2Theme.secondary050, + 100: dhis2Theme.secondary100, + 200: dhis2Theme.secondary200, + 300: dhis2Theme.secondary300, + 400: dhis2Theme.secondary400, + 500: dhis2Theme.secondary500, + 600: dhis2Theme.secondary600, + 700: dhis2Theme.secondary700, + 800: dhis2Theme.secondary800, + 900: dhis2Theme.secondary900, */ + contrastText: '#fff', + }, + success: { + main: '#3D9305', + green600: colors.green600, + }, + warning: { + lighter: '#FFF9C4', + light: '#FFF176', + main: '#F19C02', + dark: '#F57F17', + }, + error: { + lighter: '#FBEAE5', + light: colors.red300, + main: '#E53935', + dark: colors.red500, + contrastText: '#fff', + red200: colors.red200, + }, + red: { + /* 50: colors.red050, + 100: colors.red100, + 200: colors.red200, + 300: colors.red300, + 400: colors.red400, + 500: colors.red500, + 600: colors.red600, + 700: colors.red700, + 800: colors.red800, + 900: colors.red900, */ + }, + grey: { + /* 50: colors.grey050, + 100: colors.grey100, + 200: colors.grey200, + 300: colors.grey300, + 400: colors.grey400, + 500: colors.grey500, + 600: colors.grey600, + 700: colors.grey700, + 800: colors.grey800, + 900: colors.grey900, */ + A100: '#d5d5d5', + A200: '#aaaaaa', + A400: '#303030', + A700: '#616161', + main: '#9E9E9E', + light: '#E0E0E0', + lighter: '#F6F6F6', + lightest: '#FBFBFB', + dark: '#494949', + blueGrey: '#ECEFF1', + snow: '#F4F6F8', + black: '#000000', + }, + text: { + primary: 'rgba(0, 0, 0, 0.87)', + secondary: 'rgba(0, 0, 0, 0.54)', + disabled: 'rgba(0, 0, 0, 0.38)', + hint: 'rgba(0, 0, 0, 0.38)', + }, + contrastThreshold: 3, + tonalOffset: 0.2, + action: { + active: 'rgba(0, 0, 0, 0.54)', + hover: 'rgba(0, 0, 0, 0.08)', + hoverOpacity: 0.08, + selected: 'rgba(0, 0, 0, 0.14)', + disabled: 'rgba(0, 0, 0, 0.26)', + disabledBackground: 'rgba(0, 0, 0, 0.12)', + }, + info: { + main: '#EAF4FF', + }, + accent: { + lighter: colors.blue100, + light: '#BBDEFB', + main: '#64b5F6', + dark: colors.blue500, + contrastText: '#000000', + }, + input: { + bottomLine: 'rgba(0, 0, 0, 0.42)', + }, + divider: 'rgba(0, 0, 0, 0.12)', + dividerForm: '#f2f4f5', + dividerDarker: 'rgba(0, 0, 0, 1)', + dividerLighter: 'rgba(224, 224, 224, 1)', + default: dhis2Theme.default, + disabled: dhis2Theme.disabled, + required: colors.red400, + focus: dhis2Theme.focus, + }, + typography: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: 14, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 500, + pxToRem(size: number) { + const coef = this.fontSize / 14; + return `${(size / HTMLFONTSIZE) * coef}rem`; + }, + display4: { + fontSize: '7rem', + fontWeight: 300, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + letterSpacing: '-.04em', + lineHeight: '1.14286em', + marginLeft: '-.04em', + color: 'rgba(0, 0, 0, 0.54)', + }, + display3: { + fontSize: '3.5rem', + fontWeight: 400, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + letterSpacing: '-.02em', + lineHeight: '1.30357em', + marginLeft: '-.02em', + color: 'rgba(0, 0, 0, 0.54)', + }, + display2: { + fontSize: '2.8125rem', + fontWeight: 400, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + lineHeight: '1.13333em', + marginLeft: '-.02em', + color: 'rgba(0, 0, 0, 0.54)', + }, + display1: { + fontSize: '2.125rem', + fontWeight: 400, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + lineHeight: '1.20588em', + color: 'rgba(0, 0, 0, 0.54)', + }, + headline: { + fontSize: '1.5rem', + fontWeight: 400, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + lineHeight: '1.35417em', + color: 'rgba(0, 0, 0, 0.87)', + }, + title: { + fontSize: '1.3125rem', + fontWeight: 500, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + lineHeight: '1.16667em', + color: 'rgba(0, 0, 0, 0.87)', + }, + subheading: { + fontSize: '1rem', + fontWeight: 400, + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + lineHeight: '1.5em', + color: 'rgba(0, 0, 0, 0.87)', + }, + body2: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '0.875rem', + lineHeight: 1.5, + letterSpacing: '0.01071em', + }, + body1: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '1rem', + lineHeight: 1.5, + letterSpacing: '0.00938em', + }, + caption: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '0.75rem', + lineHeight: 1.66, + letterSpacing: '0.03333em', + }, + button: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 500, + fontSize: '0.875rem', + lineHeight: 1.75, + letterSpacing: '0.02857em', + textTransform: 'uppercase', + }, + h1: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: '6rem', + lineHeight: 1, + letterSpacing: '-0.01562em', + }, + h2: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: '3.75rem', + lineHeight: 1, + letterSpacing: '-0.00833em', + }, + h3: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '3rem', + lineHeight: 1.04, + letterSpacing: '0em', + }, + h4: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '2.125rem', + lineHeight: 1.17, + letterSpacing: '0.00735em', + }, + h5: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '1.5rem', + lineHeight: 1.33, + letterSpacing: '0em', + }, + h6: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 500, + fontSize: '1.25rem', + lineHeight: 1.6, + letterSpacing: '0.0075em', + }, + subtitle1: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '1rem', + lineHeight: 1.75, + letterSpacing: '0.00938em', + }, + subtitle2: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 500, + fontSize: '0.875rem', + lineHeight: 1.57, + letterSpacing: '0.00714em', + }, + body1Next: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '1rem', + lineHeight: 1.5, + letterSpacing: '0.00938em', + }, + body2Next: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '0.875rem', + lineHeight: 1.5, + letterSpacing: '0.01071em', + }, + buttonNext: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 500, + fontSize: '0.875rem', + lineHeight: 1.75, + letterSpacing: '0.02857em', + textTransform: 'uppercase', + }, + captionNext: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '0.75rem', + lineHeight: 1.66, + letterSpacing: '0.03333em', + }, + overline: { + color: 'rgba(0, 0, 0, 0.87)', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 400, + fontSize: '0.75rem', + lineHeight: 2.66, + letterSpacing: '0.08333em', + textTransform: 'uppercase', + }, + useNextVariants: true, + formFieldTitle: { + fontSize: '0.75rem', + }, + }, + mixins: { + toolbar: { + minHeight: 56, + '@media (min-width:0px) and (orientation: landscape)': { + minHeight: 48, + }, + '@media (min-width:600px)': { + minHeight: 64, + }, + }, + }, + overrides: { + MuiDialog: { + paperWidthLg: { + width: 800, + }, + }, + MuiSvgIcon: { + colorAction: { + color: '#494949', + }, + }, + MuiCircularProgress: { + colorPrimary: { + color: '#147cd7', + }, + }, + }, + shape: { + borderRadius: 4, + }, + spacing: { + unit: 8, + }, + transitions: { + easing: { + easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)', + easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)', + easeIn: 'cubic-bezier(0.4, 0, 1, 1)', + sharp: 'cubic-bezier(0.4, 0, 0.6, 1)', + }, + duration: { + shortest: 150, + shorter: 200, + short: 250, + standard: 300, + complex: 375, + enteringScreen: 225, + leavingScreen: 195, + }, + }, + zIndex: { + mobileStepper: 1000, + appBar: 1100, + drawer: 1200, + modal: 1300, + snackbar: 1400, + tooltip: 1500, + }, +};