@thecb/components 6.0.3 → 6.0.7-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.3",
+  "version": "6.0.7-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -5,7 +5,8 @@ import {
   SEASHELL_WHITE,
   MATISSE_BLUE,
   RED,
-  CHARADE_GREY
+  CHARADE_GREY,
+  STORM_GREY
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
@@ -29,7 +30,7 @@ const disabledCheckedStyles = {
 const disabledStyles = {
   default: `
   background: ${SEASHELL_WHITE};
-  border: 1px solid ${GHOST_GREY};
+  border: 1px solid ${STORM_GREY};
 `
 };
 const checkedStyles = {
@@ -41,7 +42,7 @@ const checkedStyles = {
 const defaultStyles = {
   default: `
   background: ${WHITE}; 
-  border: 1px solid ${GHOST_GREY};
+  border: 1px solid ${STORM_GREY};
 `
 };
 

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -5,9 +5,9 @@ import {
   SEASHELL_WHITE,
   MINESHAFT_GREY,
   DUSTY_GREY,
-  GREY_CHATEAU,
   ATHENS_GREY,
-  INFO_BLUE
+  INFO_BLUE,
+  STORM_GREY
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -25,7 +25,7 @@ const inputBackgroundColor = {
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
 const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
-const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
+const borderColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };
 const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js

@@ -1,6 +1,6 @@
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: "#357fb8" };
+const linkColor = { default: "#3176AA" };
 const fontSize = { default: "1rem" };
 const lineHeight = { default: "1.5rem" };
 const fontWeight = {

package/src/components/molecules/obligation/modules/AutopayModalModule.theme.js

@@ -3,7 +3,7 @@ import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 const color = "#15749D";
 const hoverColor = "#116285";
 const activeColor = "#0E506D";
-const linkColor = "#357fb8";
+const linkColor = "#3176AA";
 const fontWeight = FONT_WEIGHT_REGULAR;
 const modalLinkHoverFocus = `outline: none;
   cursor: pointer;

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -28,7 +28,9 @@ const TermsAndConditionsModal = ({
         borderRadius="3px"
         extraStyles="overflow: scroll; max-height: 20rem;"
       >
-        <Text variant="p">{terms}</Text>
+        <Text variant="p" extraStyles={`& a { text-decoration: underline; }`}>
+          {terms}
+        </Text>
       </Box>
     }
     defaultWrapper={false}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -4,7 +4,7 @@ import {
 } from "../../../constants/style_constants";
 
 const backgroundColor = { default: "#ffffff", footer: "#ffffff" };
-const linkColor = { default: "#357fb8", footer: "#ffffff" };
+const linkColor = { default: "#3176AA", footer: "#ffffff" };
 const border = { default: "#cdcdcd", footer: "#cdcdcd" };
 const fontSize = { default: "1rem", footer: "0.875rem" };
 const lineHeight = { default: "1.5rem", footer: "1.25rem" };

package/src/constants/colors.js

@@ -53,6 +53,7 @@ const INFO_BLUE = "#E4F4FD";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
+const ASTRAL_BLUE = "#3176AA";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -74,7 +75,7 @@ const APRICOT_ORANGE = "#FFE8D8";
 const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
-const RAZZMATAZZ_RED = "#ED125F";
+const RAZZMATAZZ_RED = "#D11053";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -159,6 +160,7 @@ export {
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
   ROYAL_BLUE,
+  ASTRAL_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,