Tweaked buttons for accessibility
This commit is contained in:
@@ -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",
|
||||
};
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user