feat(react): improve usage of theme tokens
This commit is contained in:
parent
3d07c02bff
commit
4b26f46ab7
|
@ -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': {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -34,6 +34,6 @@ const Button = styled('button', {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
background: '#E9EDF1',
|
background: '$gray-3',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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"',
|
||||||
|
|
|
@ -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,
|
|
||||||
})
|
|
||||||
|
|
|
@ -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': {
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
|
@ -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',
|
||||||
`
|
})
|
||||||
|
|
|
@ -28,4 +28,5 @@ const Wrapper = styled('div', {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'stretch',
|
alignItems: 'stretch',
|
||||||
|
background: '$background',
|
||||||
})
|
})
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -52,4 +52,5 @@ const Wrapper = styled('div', {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'stretch',
|
alignItems: 'stretch',
|
||||||
|
background: '$background',
|
||||||
})
|
})
|
||||||
|
|
|
@ -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', {
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -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,
|
||||||
})
|
})
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue