Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: dark mode fixes #55

Merged
merged 4 commits into from
Oct 31, 2024
Merged

Fix: dark mode fixes #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ed3386
fix: dark mode fixes
cmgriffing Oct 28, 2024
1f33a10
Merge branch 'main' of https://github.com/cmgriffing/giffium into fix…
cmgriffing Oct 28, 2024
46a9f23
fix: finishing touches on dark/light buf fixes
cmgriffing Oct 31, 2024
1e64b2f
Merge branch 'main' of https://github.com/cmgriffing/giffium into fix…
cmgriffing Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions playgrounds/app/src/components/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
import { MagicMoveElement } from 'shiki-magic-move/types'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
Expand All @@ -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,
Expand Down Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
67 changes: 56 additions & 11 deletions playgrounds/app/src/components/ui/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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 }
6 changes: 3 additions & 3 deletions playgrounds/app/src/components/ui/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand Down
Loading
Loading