Tweaked buttons for accessibility

This commit is contained in:
2026-07-20 09:36:09 -04:00
parent 03b5bea72d
commit cae2997009
3 changed files with 6 additions and 2 deletions

View File

@@ -4,6 +4,7 @@ export const BADGE_GREEN = "green";
export const BADGE_RED = "red";
export const BADGE_BLUE = "blue";
export const BADGE_AMBER = "amber";
export const BADGE_YELLOW = "yellow";
export const BADGE_NEUTRAL = "neutral";
export const BADGE_MUTED = "muted";
@@ -14,6 +15,7 @@ const COLORS: Record<string, string> = {
"red": "text-white bg-red-700",
"blue": "text-white bg-sky-800",
"amber": "text-white bg-amber-700",
"yellow": "text-black bg-yellow-500",
"neutral": "text-white bg-neutral-500",
"muted": "text-ink-faint bg-transparent",
};

View File

@@ -13,6 +13,8 @@ export const BUTTON_COLOR_DARK_RED = "dark-red";
export const BUTTON_COLOR_YELLOW = "yellow";
export const BUTTON_COLOR_ORANGE = "orange";
export const BUTTON_COLOR_PRIMARY = "primary";
export const BUTTON_COLOR_SECONDARY = "secondary";
export const BUTTON_COLOR_GHOST = "ghost";
const BASE = "inline-flex items-center justify-center gap-2 cursor-pointer text-sm font-normal rounded-default transition disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-current focus-visible:outline-offset-2";
@@ -31,7 +33,7 @@ const COLORS: Record<string, string> = {
"red": "shadow-xs bg-red-700 text-white hover:bg-red-800",
"dark-red": "shadow-xs bg-red-900 text-white hover:bg-red-950",
"yellow": "shadow-xs bg-yellow-700 text-white hover:bg-yellow-800",
"orange": "shadow-xs bg-orange-600 text-white hover:bg-orange-700",
"orange": "shadow-xs bg-orange-700 text-white hover:bg-orange-800",
"primary": "shadow-xs bg-primary text-white hover:bg-primary-hover",
"secondary": "shadow-none bg-surface-raised text-ink border border-line-strong hover:bg-surface-strong",
"ghost": "shadow-none bg-transparent text-ink-soft border-none hover:bg-surface-raised",

View File

@@ -810,7 +810,7 @@ export function FormSearchableSelect(props: {ref: string} & FormComboboxProps) {
placeholder={local.searchPlaceholder || "Search..."}
class="w-full p-2 border-0 border-b border-b-neutral-200 text-sm outline-hidden focus:bg-sky-50"
/>
<div class="max-h-[200px] overflow-y-auto">
<div class="max-h-50 overflow-y-auto">
<Show when={filteredOptions().length === 0}>
<div class={DROPDOWN_NO_RESULTS}>No options found</div>
</Show>