Skip to content

Commit

Permalink
feat: theme color updates under feature flag (#4252)
Browse files Browse the repository at this point in the history 
* toggle

* fixed position

* im bad at spelling

* rm button

* fix

* add feature flag

* naming

* rm blue5

* uppercase

* rm file
  • Loading branch information
@kayleegeorge
kayleegeorge committed Aug 2, 2022
1 parent fa70fe1 commit a02099f
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 106 deletions.
2 changes: 1 addition & 1 deletion src/featureFlag/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function useFeatureFlagsIsLoaded(): boolean {

// feature flag hooks

enum Phase0Variant {
export enum Phase0Variant {
Control = 'Control',
Enabled = 'Enabled',
}
Expand Down
175 changes: 122 additions & 53 deletions src/theme/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Phase0Variant, usePhase0Flag } from 'featureFlag'
import React, { useMemo } from 'react'
import { Text, TextProps as TextPropsOriginal } from 'rebass'
import styled, {
Expand All @@ -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'

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
function oldColorsUpdated(darkMode: boolean): Colors {
return {
darkMode,
// base
deprecated_white,
deprecated_black,

textPrimary: darkMode ? colorsDark.textPrimary : colorsLight.textPrimary,
textSecondary: darkMode ? colorsDark.textSecondary : colorsLight.textSecondary,
textTertiary: darkMode ? colorsDark.textTertiary : colorsLight.textTertiary,
// 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,

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,
// 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,

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,
//specialty colors
deprecated_modalBG: darkMode ? opacify(40, ColorsPalette.black) : opacify(30, ColorsPalette.black),
deprecated_advancedBG: darkMode ? opacify(10, ColorsPalette.black) : opacify(60, ColorsPalette.white),

accentTextDarkPrimary: darkMode ? colorsDark.accentTextDarkPrimary : colorsLight.accentTextDarkPrimary,
accentTextDarkSecondary: darkMode ? colorsDark.accentTextDarkSecondary : colorsLight.accentTextDarkSecondary,
accentTextDarkTertiary: darkMode ? colorsDark.accentTextDarkTertiary : colorsLight.accentTextDarkTertiary,
//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',

accentTextLightPrimary: darkMode ? colorsDark.accentTextLightPrimary : colorsLight.accentTextLightPrimary,
accentTextLightSecondary: darkMode ? colorsDark.accentTextLightSecondary : colorsLight.accentTextLightSecondary,
accentTextLightTertiary: darkMode ? colorsDark.accentTextLightTertiary : colorsLight.accentTextLightTertiary,
// color text
deprecated_primaryText1: darkMode ? colorsDark.accentAction : colorsLight.accentAction,

none: colorsDark.none,
white: ColorsPalette.white,
black: ColorsPalette.black,
// 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',

// 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,
// 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,

blue200: ColorsPalette.blue200,
// dont wanna forget these blue yet
deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
// blue5: darkMode ? '#153d6f70' : '#EBF4FF',
// deprecated_blue5: '#869EFF',
}
}

function getTheme(darkMode: boolean): DefaultTheme {
function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme {
const useColors = isNewColorsEnabled ? oldColorsUpdated(darkMode) : oldColors(darkMode)
return {
...colors(darkMode),
...uniswapThemeColors(darkMode),
...useColors,

grids: {
sm: 8,
Expand All @@ -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>
}

Expand Down
107 changes: 55 additions & 52 deletions src/theme/styled.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,59 @@
import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'

export type Color = string
export interface ThemeColors {
userThemeColor: string

backgroundBackdrop: Color
backgroundSurface: Color
backgroundContainer: Color
backgroundAction: Color
backgroundOutline: Color
backgroundScrim: Color

textPrimary: Color
textSecondary: Color
textTertiary: Color

accentAction: Color
accentActive: Color
accentSuccess: Color
accentWarning: Color
accentFailure: Color

accentActionSoft: Color
accentActiveSoft: Color
accentSuccessSoft: Color
accentWarningSoft: Color
accentFailureSoft: Color

accentTextDarkPrimary: Color
accentTextDarkSecondary: Color
accentTextDarkTertiary: Color

accentTextLightPrimary: Color
accentTextLightSecondary: Color
accentTextLightTertiary: Color

white: Color
black: Color
none: Color

chain_1: Color
chain_3: Color
chain_4: Color
chain_5: Color
chain_10: Color
chain_137: Color
chain_42: Color
chain_69: Color
chain_42161: Color
chain_421611: Color
chain_80001: Color

blue200: Color
}

export interface Colors {
darkMode: boolean

Expand Down Expand Up @@ -53,65 +106,15 @@ export interface Colors {
deprecated_blue2: Color

deprecated_blue4: Color
// deprecated_blue5: Color

deprecated_error: Color
deprecated_success: Color
deprecated_warning: Color

userThemeColor: string

backgroundBackdrop: Color
backgroundSurface: Color
backgroundContainer: Color
backgroundAction: Color
backgroundOutline: Color
backgroundScrim: Color

textPrimary: Color
textSecondary: Color
textTertiary: Color

accentAction: Color
accentActive: Color
accentSuccess: Color
accentWarning: Color
accentFailure: Color

accentActionSoft: Color
accentActiveSoft: Color
accentSuccessSoft: Color
accentWarningSoft: Color
accentFailureSoft: Color

accentTextDarkPrimary: Color
accentTextDarkSecondary: Color
accentTextDarkTertiary: Color

accentTextLightPrimary: Color
accentTextLightSecondary: Color
accentTextLightTertiary: Color

white: Color
black: Color
none: Color

chain_1: Color
chain_3: Color
chain_4: Color
chain_5: Color
chain_10: Color
chain_137: Color
chain_42: Color
chain_69: Color
chain_42161: Color
chain_421611: Color
chain_80001: Color

blue200: Color
}

declare module 'styled-components/macro' {
export interface DefaultTheme extends Colors {
export interface DefaultTheme extends Colors, ThemeColors {
grids: Grids

// shadows
Expand Down

1 comment on commit a02099f

@vercel
Copy link

@vercel vercel bot commented on a02099f Aug 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

interface – ./

interface-uniswap.vercel.app
interface-git-main-uniswap.vercel.app

Please sign in to comment.