summaryrefslogtreecommitdiff
path: root/apps/web/src/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components/ui')
-rw-r--r--apps/web/src/components/ui/button.tsx7
-rw-r--r--apps/web/src/components/ui/color-picker.tsx19
-rw-r--r--apps/web/src/components/ui/command.tsx2
-rw-r--r--apps/web/src/components/ui/dropdown-menu.tsx2
-rw-r--r--apps/web/src/components/ui/font-picker.tsx6
-rw-r--r--apps/web/src/components/ui/input-with-back.tsx4
-rw-r--r--apps/web/src/components/ui/label.tsx2
-rw-r--r--apps/web/src/components/ui/popover.tsx1
-rw-r--r--apps/web/src/components/ui/select.tsx6
-rw-r--r--apps/web/src/components/ui/slider.tsx2
-rw-r--r--apps/web/src/components/ui/split-button.tsx4
-rw-r--r--apps/web/src/components/ui/tabs.tsx2
12 files changed, 34 insertions, 23 deletions
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 6c063eff..2fc2c2e6 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
variants: {
variant: {
default:
- "bg-primary text-primary-foreground hover:bg-primary-hover",
+ "bg-primary text-primary-foreground hover:bg-primary/90",
background:
"bg-background text-foreground hover:bg-background/90",
foreground:
@@ -22,13 +22,14 @@ const buttonVariants = cva(
outline:
"border border-border bg-transparent hover:bg-accent/50",
secondary:
- "bg-secondary text-secondary-foreground hover:bg-foreground/15 border border-input",
+ "bg-secondary text-secondary-foreground border border-secondary-border",
text: "bg-transparent rounded-none opacity-100 hover:opacity-75",
+ ghost: "bg-transparent hover:bg-accent",
link: "text-primary underline-offset-4 hover:underline !p-0 !h-auto",
},
size: {
default: "h-9.5 px-4 py-2",
- sm: "h-8 px-3 text-xs",
+ sm: "h-8 p-1 px-2 text-xs rounded-sm",
lg: "h-10 p-5 px-6",
icon: "size-7",
text: "p-0",
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index a57a86e0..0ea1a14d 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -6,6 +6,7 @@ import { Input } from "./input";
interface ColorPickerProps {
value?: string;
onChange?: (value: string) => void;
+ onChangeEnd?: (value: string) => void;
className?: string;
containerRef?: React.RefObject<HTMLDivElement | null>;
}
@@ -86,7 +87,7 @@ const hsvToHex = (h: number, s: number, v: number) => {
};
const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
- ({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
+ ({ className, value = "FFFFFF", onChange, onChangeEnd, containerRef, ...props }, ref) => {
const [isOpen, setIsOpen] = useState(false);
const [isDragging, setIsDragging] = useState<"saturation" | "hue" | null>(
null,
@@ -102,6 +103,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
const saturationRef = useRef<HTMLButtonElement>(null);
const hueRef = useRef<HTMLButtonElement>(null);
const triggerRef = useRef<HTMLButtonElement>(null);
+ const latestDragColorRef = useRef<string | null>(null);
const [h, s, v] = hexToHsv(value);
const displayHue = s > 0 ? h : internalHue;
@@ -144,6 +146,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
const newS = x;
const newV = 1 - y;
const newHex = hsvToHex(displayHue, newS, newV);
+ latestDragColorRef.current = newHex;
onChange?.(newHex);
}
@@ -157,12 +160,17 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
setInternalHue(newH);
if (s > 0) {
const newHex = hsvToHex(newH, s, v);
+ latestDragColorRef.current = newHex;
onChange?.(newHex);
}
}
};
const handleMouseUp = () => {
+ if (latestDragColorRef.current !== null && onChangeEnd) {
+ onChangeEnd(latestDragColorRef.current);
+ latestDragColorRef.current = null;
+ }
setIsDragging(null);
};
@@ -187,6 +195,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
const newS = x;
const newV = 1 - y;
const newHex = hsvToHex(displayHue, newS, newV);
+ latestDragColorRef.current = newHex;
onChange?.(newHex);
};
@@ -201,6 +210,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
setInternalHue(newH);
if (s > 0) {
const newHex = hsvToHex(newH, s, v);
+ latestDragColorRef.current = newHex;
onChange?.(newHex);
}
};
@@ -235,14 +245,14 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
<div
ref={ref}
className={cn(
- "bg-panel-accent flex h-9 items-center gap-2 rounded-full px-[0.45rem]",
+ "bg-accent flex h-8 items-center gap-2 rounded-md px-[0.45rem]",
className,
)}
{...props}
>
<button
ref={triggerRef}
- className="size-6 cursor-pointer rounded-full hover:ring-2 hover:ring-white/20"
+ className="size-4.5 cursor-pointer border rounded-sm hover:ring-2 hover:ring-white/20"
style={{ backgroundColor: `#${value}` }}
type="button"
onClick={() => {
@@ -259,7 +269,8 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
/>
<div className="flex flex-1 items-center">
<Input
- className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0"
+ className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0 uppercase"
+ size="sm"
containerClassName="w-full"
value={inputValue}
onChange={handleInputChange}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 0f77a4ce..f5d96125 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -114,7 +114,7 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
- "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ "data-[selected=true]:bg-popover-hover data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className,
)}
{...props}
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index a7736e6e..d8a9f594 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const dropdownMenuItemVariants = cva(
- "relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+ "relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 1806b48a..4b8e364a 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -6,6 +6,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
+import { cn } from "@/utils/ui";
interface FontPickerProps {
defaultValue?: FontFamily;
@@ -21,16 +22,15 @@ export function FontPicker({
return (
<Select defaultValue={defaultValue} onValueChange={onValueChange}>
<SelectTrigger
- className={`bg-panel-accent h-9 w-full text-base ${className || ""}`}
+ className={cn("w-full", className)}
>
- <SelectValue placeholder="Select a font" className="text-sm" />
+ <SelectValue placeholder="Select a font" />
</SelectTrigger>
<SelectContent>
{FONT_OPTIONS.map((font) => (
<SelectItem
key={font.value}
value={font.value}
- className="text-sn"
style={{ fontFamily: font.value }}
>
{font.label}
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
index 392ab3c3..f8265779 100644
--- a/apps/web/src/components/ui/input-with-back.tsx
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -55,7 +55,7 @@ export function InputWithBack({
>
<Button
variant="outline"
- className="bg-panel-accent !size-9 rounded-full"
+ className="bg-accent !size-9 rounded-full"
>
<ArrowLeft />
</Button>
@@ -77,7 +77,7 @@ export function InputWithBack({
<Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
<Input
placeholder={placeholder}
- className="bg-panel-accent w-full pl-9"
+ className="bg-accent w-full pl-9"
value={value}
onChange={(e) => onChange?.(e.target.value)}
/>
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 0ea7be03..a9a5166f 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/ui";
const labelVariants = cva(
- "text-sm text-muted-foreground font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+ "text-xs text-muted-foreground font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
);
const Label = React.forwardRef<
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 34738303..36ae5a69 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -2,7 +2,6 @@
import * as React from "react";
import { Popover as PopoverPrimitive } from "radix-ui";
-
import { cn } from "@/utils/ui";
const Popover = PopoverPrimitive.Root;
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 79462d4a..fd9c7ac5 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -14,7 +14,7 @@ const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const selectItemVariants = cva(
- "relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+ "relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
@@ -35,7 +35,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
- "bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-7 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+ "bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-8 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"focus:border-primary focus:ring-4 focus:ring-primary/10 border-transparent transition-none",
className,
)}
@@ -159,7 +159,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
- className={cn("bg-border/60 mx-1 my-2 h-px", className)}
+ className={cn("bg-border mx-1 my-2 h-px", className)}
{...props}
/>
));
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index 994159a1..57ddbcf0 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -17,7 +17,7 @@ const Slider = React.forwardRef<
)}
{...props}
>
- <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+ <SliderPrimitive.Track className="bg-accent relative h-1.5 w-full grow overflow-hidden rounded-full">
<SliderPrimitive.Range className="bg-primary absolute h-full" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx
index 26e54cab..aa8b331a 100644
--- a/apps/web/src/components/ui/split-button.tsx
+++ b/apps/web/src/components/ui/split-button.tsx
@@ -18,7 +18,7 @@ const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
<div
ref={ref}
className={cn(
- "border-input bg-panel-accent inline-flex h-7 overflow-hidden rounded-lg border",
+ "border-input bg-accent inline-flex h-7 overflow-hidden rounded-lg border",
className,
)}
{...props}
@@ -39,7 +39,7 @@ const SplitButtonSide = forwardRef<
ref={ref}
variant="text"
className={cn(
- "bg-panel-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",
+ "bg-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",
onClick
? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"
: "cursor-default select-text",
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index 3668477c..d2844b63 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
- "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-panel-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+ "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
className,
)}
{...props}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 08:41:28 +0000