feat(react): improve usage of theme tokens

This commit is contained in:
Pavel Prichodko 2022-04-14 13:44:55 +02:00
parent 3d07c02bff
commit 4b26f46ab7
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
16 changed files with 71 additions and 68 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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