usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-10 17:31:33 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: tweak form style

Browse source
This commit is contained in:
Johnny 2025-07-07 22:33:49 +08:00
parent 239671eb87
commit 12fdf5292d
4 changed files with 3 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/ui/dialog.tsx
View file

@ -77,7 +77,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }), className)} {...props}>
{children}
{showCloseButton && (
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>

2
web/src/components/ui/sheet.tsx
View file

@ -75,7 +75,7 @@ const SheetContent = React.forwardRef<
{...props}
>
{children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<SheetPrimitive.Close className="ring-offset-background data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<XIcon className="size-5" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>

2
web/src/index.css
View file

@ -12,7 +12,7 @@
@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border outline-none ring-0;
}
body {
@apply bg-background text-foreground;

10
web/src/themes/COLOR_GUIDE.md
View file

@ -83,14 +83,12 @@ The color system supports both light and dark themes automatically through CSS c
| `--accent-foreground` | Dark gray | Light gray | Text on accent backgrounds |
| `--border` | Medium light | Medium dark | Dividers, input borders |
| `--input` | Medium light | Medium dark | Form input backgrounds |
| `--ring` | Blue | Blue | Focus outlines |
**When to use:**
- Hover states (`--accent`)
- Form field borders (`--border`)
- Input field backgrounds (`--input`)
- Focus indicators (`--ring`)
### ⚠️ Feedback Colors
@ -134,7 +132,6 @@ The color system supports both light and dark themes automatically through CSS c
| `--sidebar-accent` | Sidebar hover states |
| `--sidebar-accent-foreground` | Text on sidebar hover states |
| `--sidebar-border` | Sidebar dividers |
| `--sidebar-ring` | Sidebar focus indicators |
## Best Practices
@ -149,7 +146,6 @@ The color system supports both light and dark themes automatically through CSS c
```
2. **Use semantic meaning:**
- Primary = main actions
- Secondary = supporting actions
- Destructive = dangerous/delete actions
@ -170,7 +166,6 @@ The color system supports both light and dark themes automatically through CSS c
```
2. **Don't use colors outside their intended purpose:**
- Don't use destructive colors for positive actions
- Don't use primary colors for secondary elements
@ -196,7 +191,6 @@ document.documentElement.classList.toggle("dark");
## Accessibility
- All color pairs meet WCAG contrast requirements
- Focus indicators use `--ring` for consistency
- Color is never the only means of conveying information
## Implementation Examples
@ -235,10 +229,6 @@ document.documentElement.classList.toggle("dark");
color: var(--foreground);
border: 1px solid var(--border);
}
.input:focus {
outline: 2px solid var(--ring);
}
```
### Cards and Containers