refactor: encourage semantic tokens

Author: segunadebayo

layouts/component.tsx

@@ -51,7 +51,7 @@ export default function ComponentDocsLayout({ children, frontmatter }) {
                     borderBottom='2px solid transparent'
                     data-selected={item.match ? '' : undefined}
                     _selected={{
-                      color: 'brand',
+                      color: 'accent',
                       borderColor: 'currentColor',
                     }}
                   >

src/components/sidebar/sidebar-category.tsx

@@ -61,7 +61,7 @@ function SidebarCategory(props: SidebarCategoryProps) {
         alignItems='center'
         justifyContent='space-between'
         userSelect='none'
-        color='brand'
+        color='accent'
       >
         {title}
       </chakra.p>

src/components/sidebar/sidebar-link.tsx

@@ -1,4 +1,4 @@
-import { PropsOf, chakra, useColorModeValue } from '@chakra-ui/react'
+import { PropsOf, chakra, useColorModeValue, Flex } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef, Ref, useEffect, useRef } from 'react'
@@ -23,7 +23,7 @@ const StyledLink = forwardRef(function StyledLink(
       transition='all 0.2s'
       _activeLink={{
         bg: useColorModeValue('teal.50', 'rgba(48, 140, 122, 0.3)'),
-        color: useColorModeValue('teal.700', 'teal.200'),
+        color: 'accent-emphasis',
         fontWeight: '600',
       }}
       {...rest}
@@ -56,19 +56,13 @@ const SidebarLink = ({ href, children, ...rest }: SidebarLinkProps) => {
   }, [isActive, router.query])
 
   return (
-    <chakra.div
-      userSelect='none'
-      display='flex'
-      alignItems='center'
-      lineHeight='1.5rem'
-      {...rest}
-    >
+    <Flex align='center' userSelect='none' lineHeight='tall' {...rest}>
       <NextLink href={href} passHref>
         <StyledLink isActive={isActive} ref={link}>
           {children}
         </StyledLink>
       </NextLink>
-    </chakra.div>
+    </Flex>
   )
 }
 

src/components/sidebar/sidebar.tsx

@@ -7,7 +7,6 @@ import {
   ListItem,
   ListProps,
   chakra,
-  useColorModeValue,
 } from '@chakra-ui/react'
 import sortBy from 'lodash/sortBy'
 import NextLink from 'next/link'
@@ -23,7 +22,6 @@ import { Routes } from 'utils/get-route-context'
 
 export type SidebarContentProps = Routes & {
   pathname?: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   contentRef?: any
 }
 
@@ -48,11 +46,9 @@ export function SidebarContent({
               <chakra.h4
                 fontSize='sm'
                 fontWeight='bold'
-                my='1.25rem'
+                my='4'
                 textTransform='uppercase'
                 letterSpacing='wider'
-                color='gray.700'
-                _dark={{ color: 'inherit' }}
               >
                 {lvl1.title}
               </chakra.h4>
@@ -119,21 +115,18 @@ export const isMainNavLinkActive = (href: string, path: string) => {
 const MainNavLink = ({ href, icon, children }: MainNavLinkProps) => {
   const { asPath } = useRouter()
   const active = isMainNavLinkActive(href, asPath)
-  const linkColor = useColorModeValue('gray.900', 'whiteAlpha.900')
 
   return (
     <NextLink href={href} passHref>
       <Flex
         as='a'
         align='center'
         fontSize='sm'
-        fontWeight='semibold'
-        transitionProperty='colors'
-        transitionDuration='200ms'
-        color={active ? linkColor : 'gray.500'}
-        _hover={{ color: linkColor }}
+        fontWeight={active ? 'semibold' : 'medium'}
+        color={active ? 'accent' : 'fg-muted'}
+        _hover={{ color: active ? undefined : 'fg' }}
       >
-        <Center w='6' h='6' bg='teal.500' rounded='base' mr='3'>
+        <Center w='6' h='6' bg='accent-static' rounded='base' mr='3'>
           {icon}
         </Center>
         {children}
@@ -155,7 +148,7 @@ export const mainNavLinks = [
   },
   {
     icon: <DocsIcon />,
-    href: '/docs/components/overview',
+    href: '/docs/components',
     label: 'Components',
   },
   {

theme.ts

@@ -1,24 +1,33 @@
 import { extendTheme } from '@chakra-ui/react'
-import { mode } from '@chakra-ui/theme-tools'
 
 const customTheme = extendTheme({
   config: {},
   semanticTokens: {
     colors: {
-      brand: {
-        default: 'teal.500',
-        _dark: 'teal.200',
-      },
+      // accent semantic tokens
+      accent: { default: 'teal.500', _dark: 'teal.300' },
+      'accent-emphasis': { default: 'teal.700', _dark: 'teal.200' },
+      'accent-static': 'teal.500',
+      'accent-muted': { default: 'teal.300', _dark: 'teal.200' },
+      'accent-subtle': { default: 'teal.50', _dark: 'teal.800' },
+      // foreground semantic tokens
+      fg: { default: 'gray.700', _dark: 'gray.100' },
+      'fg-emphasis': { default: 'gray.900', _dark: 'gray.200' },
+      'fg-muted': { default: 'gray.600', _dark: 'gray.400' },
+      'fg-subtle': { default: 'gray.500', _dark: 'gray.300' },
+      'fg-on-accent': { default: 'white', _dark: 'inherit' },
     },
   },
   fonts: {
     heading: 'Inter, sans-serif',
     body: 'Inter, sans-serif',
   },
   styles: {
-    global: (props) => ({
+    global: {
       body: {
-        color: mode('gray.700', 'whiteAlpha.900')(props),
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        color: 'fg',
         '.deleted': {
           color: '#ff8383 !important',
           fontStyle: 'normal !important',
@@ -28,7 +37,7 @@ const customTheme = extendTheme({
           fontStyle: 'normal !important',
         },
       },
-    }),
+    },
   },
   textStyles: {
     heading: {
@@ -89,7 +98,7 @@ const customTheme = extendTheme({
       fontSize: '1.125rem',
     },
     a: {
-      color: 'teal.500',
+      color: 'accent',
       fontWeight: 'semibold',
       transition: 'color 0.15s',
       transitionTimingFunction: 'ease-out',