feat(react): improve usage of theme tokens

packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx

@@ -48,9 +48,10 @@ const CollapsibleTrigger = styled(Collapsible.Trigger, {
   padding: 8,
   borderRadius: 8,
   height: 34,
+  color: '$accent-1',
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 
   '&[aria-expanded="true"] svg': {

packages/status-react/src/components/main-sidebar/components/community-info/index.tsx

@@ -34,6 +34,6 @@ const Button = styled('button', {
   alignItems: 'center',
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 })

packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx

@@ -40,7 +40,7 @@ const Link = styled(NavLink, {
   fontWeight: '$500',
   fontSize: 15,
   display: 'inline-flex',
-  color: 'rgba(0, 0, 0, 0.7)',
+  color: '$accent-4',
   alignItems: 'center',
   width: '100%',
   gap: '$2',
@@ -48,19 +48,21 @@ const Link = styled(NavLink, {
   padding: 8,
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 
   '&.active': {
-    background: 'rgba(233, 237, 241, 1)',
+    color: '$accent-1',
+    background: '$gray-3',
   },
 
   variants: {
     state: {
       muted: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: '$accent-5',
       },
       unread: {
+        color: '$accent-1',
         fontWeight: '$600',
         '&::after': {
           content: '"1"',

packages/status-react/src/components/main-sidebar/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { styled } from '~/src/styles/config'
+import { Separator } from '~/src/system'
 
 import { Channels } from './components/channels'
 import { CommunityInfo } from './components/community-info'
@@ -12,9 +13,9 @@ export const MainSidebar = () => {
     <Wrapper>
       <CommunityInfo />
       <Channels />
-      <Separator />
+      <Separator css={{ margin: '16px 0' }} />
       <Messages />
-      <Separator />
+      <Separator css={{ margin: '16px 0' }} />
       <GetStarted />
     </Wrapper>
   )
@@ -26,17 +27,10 @@ const Wrapper = styled('div', {
   flexDirection: 'column',
   padding: '10px 16px',
   display: 'none',
-  backgroundColor: '#F6F8FA',
+  backgroundColor: '$gray-4',
   overflowY: 'scroll',
 
   '@medium': {
     display: 'flex',
   },
 })
-
-const Separator = styled('div', {
-  margin: '16px 0',
-  height: 1,
-  background: 'rgba(0, 0, 0, 0.1)',
-  flexShrink: 0,
-})

packages/status-react/src/components/member-sidebar/index.tsx

@@ -50,7 +50,7 @@ const Wrapper = styled('div', {
   flexShrink: 0,
   padding: '18px 16px',
   display: 'none',
-  backgroundColor: '#F6F8FA',
+  backgroundColor: '$gray-4',
   overflowY: 'scroll',
 
   '@medium': {

packages/status-react/src/components/member-sidebar/member-item.tsx

@@ -23,7 +23,7 @@ export const MemberItem = (props: Props) => {
       />
       <div>
         <Flex align="center" gap={1}>
-          <Text size="15" color="black-70">
+          <Text size="15" color="accent">
             {children}
           </Text>
           {verified && (

packages/status-react/src/modules/community/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react'
 
 import { BrowserRouter } from 'react-router-dom'
-import styled, { ThemeProvider } from 'styled-components'
 
 import { AppProvider } from '~/src/contexts/app-context'
 import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
@@ -12,6 +11,7 @@ import { ModalProvider } from '~/src/contexts/modalProvider'
 import { NarrowProvider } from '~/src/contexts/narrowProvider'
 import { ScrollProvider } from '~/src/contexts/scrollProvider'
 import { ToastProvider } from '~/src/contexts/toastProvider'
+import { styled } from '~/src/styles/config'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
 import { Messenger } from './messenger'
@@ -34,11 +34,10 @@ export const Community = (props: Props) => {
     <Router>
       <AppProvider config={props}>
         <DialogProvider>
-          <ThemeProvider theme={theme}>
           <NarrowProvider myRef={ref}>
             <ModalProvider>
               <ToastProvider>
-                  <Wrapper ref={ref}>
+                <Wrapper ref={ref} className={theme}>
                   <GlobalStyle />
                   <IdentityProvider>
                     <MessengerProvider
@@ -48,7 +47,7 @@ export const Community = (props: Props) => {
                       <ChatStateProvider>
                         <ScrollProvider>
                           <Messenger />
-                            <div id="modal-root" />
+                          <div id="portal" data-radix-portal />
                         </ScrollProvider>
                       </ChatStateProvider>
                     </MessengerProvider>
@@ -57,7 +56,6 @@ export const Community = (props: Props) => {
               </ToastProvider>
             </ModalProvider>
           </NarrowProvider>
-          </ThemeProvider>
         </DialogProvider>
       </AppProvider>
     </Router>
@@ -66,7 +64,7 @@ export const Community = (props: Props) => {
 
 export type { Props as CommunityProps }
 
-const Wrapper = styled.div`
+const Wrapper = styled('div', {
-  height: 100%;
+  height: '100%',
-  overflow: hidden;
+  overflow: 'hidden',
-`
+})

packages/status-react/src/modules/community/messenger.tsx

@@ -28,4 +28,5 @@ const Wrapper = styled('div', {
   height: '100%',
   display: 'flex',
   alignItems: 'stretch',
+  background: '$background',
 })

packages/status-react/src/routes/chat/components/chat-message/index.tsx

@@ -235,7 +235,7 @@ const Wrapper = styled('div', {
   transitionDuration: '100ms',
 
   '&:hover, &[data-open="true"], &[data-active="true"]': {
-    background: '#EEF2F5',
+    background: '$gray-4',
   },
 
   a: {

packages/status-react/src/routes/index.tsx

@@ -52,4 +52,5 @@ const Wrapper = styled('div', {
   height: '100%',
   display: 'flex',
   alignItems: 'stretch',
+  background: '$background',
 })

packages/status-react/src/routes/new-chat/index.tsx

@@ -250,7 +250,6 @@ const Wrapper = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'stretch',
-  background: '#fff',
 })
 
 const NavbarWrapper = styled('div', {

packages/status-react/src/styles/config.tsx

@@ -4,6 +4,7 @@ import type { CSS as StitchesCSS } from '@stitches/react'
 
 export type { VariantProps } from '@stitches/react'
 export type CSS = StitchesCSS<typeof config>
+export type Theme = typeof theme
 
 export const {
   styled,
@@ -31,6 +32,9 @@ export const {
       current: 'currentColor',
       transparent: 'transparent',
 
+      background: 'rgb(255, 255, 255)',
+      overlay: 'rgba(0, 0, 0, 0.4)',
+
       'primary-1': 'rgba(67, 96, 223, 1)',
       'primary-2': 'rgba(67, 96, 223, 0.2)',
       'primary-3': 'rgba(67, 96, 223, 0.1)',
@@ -107,6 +111,9 @@ export const {
 
 export const darkTheme = createTheme({
   colors: {
+    background: 'rgb(0, 0, 0)',
+    overlay: 'rgba(255, 255, 255, 0.4)',
+
     'primary-1': 'rgba(136, 176, 255, 1)',
     'primary-2': 'rgba(134, 158, 255, 0.3)',
     'primary-3': 'rgba(134, 158, 255, 0.2)',

packages/status-react/src/system/avatar/styles.tsx

@@ -6,7 +6,7 @@ export type Variants = VariantProps<typeof Base>
 
 export const Base = styled('div', {
   position: 'relative',
-  background: '#F6F8FA',
+  background: '$accent-6',
   borderRadius: '100%',
   flexShrink: 0,
 
@@ -53,7 +53,7 @@ export const Indicator = styled('span', {
   right: -2,
   bottom: -2,
   borderRadius: '100%',
-  border: '2px solid #fff',
+  border: '2px solid $gray-4',
 
   variants: {
     size: {
@@ -71,10 +71,10 @@ export const Indicator = styled('span', {
     },
     state: {
       online: {
-        backgroundColor: '#4EBC60',
+        backgroundColor: '$success-1',
       },
       offline: {
-        backgroundColor: '#939BA1',
+        backgroundColor: '$gray-1',
       },
     },
   },

packages/status-react/src/system/dialog/styles.tsx

@@ -18,7 +18,7 @@ const overlayAnimation = keyframes({
 export const Overlay = styled('div', {
   inset: 0,
   position: 'fixed',
-  backgroundColor: 'rgba(0,0,0,0.4)',
+  backgroundColor: '$overlay',
 
   '@motion': {
     animation: `${overlayAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
@@ -37,7 +37,7 @@ const contentAnimation = keyframes({
 })
 
 export const Content = styled('div', {
-  backgroundColor: 'white',
+  backgroundColor: '$background',
   borderRadius: 8,
   boxShadow:
     'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@@ -75,7 +75,7 @@ export const Header = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  borderBottom: '1px solid #eee',
+  borderBottom: '1px solid $gray-2',
 })
 
 export const Body = styled(Flex, {
@@ -91,6 +91,6 @@ export const Actions = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  borderTop: '1px solid #EEF2F5',
+  borderTop: '1px solid $gray-2',
   gap: 16,
 })

packages/status-react/src/system/icon-button/styles.tsx

@@ -14,39 +14,39 @@ export const Base = styled('button', {
   borderRadius: 8,
 
   '&:hover': {
-    background: '#EEF2F5',
+    background: '$gray-3',
   },
 
   '&[aria-expanded="true"]': {
-    background: '#F6F8FA',
+    background: '$gray-4',
   },
 
   variants: {
     color: {
       default: {
-        color: '#000',
+        color: '$accent-1',
       },
       gray: {
-        color: '#939BA1',
+        color: '$gray-1',
       },
     },
     intent: {
       info: {
         '&:hover': {
-          background: 'rgba(67, 96, 223, 0.1)',
+          background: '$primary-3',
-          color: '#4360DF',
+          color: '$primary-1',
         },
       },
       danger: {
         '&:hover': {
-          background: 'rgba(255, 45, 85, 0.2)',
+          background: '$danger-2',
-          color: '#FF2D55',
+          color: '$danger-1',
         },
       },
     },
     active: {
       true: {
-        background: '#F6F8FA',
+        background: '$gray-4',
       },
     },
   },