fix colors

Author: eallend

theme/components/Popover.ts

@@ -21,12 +21,12 @@ const baseStyleContent = defineStyle((props) => {
   const shadowColor = mode('blackAlpha.200', 'whiteAlpha.300')(props);
 
   return {
-    [$popperBg.variable]: `#252526`,
-    background: '#252526',
+    [$popperBg.variable]: `#1a1a1a`,
+    background: '#1a1a1a',
     [$arrowBg.variable]: $popperBg.reference,
     [$arrowShadowColor.variable]: `colors.${ shadowColor }`,
     _dark: {
-      background: '#252526',
+      background: '#1a1a1a',
       [$popperBg.variable]: `grey.50`,
       [$arrowShadowColor.variable]: `grey.50`,
       boxShadow: 'dark-lg',

theme/components/Tag/Tag.ts

@@ -43,8 +43,8 @@ const variants = {
   }),
   select: definePartsStyle((props) => ({
     container: {
-      bg: mode('gray.100', 'gray.800')(props),
-      color: mode('gray.500', 'whiteAlpha.800')(props),
+      bg: mode('gray.100', 'grey.10')(props),
+      color: mode('gray.500', 'white')(props),
       cursor: 'pointer',
       _hover: {
         color: 'blue.400',
@@ -54,8 +54,8 @@ const variants = {
         &[data-selected=true],
         &[data-selected=true][aria-selected=true]
       `]: {
-        bg: mode('blue.500', 'blue.900')(props),
-        color: 'whiteAlpha.800',
+        bg: mode('blue.500', 'grey.10')(props),
+        color: 'cyan',
       },
     },
   })),

theme/foundations/colors.ts

@@ -50,7 +50,7 @@ const colors = {
     '200': '#E2E8F0',
     '300': '#CBD5E0',
     '400': '#A0AEC0',
-    '500': '#718096',
+    '500': 'rgba(255, 255, 255, 0.50)',
     '600': '#4A5568',
     '700': '#2D3748',
     '800': '#1A202C',

ui/gasTracker/GasTrackerNetworkUtilization.tsx

@@ -25,7 +25,7 @@ const GasTrackerNetworkUtilization = ({ percentage, isLoading }: Props) => {
   const colors = {
     high: 'red.600',
     medium: 'orange.600',
-    low: 'green.600',
+    low: 'green.500',
   };
   const color = colors[load];
 

ui/shared/Utilization/Utilization.tsx

@@ -14,7 +14,7 @@ const WIDTH = 50;
 
 const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Props) => {
   const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString(undefined, { maximumFractionDigits: 2 }) + '%';
-  const colorGrayScheme = useColorModeValue('gray.500', 'gray.400');
+  const colorGrayScheme = useColorModeValue('gray.500', 'grey.50');
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
 
   return (

ui/shared/chart/ChartWidget.tsx

@@ -48,7 +48,7 @@ const ChartWidget = ({
   const ref = useRef<HTMLDivElement>(null);
   const { zoomRange, handleZoom, handleZoomReset } = useZoom();
 
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const borderColor = useColorModeValue('gray.200', 'grey.20');
 
   const hasItems = items && items.length > 2;
 

ui/shared/chart/tooltip/ChartTooltipRow.tsx

@@ -12,7 +12,7 @@ type Props = {
 } & ({ label: string; children?: never } | { children: React.ReactNode; label?: never });
 
 const ChartTooltipRow = ({ label, lineNum, children }: Props) => {
-  const labelColor = useToken('colors', 'blue.100');
+  const labelColor = useToken('colors', 'orange.600');
   const textColor = useToken('colors', 'white');
 
   return (