usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-11 01:41:58 +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}> <DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }), className)} {...props}>
{children} {children}
{showCloseButton && ( {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 /> <XIcon />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>

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

@ -75,7 +75,7 @@ const SheetContent = React.forwardRef<
{...props} {...props}
> >
{children} {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" /> <XIcon className="size-5" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</SheetPrimitive.Close> </SheetPrimitive.Close>

2
web/src/index.css
View file

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