Improve disabled states for Checkbox & Input

Author: alotropico

src/Checkbox/Checkbox.stories.tsx

@@ -13,4 +13,5 @@ const Template: ComponentStory<typeof CheckboxComponent> = (args: CheckboxProps)
 export const Checkbox = Template.bind({});
 Checkbox.args = {
   label: "Text",
+  disabled: false,
 };

src/Checkbox/style/Checkbox.module.scss

@@ -39,7 +39,7 @@
     }
 
     &:not(:disabled) {
-      &:focus {
+      &:focus-visible {
         outline: 1px solid var(--color-border);
         outline-offset: 3px;
       }
@@ -50,6 +50,14 @@
       color: var(--container-disabled);
       cursor: default;
       background-color: var(--color-input-disabled);
+      border-color: var(--color-border-soft);
+
+      &:checked {
+        &::before {
+          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+          box-shadow: inset 1em 1em var(--color-border-soft);
+        }
+      }
     }
   }
 }

src/Input/Input.stories.tsx

@@ -135,6 +135,6 @@ Dropdown.args = {
         "Option III": { value: "3" },
         "Option IV": { value: "4" },
         "Option V": { value: "5" },
-        "Option V": { value: "required", required: true },
+        "Option VI": { value: "required", required: true },
     },
 };