@thecb/components 8.0.3-beta.4 → 8.0.4-beta.2

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -70,7 +70,6 @@ const Card = ({
                 minHeight={imgHeight}
                 padding="0"
                 background={themeValues.imageBackgroundColor}
-                extraStyles={`background-color: ${themeValues.imageBackgroundColor}`}
               >
                 <Cover minHeight={imgHeight} singleChild>
                   <Center intrinsic>

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -2,8 +2,8 @@ import React from "react";
 import { Cluster } from "../../atoms/layouts";
 import Text from "../text";
 import styled from "styled-components";
-import { colors } from "../../../constants";
 import { noop } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
 
 const HiddenRadioInput = styled.input`
   // can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it
@@ -18,7 +18,7 @@ const Circle = styled.div`
   margin-right: 8px;
   width: 1.5rem;
   height 1.5rem;
-  border: 1px solid ${colors.GREY_CHATEAU};
+  border: ${({ borderColor }) => `1px solid ${borderColor}`};
   border-radius: 50%;
   box-sizing: border-box;
   padding: 2px;
@@ -27,7 +27,7 @@ const Circle = styled.div`
     width: 100%;
     height: 100%;
     display: block;
-    background: ${colors.MATISSE_BLUE};
+    background: ${({ backgroundColor }) => backgroundColor};
     border-radius: 50%;
     transform: scale(0);  
   }  
@@ -40,10 +40,11 @@ const InputAndLabelContainer = styled(Cluster)`
     transition: transform 0.15s;
   }
   ${HiddenRadioInput}:checked + label ${Circle} {
-    border: 1px solid ${colors.MATISSE_BLUE};
+    border: ${({ backgroundColor }) => `1px solid ${backgroundColor};`}
   }
   ${HiddenRadioInput}:focus + label ${Circle} { {
-    box-shadow: 0px 0px 2px 1px ${colors.MATISSE_BLUE};
+    box-shadow: ${({ backgroundColor }) =>
+      `0px 0px 2px 1px ${backgroundColor};`}
   }
 `;
 
@@ -89,4 +90,8 @@ const RadioButtonWithLabel = ({
   </InputAndLabelContainer>
 );
 
-export default RadioButtonWithLabel;
+export default themeComponent(
+  RadioButtonWithLabel,
+  "RadioButtonWithLabel",
+  fallbackValues
+);

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.theme.js

@@ -0,0 +1,8 @@
+import { GREY_CHATEAU, MATISSE_BLUE } from "../../../constants/colors";
+const backgroundColor = MATISSE_BLUE;
+const borderColor = GREY_CHATEAU;
+
+export const fallbackValues = {
+  borderColor,
+  backgroundColor
+};