Update color shemes for Tag component (#1855)

update color shemes for Tag

icons/status/pending.svg

-<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="5" cy="5" r="5" fill="#D9DBE0"/>
-  <circle cx="5" cy="5" r="2.5" fill="#707886"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" fill="none">
+  <circle cx="5" cy="5.438" r="5" fill="#E2E8F0"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#4A5568"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#000" fill-opacity=".2"/>
 </svg>

theme/components/Badge.ts

 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode, transparentize } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
 const baseStyle = defineStyle({
   fontSize: 'xs',
@@ -8,19 +8,25 @@ const baseStyle = defineStyle({
 });
 
 const variantSubtle = defineStyle((props) => {
-  const { colorScheme: c, theme } = props;
-  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
+  const { colorScheme: c } = props;
 
   if (c === 'gray') {
     return {
-      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
-      color: mode('gray.600', 'gray.50')(props),
+      bg: mode('blackAlpha.50', 'whiteAlpha.100')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
     };
   }
 
+  if (c === 'gray-blue') {
     return {
-    bg: mode(`${ c }.50`, darkBg)(props),
-    color: mode(`${ c }.500`, `${ c }.200`)(props),
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+    };
+  }
+
+  return {
+    bg: mode(`${ c }.50`, `${ c }.800`)(props),
+    color: mode(`${ c }.500`, `${ c }.100`)(props),
   };
 });
 

theme/components/Tag/Tag.pw.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import TestApp from 'playwright/TestApp';
 
-[ 'blue', 'gray', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
+[ 'blue', 'gray', 'gray-blue', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
   test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
     const component = await mount(
       <TestApp>

theme/components/Tag/Tag.ts

@@ -18,7 +18,7 @@ const variants = {
 };
 
 const sizes = {
-  md: definePartsStyle({
+  sm: definePartsStyle({
     container: {
       minH: 6,
       minW: 6,
@@ -48,7 +48,7 @@ const Tag = defineMultiStyleConfig({
   variants,
   sizes,
   defaultProps: {
-    size: 'md',
+    size: 'sm',
     variant: 'subtle',
     colorScheme: 'gray',
   },

ui/shared/statusTag/StatusTag.tsx

@@ -29,8 +29,6 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
       break;
     case 'pending':
       icon = 'status/pending';
-      // FIXME: it's not gray on mockups
-      // need to implement new color scheme or redefine colors here
       colorScheme = 'gray';
       break;
   }