Skip to content

Commit

Permalink
port theme to common/ui
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@tiffanynwyeung
tiffanynwyeung committed Aug 9, 2024
1 parent e42cd69 commit ae1ffcb
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 411 deletions.
10 changes: 5 additions & 5 deletions apps/frontend/src/app/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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}`,
})}
/>
<Typography variant="h6" sx={{ px: 1, fontWeight: 'Normal' }}>
Expand Down Expand Up @@ -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',
Expand All @@ -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}`,
})}
/>
}
Expand Down Expand Up @@ -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}`,
})}
/>
}
Expand Down
4 changes: 2 additions & 2 deletions apps/gi-frontend/src/app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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}`,
})}
/>
<Typography variant="h6" sx={{ px: 1, fontWeight: 'Normal' }}>
Expand Down
2 changes: 1 addition & 1 deletion apps/sr-frontend/src/app/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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(
Expand Down
99 changes: 0 additions & 99 deletions apps/sr-frontend/src/app/Theme.tsx
View file

This file was deleted.

161 changes: 161 additions & 0 deletions libs/common/ui/src/theme/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand All @@ -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']
}
}

Expand All @@ -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
}
}

Expand Down Expand Up @@ -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: {
Expand Down
Loading

0 comments on commit ae1ffcb

Please sign in to comment.