chore: add new background to theme (#5109)

* chore: add new background to theme

* update snapshot

src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap

@@ -131,7 +131,7 @@ exports[`renders multi route 1`] = `
 .c9 {
   background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5D6785;
+  color: #7780A0;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;
@@ -369,7 +369,7 @@ exports[`renders single route 1`] = `
 .c9 {
   background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5D6785;
+  color: #7780A0;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;

src/theme/colors.ts

@@ -187,6 +187,7 @@ export const colors: GlobalPalette = {
 export interface Palette {
   userThemeColor: Color
 
+  background: string
   backgroundBackdrop: Color
   backgroundSurface: Color
   backgroundInteractive: Color
@@ -248,17 +249,18 @@ export interface Palette {
 export const colorsLight: Palette = {
   userThemeColor: colors.magentaVibrant,
 
+  background: '#faf9fa', //INTENTIONALLY OFF THEME TO GIVE WHITE BG A SOFTER VISUAL
   backgroundBackdrop: colors.white,
   backgroundSurface: colors.white,
   backgroundModule: colors.gray50,
   backgroundInteractive: colors.gray100,
   backgroundFloating: opacify(8, colors.gray700),
-  backgroundOutline: opacify(24, colors.gray500),
+  backgroundOutline: colors.gray150,
   backgroundScrim: opacify(60, colors.gray900),
   backgroundScrolledSurface: opacify(72, colors.white),
 
   textPrimary: colors.gray900,
-  textSecondary: colors.gray500,
+  textSecondary: colors.gray400,
   textTertiary: colors.gray300,
 
   accentAction: colors.pink400,
@@ -311,12 +313,13 @@ export const colorsLight: Palette = {
 export const colorsDark: Palette = {
   userThemeColor: colors.magentaVibrant,
 
+  background: colors.gray800,
   backgroundBackdrop: colors.black,
   backgroundSurface: colors.gray900,
   backgroundModule: colors.gray800,
   backgroundInteractive: colors.gray700,
   backgroundFloating: opacify(12, colors.black),
-  backgroundOutline: opacify(14, colors.gray300),
+  backgroundOutline: colors.gray750,
   backgroundScrim: opacify(72, colors.gray900),
   backgroundScrolledSurface: opacify(72, colors.gray900),
 

src/theme/index.tsx

@@ -73,6 +73,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
   return {
     userThemeColor: darkMode ? colorsDark.userThemeColor : colorsLight.userThemeColor,
 
+    background: darkMode ? colorsDark.background : colorsLight.background,
     backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
     backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
     backgroundModule: darkMode ? colorsDark.backgroundModule : colorsLight.backgroundModule,
@@ -320,7 +321,7 @@ export const ThemedText = {
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
   color: ${({ theme }) => theme.deprecated_text1};
-  background-color: ${({ theme }) => theme.deprecated_bg1} !important;
+  background-color: ${({ theme }) => theme.background} !important;
 }
 
 a {

src/theme/styled.d.ts

@@ -6,6 +6,7 @@ export type AllColors = ThemeColors | Colors
 export interface ThemeColors {
   userThemeColor: string
 
+  background: string
   backgroundBackdrop: Color
   backgroundSurface: Color
   backgroundModule: Color