fix: updated color definitions for backgroundModule, add scrolledSurface (#4538)

Updated color definitions for BackgroundModule and tokens list in Explore page

Update Dark Mode BackgroundModule to Grey800 to match new design spec

Update Widgets theme to use BackgroundModule for Module

Update Token List in Explore page to use Surface instead of Module

Add Scrolled Surface color definition

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -21,7 +21,7 @@ const GridContainer = styled.div`
   display: flex;
   flex-direction: column;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
-  background-color: ${({ theme }) => theme.backgroundModule};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   margin-left: auto;

src/theme/colors.ts

@@ -178,6 +178,7 @@ export interface Palette {
   backgroundModule: Color
   backgroundOutline: Color
   backgroundScrim: Color
+  backgroundScrolledSurface: Color
 
   textPrimary: Color
   textSecondary: Color
@@ -237,6 +238,7 @@ export const colorsLight: Palette = {
   backgroundFloating: opacify(8, colors.gray700),
   backgroundOutline: opacify(24, colors.gray500),
   backgroundScrim: opacify(60, colors.gray900),
+  backgroundScrolledSurface: opacify(72, colors.white),
 
   textPrimary: colors.gray900,
   textSecondary: colors.gray500,
@@ -293,11 +295,12 @@ export const colorsDark: Palette = {
 
   backgroundBackdrop: colors.black,
   backgroundSurface: colors.gray900,
-  backgroundModule: opacify(8, colors.gray300),
+  backgroundModule: colors.gray800,
   backgroundInteractive: colors.gray700,
   backgroundFloating: opacify(12, colors.black),
   backgroundOutline: opacify(24, colors.gray300),
   backgroundScrim: opacify(72, colors.gray900),
+  backgroundScrolledSurface: opacify(72, colors.gray900),
 
   textPrimary: colors.white,
   textSecondary: colors.gray300,

src/theme/widget.ts

@@ -22,7 +22,7 @@ export const DARK_THEME = {
   // surface
   container: colorsDark.backgroundSurface,
   interactive: colorsDark.backgroundInteractive,
-  module: colorsDark.backgroundInteractive,
+  module: colorsDark.backgroundModule,
   accent: colorsDark.accentAction,
   dialog: colorsDark.backgroundBackdrop,
   outline: colorsDark.backgroundOutline,