Audit check box (#1952)

* border * add check box colors * make border standard * Update src/lib/holocene/checkbox.svelte Co-authored-by: Laura Whitaker <[email protected]> * Update src/lib/holocene/checkbox.svelte Co-authored-by: Laura Whitaker <[email protected]> * stopping point * try to fix styles * Audit checkbox states * Use opacity for focus color instead Co-authored-by: Ross Edfort <[email protected]> --------- Co-authored-by: Laura Whitaker <[email protected]> Co-authored-by: Ross Edfort <[email protected]>
temporalio · Apr 16, 2024 · 5b416c0 · 5b416c0
1 parent 2aea109
commit 5b416c0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'),