fix: update widget color scheme (#4475)

* fix: update widget color scheme

* Map Uniswap Design System colors to Widget color styles

Co-authored-by: pp-hh-ii-ll <111304124+pp-hh-ii-ll@users.noreply.github.com>
This commit is contained in:
Connor McEwen 2022-08-25 13:50:46 -04:00 committed by GitHub
parent 0713a15028
commit 9b8f5ed8f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,34 +1,36 @@
import { colors } from './colors' import { colorsDark, colorsLight } from './colors'
export const LIGHT_THEME = { export const LIGHT_THEME = {
// surface // surface
container: '#EDEFF7', container: colorsLight.backgroundSurface,
interactive: '#EDEFF7', interactive: colorsLight.backgroundInteractive,
module: '#E1E4EE', module: colorsLight.backgroundModule,
accent: colors.pink400, accent: colorsLight.accentAction,
dialog: '#E1E4EE', dialog: colorsLight.backgroundBackdrop,
outline: colorsLight.backgroundOutline,
// text // text
primary: colors.gray900, primary: colorsLight.textPrimary,
secondary: colors.gray500, secondary: colorsLight.textSecondary,
onInteractive: colors.gray900, onInteractive: colorsLight.accentTextDarkPrimary,
// state // state
success: colors.green400, success: colorsLight.accentSuccess,
warning: colors.gold200, warning: colorsLight.accentWarning,
error: colors.red400, error: colorsLight.accentCritical,
} }
export const DARK_THEME = { export const DARK_THEME = {
// surface // surface
container: colors.gray900, container: colorsDark.backgroundSurface,
interactive: 'rgba(153, 161, 189, 0.08)', interactive: colorsDark.backgroundInteractive,
module: '#191D27', module: colorsDark.backgroundModule,
accent: colors.blue400, accent: colorsDark.accentAction,
dialog: '#191D27', dialog: colorsDark.backgroundBackdrop,
outline: colorsDark.backgroundOutline,
// text // text
primary: colors.white, primary: colorsDark.textPrimary,
secondary: colors.gray300, secondary: colorsDark.textSecondary,
onInteractive: colors.white, onInteractive: colorsDark.accentTextLightPrimary,
// state // state
success: colors.greenVibrant, success: colorsDark.accentSuccess,
warning: colors.gold200, warning: colorsDark.accentWarning,
error: colors.red400, error: colorsDark.accentCritical,
} }