remove color scheme for tags

toolkit/chakra/tag.tsx

 import { Tag as ChakraTag } from '@chakra-ui/react';
 import * as React from 'react';
 
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+
+import { Skeleton } from './skeleton';
+
 export interface TagProps extends ChakraTag.RootProps {
   startElement?: React.ReactNode;
   endElement?: React.ReactNode;
   onClose?: VoidFunction;
   closable?: boolean;
+  truncated?: boolean;
+  loading?: boolean;
 }
 
 export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
@@ -16,15 +22,24 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       onClose,
       closable = Boolean(onClose),
       children,
+      truncated = false,
+      loading,
       ...rest
     } = props;
 
+    const labelElement = truncated ? (
+      <TruncatedTextTooltip label={ children }>
+        <ChakraTag.Label>{ children }</ChakraTag.Label>
+      </TruncatedTextTooltip>
+    ) : <ChakraTag.Label>{ children }</ChakraTag.Label>;
+
     return (
+      <Skeleton loading={ loading } asChild>
         <ChakraTag.Root ref={ ref } { ...rest }>
           { startElement && (
             <ChakraTag.StartElement>{ startElement }</ChakraTag.StartElement>
           ) }
-        <ChakraTag.Label>{ children }</ChakraTag.Label>
+          { labelElement }
           { endElement && (
             <ChakraTag.EndElement>{ endElement }</ChakraTag.EndElement>
           ) }
@@ -34,6 +49,7 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
             </ChakraTag.EndElement>
           ) }
         </ChakraTag.Root>
+      </Skeleton>
     );
   },
 );

toolkit/theme/foundations/semanticTokens.ts

@@ -14,6 +14,14 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
         },
       },
+      subtle: {
+        fg: {
+          DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        },
+        bg: {
+          DEFAULT: { value: { _light: '{colors.blackAlpha.200}', _dark: '{colors.whiteAlpha.200}' } },
+        },
+      },
       dropdown: {
         fg: {
           DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
@@ -292,6 +300,17 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         fg: { value: { _light: '{colors.cyan.500}', _dark: '{colors.cyan.100}' } },
       },
     },
