🎨 Added proper colors, removed palette

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

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

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
 }

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;

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:

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;

src/components/elements/Button/index.tsx

@@ -48,7 +48,11 @@ const Button = ({ children = null, variant = 'primary', ...props }: IButtonProps
         </IconContainer>
       )}
       {children && (
-        <Variant.Text {...props} {...props.textProps}>
+        <Variant.Text
+          {...props}
+          {...props.textProps}
+          colorStates={props.colorStates || colorVariants[variant]}
+        >
           {children}
         </Variant.Text>
       )}