status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(system): add mention and pin to colors

This commit is contained in:
Pavel Prichodko 2022-03-31 14:53:42 +02:00
parent ba359a5cc7
commit aa0dd52252
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 106 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/status-react/src/styles/config.tsx
View File

@ -5,9 +5,16 @@ 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 const { styled, css, keyframes, theme, createTheme, config } = export const {
createStitches({ styled,
prefix: 'status', css,
keyframes,
theme,
createTheme,
config,
getCssText,
} = createStitches({
// prefix: 'status',
theme: { theme: {
fonts: { fonts: {
sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
@ -41,6 +48,15 @@ export const { styled, css, keyframes, theme, createTheme, config } =
'success-1': 'rgba(78, 188, 96, 1)', 'success-1': 'rgba(78, 188, 96, 1)',
'success-2': 'rgba(78, 188, 96, 0.1)', 'success-2': 'rgba(78, 188, 96, 0.1)',
'mention-1': 'rgba(13, 164, 201, 1)',
'mention-2': 'rgba(7, 188, 233, 0.3)',
'mention-3': 'rgba(7, 188, 233, 0.2)',
'mention-4': 'rgba(7, 188, 233, 0.1)',
'pin-1': 'rgba(254, 143, 89, 1)',
'pin-2': 'rgba(255, 159, 15, 0.2)',
'pin-3': 'rgba(255, 159, 15, 0.1)',
'accent-1': 'rgba(0, 0, 0, 1)', 'accent-1': 'rgba(0, 0, 0, 1)',
'accent-2': 'rgba(0, 0, 0, 0.9)', 'accent-2': 'rgba(0, 0, 0, 0.9)',
'accent-3': 'rgba(0, 0, 0, 0.8)', 'accent-3': 'rgba(0, 0, 0, 0.8)',
@ -76,6 +92,8 @@ export const { styled, css, keyframes, theme, createTheme, config } =
9: '80px', 9: '80px',
}, },
radii: { radii: {
1: '4px',
2: '8px',
8: '8px', 8: '8px',
full: '100%', full: '100%',
}, },
@ -85,7 +103,7 @@ export const { styled, css, keyframes, theme, createTheme, config } =
large: '(min-width: 736px)', large: '(min-width: 736px)',
motion: '(prefers-reduced-motion: no-preference)', motion: '(prefers-reduced-motion: no-preference)',
}, },
}) })
export const darkTheme = createTheme({ export const darkTheme = createTheme({
colors: { colors: {
@ -106,6 +124,15 @@ export const darkTheme = createTheme({
'success-1': 'rgba(96, 195, 112, 1)', 'success-1': 'rgba(96, 195, 112, 1)',
'success-2': 'rgba(96, 195, 112, 0.2)', 'success-2': 'rgba(96, 195, 112, 0.2)',
'mention-1': 'rgba(123, 229, 255, 1)',
'mention-2': 'rgba(13, 164, 201, 0.3)',
'mention-3': 'rgba(13, 164, 201, 0.2)',
'mention-4': 'rgba(13, 164, 201, 0.1)',
'pin-1': 'rgba(255, 166, 123, 1)',
'pin-2': 'rgba(254, 143, 89, 0.2)',
'pin-3': 'rgba(254, 143, 89, 0.1)',
'accent-1': 'rgba(255, 255, 255, 1)', 'accent-1': 'rgba(255, 255, 255, 1)',
'accent-2': 'rgba(255, 255, 255, 0.9)', 'accent-2': 'rgba(255, 255, 255, 0.9)',
'accent-3': 'rgba(255, 255, 255, 0.8)', 'accent-3': 'rgba(255, 255, 255, 0.8)',