+    tag: {
+      root: {
+        subtle: {
+          bg: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
+          fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+        },
+      },
+      closeTrigger: {
+        color: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
+      },
+    },
     table: {
       header: {
         bg: { value: { _light: '{colors.blackAlpha.100}', _dark: '{colors.whiteAlpha.200}' } },

toolkit/theme/recipes/alert.recipe.ts

@@ -11,6 +11,9 @@ export const recipe = defineSlotRecipe({
       position: 'relative',
       borderRadius: 'base',
       color: 'alert.fg',
+      _loading: {
+        bgColor: 'unset',
+      },
     },
     title: {
       fontWeight: '600',
@@ -27,7 +30,6 @@ export const recipe = defineSlotRecipe({
       height: '5',
       _icon: { boxSize: 'full' },
       color: 'alert.fg',
-      '--layer-bg': 'transparent',
     },
     content: {
       display: 'flex',
@@ -39,43 +41,55 @@ export const recipe = defineSlotRecipe({
     status: {
       info: {
         root: {
-          bg: 'alert.bg.info',
-          '--layer-bg': '{colors.alert.bg.info}',
+          bgColor: 'alert.bg.info',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.info',
+          },
           color: 'alert.fg',
         },
       },
       warning: {
         root: {
-          bg: 'alert.bg.warning',
-          '--layer-bg': '{colors.alert.bg.warning}',
+          bgColor: 'alert.bg.warning',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.warning',
+          },
           color: 'alert.fg',
         },
       },
       warning_table: {
         root: {
-          bg: 'alert.bg.warning_table',
-          '--layer-bg': '{colors.alert.bg.warning_table}',
+          bgColor: 'alert.bg.warning_table',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.warning_table',
+          },
           color: 'alert.fg',
         },
       },
       success: {
         root: {
-          bg: 'alert.bg.success',
-          '--layer-bg': '{colors.alert.bg.success}',
+          bgColor: 'alert.bg.success',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.success',
+          },
           color: 'alert.fg',
         },
       },
       error: {
         root: {
-          bg: 'alert.bg.error',
-          '--layer-bg': '{colors.alert.bg.error}',
+          bgColor: 'alert.bg.error',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.error',
+          },
           color: 'alert.fg',
         },
       },
       neutral: {
         root: {
-          bg: 'alert.bg.neutral',
-          '--layer-bg': '{colors.alert.bg.neutral}',
+          bgColor: 'alert.bg.neutral',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'alert.bg.neutral',
+          },
           color: 'alert.fg',
         },
       },

toolkit/theme/recipes/badge.recipe.ts

@@ -9,6 +9,10 @@ export const recipe = defineRecipe({
     fontWeight: '500',
     whiteSpace: 'nowrap',
     userSelect: 'none',
+    _loading: {
+      borderRadius: 'sm',
+      bgColor: 'unset',
+    },
   },
   variants: {
     variant: {
@@ -16,58 +20,80 @@ export const recipe = defineRecipe({
     },
     colorPalette: {
       gray: {
-        bg: 'badge.gray.bg',
-        '--layer-bg': '{colors.badge.gray.bg}',
+        bgColor: 'badge.gray.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.gray.bg',
+        },
         color: 'badge.gray.fg',
       },
       green: {
-        bg: 'badge.green.bg',
-        '--layer-bg': '{colors.badge.green.bg}',
+        bgColor: 'badge.green.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.green.bg',
+        },
         color: 'badge.green.fg',
       },
       red: {
-        bg: 'badge.red.bg',
-        '--layer-bg': '{colors.badge.red.bg}',
+        bgColor: 'badge.red.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.red.bg',
+        },
         color: 'badge.red.fg',
       },
       purple: {
-        bg: 'badge.purple.bg',
-        '--layer-bg': '{colors.badge.purple.bg}',
+        bgColor: 'badge.purple.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.purple.bg',
+        },
         color: 'badge.purple.fg',
       },
       orange: {
-        bg: 'badge.orange.bg',
-        '--layer-bg': '{colors.badge.orange.bg}',
+        bgColor: 'badge.orange.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.orange.bg',
+        },
         color: 'badge.orange.fg',
       },
       blue: {
-        bg: 'badge.blue.bg',
-        '--layer-bg': '{colors.badge.blue.bg}',
+        bgColor: 'badge.blue.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.blue.bg',
+        },
         color: 'badge.blue.fg',
       },
       yellow: {
-        bg: 'badge.yellow.bg',
-        '--layer-bg': '{colors.badge.yellow.bg}',
+        bgColor: 'badge.yellow.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.yellow.bg',
+        },
         color: 'badge.yellow.fg',
       },
       teal: {
-        bg: 'badge.teal.bg',
-        '--layer-bg': '{colors.badge.teal.bg}',
+        bgColor: 'badge.teal.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.teal.bg',
+        },
         color: 'badge.teal.fg',
       },
       cyan: {
-        bg: 'badge.cyan.bg',
-        '--layer-bg': '{colors.badge.cyan.bg}',
+        bgColor: 'badge.cyan.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.cyan.bg',
+        },
         color: 'badge.cyan.fg',
       },
       purple_alt: {
-        bg: 'badge.purple_alt.bg',
-        '--layer-bg': '{colors.badge.purple_alt.bg}',
+        bgColor: 'badge.purple_alt.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.purple_alt.bg',
+        },
         color: 'badge.purple_alt.fg',
       },
       blue_alt: {
-        bg: 'badge.blue_alt.bg',
-        '--layer-bg': '{colors.badge.blue_alt.bg}',
+        bgColor: 'badge.blue_alt.bg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'badge.blue_alt.bg',
+        },
         color: 'badge.blue_alt.fg',
       },
     },

toolkit/theme/recipes/button.recipe.ts

@@ -139,6 +139,21 @@ export const recipe = defineRecipe({
           bg: 'transparent',
         },
       },
