chore(ui): minor changes

This commit is contained in:
Ou 2024-10-22 14:54:31 +08:00
parent 8ffd77b2eb
commit 12732dc0c2
4 changed files with 14 additions and 15 deletions

View File

@ -44,9 +44,9 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
ref={ref}
className={clsx(
"flex flex-col h-500px rounded-2xl p-4 cursor-default",
"bg-op-40 backdrop-blur-5 transition-opacity-300",
"backdrop-blur-5 transition-opacity-300",
isDragged && "op-50",
`bg-${sources[id].color}`,
`bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
)}
style={{
transformOrigin: "50% 50%",

View File

@ -136,9 +136,8 @@ function DndWrapper({ items, setItems, children }: PropsWithChildren<DndProps>)
function CardOverlay({ id }: { id: SourceID }) {
return (
<div className={clsx(
"flex flex-col rounded-2xl p-4",
"backdrop-blur-5 bg-op-40",
`bg-${sources[id].color}`,
"flex flex-col rounded-2xl p-4 backdrop-blur-5",
`bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
)}
>
<div className={clsx("flex justify-between mx-2 items-center")}>

View File

@ -52,7 +52,7 @@ export function Menu() {
id="dropdown-menu"
className={clsx([
"w-200px",
"bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
"bg-primary p-2px backdrop-blur-5 bg-op-70! rounded-lg",
])}
initial={{
scale: 0.9,

View File

@ -14,16 +14,13 @@ export default defineConfig({
rules: [
[/^sprinkle-(.+)$/, ([_, d], { theme }) => {
// @ts-expect-error >_<
if (theme.colors[d]) {
// @ts-expect-error >_<
const hex: any = theme.colors[d]?.[400]
const hex: any = theme.colors?.[d]?.[400]
if (hex) {
return {
"background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
}
}
}
}],
[
"font-brand",
@ -35,11 +32,14 @@ export default defineConfig({
],
shortcuts: {
"color-base": "color-neutral-800 dark:color-neutral-300",
"bg-base": "bg-white dark:bg-dark-600",
"bg-base": "bg-zinc-50 dark:bg-dark-600",
"btn": "op50 hover:op85",
},
safelist: [
...["bg", "color", "border", "sprinkle", "shadow"].map(t => [...Object.values(sources)].map(c => `${t}-${c.color}`)).flat(1),
...[...new Set(Object.values(sources).map(k => k.color))].map(k =>
`bg-${k} color-${k} border-${k} sprinkle-${k} shadow-${k}
bg-${k}-500 color-${k}-500
dark:bg-${k} dark:color-${k}`.trim().split(/\s+/)).flat(),
],
extendTheme: (theme) => {
// @ts-expect-error >_<