External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 2025-05-22-Uvv4

Browse Source
This commit is contained in:
pluja
2025-05-22 19:19:07 +00:00
parent a69c0aeed4
commit e462421b10
9 changed files with 224 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Header.astro
View File

@@ -119,7 +119,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
<Tooltip
as="a"
href="/admin"
class="text-red-500 transition-colors hover:text-red-400"
class="flex h-full items-center text-red-500 transition-colors hover:text-red-400"
transition:name="header-admin-link"
text="Admin Dashboard"
position="left"

6
web/src/components/InputText.astro
View File

@@ -10,7 +10,9 @@ import InputWrapper from './InputWrapper.astro'
import type { ComponentProps, HTMLAttributes } from 'astro/types'
type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
inputProps?: Omit<HTMLAttributes<'input'>, 'name'>
inputProps?: Omit<HTMLAttributes<'input'>, 'name'> & {
'transition:persist'?: boolean
}
inputIcon?: string
inputIconClass?: string
}
@@ -26,7 +28,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
inputIcon ? (
<div class="relative">
<input
transition:persist
transition:persist={inputProps?.['transition:persist'] === false ? undefined : true}
{...omit(inputProps, ['class', 'id', 'name'])}
id={inputId}
class={cn(

27
web/src/components/InputWrapper.astro
View File

@@ -18,6 +18,7 @@ type Props = HTMLAttributes<'div'> & {
error?: string[] | string
icon?: string
inputId?: string
hideLabel?: boolean
}
const {
@@ -30,6 +31,7 @@ const {
icon,
class: className,
inputId,
hideLabel,
...htmlProps
} = Astro.props
@@ -37,17 +39,20 @@ const hasError = !!error && error.length > 0
---
<fieldset class={cn('space-y-1', className)} {...htmlProps}>
<div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
<legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
{icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
<label for={inputId}>{label}</label>{required && '*'}
</legend>
{
!!descriptionLabel && (
<span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
)
}
</div>
{
!hideLabel && (
<div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
<legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
{icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
<label for={inputId}>{label}</label>
{required && '*'}
</legend>
{!!descriptionLabel && (
<span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
)}
</div>
)
}
<slot />

4
web/src/components/PillsRadioGroup.astro
View File

@@ -9,10 +9,11 @@ type Props = HTMLAttributes<'div'> & {
value: HTMLAttributes<'input'>['value']
label: string
}[]
inputProps?: Omit<HTMLAttributes<'input'>, 'checked' | 'class' | 'name' | 'type' | 'value'>
selectedValue?: string | null
}
const { name, options, selectedValue, class: className, ...rest } = Astro.props
const { name, options, selectedValue, inputProps, class: className, ...rest } = Astro.props
---
<div
@@ -31,6 +32,7 @@ const { name, options, selectedValue, class: className, ...rest } = Astro.props
value={option.value}
checked={selectedValue === option.value}
class="peer sr-only"
{...inputProps}
/>
<span class="peer-checked:bg-night-400 inline-block cursor-pointer px-1.5 py-0.5 text-white peer-checked:text-green-500">
{option.label}

35
web/src/components/ServicesFilters.astro
View File

@@ -34,7 +34,8 @@ const {
<form
method="GET"
hx-get={Astro.url.pathname}
hx-trigger={`input delay:500ms from:input[type='text'], keyup[key=='Enter'], change from:input:not([data-show-more-input], #${showFiltersId}), change from:select`}
hx-trigger={// NOTE: I need to do the [data-trigger-on-change] hack, because HTMX doesnt suport the :not() selector, and I need to exclude the Show more buttons, and not trigger for inputs outside the form
"input delay:500ms from:([data-services-filters-form] input[type='text']), keyup[key=='Enter'], change from:([data-services-filters-form] [data-trigger-on-change])"}
hx-target={`#${searchResultsId}`}
hx-select={`#${searchResultsId}`}
hx-push-url="true"
@@ -44,7 +45,11 @@ const {
.filter((verification) => verification.default)
.map((verification) => verification.slug)}
{...formProps}
class={cn('', className)}
class={cn(
// Check the scam filter when there is a text quey and the user has checked verified and approved
'has-[input[name=q]:not(:placeholder-shown)]:has-[&_input[name=verification][value=verified]:checked]:has-[&_input[name=verification][value=approved]:checked]:[&_input[name=verification][value=scam]]:checkbox-force-checked',
className
)}
>
<div class="mb-4 flex items-center justify-between">
<h2 class="font-title text-xl text-green-500">FILTERS</h2>
@@ -64,6 +69,7 @@ const {
name="sort"
id="sort"
class="border-night-600 bg-night-900 w-full rounded-md border p-2 text-white focus:border-green-500 focus:outline-hidden"
data-trigger-on-change
>
{
options.sort.map((option) => (
@@ -108,6 +114,7 @@ const {
name="categories"
value={category.slug}
checked={category.checked}
data-trigger-on-change
/>
<span class="peer-checked:font-bold">
{category.name}
@@ -121,13 +128,7 @@ const {
{
options.categories.filter((category) => category.showAlways).length < options.categories.length && (
<>
<input
type="checkbox"
id="show-more-categories"
class="peer sr-only"
hx-preserve
data-show-more-input
/>
<input type="checkbox" id="show-more-categories" class="peer sr-only" hx-preserve />
<label
for="show-more-categories"
class="peer-focus-visible:ring-offset-night-700 mt-2 block cursor-pointer rounded-sm text-sm text-green-500 peer-checked:hidden peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
@@ -158,6 +159,7 @@ const {
name="verification"
value={verification.slug}
checked={filters.verification.includes(verification.value)}
data-trigger-on-change
/>
<Icon name={verification.icon} class={cn('size-4', verification.classNames.icon)} />
<span class="peer-checked:font-bold">{verification.labelShort}</span>
@@ -176,6 +178,9 @@ const {
options={options.modeOptions}
selectedValue={filters['currency-mode']}
class="-my-2"
inputProps={{
'data-trigger-on-change': true,
}}
/>
</div>
<div>
@@ -188,6 +193,7 @@ const {
name="currencies"
value={currency.slug}
checked={filters.currencies?.some((id) => id === currency.id)}
data-trigger-on-change
/>
<Icon name={currency.icon} class="size-4" />
<span class="peer-checked:font-bold">{currency.name}</span>
@@ -210,6 +216,7 @@ const {
name="networks"
value={network.slug}
checked={filters.networks?.some((slug) => slug === network.slug)}
data-trigger-on-change
/>
<Icon name={network.icon} class="size-4" />
<span class="peer-checked:font-bold">{network.name}</span>
@@ -233,6 +240,7 @@ const {
id="max-kyc"
value={filters['max-kyc'] ?? 4}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="text-day-400 mt-1 flex justify-between px-1 text-xs">
@@ -261,6 +269,7 @@ const {
id="user-rating"
value={filters['user-rating']}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="text-day-400 mt-1 flex justify-between px-2 text-xs">
@@ -289,6 +298,9 @@ const {
options={options.modeOptions}
selectedValue={filters['attribute-mode']}
class="-my-2"
inputProps={{
'data-trigger-on-change': true,
}}
/>
</div>
{
@@ -318,6 +330,7 @@ const {
value=""
checked={!attribute.value}
aria-label="Ignore"
data-trigger-on-change
/>
<input
type="radio"
@@ -327,6 +340,7 @@ const {
class="peer/yes sr-only"
checked={attribute.value === 'yes'}
aria-label="Include"
data-trigger-on-change
/>
<input
type="radio"
@@ -336,6 +350,7 @@ const {
class="peer/no sr-only"
checked={attribute.value === 'no'}
aria-label="Exclude"
data-trigger-on-change
/>
<div class="pointer-events-none absolute inset-y-0 -left-[2px] hidden w-[calc(var(--spacing)*4.5*2+1px)] rounded-md border-2 border-blue-500 peer-focus-visible/empty:block peer-focus-visible/no:block peer-focus-visible/yes:block" />
@@ -420,7 +435,6 @@ const {
id={`show-more-attributes-${category}`}
class="peer sr-only"
hx-preserve
data-show-more-input
/>
<label
for={`show-more-attributes-${category}`}
@@ -455,6 +469,7 @@ const {
id="min-score"
value={filters['min-score']}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="-mx-1.5 mt-2 flex justify-between px-1">

20
web/src/components/ServicesSearchResults.astro
View File

@@ -19,7 +19,7 @@ type Props = HTMLAttributes<'div'> & {
pageSize: number
sortSeed?: string
filters: ServicesFiltersObject
hadToIncludeCommunityContributed: boolean
includeScams: boolean
}
const {
@@ -31,14 +31,15 @@ const {
sortSeed,
class: className,
filters,
hadToIncludeCommunityContributed,
includeScams,
...divProps
} = Astro.props
const hasScams = filters.verification.includes('VERIFICATION_FAILED')
const hasCommunityContributed =
const hasScams =
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
filters.verification.includes('COMMUNITY_CONTRIBUTED') || hadToIncludeCommunityContributed
filters.verification.includes('VERIFICATION_FAILED') || includeScams
const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')
const totalPages = Math.ceil(total / pageSize) || 1
---
@@ -66,7 +67,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
<Icon name="ri:alert-fill" class="-mr-1 inline-block size-4 text-red-500" />
<Icon name="ri:question-line" class="mr-2 inline-block size-4 text-yellow-500" />
Showing SCAM and unverified community-contributed services.
{hadToIncludeCommunityContributed && 'Because there were no other results.'}
{includeScams && 'Because there is a text query.'}
</div>
)
}
@@ -75,7 +76,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
hasScams && !hasCommunityContributed && (
<div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
<Icon name="ri:alert-fill" class="mr-2 inline-block size-4 text-red-500" />
Showing SCAM services!
{includeScams ? 'Showing SCAM services because there is a text query.' : 'Showing SCAM services!'}
</div>
)
}
@@ -84,10 +85,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
!hasScams && hasCommunityContributed && (
<div class="font-title mb-6 rounded-lg border border-yellow-500/30 bg-yellow-950 p-4 text-sm text-yellow-500">
<Icon name="ri:question-line" class="mr-2 inline-block size-4" />
{hadToIncludeCommunityContributed
? 'Showing unverified community-contributed services, because there were no other results. Some might be scams.'
: 'Showing unverified community-contributed services, some might be scams.'}
Showing unverified community-contributed services, some might be scams.
</div>
)
}

2
web/src/pages/events.astro
View File

@@ -169,7 +169,7 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
'[&:has(~[data-has-default-filters="true"])_[data-clear-filters-button]]:hidden'
)}
hx-get={Astro.url.pathname}
hx-trigger="input from:input, keyup[key=='Enter'], change from:select"
hx-trigger="input from:find input, keyup[key=='Enter'], change from:find select"
hx-target="#events-list-container"
hx-select="#events-list-container"
hx-swap="outerHTML"

275
web/src/pages/index.astro
View File

@@ -1,10 +1,11 @@
---
import { ServiceVisibility } from '@prisma/client'
import { z } from 'astro:schema'
import { groupBy, orderBy } from 'lodash-es'
import { groupBy, omit, orderBy, uniq } from 'lodash-es'
import seedrandom from 'seedrandom'
import Button from '../components/Button.astro'
import InputText from '../components/InputText.astro'
import Pagination from '../components/Pagination.astro'
import ServiceFiltersPill from '../components/ServiceFiltersPill.astro'
import ServicesFilters from '../components/ServicesFilters.astro'
@@ -26,6 +27,7 @@ import {
import BaseLayout from '../layouts/BaseLayout.astro'
import { areEqualArraysWithoutOrder, zodEnumFromConstant } from '../lib/arrays'
import { parseIntWithFallback } from '../lib/numbers'
import { areEqualObjectsWithoutOrder } from '../lib/objects'
import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
import { prisma } from '../lib/prisma'
import { makeSortSeed } from '../lib/sortSeed'
@@ -130,9 +132,12 @@ const attributeOptions = [
prefix: string
}[]
const ignoredKeysForDefaultData = ['sort-seed']
const {
data: filters,
hasDefaultData: hasDefaultFilters,
defaultData: defaultFilters,
redirectUrl,
} = zodParseQueryParamsStoringErrors(
{
@@ -164,7 +169,7 @@ const {
},
Astro,
{
ignoredKeysForDefaultData: ['sort-seed'],
ignoredKeysForDefaultData,
cleanUrl: {
removeUneededObjectParams: true,
removeParams: {
@@ -181,46 +186,63 @@ const {
}
)
const hasDefaultFiltersIgnoringQ = areEqualObjectsWithoutOrder(
omit(filters, [...ignoredKeysForDefaultData, 'q']),
omit(defaultFilters, [...ignoredKeysForDefaultData, 'q'])
)
if (redirectUrl) return Astro.redirect(redirectUrl.toString())
const includeScams =
!!filters.q &&
(areEqualArraysWithoutOrder(filters.verification, ['VERIFICATION_SUCCESS', 'APPROVED']) ||
areEqualArraysWithoutOrder(filters.verification, [
'VERIFICATION_SUCCESS',
'APPROVED',
'COMMUNITY_CONTRIBUTED',
]))
export type ServicesFiltersObject = typeof filters
const [categories, [services, totalServices, hadToIncludeCommunityContributed]] =
await Astro.locals.banners.tryMany([
[
'Unable to load category filters.',
() =>
prisma.category.findMany({
select: {
name: true,
slug: true,
icon: true,
_count: {
select: {
services: true,
},
const [categories, [services, totalServices]] = await Astro.locals.banners.tryMany([
[
'Unable to load category filters.',
() =>
prisma.category.findMany({
select: {
name: true,
slug: true,
icon: true,
_count: {
select: {
services: true,
},
},
},
}),
],
[
'Unable to load services.',
async () => {
const groupedAttributes = groupBy(
Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
const id = parseIntWithFallback(key)
if (id === null) return []
return [{ id, value }]
}),
],
[
'Unable to load services.',
async () => {
const groupedAttributes = groupBy(
Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
const id = parseIntWithFallback(key)
if (id === null) return []
return [{ id, value }]
}),
'value'
)
const where = {
'value'
)
const [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
where: {
listedAt: {
lte: new Date(),
},
categories: filters.categories.length ? { some: { slug: { in: filters.categories } } } : undefined,
verificationStatus: {
in: filters.verification,
in: includeScams
? uniq([...filters.verification, 'VERIFICATION_FAILED'] as const)
: filters.verification,
},
serviceVisibility: ServiceVisibility.PUBLIC,
overallScore: { gte: filters['min-score'] },
@@ -308,108 +330,79 @@ const [categories, [services, totalServices, hadToIncludeCommunityContributed]]
]
: []),
],
} as const satisfies Prisma.ServiceWhereInput
const select = {
},
select: {
id: true,
...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
(typeof sortOptions)[number]['orderBy']['key'],
true
>),
} as const satisfies Prisma.ServiceSelect
},
})
let [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
where,
select,
})
let hadToIncludeCommunityContributed = false
const rng = seedrandom(filters['sort-seed'])
const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
if (
totalServices === 0 &&
areEqualArraysWithoutOrder(where.verificationStatus.in, ['VERIFICATION_FAILED', 'APPROVED'])
) {
const [unsortedServiceCommunityServices, totalCommunityServices] =
await prisma.service.findManyAndCount({
where: {
...where,
verificationStatus: {
...where.verificationStatus,
in: [...where.verificationStatus.in, 'COMMUNITY_CONTRIBUTED'],
},
},
select,
})
const sortedServices = orderBy(
unsortedServices,
[selectedSort.orderBy.key, () => rng()],
[selectedSort.orderBy.direction, 'asc']
).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
if (totalCommunityServices !== 0) {
hadToIncludeCommunityContributed = true
unsortedServices = unsortedServiceCommunityServices
totalServices = totalCommunityServices
}
}
const rng = seedrandom(filters['sort-seed'])
const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
const sortedServices = orderBy(
unsortedServices,
[selectedSort.orderBy.key, () => rng()],
[selectedSort.orderBy.direction, 'asc']
).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
const unsortedServicesWithInfo = await prisma.service.findMany({
where: {
id: {
in: sortedServices.map((service) => service.id),
},
const unsortedServicesWithInfo = await prisma.service.findMany({
where: {
id: {
in: sortedServices.map((service) => service.id),
},
select: {
name: true,
slug: true,
description: true,
overallScore: true,
privacyScore: true,
trustScore: true,
kycLevel: true,
imageUrl: true,
verificationStatus: true,
acceptedCurrencies: true,
attributes: {
select: {
attribute: {
select: {
id: true,
slug: true,
title: true,
category: true,
type: true,
},
},
select: {
name: true,
slug: true,
description: true,
overallScore: true,
privacyScore: true,
trustScore: true,
kycLevel: true,
imageUrl: true,
verificationStatus: true,
acceptedCurrencies: true,
attributes: {
select: {
attribute: {
select: {
id: true,
slug: true,
title: true,
category: true,
type: true,
},
},
},
categories: {
select: {
name: true,
icon: true,
},
},
categories: {
select: {
name: true,
icon: true,
},
},
})
},
})
const sortedServicesWithInfo = orderBy(
unsortedServicesWithInfo,
[
selectedSort.orderBy.key,
// Now we can shuffle indeternimistically, because the pagination was already applied
() => Math.random(),
],
[selectedSort.orderBy.direction, 'asc']
)
const sortedServicesWithInfo = orderBy(
unsortedServicesWithInfo,
[
selectedSort.orderBy.key,
// Now we can shuffle indeternimistically, because the pagination was already applied
() => Math.random(),
],
[selectedSort.orderBy.direction, 'asc']
)
return [sortedServicesWithInfo, totalServices, hadToIncludeCommunityContributed] as const
},
[[] as [], 0, false] as const,
],
])
return [sortedServicesWithInfo, totalServices] as const
},
[[] as [], 0, false] as const,
],
])
const attributes = await Astro.locals.banners.try(
'Unable to load attribute filters.',
@@ -488,7 +481,8 @@ const filtersOptions = {
export type ServicesFiltersOptions = typeof filtersOptions
//
const searchResultsId = 'search-results'
const showFiltersId = 'show-filters'
---
<BaseLayout
@@ -509,7 +503,33 @@ export type ServicesFiltersOptions = typeof filtersOptions
class='[&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-night-700 flex items-stretch sm:hidden [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-2 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-green-500 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-2'
>
{
!hasDefaultFilters ? (
hasDefaultFilters || hasDefaultFiltersIgnoringQ ? (
<form
method="GET"
hx-get={Astro.url.pathname}
hx-trigger="input delay:500ms, keyup[key=='Enter']"
hx-target={`#${searchResultsId}`}
hx-select={`#${searchResultsId}`}
hx-push-url="true"
hx-indicator="#search-indicator"
class="contents"
>
<InputText
name="q"
label="Search..."
hideLabel
inputIcon="ri:search-line"
inputIconClass="text-day-500 size-4.5"
inputProps={{
placeholder: 'Search',
value: filters.q,
class: 'bg-night-800 border-night-500',
'transition:persist': false,
}}
class="mr-4 flex-1"
/>
</form>
) : (
<div class="-ml-4 flex flex-1 items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4">
{filters.q && (
<ServiceFiltersPill text={`"${filters.q}"`} searchParamName="q" searchParamValue={filters.q} />
@@ -618,12 +638,19 @@ export type ServicesFiltersOptions = typeof filtersOptions
)
})}
</div>
) : (
<div class="text-day-500 flex flex-1 items-center">No filters</div>
)
}
<Button as="label" for="show-filters" label="Filters" icon="ri:filter-3-line" />
<Button
as="label"
for="show-filters"
label="Filters"
icon="ri:filter-3-line"
class="max-2xs:w-9 max-2xs:px-0"
classNames={{
label: 'max-2xs:hidden',
}}
/>
</div>
<input
@@ -637,8 +664,8 @@ export type ServicesFiltersOptions = typeof filtersOptions
class="bg-night-700 fixed top-0 left-0 z-50 hidden h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 max-sm:peer-checked:block sm:relative sm:z-auto sm:block sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
>
<ServicesFilters
searchResultsId="search-results"
showFiltersId="show-filters"
searchResultsId={searchResultsId}
showFiltersId={showFiltersId}
filters={{
...filters,
'sort-seed': makeSortSeed(),
@@ -656,7 +683,7 @@ export type ServicesFiltersOptions = typeof filtersOptions
pageSize={PAGE_SIZE}
sortSeed={filters['sort-seed']}
filters={filters}
hadToIncludeCommunityContributed={hadToIncludeCommunityContributed}
includeScams={includeScams}
/>
</div>
{

23
web/src/styles/global.css
View File

@@ -93,15 +93,20 @@
--color-night-950: oklch(11.97% 0.004 145.32);
}
@layer utilities {
.text-shadow-glow {
text-shadow:
0 0 16px color-mix(in oklab, currentColor 30%, transparent),
0 0 4px color-mix(in oklab, currentColor 60%, transparent);
}
.drop-shadow-glow {
filter: drop-shadow(0 0 16px color-mix(in oklab, currentColor 30%, transparent))
drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
@utility text-shadow-glow {
text-shadow:
0 0 16px color-mix(in oklab, currentColor 30%, transparent),
0 0 4px color-mix(in oklab, currentColor 60%, transparent);
}
@utility drop-shadow-glow {
filter: drop-shadow(0 0 16px color-mix(in oklab, currentColor 30%, transparent))
drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
}
@utility checkbox-force-checked {
&:not(:checked) {
@apply border-transparent! bg-current/50!;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
}