+      subtle: {
+        bg: 'button.subtle.bg',
+        color: 'button.subtle.fg',
+        '&:not([data-loading], [aria-busy=true])': {
+          bg: 'button.subtle.bg',
+        },
+        _hover: {
+          bg: 'button.subtle.bg',
+          color: 'link.primary.hover',
+        },
+        _disabled: {
+          bg: 'button.subtle.bg',
+          color: 'button.subtle.fg',
+        },
+      },
       link: {
         bg: 'transparent',
         color: 'link.primary',

toolkit/theme/recipes/index.ts

@@ -17,6 +17,7 @@ import { recipe as spinner } from './spinner.recipe';
 import { recipe as switchRecipe } from './switch.recipe';
 import { recipe as table } from './table.recipe';
 import { recipe as tabs } from './tabs.recipe';
+import { recipe as tag } from './tag.recipe';
 import { recipe as textarea } from './textarea.recipe';
 import { recipe as toast } from './toast.recipe';
 import { recipe as tooltip } from './tooltip.recipe';
@@ -45,6 +46,7 @@ export const slotRecipes = {
   'switch': switchRecipe,
   table,
   tabs,
+  tag,
   toast,
   tooltip,
 };

toolkit/theme/recipes/link.recipe.ts

@@ -30,8 +30,6 @@ export const recipe = defineRecipe({
       },
       underlaid: {
         color: 'link.primary',
-        // css-var to override bg property on loaded skeleton
-        '--layer-bg': '{colors.link.underlaid.bg}',
         bgColor: 'link.underlaid.bg',
         px: '8px',
         py: '6px',
@@ -42,7 +40,10 @@ export const recipe = defineRecipe({
           textDecoration: 'none',
         },
         _loading: {
-          bgColor: 'transparent',
+          bgColor: 'unset',
+        },
+        '&:not([data-loading], [aria-busy=true])': {
+          bgColor: 'link.underlaid.bg',
         },
       },
       menu: {

toolkit/theme/recipes/tag.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'label', 'startElement', 'endElement', 'closeTrigger' ],
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      maxWidth: '100%',
+      userSelect: 'none',
+      borderRadius: 'sm',
+      focusVisibleRing: 'outside',
+      _loading: {
+        borderRadius: 'sm',
+        bgColor: 'unset',
+      },
+    },
+    label: {
+      lineClamp: '1',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      fontWeight: 'medium',
+      display: 'inline',
+    },
+    closeTrigger: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      outline: '0',
+      borderRadius: 'none',
+      color: 'tag.closeTrigger.color',
+      focusVisibleRing: 'inside',
+      focusRingWidth: '2px',
+      _hover: {
+        color: 'link.primary.hover',
+      },
+    },
+    startElement: {
+      flexShrink: 0,
+      boxSize: 'var(--tag-element-size)',
+      ms: 'var(--tag-element-offset)',
+      '&:has([data-scope=avatar])': {
+        boxSize: 'var(--tag-avatar-size)',
+        ms: 'calc(var(--tag-element-offset) * 1.5)',
+      },
+      _icon: { boxSize: '100%' },
+    },
+    endElement: {
+      flexShrink: 0,
+      boxSize: 'var(--tag-element-size)',
+      me: 'var(--tag-element-offset)',
+      _icon: { boxSize: '100%' },
+      '&:has(button)': {
+        ms: 'calc(var(--tag-element-offset) * -1)',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      md: {
+        root: {
+          px: '1',
+          py: '0.5',
+          minH: '6',
+          gap: '1',
+          '--tag-avatar-size': 'spacing.4',
+          '--tag-element-size': 'spacing.4',
+          '--tag-element-offset': '-2px',
+        },
+        label: {
+          textStyle: 'sm',
+        },
+      },
+    },
+
+    variant: {
+      subtle: {
+        root: {
+          bgColor: 'tag.root.subtle.bg',
+          color: 'tag.root.subtle.fg',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'tag.root.subtle.bg',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'subtle',
+  },
+});

ui/block/BlockCeloEpochTag.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Badge } from 'toolkit/chakra/badge';
 import { Link } from 'toolkit/chakra/link';
 import { Tag } from 'toolkit/chakra/tag';
 import { Tooltip } from 'toolkit/chakra/tooltip';
@@ -23,15 +24,11 @@ const BlockCeloEpochTag = ({ blockQuery }: Props) => {
     const epochBlockNumber = celoConfig.isEnabled && celoConfig.L2UpgradeBlock && blockQuery.data.height <= celoConfig.L2UpgradeBlock ?
       blockQuery.data.celo.epoch_number * celoConfig.BLOCKS_PER_EPOCH :
       undefined;
-    const tag = (
-      // TODO @tom2drum revise tag color scheme
-      <Tag colorScheme={ epochBlockNumber ? 'gray-blue' : 'gray' } >Epoch #{ blockQuery.data.celo.epoch_number }</Tag>
-    );
     const content = epochBlockNumber ? (
       <Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(epochBlockNumber) } }) }>
-        { tag }
+        <Tag>Epoch #{ blockQuery.data.celo.epoch_number }</Tag>
       </Link>
-    ) : tag;
+    ) : <Badge>Epoch #{ blockQuery.data.celo.epoch_number }</Badge>;
 
     return (
       <Tooltip

ui/pages/Chakra.tsx

@@ -18,7 +18,6 @@ import { Switch } from 'toolkit/chakra/switch';
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
 import { Textarea } from 'toolkit/chakra/textarea';
 import { toaster } from 'toolkit/chakra/toaster';
-import { Tooltip } from 'toolkit/chakra/tooltip';
 import ContentLoader from 'ui/shared/ContentLoader';
 import IconSvg from 'ui/shared/IconSvg';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -28,6 +27,7 @@ import ButtonShowcase from 'ui/showcases/Button';
 import LinksShowcase from 'ui/showcases/Links';
 import PaginationShowcase from 'ui/showcases/Pagination';
 import TabsShowcase from 'ui/showcases/Tabs';
+import TagsShowcase from 'ui/showcases/Tags';
 import TooltipsShowcase from 'ui/showcases/Tooltip';
 
 const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
@@ -59,6 +59,7 @@ const ChakraShowcases = () => {
           <TabsTrigger value="links">Links</TabsTrigger>
           <TabsTrigger value="pagination">Pagination</TabsTrigger>
           <TabsTrigger value="tabs">Tabs</TabsTrigger>
+          <TabsTrigger value="tags">Tags</TabsTrigger>
           <TabsTrigger value="tooltips">Tooltips</TabsTrigger>
           <TabsTrigger value="unsorted">Unsorted</TabsTrigger>
         </TabsList>
@@ -69,6 +70,7 @@ const ChakraShowcases = () => {
         <TabsShowcase/>
         <PaginationShowcase/>
         <TooltipsShowcase/>
+        <TagsShowcase/>
 
         <TabsContent value="unsorted">
           <VStack align="flex-start" gap={ 6 }>

ui/shared/PrevNext.tsx

@@ -40,11 +40,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
         <IconButton
           aria-label="prev"
           borderRadius="sm"
-          bg="gray.100"
-          color="gray.600"
-          _hover={{
-            color: 'link.primary.hover',
-          }}
+          variant="subtle"
           onClick={ handelPrevClick }
           disabled={ isPrevDisabled }
         >
@@ -55,11 +51,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
         <IconButton
           aria-label="next"
           borderRadius="sm"
-          bg="gray.100"
-          color="gray.600"
-          _hover={{
-            color: 'link.primary.hover',
-          }}
+          variant="subtle"
           ml="10px"
           onClick={ handelNextClick }
           disabled={ isNextDisabled }

ui/shared/TruncatedTextTooltip.tsx

@@ -9,7 +9,7 @@ import { BODY_TYPEFACE } from 'toolkit/theme/foundations/typography';
 
 interface Props {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   placement?: Placement;
 }
 

ui/showcases/Alerts.tsx

@@ -38,6 +38,14 @@ const AlertsShowcase = () => {
           </Sample>
         </SamplesStack>
       </Section>
+      <Section>
+        <SectionHeader>Loading</SectionHeader>
+        <SamplesStack>
+          <Sample label="loading: true">
+            <Alert status="info" title="Info" loading> Alert content </Alert>
+          </Sample>
+        </SamplesStack>
+      </Section>
       <Section>
         <SectionHeader>Examples</SectionHeader>
         <SectionSubHeader>Inside table (SocketNewItemsNotice)</SectionSubHeader>

ui/showcases/Badges.tsx

@@ -47,6 +47,12 @@ const BadgesShowcase = () => {
         </SamplesStack>
       </Section>
       <Section>
+        <SectionHeader>Loading</SectionHeader>
+        <SamplesStack>
+          <Sample label="loading: true">
+            <Badge colorPalette="purple" loading>Content</Badge>
+          </Sample>
+        </SamplesStack>
         <SectionHeader>Size</SectionHeader>
         <SamplesStack>
           <Sample label="size: md">

ui/showcases/Button.tsx

@@ -157,6 +157,12 @@ const ButtonShowcase = () => {
             </PopoverRoot>
           </Sample>
 
+          <Sample label="variant: subtle">
+            <Button variant="subtle" size="xs">Default: Now+1h</Button>
+            <Button variant="subtle" size="xs" data-hover>Hovered: Now+1h</Button>
+            <Button variant="subtle" size="xs" disabled>Disabled: Now+1h</Button>
+          </Sample>
+
           <Sample label="variant: plain">
             <Button variant="plain">Default</Button>
             <Button variant="plain" data-hover>Hovered</Button>

ui/showcases/Tags.tsx

+import React from 'react';
+
+import { Tag } from 'toolkit/chakra/tag';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const TagsShowcase = () => {
+  return (
+    <Container value="tags">
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: ???">
+            <Tag>My tag</Tag>
+            <Tag maxW="150px" truncated>Very very very very very looooooonggggg text</Tag>
+            <Tag loading>My tag</Tag>
+            <Tag maxW="150px" truncated loading>Very very very very very looooooonggggg text</Tag>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(TagsShowcase);