Update form components to support secondary styling

src/components/Checkbox.js

@@ -75,15 +75,16 @@ const Input = styled.input.attrs({ type: 'checkbox' })`
   }
 
   &:focus + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset;
+    box-shadow: ${props => props.checkboxColor} 0 0 0 1px inset;
   }
 
   &:checked + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset;
+    box-shadow: ${props => props.checkboxColor} 0 0 0 1px inset;
   }
 
   &:checked:focus + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.3)} 0 0 5px 2px;
+    box-shadow: ${props => props.checkboxColor} 0 0 0 1px inset,
+      ${props => rgba(props.checkboxColor, 0.3)} 0 0 5px 2px;
   }
 
   & + ${LabelText}:after {
@@ -100,7 +101,7 @@ const Input = styled.input.attrs({ type: 'checkbox' })`
 
   &:checked + ${LabelText}:after {
     transform: scale3d(1, 1, 1);
-    background: ${color.primary};
+    background: ${props => props.checkboxColor};
     opacity: 1;
   }
 `;
@@ -111,8 +112,9 @@ const CheckboxWrapper = styled.div`
   flex-wrap: wrap;
 `;
 
-export function Checkbox({ id, label, error, hideLabel, ...props }) {
+export function Checkbox({ appearance, id, label, error, hideLabel, ...props }) {
   const errorId = `${id}-error`;
+  const checkboxColor = color[appearance];
   return (
     <CheckboxWrapper>
       <Label>
@@ -121,6 +123,7 @@ export function Checkbox({ id, label, error, hideLabel, ...props }) {
           id={id}
           aria-describedby={errorId}
           aria-invalid={!!error}
+          checkboxColor={checkboxColor}
           type="checkbox"
         />
         <LabelText>
@@ -135,13 +138,15 @@ export function Checkbox({ id, label, error, hideLabel, ...props }) {
 }
 
 Checkbox.propTypes = {
+  appearance: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   hideLabel: PropTypes.bool,
   error: PropTypes.string,
 };
 
 Checkbox.defaultProps = {
+  appearance: 'primary',
   hideLabel: false,
   error: null,
 };

src/components/Checkbox.stories.js

@@ -18,6 +18,14 @@ storiesOf('Design System|forms/Checkbox', module)
         error="There's a snake in my boots"
       />
       <Checkbox id="With-label" label="Cats" onChange={onChange} />
+      <Checkbox
+        appearance="secondary"
+        id="With-label"
+        label="Secondary"
+        checked
+        onChange={onChange}
+      />
+      <Checkbox appearance="secondary" id="With-label" label="Secondary" onChange={onChange} />
     </form>
   ))
   .add('unchecked', () => <Checkbox id="Unchecked" label="Cats" hideLabel onChange={onChange} />)

src/components/Radio.js

@@ -76,15 +76,16 @@ const Input = styled.input.attrs({ type: 'radio' })`
   }
 
   &:focus + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset;
+    box-shadow: ${props => props.radioColor} 0 0 0 1px inset;
   }
 
   &:checked + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset;
+    box-shadow: ${props => props.radioColor} 0 0 0 1px inset;
   }
 
   &:checked:focus + ${LabelText}:before {
-    box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.3)} 0 0 5px 2px;
+    box-shadow: ${props => props.radioColor} 0 0 0 1px inset,
+      ${props => rgba(props.radioColor, 0.3)} 0 0 5px 2px;
   }
 
   & + ${LabelText}:after {
@@ -101,7 +102,7 @@ const Input = styled.input.attrs({ type: 'radio' })`
 
   &:checked + ${LabelText}:after {
     transform: scale3d(1, 1, 1);
-    background: ${color.primary};
+    background: ${props => props.radioColor};
     opacity: 1;
   }
 `;
@@ -112,7 +113,18 @@ const RadioWrapper = styled.div`
   flex-wrap: wrap;
 `;
 
-export function Radio({ id, label, description, error, hideLabel, value, className, ...props }) {
+export function Radio({
+  appearance,
+  id,
+  label,
+  description,
+  error,
+  hideLabel,
+  value,
+  className,
+  ...props
+}) {
+  const radioColor = color[appearance];
   let errorId;
   let descriptionId;
   let ariaDescribedBy;
@@ -134,6 +146,7 @@ export function Radio({ id, label, description, error, hideLabel, value, classNa
           id={id}
           aria-describedby={ariaDescribedBy}
           aria-invalid={!!error}
+          radioColor={radioColor}
           type="radio"
           value={value}
         />
@@ -148,6 +161,7 @@ export function Radio({ id, label, description, error, hideLabel, value, classNa
 }
 
 Radio.propTypes = {
+  appearance: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   value: PropTypes.string,
   label: PropTypes.string,
@@ -158,6 +172,7 @@ Radio.propTypes = {
 };
 
 Radio.defaultProps = {
+  appearance: 'primary',
   value: '',
   label: null,
   hideLabel: false,

src/components/Radio.stories.js

@@ -13,6 +13,15 @@ storiesOf('Design System|forms/Radio', module)
       <Radio id="Dogs" label="Dogs" value="dogs" onChange={onChange} />
       <Radio id="Cats" label="Cats" onChange={onChange} error="There's a snake in my boots" />
       <Radio id="Dogs" label="Dogs" description="15 canines" value="dogs" onChange={onChange} />
+      <Radio
+        id="Mice"
+        label="Mice"
+        value="mice"
+        onChange={onChange}
+        checked
+        appearance="secondary"
+      />
+      <Radio id="Dogs" label="Dogs" value="dogs" onChange={onChange} appearance="secondary" />
     </form>
   ))
   .add('unchecked', () => (

src/components/Select.js

@@ -145,6 +145,9 @@ const SelectWrapper = styled.span`
       ${Selector} {
         box-shadow: ${color.mediumlight} 0 0 0 1px inset;
       }
+      ${Selector}:focus {
+        box-shadow: ${color.secondary} 0 0 0 1px inset;
+      }
     `}
 
   ${props =>

src/components/Textarea.js

@@ -95,7 +95,7 @@ const TextareaWrapper = styled.div`
         box-shadow: ${color.mediumlight} 0 0 0 1px inset;
 
         &:focus {
-          box-shadow: ${color.primary} 0 0 0 1px inset;
+          box-shadow: ${color.secondary} 0 0 0 1px inset;
         }
       `}