Merge pull request #55 from cmgriffing/fix/dark-mode-fixes

Fix: dark mode fixes
cmgriffing · Oct 31, 2024 · 4198b79 · 4198b79
2 parents 81e5205 + 1e64b2f
commit 4198b79
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 111 deletions.
diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
@@ -23,6 +23,7 @@ import {
 import { MagicMoveElement } from 'shiki-magic-move/types'
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuGroupLabel,
@@ -44,7 +45,7 @@ import {
 } from '~/components/ui/slider'
 import clsx from 'clsx'
 import { TbCheck, TbSettings } from 'solid-icons/tb'
-import { Checkbox } from '~/components/ui/checkbox'
+import { SimplerCheckbox } from '~/components/ui/checkbox'
 import { Label } from '~/components/ui/label'
 import {
   Dialog,
@@ -323,9 +324,7 @@ export default function Editor(props: EditorProps) {
                 placeholder="Search a theme..."
                 itemComponent={props => (
                   <ComboboxItem item={props.item}>
-                    <ComboboxItemLabel class="dark:text-black">
-                      {props.item.rawValue}
-                    </ComboboxItemLabel>
+                    <ComboboxItemLabel>{props.item.rawValue}</ComboboxItemLabel>
                     <ComboboxItemIndicator />
                   </ComboboxItem>
                 )}
@@ -372,8 +371,7 @@ export default function Editor(props: EditorProps) {
                     <DropdownMenuSub>
                       <DropdownMenuSubTrigger>Background</DropdownMenuSubTrigger>
                       <DropdownMenuPortal>
-                        <DropdownMenuSubContent class='w-[200px]'>
-
+                        <DropdownMenuSubContent class="w-[200px]">
                           <DropdownMenuSub>
                             <DropdownMenuSubTrigger>Type</DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
@@ -548,7 +546,7 @@ export default function Editor(props: EditorProps) {
                             }}
                           >
                             <Label for="shadow-checkbox">Show Shadow</Label>
-                            <Checkbox id="shadow-checkbox" checked={props.shadowEnabled} />
+                            <SimplerCheckbox id="shadow-checkbox" checked={props.shadowEnabled} />
                           </DropdownMenuItem>
 
                           <DropdownMenuItem

diff --git a/playgrounds/app/src/components/ui/checkbox.tsx b/playgrounds/app/src/components/ui/checkbox.tsx
@@ -1,20 +1,20 @@
-import type { ValidComponent } from "solid-js"
-import { Match, splitProps, Switch } from "solid-js"
+import type { ValidComponent } from 'solid-js'
+import { Match, splitProps, Switch } from 'solid-js'
 
-import * as CheckboxPrimitive from "@kobalte/core/checkbox"
-import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as CheckboxPrimitive from '@kobalte/core/checkbox'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 
-import { cn } from "~/lib/utils"
+import { cn } from '~/lib/utils'
 
-type CheckboxRootProps<T extends ValidComponent = "div"> =
+type CheckboxRootProps<T extends ValidComponent = 'div'> =
   CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined }
 
-const Checkbox = <T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, CheckboxRootProps<T>>
+const Checkbox = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>,
 ) => {
-  const [local, others] = splitProps(props as CheckboxRootProps, ["class"])
+  const [local, others] = splitProps(props as CheckboxRootProps, ['class'])
   return (
-    <CheckboxPrimitive.Root class={cn("items-top group flex space-x-2", local.class)} {...others}>
+    <CheckboxPrimitive.Root class={cn('items-top group flex space-x-2', local.class)} {...others}>
       <CheckboxPrimitive.Input class="peer" />
       <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
         <CheckboxPrimitive.Indicator>
@@ -54,4 +54,49 @@ const Checkbox = <T extends ValidComponent = "div">(
   )
 }
 
-export { Checkbox }
+const SimplerCheckbox = <T extends ValidComponent = 'div'>(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>,
+) => {
+  const [local, others] = splitProps(props as CheckboxRootProps, ['class'])
+  return (
+    <CheckboxPrimitive.Root class={cn('items-top group flex space-x-2', local.class)} {...others}>
+      <CheckboxPrimitive.Input class="peer" />
+      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-black ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:border-white peer-hover:border-white data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-black data-[indeterminate]:bg-black data-[checked]:text-white data-[indeterminate]:text-white">
+        <CheckboxPrimitive.Indicator>
+          <Switch>
+            <Match when={!others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            </Match>
+            <Match when={others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l14 0" />
+              </svg>
+            </Match>
+          </Switch>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox, SimplerCheckbox }
diff --git a/playgrounds/app/src/components/ui/combobox.tsx b/playgrounds/app/src/components/ui/combobox.tsx
@@ -21,7 +21,7 @@ const ComboboxItem = <T extends ValidComponent = 'li'>(
   return (
     <ComboboxPrimitive.Item
       class={cn(
-        'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-100 data-[highlighted]:text-black data-[disabled]:opacity-50',
         local.class,
       )}
       {...others}
@@ -49,7 +49,7 @@ const ComboboxItemIndicator = <T extends ValidComponent = 'div'>(
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          class="size-4 dark:text-black"
+          class="size-4"
         >
           <path d="M5 12l5 5l10 -10" />
         </svg>
@@ -157,7 +157,7 @@ const ComboboxContent = <T extends ValidComponent = 'div'>(
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Content
         class={cn(
-          'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
+          'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 bg-white text-black',
           local.class,
         )}
         {...others}