Add --checked-color to checkbox

vimeo · Sep 12, 2023 · 92e43f9 · 92e43f9
1 parent 2656c6a
commit 92e43f9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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);