From 5b416c0ffa037907efda69a158351ebefc8a64c2 Mon Sep 17 00:00:00 2001
From: Grace Iris Gardner <42048868+GraceGardner@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:36:12 -0600
Subject: [PATCH] Audit check box (#1952)

* border

* add check box colors

* make border standard

* Update src/lib/holocene/checkbox.svelte

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

* Update src/lib/holocene/checkbox.svelte

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

* stopping point

* try to fix styles

* Audit checkbox states

* Use opacity for focus color instead

Co-authored-by: Ross Edfort <ross.edfort@temporal.io>

---------

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>
Co-authored-by: Ross Edfort <ross.edfort@temporal.io>
---
 src/lib/holocene/checkbox.stories.svelte      |  5 ++-
 src/lib/holocene/checkbox.svelte              | 38 +++++++++++++------
 .../holocene/radio-input/radio-input.svelte   |  4 +-
 src/lib/theme/plugin.ts                       |  2 -
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/lib/holocene/checkbox.stories.svelte b/src/lib/holocene/checkbox.stories.svelte
index d399ce878..abb9b5833 100644
--- a/src/lib/holocene/checkbox.stories.svelte
+++ b/src/lib/holocene/checkbox.stories.svelte
@@ -26,7 +26,10 @@
   />
 </Template>
 
-<Story name="checkbox" args={{ label: 'Check Me', hoverable: true }} />
+<Story
+  name="checkbox"
+  args={{ label: 'Check Me', hoverable: true, disabled: false }}
+/>
 
 <Story name="So Many" template="Many" args={{ label: loremIpsum }} />
 
diff --git a/src/lib/holocene/checkbox.svelte b/src/lib/holocene/checkbox.svelte
index 5cc2e8cfe..a031b466f 100644
--- a/src/lib/holocene/checkbox.svelte
+++ b/src/lib/holocene/checkbox.svelte
@@ -118,11 +118,11 @@
 
 <style lang="postcss">
   .checkbox {
-    @apply flex cursor-pointer select-none items-start gap-3 text-sm leading-[18px];
-  }
+    @apply flex cursor-pointer select-none items-start gap-3 text-sm leading-[18px] text-primary;
 
-  .checkbox.hoverable:hover .checkmark::before {
-    @apply absolute -left-2.5 -z-10 h-9 w-9 self-center rounded-full bg-interactive/20 content-[''];
+    &.disabled {
+      @apply cursor-not-allowed;
+    }
   }
 
   .label {
@@ -133,20 +133,36 @@
     @apply sr-only;
   }
 
-  input:focus-visible ~ .checkmark {
-    @apply outline outline-interactive;
+  .checkmark {
+    @apply relative box-content flex h-4 w-4 flex-none cursor-pointer rounded-md border-2 border-subtle bg-transparent text-white outline outline-4 outline-transparent dark:text-black;
+
+    &.invalid {
+      @apply border-error;
+    }
+
+    &.disabled {
+      @apply cursor-not-allowed opacity-50;
+    }
   }
 
-  .checkmark {
-    @apply relative box-content flex h-4 w-4 flex-none cursor-pointer rounded-sm border border-primary bg-white dark:bg-transparent;
+  input:checked ~ .checkmark {
+    @apply border-interactive bg-interactive;
 
     &.invalid {
-      @apply border-danger;
+      @apply border-error;
     }
   }
 
-  .disabled {
-    @apply cursor-default border-disabled text-disabled;
+  .checkbox.hoverable {
+    &:hover {
+      input:enabled ~ .checkmark {
+        @apply border-white bg-interactive outline-offset-0 outline-interactive/70 dark:border-black;
+      }
+    }
+  }
+
+  input:focus-visible ~ .checkmark {
+    @apply border-white bg-interactive outline-offset-0 outline-interactive/70 dark:border-black;
   }
 
   .error {
diff --git a/src/lib/holocene/radio-input/radio-input.svelte b/src/lib/holocene/radio-input/radio-input.svelte
index b43f4a574..250ab74a4 100644
--- a/src/lib/holocene/radio-input/radio-input.svelte
+++ b/src/lib/holocene/radio-input/radio-input.svelte
@@ -68,7 +68,7 @@
   }
 
   input[type='radio'] {
-    @apply relative box-content h-4 w-4 min-w-[16px] cursor-pointer appearance-none rounded-full border border-2 border-subtle bg-transparent outline outline-4 outline-transparent dark:text-black;
+    @apply relative box-content h-4 w-4 min-w-[16px] cursor-pointer appearance-none rounded-full border-2 border-subtle bg-transparent outline outline-4 outline-transparent dark:text-black;
 
     &::after {
       @apply absolute left-1 top-1 h-0 w-0 scale-0 rounded-full bg-interactive transition-transform content-[''];
@@ -77,7 +77,7 @@
     &:enabled {
       &:focus-visible,
       &:hover {
-        @apply border-transparent border-white bg-interactive outline-offset-0 outline-focus dark:border-black;
+        @apply border-transparent border-white bg-interactive outline-offset-0 outline-interactive/70 dark:border-black;
       }
     }
 
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index 32149d184..e9454274b 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -10,7 +10,6 @@ export const variables = {
   '--color-subtle': rgb(getColor('slate', 950)),
   '--color-brand': rgb(getColor('indigo', 800)),
   '--color-interactive': rgb(getColor('indigo', 600)),
-  '--color-focus': rgb(getColor('indigo', 500)),
   '--color-interactive-hover': rgb(getColor('indigo', 700)),
   '--color-warning': rgb(getColor('yellow', 100)),
 
@@ -229,7 +228,6 @@ const temporal = plugin(
         ...theme('colors'),
 
         interactive: css('--color-interactive'),
-        focus: css('--color-focus'),
       }),
       boxShadowColor: ({ theme }) => ({
         ...theme('colors'),