@thecb/components 7.8.1 → 7.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.8.1",
+  "version": "7.8.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,7 +1,12 @@
-/*
-  For now I'm using string values, eventually shared components library will have its own constants file
-  for colors/values that should be used here instead
-*/
+import {
+  WHITE,
+  TRANSPARENT,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  MATISSE_BLUE,
+  RASPBERRY,
+  ERROR_COLOR
+} from "../../../constants/colors";
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -19,18 +24,18 @@ const padding = {
 };
 
 const color = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#15749D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#15749D",
-  smallGhost: "#15749D",
-  ghost: "#15749D",
-  tertiary: "#15749D",
-  danger: "#FFFFFF",
-  dangerSecondary: "#D11053",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const fontSizeVariant = {
@@ -94,123 +99,123 @@ const minWidth = {
 };
 
 const backgroundColor = {
-  primary: "#15749D",
-  secondary: "transparent",
-  back: "transparent",
-  smallPrimary: "#15749D",
-  smallSecondary: "transparent",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
-  danger: "#ED125F",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const border = {
-  primary: "2px solid #15749D",
-  secondary: "2px solid #15749D",
-  back: "2px solid #15749D",
-  smallPrimary: "2px solid #15749D",
-  smallSecondary: "2px solid #15749D",
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid #ED125F",
-  dangerSecondary: "2px solid #D11053",
-  whiteSecondary: "2px solid white",
-  whitePrimary: "2px solid transparent"
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverBackgroundColor = {
-  primary: "#116285",
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: "transparent",
-  smallPrimary: "#116285",
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const hoverBorderColor = {
-  primary: "#116285",
-  secondary: "#15749D",
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: "#116285",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverColor = {
-  primary: "#FFFFFF",
-  secondary: "#116285",
-  back: "#116285",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#116285",
-  smallGhost: "#116285",
-  ghost: "#116285",
-  tertiary: "#116285",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const activeBackgroundColor = {
-  primary: "#0E506D",
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: "transparent",
-  smallPrimary: "#0E506D",
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const activeBorderColor = {
-  primary: "#0E506D",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#0E506D",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const activeColor = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#0E506D",
-  smallGhost: "#0E506D",
-  ghost: "#0E506D",
-  tertiary: "#0E506D",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 export const fallbackValues = {

package/src/constants/colors.js

@@ -54,6 +54,8 @@ const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
 const ASTRAL_BLUE = "#3176AA";
+const SAPPHIRE_BLUE = "#116285";
+const PEACOCK_BLUE = "#0E506D";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -76,6 +78,7 @@ const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
 const RAZZMATAZZ_RED = "#D11053";
+const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -161,6 +164,8 @@ export {
   MATISSE_BLUE,
   ROYAL_BLUE,
   ASTRAL_BLUE,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -182,6 +187,7 @@ export {
   FANTASY_RED,
   COSMOS_RED,
   BLUSH_RED,
+  RASPBERRY,
   ALERT_COLORS,
   ERROR_COLOR
 };