From aa0dd52252ad96887658a04f683f632dcd9785ae Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Thu, 31 Mar 2022 14:53:42 +0200 Subject: [PATCH] feat(system): add mention and pin to colors --- packages/status-react/src/styles/config.tsx | 185 +++++++++++--------- 1 file changed, 106 insertions(+), 79 deletions(-) diff --git a/packages/status-react/src/styles/config.tsx b/packages/status-react/src/styles/config.tsx index 5adc750b..13876a11 100644 --- a/packages/status-react/src/styles/config.tsx +++ b/packages/status-react/src/styles/config.tsx @@ -5,87 +5,105 @@ import type { CSS as StitchesCSS } from '@stitches/react' export type { VariantProps } from '@stitches/react' export type CSS = StitchesCSS -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)',