From 249c4a7ca5c4069d9cc6c2423f6e8b87ff5e2905 Mon Sep 17 00:00:00 2001 From: "Kuboczoch (Jakub Pokorski)" Date: Fri, 2 Jul 2021 18:56:13 +0200 Subject: [PATCH] :art: Added proper colors, removed palette --- src/assets/theme/colors.ts | 268 +++++++++++++----- src/assets/theme/gradients.ts | 8 +- src/assets/theme/index.ts | 3 - src/assets/theme/palette.ts | 13 - src/components/blocks/Page/Content.ts | 2 +- src/components/blocks/Page/index.ts | 2 +- src/components/elements/Button/ButtonText.ts | 3 +- src/components/elements/Button/index.tsx | 6 +- .../Button/variants/_colorVariants.ts | 34 +-- .../variants/primary/PrimaryButtonText.ts | 5 +- .../variants/primary/PrimaryStyledButton.ts | 20 +- src/components/elements/Loader.tsx | 2 +- src/utils/hexToRGB.ts | 18 +- 13 files changed, 257 insertions(+), 127 deletions(-) delete mode 100644 src/assets/theme/palette.ts diff --git a/src/assets/theme/colors.ts b/src/assets/theme/colors.ts index dade5b8..30d2e0b 100644 --- a/src/assets/theme/colors.ts +++ b/src/assets/theme/colors.ts @@ -1,80 +1,218 @@ export type TColor = | 'transparent' - | 'white' - | 'black' - | 'mercury' - | 'alto' - | 'gray' - | 'regentGray' - | 'silver' - | 'darkBlue' - | 'dodgerBlue' - | 'periwinkleGray' - | 'baliHai' - | 'solitude' - | 'apple' - | 'madang' - | 'mantis' - | 'thunderbird' - | 'toreaBay' - | 'azureRadiance' - | 'oliveDrab' - | 'mineShaft' + | 'npwBase01' + | 'npwBase02' + | 'npwBase03' + | 'npwBase04' + | 'npwBase05' + | 'npwBase06' + | 'npwBase07' + | 'npwBase08' + | 'npwBase09' + | 'npwPrimary' + | 'npwPrimaryHover' + | 'npwPrimaryActive' + | 'npwPrimaryText' + | 'npwSecondary' + | 'npwSecondaryHover' + | 'npwSecondaryActive' + | 'npwAccent' + | 'npwAccentHover' + | 'npwAccentActive' + | 'npwAccentText' + | 'npwSelection' + | 'npwFocus' + | 'npwClear' + | 'npwClearDisabled' + | 'npwClearHover' + | 'npwClearActive' + | 'npwClearInverse' + | 'npwClearInverseHover' + | 'npwClearInverseActive' + | 'npwErrorFill' + | 'npwErrorBg' + | 'npwErrorBgHover' + | 'npwSuccessFill' + | 'npwSuccessBg' + | 'npwSuccessBgHover' + | 'npwWarningFill' + | 'npwWarningBg' + | 'npwWarningBgHover' + | 'npwInfoFill' + | 'npwInfoBg' + | 'npwInfoBgHover' + | 'npwNeutralFill' + | 'npwNeutralBg' + | 'npwNeutralBgHover' + | 'npwText01' + | 'npwText02' + | 'npwText03' + | 'npwLink' + | 'npwLinkHover' + | 'npwPositive' + | 'npwPositiveHover' + | 'npwNegative' + | 'npwNegativeHover' + | 'npwErrorFillNight' + | 'npwErrorBgNight' + | 'npwErrorBgNightHover' + | 'npwSuccessFillNight' + | 'npwSuccessBgNight' + | 'npwSuccessBgNightHover' + | 'npwWarningFillNight' + | 'npwWarningBgNight' + | 'npwWarningBgNightHover' + | 'npwInfoFillNight' + | 'npwInfoBgNight' + | 'npwInfoBgNightHover' + | 'npwNeutralFillNight' + | 'npwNeutralBgNight' + | 'npwNeutralBgNightHover' + | 'npwText01Night' + | 'npwText02Night' + | 'npwText03Night' + | 'npwLinkNight' + | 'npwLinkNightHover' + | 'npwPositiveNight' + | 'npwPositiveNightHover' + | 'npwNegativeNight' + | 'npwNegativeNightHover' + | 'npwSupport01' + | 'npwSupport02' + | 'npwSupport03' + | 'npwSupport04' + | 'npwSupport05' + | 'npwSupport06' + | 'npwSupport07' + | 'npwSupport08' + | 'npwSupport09' + | 'npwSupport10' + | 'npwSupport11' + | 'npwSupport12' + | 'npwSupport13' + | 'npwSupport14' + | 'npwSupport15' + | 'npwSupport16' + | 'npwSupport17' + | 'npwSupport18' + | 'npwSupport19' + | 'npwSupport20' + | 'npwSupport21' + | 'npwSupport22' /** List of possible colors in your app. This is used for better color management and suggestions from your *Editor*. - You should *avoid* using it directly if there is a color in your palette that represents it; like `primary` or `secondary`. - - Every index must have a comment: `@color #ffffff rgb(255,255,255)` with a hex value that represents a color. - It helps to identify the desired color from this list. **/ const colors: { [index in TColor]: string } = { - // @color transparent transparent: 'transparent', - // @color #ffffff rgb(255,255,255) - white: '#ffffff', - // @color #000000 rgb(0,0,0) - black: '#000000', - // @color #E5E5E5 rgb(229,229,229) - mercury: '#E5E5E5', - // @color #E0E0E0 rgb(224,224,224) - alto: '#e0e0e0', - // @color #828282 rgb(130,130,130) - gray: '#828282', - // @color #8392a6 rgb(131,146,166) - regentGray: '#8392a6', - // @color #C4C4C4 rgb(196,196,196) - silver: '#C4C4C4', - // @color #071332 rgb(7,19,50) - darkBlue: '#071332', - // @color #39A5FF rgb(57,165,255) - dodgerBlue: '#39A5FF', - // @color #CBDDEC rgb(203,221,236) - periwinkleGray: '#cbddec', - // @color #7D94A8 rgb(125,148,168) - baliHai: '#7D94A8', - // @color #EBF6FF rgb(235,246,255) - solitude: '#EBF6FF', - // @color #68B73F rgb(104,183,63) - apple: '#68B73F', - // @color #C3F1AB rgb(195,241,171) - madang: '#C3F1AB', - // @color #70C445 rgb(112,196,69) - mantis: '#70C445', - // @color #BC1616 rgb(188,22,22) - thunderbird: '#BC1616', - // @color #0b2e8e rgb(11,46,142) - toreaBay: '#0b2e8e', - // @color #008BFF rgb(0,139,255) - azureRadiance: '#008BFF', - // @color #478825 rgb(71,136,37) - oliveDrab: '#478825', - // @color #333333 rgb(51,51,51) - mineShaft: '#333333' + npwBase01: '#fff', + npwBase02: '#f6f6f6', + npwBase03: '#ededed', // basic border + npwBase04: '#d7d7d7', // hovered borders + npwBase05: '#b0b0b0', // interface icons + npwBase06: '#959595', // hovered interface icons + npwBase07: '#808080', // inverted background + npwBase08: '#333', // dark interface icons + npwBase09: '#000', // icons on inverted background + npwPrimary: '#526ed3', // primary buttons, background + npwPrimaryHover: '#6c86e2', // primary buttons hover + npwPrimaryActive: '#314692', // primary buttons hover + npwPrimaryText: '#fff', // text on primary background + npwSecondary: '#ebefff', // inputs and secondary buttons + npwSecondaryHover: '#dfe3f3', // inputs and secondary buttons hover + npwSecondaryActive: '#d8ddf2', // inputs and secondary buttons pressed + npwAccent: '#ff8078', // fill and outline of accent elements + npwAccentHover: '#ff9a94', // accent elements hover + npwAccentActive: '#e7716a', // accent elements pressed + npwAccentText: '#fff', // text on accent background + npwSelection: 'rgba(112, 182, 246, 0.12)', // selected text background + npwFocus: 'rgba(51, 51, 51, 0.64)', // focus ring color + npwClear: 'rgba(0, 0, 0, 0.08)', // translucent dark fill + npwClearDisabled: 'rgba(0, 0, 0, 0.04)', // translucent dark fill disabled + npwClearHover: 'rgba(0, 0, 0, 0.16)', // translucent dark fill hover + npwClearActive: 'rgba(0, 0, 0, 0.2)', // translucent dark fill pressed + npwClearInverse: 'rgba(255, 255, 255, 0.16)', // translucent light fill + npwClearInverseHover: 'rgba(255, 255, 255, 0.24)', // translucent light fill hover + npwClearInverseActive: 'rgba(255, 255, 255, 0.4)', // translucent light fill pressed + // Statuses + npwErrorFill: 'rgba(244, 87, 37, 1)', // icons and decorative elements with error status + npwErrorBg: 'rgba(244, 87, 37, 0.12)', // translucent error background + npwErrorBgHover: 'rgba(244, 87, 37, 0.24)', // translucent hover error background + npwSuccessFill: 'rgba(74, 201, 155, 1)', // icon and decorative elements with success status + npwSuccessBg: 'rgba(74, 201, 155, 0.12)', // translucent success background + npwSuccessBgHover: 'rgba(74, 201, 155, 0.24)', // translucent success hover + npwWarningFill: 'rgba(255, 199, 0, 1)', // icon and decorative elements with warning status + npwWarningBg: 'rgba(255, 199, 0, 0.12)', // translucent warning background + npwWarningBgHover: 'rgba(255, 199, 0, 0.24)', // translucent warning background + npwInfoFill: 'rgba(112, 182, 246, 1)', // icon and decorative elements with info status + npwInfoBg: 'rgba(112, 182, 246, 0.12)', // translucent info background + npwInfoBgHover: 'rgba(112, 182, 246, 0.24)', // translucent info background + npwNeutralFill: 'rgb(121, 129, 140)', // icon and decorative elements with neutral status + npwNeutralBg: 'rgba(121, 129, 140, 0.12)', // translucent info background + npwNeutralBgHover: 'rgba(121, 129, 140, 0.24)', // translucent info background + // Text + npwText01: 'rgba(27, 31, 59, 1)', + npwText02: 'rgba(27, 31, 59, 0.65)', + npwText03: 'rgba(27, 31, 59, 0.4)', + npwLink: '#526ed3', + npwLinkHover: '#6c86e2', + npwPositive: '#3aa981', + npwPositiveHover: '#7ac5aa', + npwNegative: '#dd4c1e', + npwNegativeHover: '#e38163', + // Modifiers for dark background + npwErrorFillNight: 'rgba(255, 140, 103, 1)', + npwErrorBgNight: 'rgba(244, 87, 37, 0.32)', + npwErrorBgNightHover: 'rgba(244, 87, 37, 0.4)', + npwSuccessFillNight: 'rgb(74, 201, 155)', + npwSuccessBgNight: 'rgba(74, 201, 155, 0.32)', + npwSuccessBgNightHover: 'rgba(74, 201, 155, 0.4)', + npwWarningFillNight: 'rgb(255, 199, 0)', + npwWarningBgNight: 'rgba(255, 199, 0, 0.32)', + npwWarningBgNightHover: 'rgba(255, 199, 0, 0.4)', + npwInfoFillNight: 'rgb(112, 182, 246)', + npwInfoBgNight: 'rgba(112, 182, 246, 0.32)', + npwInfoBgNightHover: 'rgba(112, 182, 246, 0.4)', + npwNeutralFillNight: 'rgb(149, 155, 164)', + npwNeutralBgNight: 'rgb(149, 155, 164, 0.32)', + npwNeutralBgNightHover: 'rgb(149, 155, 164, 0.48)', + // + npwText01Night: 'rgba(255, 255, 255, 1)', + npwText02Night: 'rgba(255, 255, 255, 0.72)', + npwText03Night: 'rgba(255, 255, 255, 0.6)', + npwLinkNight: '#6788ff', + npwLinkNightHover: '#526ed3', + npwPositiveNight: '#44c596', + npwPositiveNightHover: '#3aa981', + npwNegativeNight: '#ff8c67', + npwNegativeNightHover: '#bb593a', + // + npwSupport01: '#a8cef1', + npwSupport02: '#3682db', + npwSupport03: '#8dda71', + npwSupport04: '#34b41f', + npwSupport05: '#e29398', + npwSupport06: '#b8474e', + npwSupport07: '#fcc068', + npwSupport08: '#ff8a00', + npwSupport09: '#dab3f9', + npwSupport10: '#7b439e', + npwSupport11: '#fee797', + npwSupport12: '#fcbb14', + npwSupport13: '#ea97c4', + npwSupport14: '#bd65a4', + npwSupport15: '#7fd7cc', + npwSupport16: '#2fad96', + npwSupport17: '#d4aca2', + npwSupport18: '#9d6f64', + npwSupport19: '#d2e9a2', + npwSupport20: '#aadc42', + npwSupport21: '#a0c5df', + npwSupport22: '#3c7ba8' } export default colors diff --git a/src/assets/theme/gradients.ts b/src/assets/theme/gradients.ts index 1b47c5b..e60a5a5 100644 --- a/src/assets/theme/gradients.ts +++ b/src/assets/theme/gradients.ts @@ -1,9 +1,3 @@ -import colors from './colors' - -const gradients = { - gradient1: `radial-gradient(66.71% 115.76% at 4.44% 45.46%, ${colors.madang} 0%, ${colors.mantis} 100%)`, - gradient2: `radial-gradient(50.21% 53.11% at 24.64% 0%, ${colors.white} 0%, ${colors.dodgerBlue} 100%)`, - gradient3: `linear-gradient(269.17deg, rgba(0, 139, 255, 0.2) -17.87%, rgba(57, 165, 255, 0.036) 99.24%)` -} +const gradients = {} export default gradients diff --git a/src/assets/theme/index.ts b/src/assets/theme/index.ts index eae98bb..d3c7610 100644 --- a/src/assets/theme/index.ts +++ b/src/assets/theme/index.ts @@ -2,7 +2,6 @@ import breakpoints from './breakpoints' import colors from './colors' import constants from './constants' import gradients from './gradients' -import palette from './palette' import shadows from './shadows' import transitions from './transitions' @@ -12,7 +11,6 @@ export interface ITheme { colors: typeof colors constants: typeof constants gradients: typeof gradients - palette: typeof palette shadows: typeof shadows transitions: typeof transitions } @@ -23,7 +21,6 @@ const theme = { colors, constants, gradients, - palette, shadows, transitions } diff --git a/src/assets/theme/palette.ts b/src/assets/theme/palette.ts deleted file mode 100644 index 66220b1..0000000 --- a/src/assets/theme/palette.ts +++ /dev/null @@ -1,13 +0,0 @@ -import colors, { TColor } from './colors' - -export type TPalletColor = TColor | 'primary' | 'secondary' - -const palette: { - [index in TPalletColor]: string -} = { - ...colors, - primary: colors.apple, - secondary: colors.dodgerBlue -} - -export default palette diff --git a/src/components/blocks/Page/Content.ts b/src/components/blocks/Page/Content.ts index aadf505..9164786 100644 --- a/src/components/blocks/Page/Content.ts +++ b/src/components/blocks/Page/Content.ts @@ -6,7 +6,7 @@ const Content = styled('main')` min-height: 125px; z-index: 1; - background: ${(props) => props.theme.colors.white}; + background: ${(props) => props.theme.colors.npwBase01}; @media (max-width: ${(props) => props.theme.breakpoints.sm}) { margin-top: 125px; diff --git a/src/components/blocks/Page/index.ts b/src/components/blocks/Page/index.ts index daba419..e033830 100644 --- a/src/components/blocks/Page/index.ts +++ b/src/components/blocks/Page/index.ts @@ -9,7 +9,7 @@ const Page = styled('div')` min-height: 100vh; width: 100%; - background: ${(props) => props.theme.colors.solitude}; + background: ${(props) => props.theme.colors.npwBase01}; grid-template-columns: auto; grid-template-areas: diff --git a/src/components/elements/Button/ButtonText.ts b/src/components/elements/Button/ButtonText.ts index fb9e80e..01f553d 100644 --- a/src/components/elements/Button/ButtonText.ts +++ b/src/components/elements/Button/ButtonText.ts @@ -2,8 +2,9 @@ import styled from '@emotion/styled' import theme from '../../../assets/theme' import { changeOpacityOnLoading } from './LoaderContainer' +import { colorStates } from './variants/_colorVariants' -const ButtonText = styled('span')<{ isLoading?: boolean }>` +const ButtonText = styled('span')<{ isLoading?: boolean; colorStates: colorStates }>` font-weight: bold; font-size: 16px; line-height: 25px; diff --git a/src/components/elements/Button/index.tsx b/src/components/elements/Button/index.tsx index 608015b..bc86378 100644 --- a/src/components/elements/Button/index.tsx +++ b/src/components/elements/Button/index.tsx @@ -48,7 +48,11 @@ const Button = ({ children = null, variant = 'primary', ...props }: IButtonProps )} {children && ( - + {children} )} diff --git a/src/components/elements/Button/variants/_colorVariants.ts b/src/components/elements/Button/variants/_colorVariants.ts index dec5e3f..2d0e9b1 100644 --- a/src/components/elements/Button/variants/_colorVariants.ts +++ b/src/components/elements/Button/variants/_colorVariants.ts @@ -1,11 +1,11 @@ -import { TPalletColor } from '../../../../assets/theme/palette' +import { TColor } from '../../../../assets/theme/colors' export type colorStates = { - unset: TPalletColor - hover: TPalletColor - active: TPalletColor - focus: TPalletColor - disabled: TPalletColor + unset: TColor + hover: TColor + active: TColor + focus: TColor + disabled: TColor } interface colorVariant { @@ -14,25 +14,25 @@ interface colorVariant { const colorVariants: colorVariant = { primary: { - unset: 'primary', - hover: 'primary', - active: 'primary', - focus: 'primary', - disabled: 'gray' + unset: 'npwPrimary', + hover: 'npwPrimaryHover', + active: 'npwPrimaryActive', + focus: 'npwPrimaryActive', + disabled: 'npwPrimaryActive' }, secondary: { - unset: 'secondary', - hover: 'secondary', - active: 'secondary', - focus: 'secondary', - disabled: 'transparent' + unset: 'npwPositive', + hover: 'npwPositiveHover', + active: 'npwPositiveHover', + focus: 'npwPositiveHover', + disabled: 'npwSuccessBgNight' }, transparent: { unset: 'transparent', hover: 'transparent', active: 'transparent', focus: 'transparent', - disabled: 'gray' + disabled: 'transparent' } } diff --git a/src/components/elements/Button/variants/primary/PrimaryButtonText.ts b/src/components/elements/Button/variants/primary/PrimaryButtonText.ts index 1fa9870..a26fda9 100644 --- a/src/components/elements/Button/variants/primary/PrimaryButtonText.ts +++ b/src/components/elements/Button/variants/primary/PrimaryButtonText.ts @@ -3,7 +3,10 @@ import styled from '@emotion/styled' import ButtonText from '../../ButtonText' const PrimaryButtonText = styled(ButtonText)` - color: ${(props) => props.theme.palette['white']}; + color: ${(props) => + props.colorStates.unset === 'transparent' + ? props.theme.colors.npwBase09 + : props.theme.colors.npwBase01}; ` export default PrimaryButtonText diff --git a/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts b/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts index c68ff5d..de88ef5 100644 --- a/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts +++ b/src/components/elements/Button/variants/primary/PrimaryStyledButton.ts @@ -7,30 +7,30 @@ import { colorStates } from '../_colorVariants' const disabledStyle = (props: { theme: Theme; colorStates: colorStates }) => css` box-shadow: unset; - background: ${props.theme.palette['alto']}; - border-color: ${props.theme.palette['alto']}; + background: ${props.theme.colors[props.colorStates.disabled]}; + border-color: ${props.theme.colors[props.colorStates.disabled]}; cursor: default; &:hover { box-shadow: unset; - background: ${props.theme.palette['alto']}; - border-color: ${props.theme.palette['alto']}; + background: ${props.theme.colors[props.colorStates.disabled]}; + border-color: ${props.theme.colors[props.colorStates.disabled]}; } ` const PrimaryStyledButton = styled(StyledButton)` - box-shadow: 0 4px 20px 0 ${(props) => hexToRGB(props.theme.palette[props.colorStates.unset], 0.3)}; - border: 2px solid ${(props) => props.theme.palette[props.colorStates.unset]}; - background: ${(props) => props.theme.palette[props.colorStates.unset]}; + box-shadow: 0 4px 20px 0 ${(props) => hexToRGB(props.theme.colors[props.colorStates.unset], 0.3)}; + border: 2px solid ${(props) => props.theme.colors[props.colorStates.unset]}; + background: ${(props) => props.theme.colors[props.colorStates.unset]}; padding: 16px 30px; border-radius: 3px; transition: all ${(props) => props.theme.transitions.normal}; &:hover { box-shadow: 0 4px 20px 0 - ${(props) => hexToRGB(props.theme.palette[props.colorStates.hover], 0.3)}; - border: 2px solid ${(props) => props.theme.palette[props.colorStates.hover]}; - background: ${(props) => props.theme.palette[props.colorStates.hover]}; + ${(props) => hexToRGB(props.theme.colors[props.colorStates.hover], 0.3)}; + border: 2px solid ${(props) => props.theme.colors[props.colorStates.hover]}; + background: ${(props) => props.theme.colors[props.colorStates.hover]}; } &:active { diff --git a/src/components/elements/Loader.tsx b/src/components/elements/Loader.tsx index 9233012..6117109 100644 --- a/src/components/elements/Loader.tsx +++ b/src/components/elements/Loader.tsx @@ -35,7 +35,7 @@ interface LoaderProps { style?: Record } -const Loader = ({ loaderColor = theme.colors.black, ...props }: LoaderProps) => ( +const Loader = ({ loaderColor = theme.colors.npwBase09, ...props }: LoaderProps) => ( ) diff --git a/src/utils/hexToRGB.ts b/src/utils/hexToRGB.ts index c9a1eb3..3f64fce 100644 --- a/src/utils/hexToRGB.ts +++ b/src/utils/hexToRGB.ts @@ -1,15 +1,21 @@ import { TColor } from '../assets/theme/colors' function hexToRGB(hex: TColor | string, alpha?: number) { - const r = parseInt(hex.slice(1, 3), 16) - const g = parseInt(hex.slice(3, 5), 16) - const b = parseInt(hex.slice(5, 7), 16) + try { + const r = parseInt(hex.slice(1, 3), 16) + const g = parseInt(hex.slice(3, 5), 16) + const b = parseInt(hex.slice(5, 7), 16) - if (alpha) { - return `rgba(${r},${g},${b},${alpha})` + if (alpha) { + return `rgba(${r},${g},${b},${alpha})` + } + + return `rgb(${r},${g},${b})` + } catch (e) { + console.error(`Error converting to rgb for: ${hex}`, e) } - return `rgb(${r},${g},${b})` + return hex } export default hexToRGB