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} ref={ref}
className={clsx( className={clsx(
"flex flex-col h-500px rounded-2xl p-4 cursor-default", "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", isDragged && "op-50",
`bg-${sources[id].color}`, `bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
)} )}
style={{ style={{
transformOrigin: "50% 50%", transformOrigin: "50% 50%",

View File

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

View File

@ -52,7 +52,7 @@ export function Menu() {
id="dropdown-menu" id="dropdown-menu"
className={clsx([ className={clsx([
"w-200px", "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={{ initial={{
scale: 0.9, scale: 0.9,

View File

@ -14,14 +14,11 @@ export default defineConfig({
rules: [ rules: [
[/^sprinkle-(.+)$/, ([_, d], { theme }) => { [/^sprinkle-(.+)$/, ([_, d], { theme }) => {
// @ts-expect-error >_< // @ts-expect-error >_<
if (theme.colors[d]) { const hex: any = theme.colors?.[d]?.[400]
// @ts-expect-error >_< if (hex) {
const hex: any = theme.colors[d]?.[400] return {
if (hex) { "background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
return {
"background-image": `radial-gradient(ellipse 80% 80% at 50% -30%,
rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`, rgba(${hex2rgba(hex)?.join(", ")}, 0.3), rgba(255, 255, 255, 0));`,
}
} }
} }
}], }],
@ -35,11 +32,14 @@ export default defineConfig({
], ],
shortcuts: { shortcuts: {
"color-base": "color-neutral-800 dark:color-neutral-300", "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", "btn": "op50 hover:op85",
}, },
safelist: [ 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) => { extendTheme: (theme) => {
// @ts-expect-error >_< // @ts-expect-error >_<