ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Update outdated colors (#4420)

Browse Source 
* Update outdated colors and add shallowShadow

* Update colors.ts

Co-authored-by: Kaylee George <62825936+kayleegeorge@users.noreply.github.com>
This commit is contained in:
pp-hh-ii-ll 2022-08-22 16:20:59 -04:00 committed by GitHub
parent 6f2e447ec3
commit 031bea0f50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/theme/colors.ts
View File

@ -87,9 +87,9 @@ export interface GlobalPalette {
export const colors: GlobalPalette = {
white: '#FFFFFF',
black: '#000000',
gray50: '#F8F9FF',
gray100: '#DDE3F7',
gray200: '#B7BED4',
gray50: '#F5F6FC',
gray100: '#E8ECFB',
gray200: '#C9D0E7',
gray300: '#99A1BD',
gray400: '#7C85A2',
gray500: '#5E6887',
@ -243,7 +243,7 @@ export const colorsLight: Palette = {
accentAction: colors.pink400,
accentActive: colors.blue400,
accentSuccess: colors.green400,
accentSuccess: colors.green300,
accentWarning: colors.gold200,
accentFailure: colors.red400,
accentCritical: colors.red400,
@ -252,15 +252,15 @@ export const colorsLight: Palette = {
accentActiveSoft: opacify(24, colors.blue400),
accentSuccessSoft: opacify(24, colors.green400),
accentWarningSoft: opacify(24, colors.gold200),
accentFailureSoft: opacify(24, colors.red400),
accentFailureSoft: opacify(12, colors.red400),
accentTextDarkPrimary: opacify(80, colors.gray900),
accentTextDarkSecondary: opacify(60, colors.gray900),
accentTextDarkTertiary: opacify(24, colors.gray900),
accentTextLightPrimary: colors.white,
accentTextLightSecondary: opacify(72, colors.white),
accentTextLightTertiary: opacify(12, colors.white),
accentTextLightPrimary: colors.gray50,
accentTextLightSecondary: opacify(60, colors.gray50),
accentTextLightTertiary: opacify(12, colors.gray50),
white: colors.white,
black: colors.black,
@ -280,10 +280,10 @@ export const colorsLight: Palette = {
chain_10_background: colors.red900,
chain_42161_background: colors.blue900,
shallowShadow:
'0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
deepShadow:
'8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04);',
shallowShadow:
'6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
}
export const colorsDark: Palette = {
@ -305,7 +305,7 @@ export const colorsDark: Palette = {
accentActive: colors.blue400,
accentSuccess: colors.green200,
accentWarning: colors.gold200,
accentFailure: colors.red400,
accentFailure: colors.red300,
accentCritical: colors.red300,
accentActionSoft: opacify(24, colors.blue400),
@ -314,13 +314,13 @@ export const colorsDark: Palette = {
accentWarningSoft: opacify(24, colors.gold200),
accentFailureSoft: opacify(12, colors.red400),
accentTextDarkPrimary: opacify(80, colors.black),
accentTextDarkSecondary: opacify(60, colors.black),
accentTextDarkTertiary: opacify(24, colors.black),
accentTextDarkPrimary: opacify(80, colors.gray900),
accentTextDarkSecondary: opacify(60, colors.gray900),
accentTextDarkTertiary: opacify(24, colors.gray900),
accentTextLightPrimary: colors.white,
accentTextLightSecondary: opacify(72, colors.white),
accentTextLightTertiary: opacify(12, colors.white),
accentTextLightPrimary: colors.gray50,
accentTextLightSecondary: opacify(72, colors.gray50),
accentTextLightTertiary: opacify(12, colors.gray50),
white: colors.white,
black: colors.black,
@ -340,6 +340,6 @@ export const colorsDark: Palette = {
chain_10_background: colors.red900,
chain_42161_background: colors.blue900,
shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);',
deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32);',
shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);',
}