feat(system): add mention and pin to colors
This commit is contained in:
parent
ba359a5cc7
commit
aa0dd52252
|
@ -5,87 +5,105 @@ import type { CSS as StitchesCSS } from '@stitches/react'
|
|||
export type { VariantProps } from '@stitches/react'
|
||||
export type CSS = StitchesCSS<typeof config>
|
||||
|
||||
export const { styled, css, keyframes, theme, createTheme, config } =
|
||||
createStitches({
|
||||
prefix: 'status',
|
||||
theme: {
|
||||
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"',
|
||||
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
fontWeights: {
|
||||
400: '400',
|
||||
500: '500',
|
||||
600: '600',
|
||||
},
|
||||
colors: {
|
||||
white: 'rgb(255, 255, 255)',
|
||||
black: 'rgb(0, 0, 0)',
|
||||
current: 'currentColor',
|
||||
transparent: 'transparent',
|
||||
|
||||
'primary-1': 'rgba(67, 96, 223, 1)',
|
||||
'primary-2': 'rgba(67, 96, 223, 0.2)',
|
||||
'primary-3': 'rgba(67, 96, 223, 0.1)',
|
||||
|
||||
'gray-1': 'rgba(147, 155, 161, 1)',
|
||||
'gray-2': 'rgba(238, 242, 245, 1)',
|
||||
'gray-3': 'rgba(233, 237, 241, 1)',
|
||||
'gray-4': 'rgba(246, 248, 250, 1)',
|
||||
'gray-5': 'rgba(240, 242, 245, 1)',
|
||||
|
||||
'danger-1': 'rgba(255, 45, 85, 1)',
|
||||
'danger-2': 'rgba(255, 45, 85, 0.2)',
|
||||
'danger-3': 'rgba(255, 45, 85, 0.1)',
|
||||
|
||||
'success-1': 'rgba(78, 188, 96, 1)',
|
||||
'success-2': 'rgba(78, 188, 96, 0.1)',
|
||||
|
||||
'accent-1': 'rgba(0, 0, 0, 1)',
|
||||
'accent-2': 'rgba(0, 0, 0, 0.9)',
|
||||
'accent-3': 'rgba(0, 0, 0, 0.8)',
|
||||
'accent-4': 'rgba(0, 0, 0, 0.7)',
|
||||
'accent-5': 'rgba(0, 0, 0, 0.4)',
|
||||
'accent-6': 'rgba(0, 0, 0, 0.2)',
|
||||
'accent-7': 'rgba(0, 0, 0, 0.1)',
|
||||
'accent-8': 'rgba(0, 0, 0, 0.05)',
|
||||
'accent-9': 'rgba(255, 255, 255, 0.4)',
|
||||
'accent-10': 'rgba(255, 255, 255, 0.7)',
|
||||
'accent-11': 'rgba(255, 255, 255, 1)',
|
||||
|
||||
blue: 'rgba(41, 70, 196, 1)',
|
||||
purple: 'rgba(136, 122, 249, 1)',
|
||||
cyan: 'rgba(81, 208, 240, 1)',
|
||||
violet: 'rgba(211, 126, 244, 1)',
|
||||
grep: 'rgba(250, 101, 101, 1)',
|
||||
yellow: 'rgba(255, 202, 15, 1)',
|
||||
grass: 'rgba(124, 218, 0, 1)',
|
||||
moss: 'rgba(38, 166, 154, 1)',
|
||||
vintage: 'rgba(139, 49, 49, 1)',
|
||||
kaki: 'rgba(155, 131, 47, 1)',
|
||||
},
|
||||
space: {
|
||||
1: '4px',
|
||||
2: '8px',
|
||||
3: '16px',
|
||||
4: '20px',
|
||||
5: '24px',
|
||||
6: '32px',
|
||||
7: '48px',
|
||||
8: '64px',
|
||||
9: '80px',
|
||||
},
|
||||
radii: {
|
||||
8: '8px',
|
||||
full: '100%',
|
||||
},
|
||||
export const {
|
||||
styled,
|
||||
css,
|
||||
keyframes,
|
||||
theme,
|
||||
createTheme,
|
||||
config,
|
||||
getCssText,
|
||||
} = createStitches({
|
||||
// prefix: 'status',
|
||||
theme: {
|
||||
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"',
|
||||
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
media: {
|
||||
medium: '(min-width: 500px)',
|
||||
large: '(min-width: 736px)',
|
||||
motion: '(prefers-reduced-motion: no-preference)',
|
||||
fontWeights: {
|
||||
400: '400',
|
||||
500: '500',
|
||||
600: '600',
|
||||
},
|
||||
})
|
||||
colors: {
|
||||
white: 'rgb(255, 255, 255)',
|
||||
black: 'rgb(0, 0, 0)',
|
||||
current: 'currentColor',
|
||||
transparent: 'transparent',
|
||||
|
||||
'primary-1': 'rgba(67, 96, 223, 1)',
|
||||
'primary-2': 'rgba(67, 96, 223, 0.2)',
|
||||
'primary-3': 'rgba(67, 96, 223, 0.1)',
|
||||
|
||||
'gray-1': 'rgba(147, 155, 161, 1)',
|
||||
'gray-2': 'rgba(238, 242, 245, 1)',
|
||||
'gray-3': 'rgba(233, 237, 241, 1)',
|
||||
'gray-4': 'rgba(246, 248, 250, 1)',
|
||||
'gray-5': 'rgba(240, 242, 245, 1)',
|
||||
|
||||
'danger-1': 'rgba(255, 45, 85, 1)',
|
||||
'danger-2': 'rgba(255, 45, 85, 0.2)',
|
||||
'danger-3': 'rgba(255, 45, 85, 0.1)',
|
||||
|
||||
'success-1': 'rgba(78, 188, 96, 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-2': 'rgba(0, 0, 0, 0.9)',
|
||||
'accent-3': 'rgba(0, 0, 0, 0.8)',
|
||||
'accent-4': 'rgba(0, 0, 0, 0.7)',
|
||||
'accent-5': 'rgba(0, 0, 0, 0.4)',
|
||||
'accent-6': 'rgba(0, 0, 0, 0.2)',
|
||||
'accent-7': 'rgba(0, 0, 0, 0.1)',
|
||||
'accent-8': 'rgba(0, 0, 0, 0.05)',
|
||||
'accent-9': 'rgba(255, 255, 255, 0.4)',
|
||||
'accent-10': 'rgba(255, 255, 255, 0.7)',
|
||||
'accent-11': 'rgba(255, 255, 255, 1)',
|
||||
|
||||
blue: 'rgba(41, 70, 196, 1)',
|
||||
purple: 'rgba(136, 122, 249, 1)',
|
||||
cyan: 'rgba(81, 208, 240, 1)',
|
||||
violet: 'rgba(211, 126, 244, 1)',
|
||||
grep: 'rgba(250, 101, 101, 1)',
|
||||
yellow: 'rgba(255, 202, 15, 1)',
|
||||
grass: 'rgba(124, 218, 0, 1)',
|
||||
moss: 'rgba(38, 166, 154, 1)',
|
||||
vintage: 'rgba(139, 49, 49, 1)',
|
||||
kaki: 'rgba(155, 131, 47, 1)',
|
||||
},
|
||||
space: {
|
||||
1: '4px',
|
||||
2: '8px',
|
||||
3: '16px',
|
||||
4: '20px',
|
||||
5: '24px',
|
||||
6: '32px',
|
||||
7: '48px',
|
||||
8: '64px',
|
||||
9: '80px',
|
||||
},
|
||||
radii: {
|
||||
1: '4px',
|
||||
2: '8px',
|
||||
8: '8px',
|
||||
full: '100%',
|
||||
},
|
||||
},
|
||||
media: {
|
||||
medium: '(min-width: 500px)',
|
||||
large: '(min-width: 736px)',
|
||||
motion: '(prefers-reduced-motion: no-preference)',
|
||||
},
|
||||
})
|
||||
|
||||
export const darkTheme = createTheme({
|
||||
colors: {
|
||||
|
@ -106,6 +124,15 @@ export const darkTheme = createTheme({
|
|||
'success-1': 'rgba(96, 195, 112, 1)',
|
||||
'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-2': 'rgba(255, 255, 255, 0.9)',
|
||||
'accent-3': 'rgba(255, 255, 255, 0.8)',
|
||||
|
|
Loading…
Reference in New Issue