From ae1ffcb5073597c6c01e10a1fd813a6d1c60cb28 Mon Sep 17 00:00:00 2001 From: Tiffany Yeung Date: Fri, 9 Aug 2024 00:02:53 -0700 Subject: [PATCH] port theme to common/ui - adjust references to theme in GO and SRO frontends, and dedupe as necessary - rename brand[GO|SRO]500 to brand500 - remove extra theme file in SRO frontend --- apps/frontend/src/app/Header.tsx | 10 +- .../gi-frontend/src/app/components/Header.tsx | 4 +- apps/sr-frontend/src/app/App.tsx | 2 +- apps/sr-frontend/src/app/Theme.tsx | 99 ----------- libs/common/ui/src/theme/index.ts | 161 ++++++++++++++++++ libs/gi/theme/src/Theme.tsx | 159 +---------------- libs/sr/theme/src/Theme.tsx | 153 +---------------- 7 files changed, 177 insertions(+), 411 deletions(-) delete mode 100644 apps/sr-frontend/src/app/Theme.tsx diff --git a/apps/frontend/src/app/Header.tsx b/apps/frontend/src/app/Header.tsx index 6ed08d85cd..4cc65d1aa8 100644 --- a/apps/frontend/src/app/Header.tsx +++ b/apps/frontend/src/app/Header.tsx @@ -228,7 +228,7 @@ function DesktopHeader({ backgroundColor: 'rgba(255,255,255,0.1)', }, '& .Mui-selected': { - backgroundImage: `linear-gradient(to top, ${theme.palette.brandGO500.main}, ${theme.palette.neutral700.main})`, + backgroundImage: `linear-gradient(to top, ${theme.palette.brand500.main}, ${theme.palette.neutral700.main})`, color: `${theme.palette.neutral100.main} !important`, textShadow: '0.25px 0 0 currentColor, -0.25px 0 0 currentColor, 0 0.25px 0 currentColor, 0 -0.25px 0', @@ -247,7 +247,7 @@ function DesktopHeader({ sx={(theme) => ({ height: '24px', width: '24px', - boxShadow: `0 0 10px 1px ${theme.palette.brandGO500.main}`, + boxShadow: `0 0 10px 1px ${theme.palette.brand500.main}`, })} /> @@ -353,7 +353,7 @@ function MobileHeader({ }} sx={(theme) => ({ '& .Mui-selected': { - backgroundImage: `linear-gradient(to right, ${theme.palette.brandGO500.main}, ${theme.palette.neutral700.main})`, + backgroundImage: `linear-gradient(to right, ${theme.palette.brand500.main}, ${theme.palette.neutral700.main})`, color: `${theme.palette.neutral100.main} !important`, textShadow: '0.1px 0 0 currentColor, -0.1px 0 0 currentColor, 0 0.1px 0 currentColor, 0 -0.1px 0', @@ -372,7 +372,7 @@ function MobileHeader({ sx={(theme) => ({ height: '24px', width: '24px', - boxShadow: `0 0 10px 1px ${theme.palette.brandGO500.main}`, + boxShadow: `0 0 10px 1px ${theme.palette.brand500.main}`, })} /> } @@ -418,7 +418,7 @@ function MobileHeader({ sx={(theme) => ({ height: '24px', width: '24px', - boxShadow: `0 0 10px 1px ${theme.palette.brandGO500.main}`, + boxShadow: `0 0 10px 1px ${theme.palette.brand500.main}`, })} /> } diff --git a/apps/gi-frontend/src/app/components/Header.tsx b/apps/gi-frontend/src/app/components/Header.tsx index 1c32cab05d..0c576e1599 100644 --- a/apps/gi-frontend/src/app/components/Header.tsx +++ b/apps/gi-frontend/src/app/components/Header.tsx @@ -106,7 +106,7 @@ function HeaderContent() { backgroundColor: 'rgba(255,255,255,0.1)', }, '& .Mui-selected': { - backgroundImage: `linear-gradient(to top, ${theme.palette.brandGO500.main}, ${theme.palette.neutral700.main})`, + backgroundImage: `linear-gradient(to top, ${theme.palette.brand500.main}, ${theme.palette.neutral700.main})`, color: `${theme.palette.neutral100.main} !important`, textShadow: '0.25px 0 0 currentColor, -0.25px 0 0 currentColor, 0 0.25px 0 currentColor, 0 -0.25px 0', @@ -125,7 +125,7 @@ function HeaderContent() { sx={(theme) => ({ height: '24px', width: '24px', - boxShadow: `0 0 10px 1px ${theme.palette.brandGO500.main}`, + boxShadow: `0 0 10px 1px ${theme.palette.brand500.main}`, })} /> diff --git a/apps/sr-frontend/src/app/App.tsx b/apps/sr-frontend/src/app/App.tsx index 671aa39fdb..9c32e5f27d 100644 --- a/apps/sr-frontend/src/app/App.tsx +++ b/apps/sr-frontend/src/app/App.tsx @@ -1,5 +1,6 @@ import { ScrollTop } from '@genshin-optimizer/common/ui' import '@genshin-optimizer/sr/i18n' // import to load translations +import { theme } from '@genshin-optimizer/sr/theme' import { CalcProvider, CharacterProvider, @@ -17,7 +18,6 @@ import { Suspense, lazy } from 'react' import { HashRouter, Route, Routes } from 'react-router-dom' import Header from './Header' import PageHome from './PageHome' -import { theme } from './Theme' const PageRelics = lazy(() => import('@genshin-optimizer/sr/page-relics')) const PageLightCones = lazy( diff --git a/apps/sr-frontend/src/app/Theme.tsx b/apps/sr-frontend/src/app/Theme.tsx deleted file mode 100644 index a00b206e14..0000000000 --- a/apps/sr-frontend/src/app/Theme.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { createTheme } from '@mui/material' - -import { theme as commonTheme } from '@genshin-optimizer/common/ui' - -declare module '@mui/material/styles' { - interface Palette { - roll1: Palette['primary'] - roll2: Palette['primary'] - roll3: Palette['primary'] - roll4: Palette['primary'] - roll5: Palette['primary'] - roll6: Palette['primary'] - } - interface PaletteOptions { - roll1?: PaletteOptions['primary'] - roll2?: PaletteOptions['primary'] - roll3?: PaletteOptions['primary'] - roll4?: PaletteOptions['primary'] - roll5?: PaletteOptions['primary'] - roll6?: PaletteOptions['primary'] - heal?: PaletteOptions['primary'] - } -} - -declare module '@mui/material/Button' { - interface ButtonPropsColorOverrides { - warning: true - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true - heal: true - } -} - -declare module '@mui/material/Chip' { - interface ChipPropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true - heal: true - } -} -declare module '@mui/material/InputBase' { - interface InputBasePropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true - } -} - -declare module '@mui/material/SvgIcon' { - interface SvgIconPropsColorOverrides { - heal: true - } -} - -export const theme = createTheme({ - ...commonTheme, - palette: { - ...commonTheme.palette, - roll1: commonTheme.palette.augmentColor({ - color: { main: '#a3a7a9' }, - name: 'roll1', - }), - roll2: commonTheme.palette.augmentColor({ - color: { main: '#6fa376' }, - name: 'roll2', - }), - roll3: commonTheme.palette.augmentColor({ - color: { main: '#8eea83' }, - name: 'roll3', - }), - roll4: commonTheme.palette.augmentColor({ - color: { main: '#31e09d' }, - name: 'roll4', - }), - roll5: commonTheme.palette.augmentColor({ - color: { main: '#27bbe4' }, - name: 'roll5', - }), - roll6: commonTheme.palette.augmentColor({ - color: { main: '#de79f0' }, - name: 'roll6', - }), - heal: commonTheme.palette.augmentColor({ - color: { main: '#c0e86c' }, - name: 'heal', - }), - }, -}) diff --git a/libs/common/ui/src/theme/index.ts b/libs/common/ui/src/theme/index.ts index 535785ee16..36b2de7118 100644 --- a/libs/common/ui/src/theme/index.ts +++ b/libs/common/ui/src/theme/index.ts @@ -17,7 +17,32 @@ declare module '@mui/material/styles' { twitter: Palette['primary'] paypal: Palette['primary'] keqing: Palette['primary'] + + brand500: Palette['primary'] + neutral100: Palette['primary'] + neutral200: Palette['primary'] + neutral300: Palette['primary'] + neutral400: Palette['primary'] + neutral500: Palette['primary'] + neutral600: Palette['primary'] + neutral700: Palette['primary'] + neutral800: Palette['primary'] + neutral900: Palette['primary'] + + roll1: Palette['primary'] + roll2: Palette['primary'] + roll3: Palette['primary'] + roll4: Palette['primary'] + roll5: Palette['primary'] + roll6: Palette['primary'] + + rarity1: Palette['primary'] + rarity2: Palette['primary'] + rarity3: Palette['primary'] + rarity4: Palette['primary'] + rarity5: Palette['primary'] } + interface PaletteOptions { warning?: PaletteOptions['primary'] contentNormal?: PaletteOptions['primary'] @@ -32,6 +57,30 @@ declare module '@mui/material/styles' { twitter?: PaletteOptions['primary'] paypal?: PaletteOptions['primary'] keqing?: PaletteOptions['primary'] + + brand500?: Palette['primary'] + neutral100?: Palette['primary'] + neutral200?: Palette['primary'] + neutral300?: Palette['primary'] + neutral400?: Palette['primary'] + neutral500?: Palette['primary'] + neutral600?: Palette['primary'] + neutral700?: Palette['primary'] + neutral800?: Palette['primary'] + neutral900?: Palette['primary'] + + roll1?: PaletteOptions['primary'] + roll2?: PaletteOptions['primary'] + roll3?: PaletteOptions['primary'] + roll4?: PaletteOptions['primary'] + roll5?: PaletteOptions['primary'] + roll6?: PaletteOptions['primary'] + + rarity1?: PaletteOptions['primary'] + rarity2?: PaletteOptions['primary'] + rarity3?: PaletteOptions['primary'] + rarity4?: PaletteOptions['primary'] + rarity5?: PaletteOptions['primary'] } } @@ -47,17 +96,48 @@ declare module '@mui/material/Button' { twitter: true paypal: true keqing: true + + roll1: true + roll2: true + roll3: true + roll4: true + roll5: true + roll6: true } } declare module '@mui/material/Chip' { interface ChipPropsColorOverrides { warning: true + roll1: true + roll2: true + roll3: true + roll4: true + roll5: true + roll6: true } } + declare module '@mui/material/InputBase' { interface InputBasePropsColorOverrides { warning: true + roll1: true + roll2: true + roll3: true + roll4: true + roll5: true + roll6: true + } +} + +declare module '@mui/material/TextField' { + interface TextFieldPropsColorOverrides { + roll1: true + roll2: true + roll3: true + roll4: true + roll5: true + roll6: true } } @@ -147,6 +227,87 @@ export const theme = createTheme({ color: { main: '#584862' }, name: 'keqing', }), + + brand500: defaultTheme.palette.augmentColor({ + color: { main: '#324599' }, + name: 'primary', + }), + neutral100: defaultTheme.palette.augmentColor({ + color: { main: '#E9EBF5' }, + }), + neutral200: defaultTheme.palette.augmentColor({ + color: { main: '#CBCFE1' }, + }), + neutral300: defaultTheme.palette.augmentColor({ + color: { main: '#A2A6BB' }, + }), + neutral400: defaultTheme.palette.augmentColor({ + color: { main: '#777B8E' }, + }), + neutral500: defaultTheme.palette.augmentColor({ + color: { main: '#393C4F' }, + }), + neutral600: defaultTheme.palette.augmentColor({ + color: { main: '#222533' }, + }), + neutral700: defaultTheme.palette.augmentColor({ + color: { main: '#191C2B' }, + name: 'primary', + }), + neutral800: defaultTheme.palette.augmentColor({ + color: { main: '#0C0F1A' }, + name: 'primary', + }), + neutral900: defaultTheme.palette.augmentColor({ + color: { main: '#020515' }, + name: 'primary', + }), + + roll1: defaultTheme.palette.augmentColor({ + color: { main: '#a3a7a9' }, + name: 'roll1', + }), + roll2: defaultTheme.palette.augmentColor({ + color: { main: '#6fa376' }, + name: 'roll2', + }), + roll3: defaultTheme.palette.augmentColor({ + color: { main: '#8eea83' }, + name: 'roll3', + }), + roll4: defaultTheme.palette.augmentColor({ + color: { main: '#31e09d' }, + name: 'roll4', + }), + roll5: defaultTheme.palette.augmentColor({ + color: { main: '#27bbe4' }, + name: 'roll5', + }), + roll6: defaultTheme.palette.augmentColor({ + color: { main: '#de79f0' }, + name: 'roll6', + }), + + rarity1: defaultTheme.palette.augmentColor({ + color: { main: '#838f99', contrastText: '#fff' }, + name: 'rarity1', + }), + rarity2: defaultTheme.palette.augmentColor({ + color: { main: '#5e966c', contrastText: '#fff' }, + name: 'rarity2', + }), + rarity3: defaultTheme.palette.augmentColor({ + color: { main: '#499fb3', contrastText: '#fff' }, + name: 'rarity3', + }), + rarity4: defaultTheme.palette.augmentColor({ + color: { main: '#b886ca', contrastText: '#fff' }, + name: 'rarity4', + }), + rarity5: defaultTheme.palette.augmentColor({ + color: { main: '#e6ac54', contrastText: '#fff' }, + name: 'rarity5', + }), }, typography: { button: { diff --git a/libs/gi/theme/src/Theme.tsx b/libs/gi/theme/src/Theme.tsx index 8af9497834..ae054b2cb3 100644 --- a/libs/gi/theme/src/Theme.tsx +++ b/libs/gi/theme/src/Theme.tsx @@ -4,28 +4,6 @@ import { theme as commonTheme } from '@genshin-optimizer/common/ui' declare module '@mui/material/styles' { interface Palette { - brandGO500: Palette['primary'] - neutral100: Palette['primary'] - neutral200: Palette['primary'] - neutral300: Palette['primary'] - neutral400: Palette['primary'] - neutral500: Palette['primary'] - neutral600: Palette['primary'] - neutral700: Palette['primary'] - neutral800: Palette['primary'] - neutral900: Palette['primary'] - - roll1: Palette['primary'] - roll2: Palette['primary'] - roll3: Palette['primary'] - roll4: Palette['primary'] - roll5: Palette['primary'] - roll6: Palette['primary'] - rarity1: Palette['primary'] - rarity2: Palette['primary'] - rarity3: Palette['primary'] - rarity4: Palette['primary'] - rarity5: Palette['primary'] geo: Palette['primary'] dendro: Palette['primary'] pyro: Palette['primary'] @@ -34,6 +12,7 @@ declare module '@mui/material/styles' { electro: Palette['primary'] anemo: Palette['primary'] physical: Palette['primary'] + vaporize: Palette['primary'] melt: Palette['primary'] spread: Palette['primary'] @@ -50,29 +29,8 @@ declare module '@mui/material/styles' { burgeon: Palette['primary'] hyperbloom: Palette['primary'] } - interface PaletteOptions { - brandGO500?: Palette['primary'] - neutral100?: Palette['primary'] - neutral200?: Palette['primary'] - neutral300?: Palette['primary'] - neutral400?: Palette['primary'] - neutral500?: Palette['primary'] - neutral600?: Palette['primary'] - neutral700?: Palette['primary'] - neutral800?: Palette['primary'] - neutral900?: Palette['primary'] - roll1?: PaletteOptions['primary'] - roll2?: PaletteOptions['primary'] - roll3?: PaletteOptions['primary'] - roll4?: PaletteOptions['primary'] - roll5?: PaletteOptions['primary'] - roll6?: PaletteOptions['primary'] - rarity1?: PaletteOptions['primary'] - rarity2?: PaletteOptions['primary'] - rarity3?: PaletteOptions['primary'] - rarity4?: PaletteOptions['primary'] - rarity5?: PaletteOptions['primary'] + interface PaletteOptions { geo?: PaletteOptions['primary'] dendro?: PaletteOptions['primary'] pyro?: PaletteOptions['primary'] @@ -81,6 +39,7 @@ declare module '@mui/material/styles' { electro?: PaletteOptions['primary'] anemo?: PaletteOptions['primary'] physical?: PaletteOptions['primary'] + vaporize?: PaletteOptions['primary'] melt?: PaletteOptions['primary'] spread?: PaletteOptions['primary'] @@ -101,13 +60,6 @@ declare module '@mui/material/styles' { declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { - warning: true - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true geo: true dendro: true pyro: true @@ -116,6 +68,7 @@ declare module '@mui/material/Button' { electro: true anemo: true physical: true + vaporize: true melt: true spread: true @@ -136,12 +89,6 @@ declare module '@mui/material/Button' { declare module '@mui/material/Chip' { interface ChipPropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true geo: true dendro: true pyro: true @@ -150,6 +97,7 @@ declare module '@mui/material/Chip' { electro: true anemo: true physical: true + vaporize: true melt: true spread: true @@ -170,12 +118,6 @@ declare module '@mui/material/Chip' { declare module '@mui/material/InputBase' { interface InputBasePropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true geo: true dendro: true pyro: true @@ -184,22 +126,12 @@ declare module '@mui/material/InputBase' { electro: true anemo: true physical: true + vaporize: true melt: true } } -declare module '@mui/material/TextField' { - interface TextFieldPropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true - } -} - declare module '@mui/material/SvgIcon' { interface SvgIconPropsColorOverrides { geo: true @@ -210,6 +142,7 @@ declare module '@mui/material/SvgIcon' { electro: true anemo: true physical: true + vaporize: true melt: true spread: true @@ -232,64 +165,6 @@ export const theme = createTheme({ ...commonTheme, palette: { ...commonTheme.palette, - brandGO500: commonTheme.palette.augmentColor({ - color: { main: '#324599' }, - name: 'primary', - }), - neutral100: commonTheme.palette.augmentColor({ - color: { main: '#E9EBF5' }, - }), - neutral200: commonTheme.palette.augmentColor({ - color: { main: '#CBCFE1' }, - }), - neutral300: commonTheme.palette.augmentColor({ - color: { main: '#A2A6BB' }, - }), - neutral400: commonTheme.palette.augmentColor({ - color: { main: '#777B8E' }, - }), - neutral500: commonTheme.palette.augmentColor({ - color: { main: '#393C4F' }, - }), - neutral600: commonTheme.palette.augmentColor({ - color: { main: '#222533' }, - }), - neutral700: commonTheme.palette.augmentColor({ - color: { main: '#191C2B' }, - name: 'primary', - }), - neutral800: commonTheme.palette.augmentColor({ - color: { main: '#0C0F1A' }, - name: 'primary', - }), - neutral900: commonTheme.palette.augmentColor({ - color: { main: '#020515' }, - name: 'primary', - }), - roll1: commonTheme.palette.augmentColor({ - color: { main: '#a3a7a9' }, - name: 'roll1', - }), - roll2: commonTheme.palette.augmentColor({ - color: { main: '#6fa376' }, - name: 'roll2', - }), - roll3: commonTheme.palette.augmentColor({ - color: { main: '#8eea83' }, - name: 'roll3', - }), - roll4: commonTheme.palette.augmentColor({ - color: { main: '#31e09d' }, - name: 'roll4', - }), - roll5: commonTheme.palette.augmentColor({ - color: { main: '#27bbe4' }, - name: 'roll5', - }), - roll6: commonTheme.palette.augmentColor({ - color: { main: '#de79f0' }, - name: 'roll6', - }), geo: commonTheme.palette.augmentColor({ color: { main: '#f8ba4e', contrastText: '#fff' }, name: 'geo', @@ -382,25 +257,5 @@ export const theme = createTheme({ color: { main: '#3b8dc8', contrastText: '#fff' }, name: 'hyperbloom', }), - rarity1: commonTheme.palette.augmentColor({ - color: { main: '#838f99', contrastText: '#fff' }, - name: 'rarity1', - }), - rarity2: commonTheme.palette.augmentColor({ - color: { main: '#5e966c', contrastText: '#fff' }, - name: 'rarity2', - }), - rarity3: commonTheme.palette.augmentColor({ - color: { main: '#499fb3', contrastText: '#fff' }, - name: 'rarity3', - }), - rarity4: commonTheme.palette.augmentColor({ - color: { main: '#b886ca', contrastText: '#fff' }, - name: 'rarity4', - }), - rarity5: commonTheme.palette.augmentColor({ - color: { main: '#e6ac54', contrastText: '#fff' }, - name: 'rarity5', - }), }, }) diff --git a/libs/sr/theme/src/Theme.tsx b/libs/sr/theme/src/Theme.tsx index 2b8bf9aeda..09fb6416be 100644 --- a/libs/sr/theme/src/Theme.tsx +++ b/libs/sr/theme/src/Theme.tsx @@ -4,28 +4,6 @@ import { theme as commonTheme } from '@genshin-optimizer/common/ui' declare module '@mui/material/styles' { interface Palette { - brandSRO500: Palette['primary'] - neutral100: Palette['primary'] - neutral200: Palette['primary'] - neutral300: Palette['primary'] - neutral400: Palette['primary'] - neutral500: Palette['primary'] - neutral600: Palette['primary'] - neutral700: Palette['primary'] - neutral800: Palette['primary'] - neutral900: Palette['primary'] - - roll1: Palette['primary'] - roll2: Palette['primary'] - roll3: Palette['primary'] - roll4: Palette['primary'] - roll5: Palette['primary'] - roll6: Palette['primary'] - rarity1: Palette['primary'] - rarity2: Palette['primary'] - rarity3: Palette['primary'] - rarity4: Palette['primary'] - rarity5: Palette['primary'] fire: Palette['primary'] ice: Palette['primary'] imaginary: Palette['primary'] @@ -34,29 +12,8 @@ declare module '@mui/material/styles' { quantum: Palette['primary'] wind: Palette['primary'] } - interface PaletteOptions { - brandSRO500?: Palette['primary'] - neutral100?: Palette['primary'] - neutral200?: Palette['primary'] - neutral300?: Palette['primary'] - neutral400?: Palette['primary'] - neutral500?: Palette['primary'] - neutral600?: Palette['primary'] - neutral700?: Palette['primary'] - neutral800?: Palette['primary'] - neutral900?: Palette['primary'] - roll1?: PaletteOptions['primary'] - roll2?: PaletteOptions['primary'] - roll3?: PaletteOptions['primary'] - roll4?: PaletteOptions['primary'] - roll5?: PaletteOptions['primary'] - roll6?: PaletteOptions['primary'] - rarity1?: PaletteOptions['primary'] - rarity2?: PaletteOptions['primary'] - rarity3?: PaletteOptions['primary'] - rarity4?: PaletteOptions['primary'] - rarity5?: PaletteOptions['primary'] + interface PaletteOptions { fire?: PaletteOptions['primary'] ice?: PaletteOptions['primary'] imaginary?: PaletteOptions['primary'] @@ -69,13 +26,6 @@ declare module '@mui/material/styles' { declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { - warning: true - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true fire: true ice: true imaginary: true @@ -88,12 +38,6 @@ declare module '@mui/material/Button' { declare module '@mui/material/Chip' { interface ChipPropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true fire: true ice: true imaginary: true @@ -106,12 +50,6 @@ declare module '@mui/material/Chip' { declare module '@mui/material/InputBase' { interface InputBasePropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true fire: true ice: true imaginary: true @@ -122,17 +60,6 @@ declare module '@mui/material/InputBase' { } } -declare module '@mui/material/TextField' { - interface TextFieldPropsColorOverrides { - roll1: true - roll2: true - roll3: true - roll4: true - roll5: true - roll6: true - } -} - declare module '@mui/material/SvgIcon' { interface SvgIconPropsColorOverrides { fire: true @@ -149,64 +76,6 @@ export const theme = createTheme({ ...commonTheme, palette: { ...commonTheme.palette, - brandSRO500: commonTheme.palette.augmentColor({ - color: { main: '#324599' }, - name: 'primary', - }), - neutral100: commonTheme.palette.augmentColor({ - color: { main: '#E9EBF5' }, - }), - neutral200: commonTheme.palette.augmentColor({ - color: { main: '#CBCFE1' }, - }), - neutral300: commonTheme.palette.augmentColor({ - color: { main: '#A2A6BB' }, - }), - neutral400: commonTheme.palette.augmentColor({ - color: { main: '#777B8E' }, - }), - neutral500: commonTheme.palette.augmentColor({ - color: { main: '#393C4F' }, - }), - neutral600: commonTheme.palette.augmentColor({ - color: { main: '#222533' }, - }), - neutral700: commonTheme.palette.augmentColor({ - color: { main: '#191C2B' }, - name: 'primary', - }), - neutral800: commonTheme.palette.augmentColor({ - color: { main: '#0C0F1A' }, - name: 'primary', - }), - neutral900: commonTheme.palette.augmentColor({ - color: { main: '#020515' }, - name: 'primary', - }), - roll1: commonTheme.palette.augmentColor({ - color: { main: '#a3a7a9' }, - name: 'roll1', - }), - roll2: commonTheme.palette.augmentColor({ - color: { main: '#6fa376' }, - name: 'roll2', - }), - roll3: commonTheme.palette.augmentColor({ - color: { main: '#8eea83' }, - name: 'roll3', - }), - roll4: commonTheme.palette.augmentColor({ - color: { main: '#31e09d' }, - name: 'roll4', - }), - roll5: commonTheme.palette.augmentColor({ - color: { main: '#27bbe4' }, - name: 'roll5', - }), - roll6: commonTheme.palette.augmentColor({ - color: { main: '#de79f0' }, - name: 'roll6', - }), fire: commonTheme.palette.augmentColor({ color: { main: '#e83e3e', contrastText: '#fff' }, name: 'fire', @@ -235,25 +104,5 @@ export const theme = createTheme({ color: { main: '#3cc088', contrastText: '#fff' }, name: 'wind', }), - rarity1: commonTheme.palette.augmentColor({ - color: { main: '#838f99', contrastText: '#fff' }, - name: 'rarity1', - }), - rarity2: commonTheme.palette.augmentColor({ - color: { main: '#5e966c', contrastText: '#fff' }, - name: 'rarity2', - }), - rarity3: commonTheme.palette.augmentColor({ - color: { main: '#499fb3', contrastText: '#fff' }, - name: 'rarity3', - }), - rarity4: commonTheme.palette.augmentColor({ - color: { main: '#b886ca', contrastText: '#fff' }, - name: 'rarity4', - }), - rarity5: commonTheme.palette.augmentColor({ - color: { main: '#e6ac54', contrastText: '#fff' }, - name: 'rarity5', - }), }, })