From 4b26f46ab775535f5d3f03a61784c29a79c2ffd2 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 14 Apr 2022 13:44:55 +0200
Subject: [PATCH] feat(react): improve usage of theme tokens
---
.../components/channels/channel-group.tsx | 3 +-
.../community-info/community-dialog.tsx | 4 +-
.../components/community-info/index.tsx | 2 +-
.../components/sidebar-item/index.tsx | 10 ++--
.../src/components/main-sidebar/index.tsx | 14 ++---
.../src/components/member-sidebar/index.tsx | 2 +-
.../components/member-sidebar/member-item.tsx | 2 +-
.../src/modules/community/index.tsx | 56 +++++++++----------
.../src/modules/community/messenger.tsx | 1 +
.../chat/components/chat-message/index.tsx | 2 +-
packages/status-react/src/routes/index.tsx | 1 +
.../src/routes/new-chat/index.tsx | 1 -
packages/status-react/src/styles/config.tsx | 7 +++
.../status-react/src/system/avatar/styles.tsx | 8 +--
.../status-react/src/system/dialog/styles.tsx | 8 +--
.../src/system/icon-button/styles.tsx | 18 +++---
16 files changed, 71 insertions(+), 68 deletions(-)
diff --git a/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
index 4168fb57..048077f1 100644
--- a/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
+++ b/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': {
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
index e2875b90..4f6dc2e8 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
@@ -28,7 +28,7 @@ export const CommunityDialog = () => {
justify="center"
align="center"
direction="column"
- css={{ padding: '8px 0 16px' }}
+ css={{ padding: '8px 0 16px', color: '$accent-1' }}
>
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
index 57f9b6b5..439d4ce7 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
+++ b/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',
},
})
diff --git a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
index c9570ec7..223dc2cc 100644
--- a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
+++ b/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"',
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index 55a6e194..a843451c 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/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 = () => {
-
+
-
+
)
@@ -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,
-})
diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
index 70a36893..790bf7d1 100644
--- a/packages/status-react/src/components/member-sidebar/index.tsx
+++ b/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': {
diff --git a/packages/status-react/src/components/member-sidebar/member-item.tsx b/packages/status-react/src/components/member-sidebar/member-item.tsx
index 154fbf5a..c3287ad2 100644
--- a/packages/status-react/src/components/member-sidebar/member-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-item.tsx
@@ -23,7 +23,7 @@ export const MemberItem = (props: Props) => {
/>
-
+
{children}
{verified && (
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
index 7aa4ddc3..2f465831 100644
--- a/packages/status-react/src/modules/community/index.tsx
+++ b/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,30 +34,28 @@ export const Community = (props: Props) => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -66,7 +64,7 @@ export const Community = (props: Props) => {
export type { Props as CommunityProps }
-const Wrapper = styled.div`
- height: 100%;
- overflow: hidden;
-`
+const Wrapper = styled('div', {
+ height: '100%',
+ overflow: 'hidden',
+})
diff --git a/packages/status-react/src/modules/community/messenger.tsx b/packages/status-react/src/modules/community/messenger.tsx
index fb7364cd..ef373498 100644
--- a/packages/status-react/src/modules/community/messenger.tsx
+++ b/packages/status-react/src/modules/community/messenger.tsx
@@ -28,4 +28,5 @@ const Wrapper = styled('div', {
height: '100%',
display: 'flex',
alignItems: 'stretch',
+ background: '$background',
})
diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
index 7dd6bcab..e4945869 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx
+++ b/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: {
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index 40f8a8a8..1c728e18 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -52,4 +52,5 @@ const Wrapper = styled('div', {
height: '100%',
display: 'flex',
alignItems: 'stretch',
+ background: '$background',
})
diff --git a/packages/status-react/src/routes/new-chat/index.tsx b/packages/status-react/src/routes/new-chat/index.tsx
index 7ad2b865..1a23fa35 100644
--- a/packages/status-react/src/routes/new-chat/index.tsx
+++ b/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', {
diff --git a/packages/status-react/src/styles/config.tsx b/packages/status-react/src/styles/config.tsx
index 13876a11..baa30650 100644
--- a/packages/status-react/src/styles/config.tsx
+++ b/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
+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)',
diff --git a/packages/status-react/src/system/avatar/styles.tsx b/packages/status-react/src/system/avatar/styles.tsx
index 0942d0b9..86b76aa6 100644
--- a/packages/status-react/src/system/avatar/styles.tsx
+++ b/packages/status-react/src/system/avatar/styles.tsx
@@ -6,7 +6,7 @@ export type Variants = VariantProps
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',
},
},
},
diff --git a/packages/status-react/src/system/dialog/styles.tsx b/packages/status-react/src/system/dialog/styles.tsx
index 05bf26e1..9f3cc408 100644
--- a/packages/status-react/src/system/dialog/styles.tsx
+++ b/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,
})
diff --git a/packages/status-react/src/system/icon-button/styles.tsx b/packages/status-react/src/system/icon-button/styles.tsx
index f66f102e..9817da62 100644
--- a/packages/status-react/src/system/icon-button/styles.tsx
+++ b/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)',
- color: '#4360DF',
+ background: '$primary-3',
+ color: '$primary-1',
},
},
danger: {
'&:hover': {
- background: 'rgba(255, 45, 85, 0.2)',
- color: '#FF2D55',
+ background: '$danger-2',
+ color: '$danger-1',
},
},
},
active: {
true: {
- background: '#F6F8FA',
+ background: '$gray-4',
},
},
},