feat: theme color updates under feature flag (#4252)
* toggle * fixed position * im bad at spelling * rm button * fix * add feature flag * naming * rm blue5 * uppercase * rm file
This commit is contained in:
Kaylee George
GitHub
parent
fa70fe102e
commit
a02099f908
@ -35,7 +35,7 @@ export function useFeatureFlagsIsLoaded(): boolean {
|
||||
|
||||
// feature flag hooks
|
||||
|
||||
enum Phase0Variant {
|
||||
export enum Phase0Variant {
|
||||
Control = 'Control',
|
||||
Enabled = 'Enabled',
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Phase0Variant, usePhase0Flag } from 'featureFlag'
|
||||
import React, { useMemo } from 'react'
|
||||
import { Text, TextProps as TextPropsOriginal } from 'rebass'
|
||||
import styled, {
|
||||
@ -9,7 +10,8 @@ import styled, {
|
||||
|
||||
import { useIsDarkMode } from '../state/user/hooks'
|
||||
import { colors as ColorsPalette, colorsDark, colorsLight } from './colors'
|
||||
import { Colors } from './styled'
|
||||
import { Colors, ThemeColors } from './styled'
|
||||
import { opacify } from './utils'
|
||||
|
||||
export * from './components'
|
||||
|
||||
@ -49,10 +51,66 @@ const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
|
||||
{}
|
||||
) as any
|
||||
|
||||
const deprecated_white = '#FFFFFF'
|
||||
const deprecated_black = '#000000'
|
||||
const deprecated_white = ColorsPalette.white
|
||||
const deprecated_black = ColorsPalette.black
|
||||
|
||||
function colors(darkMode: boolean): Colors {
|
||||
function uniswapThemeColors(darkMode: boolean): ThemeColors {
|
||||
return {
|
||||
userThemeColor: darkMode ? colorsDark.userThemeColor : colorsLight.userThemeColor,
|
||||
|
||||
backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
|
||||
backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
|
||||
backgroundContainer: darkMode ? colorsDark.backgroundContainer : colorsLight.backgroundContainer,
|
||||
backgroundAction: darkMode ? colorsDark.backgroundAction : colorsLight.backgroundAction,
|
||||
backgroundOutline: darkMode ? colorsDark.backgroundOutline : colorsLight.backgroundOutline,
|
||||
backgroundScrim: darkMode ? colorsDark.backgroundScrim : colorsLight.backgroundScrim,
|
||||
|
||||
textPrimary: darkMode ? colorsDark.textPrimary : colorsLight.textPrimary,
|
||||
textSecondary: darkMode ? colorsDark.textSecondary : colorsLight.textSecondary,
|
||||
textTertiary: darkMode ? colorsDark.textTertiary : colorsLight.textTertiary,
|
||||
|
||||
accentAction: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
accentActive: darkMode ? colorsDark.accentActive : colorsLight.accentActive,
|
||||
accentSuccess: darkMode ? colorsDark.accentSuccess : colorsLight.accentSuccess,
|
||||
accentWarning: darkMode ? colorsDark.accentWarning : colorsLight.accentWarning,
|
||||
accentFailure: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
|
||||
accentActionSoft: darkMode ? colorsDark.accentActionSoft : colorsLight.accentActionSoft,
|
||||
accentActiveSoft: darkMode ? colorsDark.accentActiveSoft : colorsLight.accentActiveSoft,
|
||||
accentSuccessSoft: darkMode ? colorsDark.accentSuccessSoft : colorsLight.accentSuccessSoft,
|
||||
accentWarningSoft: darkMode ? colorsDark.accentWarningSoft : colorsLight.accentWarningSoft,
|
||||
accentFailureSoft: darkMode ? colorsDark.accentFailureSoft : colorsLight.accentFailureSoft,
|
||||
|
||||
accentTextDarkPrimary: darkMode ? colorsDark.accentTextDarkPrimary : colorsLight.accentTextDarkPrimary,
|
||||
accentTextDarkSecondary: darkMode ? colorsDark.accentTextDarkSecondary : colorsLight.accentTextDarkSecondary,
|
||||
accentTextDarkTertiary: darkMode ? colorsDark.accentTextDarkTertiary : colorsLight.accentTextDarkTertiary,
|
||||
|
||||
accentTextLightPrimary: darkMode ? colorsDark.accentTextLightPrimary : colorsLight.accentTextLightPrimary,
|
||||
accentTextLightSecondary: darkMode ? colorsDark.accentTextLightSecondary : colorsLight.accentTextLightSecondary,
|
||||
accentTextLightTertiary: darkMode ? colorsDark.accentTextLightTertiary : colorsLight.accentTextLightTertiary,
|
||||
|
||||
none: colorsDark.none,
|
||||
white: ColorsPalette.white,
|
||||
black: ColorsPalette.black,
|
||||
|
||||
// chain colors are same for light/dark mode
|
||||
chain_1: colorsDark.chain_1,
|
||||
chain_3: colorsDark.chain_3,
|
||||
chain_4: colorsDark.chain_4,
|
||||
chain_5: colorsDark.chain_5,
|
||||
chain_10: colorsDark.chain_10,
|
||||
chain_137: colorsDark.chain_137,
|
||||
chain_42: colorsDark.chain_42,
|
||||
chain_69: colorsDark.chain_69,
|
||||
chain_42161: colorsDark.chain_42161,
|
||||
chain_421611: colorsDark.chain_421611,
|
||||
chain_80001: colorsDark.chain_80001,
|
||||
|
||||
blue200: ColorsPalette.blue200,
|
||||
}
|
||||
}
|
||||
|
||||
function oldColors(darkMode: boolean): Colors {
|
||||
return {
|
||||
darkMode,
|
||||
// base
|
||||
@ -110,65 +168,77 @@ function colors(darkMode: boolean): Colors {
|
||||
|
||||
// dont wanna forget these blue yet
|
||||
deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
|
||||
// blue5: darkMode ? '#153d6f70' : '#EBF4FF',
|
||||
|
||||
userThemeColor: darkMode ? colorsDark.userThemeColor : colorsLight.userThemeColor,
|
||||
|
||||
backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
|
||||
backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
|
||||
backgroundContainer: darkMode ? colorsDark.backgroundContainer : colorsLight.backgroundContainer,
|
||||
backgroundAction: darkMode ? colorsDark.backgroundAction : colorsLight.backgroundAction,
|
||||
backgroundOutline: darkMode ? colorsDark.backgroundOutline : colorsLight.backgroundOutline,
|
||||
backgroundScrim: darkMode ? colorsDark.backgroundScrim : colorsLight.backgroundScrim,
|
||||
|
||||
textPrimary: darkMode ? colorsDark.textPrimary : colorsLight.textPrimary,
|
||||
textSecondary: darkMode ? colorsDark.textSecondary : colorsLight.textSecondary,
|
||||
textTertiary: darkMode ? colorsDark.textTertiary : colorsLight.textTertiary,
|
||||
|
||||
accentAction: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
accentActive: darkMode ? colorsDark.accentActive : colorsLight.accentActive,
|
||||
accentSuccess: darkMode ? colorsDark.accentSuccess : colorsLight.accentSuccess,
|
||||
accentWarning: darkMode ? colorsDark.accentWarning : colorsLight.accentWarning,
|
||||
accentFailure: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
|
||||
accentActionSoft: darkMode ? colorsDark.accentActionSoft : colorsLight.accentActionSoft,
|
||||
accentActiveSoft: darkMode ? colorsDark.accentActiveSoft : colorsLight.accentActiveSoft,
|
||||
accentSuccessSoft: darkMode ? colorsDark.accentSuccessSoft : colorsLight.accentSuccessSoft,
|
||||
accentWarningSoft: darkMode ? colorsDark.accentWarningSoft : colorsLight.accentWarningSoft,
|
||||
accentFailureSoft: darkMode ? colorsDark.accentFailureSoft : colorsLight.accentFailureSoft,
|
||||
|
||||
accentTextDarkPrimary: darkMode ? colorsDark.accentTextDarkPrimary : colorsLight.accentTextDarkPrimary,
|
||||
accentTextDarkSecondary: darkMode ? colorsDark.accentTextDarkSecondary : colorsLight.accentTextDarkSecondary,
|
||||
accentTextDarkTertiary: darkMode ? colorsDark.accentTextDarkTertiary : colorsLight.accentTextDarkTertiary,
|
||||
|
||||
accentTextLightPrimary: darkMode ? colorsDark.accentTextLightPrimary : colorsLight.accentTextLightPrimary,
|
||||
accentTextLightSecondary: darkMode ? colorsDark.accentTextLightSecondary : colorsLight.accentTextLightSecondary,
|
||||
accentTextLightTertiary: darkMode ? colorsDark.accentTextLightTertiary : colorsLight.accentTextLightTertiary,
|
||||
|
||||
none: colorsDark.none,
|
||||
white: ColorsPalette.white,
|
||||
black: ColorsPalette.black,
|
||||
|
||||
// chain colors are same for light/dark mode
|
||||
chain_1: colorsDark.chain_1,
|
||||
chain_3: colorsDark.chain_3,
|
||||
chain_4: colorsDark.chain_4,
|
||||
chain_5: colorsDark.chain_5,
|
||||
chain_10: colorsDark.chain_10,
|
||||
chain_137: colorsDark.chain_137,
|
||||
chain_42: colorsDark.chain_42,
|
||||
chain_69: colorsDark.chain_69,
|
||||
chain_42161: colorsDark.chain_42161,
|
||||
chain_421611: colorsDark.chain_421611,
|
||||
chain_80001: colorsDark.chain_80001,
|
||||
|
||||
blue200: ColorsPalette.blue200,
|
||||
}
|
||||
}
|
||||
|
||||
function getTheme(darkMode: boolean): DefaultTheme {
|
||||
function oldColorsUpdated(darkMode: boolean): Colors {
|
||||
return {
|
||||
...colors(darkMode),
|
||||
darkMode,
|
||||
// base
|
||||
deprecated_white,
|
||||
deprecated_black,
|
||||
|
||||
// text
|
||||
deprecated_text1: darkMode ? colorsDark.textPrimary : colorsLight.textPrimary,
|
||||
deprecated_text2: darkMode ? colorsDark.textSecondary : colorsLight.textSecondary,
|
||||
deprecated_text3: darkMode ? colorsDark.textTertiary : colorsLight.textTertiary,
|
||||
deprecated_text4: darkMode ? ColorsPalette.gray200 : ColorsPalette.gray300,
|
||||
deprecated_text5: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray50,
|
||||
|
||||
// backgrounds / greys
|
||||
deprecated_bg0: darkMode ? ColorsPalette.gray900 : ColorsPalette.white,
|
||||
deprecated_bg1: darkMode ? ColorsPalette.gray800 : ColorsPalette.gray50,
|
||||
deprecated_bg2: darkMode ? ColorsPalette.gray700 : ColorsPalette.gray100,
|
||||
deprecated_bg3: darkMode ? ColorsPalette.gray600 : ColorsPalette.gray200,
|
||||
deprecated_bg4: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray300,
|
||||
deprecated_bg5: darkMode ? ColorsPalette.gray400 : ColorsPalette.gray400,
|
||||
deprecated_bg6: darkMode ? ColorsPalette.gray300 : ColorsPalette.gray500,
|
||||
|
||||
//specialty colors
|
||||
deprecated_modalBG: darkMode ? opacify(40, ColorsPalette.black) : opacify(30, ColorsPalette.black),
|
||||
deprecated_advancedBG: darkMode ? opacify(10, ColorsPalette.black) : opacify(60, ColorsPalette.white),
|
||||
|
||||
//primary colors
|
||||
deprecated_primary1: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
deprecated_primary2: darkMode ? ColorsPalette.blue400 : ColorsPalette.pink300,
|
||||
deprecated_primary3: darkMode ? ColorsPalette.blue300 : ColorsPalette.pink200,
|
||||
deprecated_primary4: darkMode ? '#376bad70' : '#F6DDE8',
|
||||
deprecated_primary5: darkMode ? '#153d6f70' : '#FDEAF1',
|
||||
|
||||
// color text
|
||||
deprecated_primaryText1: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
|
||||
// secondary colors
|
||||
deprecated_secondary1: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
deprecated_secondary2: darkMode ? opacify(25, ColorsPalette.gray900) : '#F6DDE8',
|
||||
deprecated_secondary3: darkMode ? opacify(25, ColorsPalette.gray900) : '#FDEAF1',
|
||||
|
||||
// other
|
||||
deprecated_red1: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
deprecated_red2: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
deprecated_red3: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
deprecated_green1: darkMode ? colorsDark.accentSuccess : colorsLight.accentSuccess,
|
||||
deprecated_yellow1: ColorsPalette.yellow400,
|
||||
deprecated_yellow2: ColorsPalette.yellow500,
|
||||
deprecated_yellow3: ColorsPalette.yellow600,
|
||||
deprecated_blue1: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
deprecated_blue2: darkMode ? colorsDark.accentAction : colorsLight.accentAction,
|
||||
deprecated_error: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
|
||||
deprecated_success: darkMode ? colorsDark.accentSuccess : colorsLight.accentSuccess,
|
||||
deprecated_warning: darkMode ? colorsDark.accentWarning : colorsLight.accentWarning,
|
||||
|
||||
// dont wanna forget these blue yet
|
||||
deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
|
||||
// blue5: darkMode ? '#153d6f70' : '#EBF4FF',
|
||||
// deprecated_blue5: '#869EFF',
|
||||
}
|
||||
}
|
||||
|
||||
function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme {
|
||||
const useColors = isNewColorsEnabled ? oldColorsUpdated(darkMode) : oldColors(darkMode)
|
||||
return {
|
||||
...uniswapThemeColors(darkMode),
|
||||
...useColors,
|
||||
|
||||
grids: {
|
||||
sm: 8,
|
||||
@ -195,10 +265,9 @@ function getTheme(darkMode: boolean): DefaultTheme {
|
||||
}
|
||||
|
||||
export default function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const phase0Flag = usePhase0Flag()
|
||||
const darkMode = useIsDarkMode()
|
||||
|
||||
const themeObject = useMemo(() => getTheme(darkMode), [darkMode])
|
||||
|
||||
const themeObject = useMemo(() => getTheme(darkMode, phase0Flag === Phase0Variant.Enabled), [darkMode, phase0Flag])
|
||||
return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
|
||||
}
|
||||
|
||||
|
||||
119
src/theme/styled.d.ts
vendored
119
src/theme/styled.d.ts
vendored
@ -1,63 +1,7 @@
|
||||
import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'
|
||||
|
||||
export type Color = string
|
||||
export interface Colors {
|
||||
darkMode: boolean
|
||||
|
||||
// base
|
||||
deprecated_white: Color
|
||||
deprecated_black: Color
|
||||
|
||||
// text
|
||||
deprecated_text1: Color
|
||||
deprecated_text2: Color
|
||||
deprecated_text3: Color
|
||||
deprecated_text4: Color
|
||||
deprecated_text5: Color
|
||||
|
||||
// backgrounds / greys
|
||||
deprecated_bg0: Color
|
||||
deprecated_bg1: Color
|
||||
deprecated_bg2: Color
|
||||
deprecated_bg3: Color
|
||||
deprecated_bg4: Color
|
||||
deprecated_bg5: Color
|
||||
deprecated_bg6: Color
|
||||
|
||||
deprecated_modalBG: Color
|
||||
deprecated_advancedBG: Color
|
||||
|
||||
//blues
|
||||
deprecated_primary1: Color
|
||||
deprecated_primary2: Color
|
||||
deprecated_primary3: Color
|
||||
deprecated_primary4: Color
|
||||
deprecated_primary5: Color
|
||||
|
||||
deprecated_primaryText1: Color
|
||||
|
||||
// pinks
|
||||
deprecated_secondary1: Color
|
||||
deprecated_secondary2: Color
|
||||
deprecated_secondary3: Color
|
||||
|
||||
// other
|
||||
deprecated_red1: Color
|
||||
deprecated_red2: Color
|
||||
deprecated_red3: Color
|
||||
deprecated_green1: Color
|
||||
deprecated_yellow1: Color
|
||||
deprecated_yellow2: Color
|
||||
deprecated_yellow3: Color
|
||||
deprecated_blue1: Color
|
||||
deprecated_blue2: Color
|
||||
|
||||
deprecated_blue4: Color
|
||||
|
||||
deprecated_error: Color
|
||||
deprecated_success: Color
|
||||
deprecated_warning: Color
|
||||
|
||||
export interface ThemeColors {
|
||||
userThemeColor: string
|
||||
|
||||
backgroundBackdrop: Color
|
||||
@ -110,8 +54,67 @@ export interface Colors {
|
||||
blue200: Color
|
||||
}
|
||||
|
||||
export interface Colors {
|
||||
darkMode: boolean
|
||||
|
||||
// base
|
||||
deprecated_white: Color
|
||||
deprecated_black: Color
|
||||
|
||||
// text
|
||||
deprecated_text1: Color
|
||||
deprecated_text2: Color
|
||||
deprecated_text3: Color
|
||||
deprecated_text4: Color
|
||||
deprecated_text5: Color
|
||||
|
||||
// backgrounds / greys
|
||||
deprecated_bg0: Color
|
||||
deprecated_bg1: Color
|
||||
deprecated_bg2: Color
|
||||
deprecated_bg3: Color
|
||||
deprecated_bg4: Color
|
||||
deprecated_bg5: Color
|
||||
deprecated_bg6: Color
|
||||
|
||||
deprecated_modalBG: Color
|
||||
deprecated_advancedBG: Color
|
||||
|
||||
//blues
|
||||
deprecated_primary1: Color
|
||||
deprecated_primary2: Color
|
||||
deprecated_primary3: Color
|
||||
deprecated_primary4: Color
|
||||
deprecated_primary5: Color
|
||||
|
||||
deprecated_primaryText1: Color
|
||||
|
||||
// pinks
|
||||
deprecated_secondary1: Color
|
||||
deprecated_secondary2: Color
|
||||
deprecated_secondary3: Color
|
||||
|
||||
// other
|
||||
deprecated_red1: Color
|
||||
deprecated_red2: Color
|
||||
deprecated_red3: Color
|
||||
deprecated_green1: Color
|
||||
deprecated_yellow1: Color
|
||||
deprecated_yellow2: Color
|
||||
deprecated_yellow3: Color
|
||||
deprecated_blue1: Color
|
||||
deprecated_blue2: Color
|
||||
|
||||
deprecated_blue4: Color
|
||||
// deprecated_blue5: Color
|
||||
|
||||
deprecated_error: Color
|
||||
deprecated_success: Color
|
||||
deprecated_warning: Color
|
||||
}
|
||||
|
||||
declare module 'styled-components/macro' {
|
||||
export interface DefaultTheme extends Colors {
|
||||
export interface DefaultTheme extends Colors, ThemeColors {
|
||||
grids: Grids
|
||||
|
||||
// shadows
|
||||
|
||||
Loading…
Reference in New Issue
Block a user