From 92e43f95fef0e6ef3888704da64aa924912f27aa Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Tue, 12 Sep 2023 11:10:18 -0400
Subject: [PATCH 1/3] Add --checked-color to checkbox

---
 .../inputs/Checkbox/Checkbox.story.tsx        | 40 +++++++++++++++++++
 src/components/inputs/Input/Input.style.ts    | 12 ++++--
 src/components/inputs/Shared.ts               |  2 +-
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/components/inputs/Checkbox/Checkbox.story.tsx b/src/components/inputs/Checkbox/Checkbox.story.tsx
index ec7883670..49b6b583d 100755
--- a/src/components/inputs/Checkbox/Checkbox.story.tsx
+++ b/src/components/inputs/Checkbox/Checkbox.story.tsx
@@ -5,6 +5,8 @@ import { Checkbox, Props } from './Checkbox';
 
 import { Layout } from '../../../storybook';
 
+import styled from 'styled-components';
+
 export default {
   title: 'components/Checkbox',
   component: Checkbox,
@@ -32,10 +34,48 @@ export default {
   },
 };
 
+const StyledCheck = styled(Checkbox)`
+  // input {
+  //   &:checked ~ div[type='checkbox'] {
+  //     border: 1px solid black;
+  //     &::after {
+  //       border-color: black;
+  //       background-color: black;
+  //     }
+  //   }
+  // }
+  --checked-color: black;
+`;
+
 const Template: Story<Props> = (args) => {
   return (
     <Layout.StoryVertical>
       <Checkbox {...args} />
+      <Checkbox label="default checked" value="default" checked />
+      <Checkbox
+        label="default checked disabled"
+        value="default"
+        checked
+        disabled
+      />
+      <StyledCheck
+        label="--checked-color:black checked"
+        value="black"
+        checked
+      />
+      <StyledCheck
+        label="--checked-color:black disabled"
+        value="black"
+        checked
+        disabled
+      />
+      <StyledCheck
+        label="--checked-color:black disabled indeterminate"
+        value="black"
+        checked
+        indeterminate
+        disabled
+      />
     </Layout.StoryVertical>
   );
 };
diff --git a/src/components/inputs/Input/Input.style.ts b/src/components/inputs/Input/Input.style.ts
index 36f1dc3fc..1da9f22b6 100755
--- a/src/components/inputs/Input/Input.style.ts
+++ b/src/components/inputs/Input/Input.style.ts
@@ -1,5 +1,5 @@
 import styled, { css, StyledComponent } from 'styled-components';
-import { rgba, darken } from 'polished';
+import { darken, rem } from 'polished';
 import { grayscale, slate } from '../../../color';
 
 import {
@@ -59,11 +59,15 @@ export const HiddenMark: StyledComponent<
 function fauxMarkChecked({ disabled }) {
   return css`
     &:checked ~ ${Faux} {
-      border: 1px solid ${rgba(blue(500), disabled ? 0 : 1)};
+      border-style: solid;
+      border-width: 1px;
+      ${!disabled &&
+      `border-color: var(--checked-color, ${blue(500)})`};
 
       &:after {
+        border-radius: ${rem(2)};
         opacity: ${disabled ? 0.5 : 1};
-        transform: scale(1.02);
+        transform: scale(1.1);
       }
     }
   `;
@@ -148,7 +152,7 @@ export function FauxType({ type, size }) {
         &:after {
           width: 100%;
           height: 100%;
-          border: 1px solid ${blue(500)};
+          border: 1px solid var(--checked-color, ${blue(500)});
           background-image: ${checkmark};
         }
       `;
diff --git a/src/components/inputs/Shared.ts b/src/components/inputs/Shared.ts
index c5991845f..e65113001 100755
--- a/src/components/inputs/Shared.ts
+++ b/src/components/inputs/Shared.ts
@@ -159,7 +159,7 @@ export const FauxMark = (type, mirror) =>
     &:after {
       content: '';
       display: block;
-      background: ${blue(500)};
+      background: var(--checked-color, ${blue(500)});
       opacity: 0;
       transition: 200ms ease-in-out;
       transform: scale(0);

From e684b8ffc7c6c47c7584300d5fbe8ea9ce8af5e0 Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Tue, 12 Sep 2023 12:02:21 -0400
Subject: [PATCH 2/3] Clean up story

---
 .../inputs/Checkbox/Checkbox.story.tsx        | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/inputs/Checkbox/Checkbox.story.tsx b/src/components/inputs/Checkbox/Checkbox.story.tsx
index 49b6b583d..947869edf 100755
--- a/src/components/inputs/Checkbox/Checkbox.story.tsx
+++ b/src/components/inputs/Checkbox/Checkbox.story.tsx
@@ -34,23 +34,11 @@ export default {
   },
 };
 
-const StyledCheck = styled(Checkbox)`
-  // input {
-  //   &:checked ~ div[type='checkbox'] {
-  //     border: 1px solid black;
-  //     &::after {
-  //       border-color: black;
-  //       background-color: black;
-  //     }
-  //   }
-  // }
-  --checked-color: black;
-`;
-
 const Template: Story<Props> = (args) => {
   return (
     <Layout.StoryVertical>
       <Checkbox {...args} />
+      <Checkbox label="default disabled" value="default" disabled />
       <Checkbox label="default checked" value="default" checked />
       <Checkbox
         label="default checked disabled"
@@ -58,18 +46,34 @@ const Template: Story<Props> = (args) => {
         checked
         disabled
       />
-      <StyledCheck
+      <Checkbox
+        label="default checked disabled indeterminate"
+        value="default"
+        checked
+        disabled
+        indeterminate
+      />
+      <Checkbox
+        style={{ '--checked-color': 'black' } as React.CSSProperties}
+        label="--checked-color:black disabled"
+        value="black"
+        disabled
+      />
+      <Checkbox
+        style={{ '--checked-color': 'black' } as React.CSSProperties}
         label="--checked-color:black checked"
         value="black"
         checked
       />
-      <StyledCheck
+      <Checkbox
+        style={{ '--checked-color': 'black' } as React.CSSProperties}
         label="--checked-color:black disabled"
         value="black"
         checked
         disabled
       />
-      <StyledCheck
+      <Checkbox
+        style={{ '--checked-color': 'black' } as React.CSSProperties}
         label="--checked-color:black disabled indeterminate"
         value="black"
         checked

From c6420a86cfe71a5c89b5efb682cd152a1b54a4a5 Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Tue, 12 Sep 2023 12:53:06 -0400
Subject: [PATCH 3/3] Create checkbox stickersheet for visual regression

---
 .../inputs/Checkbox/Checkbox.story.tsx        | 89 ++++++++++---------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/components/inputs/Checkbox/Checkbox.story.tsx b/src/components/inputs/Checkbox/Checkbox.story.tsx
index 947869edf..c68d71600 100755
--- a/src/components/inputs/Checkbox/Checkbox.story.tsx
+++ b/src/components/inputs/Checkbox/Checkbox.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Checkbox, Props } from './Checkbox';
 
@@ -34,58 +34,59 @@ export default {
   },
 };
 
-const Template: Story<Props> = (args) => {
+const Template: StoryFn<Props> = (args) => {
   return (
     <Layout.StoryVertical>
       <Checkbox {...args} />
-      <Checkbox label="default disabled" value="default" disabled />
-      <Checkbox label="default checked" value="default" checked />
-      <Checkbox
-        label="default checked disabled"
-        value="default"
-        checked
-        disabled
-      />
-      <Checkbox
-        label="default checked disabled indeterminate"
-        value="default"
-        checked
-        disabled
-        indeterminate
-      />
-      <Checkbox
-        style={{ '--checked-color': 'black' } as React.CSSProperties}
-        label="--checked-color:black disabled"
-        value="black"
-        disabled
-      />
-      <Checkbox
-        style={{ '--checked-color': 'black' } as React.CSSProperties}
-        label="--checked-color:black checked"
-        value="black"
-        checked
-      />
-      <Checkbox
-        style={{ '--checked-color': 'black' } as React.CSSProperties}
-        label="--checked-color:black disabled"
-        value="black"
-        checked
-        disabled
-      />
-      <Checkbox
-        style={{ '--checked-color': 'black' } as React.CSSProperties}
-        label="--checked-color:black disabled indeterminate"
-        value="black"
-        checked
-        indeterminate
-        disabled
-      />
     </Layout.StoryVertical>
   );
 };
+
 export const Controls = Template.bind({});
 Controls.storyName = 'Checkbox';
 Controls.args = {
   label: 'Checkbox label',
   value: 'checkbox1',
 };
+
+export const StickerSheet = () => (
+  <Layout.StoryVertical>
+    <Checkbox label="default" value="default" />
+    <Checkbox label="default disabled" value="default" disabled />
+    <Checkbox label="default checked" value="default" checked />
+    <Checkbox label="default checked disabled" checked disabled />
+    <Checkbox
+      label="default checked disabled indeterminate"
+      checked
+      disabled
+      indeterminate
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black"
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled"
+      disabled
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black checked"
+      checked
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled"
+      checked
+      disabled
+    />
+    <Checkbox
+      style={{ '--checked-color': 'black' } as React.CSSProperties}
+      label="--checked-color:black disabled indeterminate"
+      checked
+      indeterminate
+      disabled
+    />
+  </Layout.StoryVertical>
+);