From 77ed3217079cd19ae8ee26c565bd9a8f34fab2e9 Mon Sep 17 00:00:00 2001 From: oppiliappan Date: Fri, 2 Oct 2026 22:07:06 +0100 Subject: [PATCH] web/ui: give buttons kumo's flat look and a gradient primary Signed-off-by: oppiliappan --- web/src/lib/components/ui/Button.svelte | 60 ++++++++----------------- 1 file changed, 19 insertions(+), 41 deletions(-) diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte index 8d4a5987d..411503b93 100644 --- a/web/src/lib/components/ui/Button.svelte +++ b/web/src/lib/components/ui/Button.svelte @@ -2,6 +2,14 @@ import { getContext, setContext } from "svelte"; import { tv, type VariantProps } from "tailwind-variants"; + const emphasis = [ + "[--btn-from:color-mix(in_oklch,var(--btn-brand),white_15%)] [--btn-highlight:color-mix(in_oklch,var(--btn-brand),white_30%)] [--btn-ring:color-mix(in_oklch,var(--btn-brand),black_10%)]", + "border border-(--btn-ring) bg-(--btn-highlight) bg-linear-to-b from-(--btn-from) to-(--btn-brand) text-white shadow-[inset_0_1px_0_0_var(--btn-highlight)]", + "hover:from-(--btn-highlight) aria-expanded:from-(--btn-highlight)", + "focus-visible:outline-(--btn-brand)", + "disabled:opacity-50 aria-disabled:opacity-50" + ]; + export const button = tv({ base: [ "inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) no-underline select-none [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] [--btn-radius:var(--radius-md)]", @@ -13,19 +21,13 @@ variants: { variant: { default: [ - "border border-border-default bg-background-default text-foreground-default", + "border border-alpha-dark-10 bg-background-default text-foreground-default", "hover:bg-background-inset aria-expanded:bg-background-subtle", "focus-visible:outline-border-focus", "disabled:border-transparent disabled:bg-background-subtle disabled:text-foreground-subtle", "aria-disabled:border-transparent aria-disabled:bg-background-subtle aria-disabled:text-foreground-subtle" ], - primary: [ - "border border-indigo-600 bg-indigo-600 text-foreground-on-emphasis", - "hover:bg-indigo-600 aria-expanded:bg-indigo-600", - "focus-visible:outline-indigo-600", - "disabled:border-transparent disabled:bg-background-info-subtle-hover disabled:text-foreground-link-info", - "aria-disabled:border-transparent aria-disabled:bg-background-info-subtle-hover aria-disabled:text-foreground-link-info" - ], + primary: ["[--btn-brand:var(--color-background-info-emphasis)]", ...emphasis], ghost: [ "border border-transparent bg-transparent", "hover:bg-background-inset aria-expanded:bg-background-inset", @@ -33,29 +35,30 @@ "disabled:text-foreground-disabled aria-disabled:text-foreground-disabled" ], danger: [ - "border border-border-default bg-background-default text-foreground-danger", + "border border-alpha-dark-10 bg-background-default text-foreground-danger", "hover:bg-background-subtle aria-expanded:bg-background-subtle", "focus-visible:outline-foreground-danger", "disabled:border-border-subtle disabled:text-foreground-danger-disabled aria-disabled:text-foreground-danger-disabled" ], success: [ - "border border-border-default bg-background-default text-foreground-success", + "border border-alpha-dark-10 bg-background-default text-foreground-success", "hover:bg-background-subtle aria-expanded:bg-background-subtle", "focus-visible:outline-foreground-success", "disabled:border-border-subtle disabled:text-foreground-success-disabled aria-disabled:text-foreground-success-disabled" ], warning: [ - "border border-border-default bg-background-default text-foreground-warning", + "border border-alpha-dark-10 bg-background-default text-foreground-warning", "hover:bg-background-subtle aria-expanded:bg-background-subtle", "focus-visible:outline-foreground-warning", "disabled:border-border-subtle disabled:text-foreground-warning-disabled aria-disabled:text-foreground-warning-disabled" ] }, size: { - mini: "min-h-6 min-w-xl gap-2xs px-2xs py-3xs typography-paragraph-mini", - small: "min-h-7 gap-2xs px-2 py-3xs typography-paragraph-small", - regular: "min-h-8 gap-1.5 px-sm py-3xs typography-paragraph-regular", - large: "min-h-9 gap-xs px-sm py-3xs typography-paragraph-large" + mini: "min-h-[calc(1.5rem-var(--seg-inset,0px))] min-w-xl gap-2xs px-2xs py-3xs typography-paragraph-mini [--btn-radius:0.25rem]", + small: "min-h-[calc(1.75rem-var(--seg-inset,0px))] gap-2xs px-2 py-3xs typography-paragraph-small [--btn-radius:var(--radius-sm)]", + regular: + "min-h-[calc(2rem-var(--seg-inset,0px))] gap-1.5 px-sm py-3xs typography-paragraph-regular", + large: "min-h-[calc(2.25rem-var(--seg-inset,0px))] gap-xs px-sm py-3xs typography-paragraph-large" }, iconSide: { left: "", @@ -75,32 +78,7 @@ { size: "regular", iconSide: "left", class: "pl-2.25" }, { size: "regular", iconSide: "right", class: "pr-2.25" }, { size: "large", iconSide: "left", class: "pl-2.75" }, - { size: "large", iconSide: "right", class: "pr-2.75" }, - { - variant: ["default", "danger", "success", "warning"], - insetShadow: true, - class: [ - "bg-linear-to-b from-background-default to-background-inset/50 dark:border-t-border-subtle dark:from-background-inset/50 dark:to-background-default", - "hover:from-background-subtle hover:to-background-inset hover:dark:border-t-wool-1000 hover:dark:from-background-inset hover:dark:to-background-subtle active:dark:border-t-wool-1100", - "relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-[''] dark:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)]", - "hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]", - "active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]", - "aria-expanded:*:translate-y-0.5 aria-expanded:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)] dark:aria-expanded:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]", - "disabled:before:shadow-none disabled:active:*:translate-y-0" - ] - }, - { - variant: "primary", - insetShadow: true, - class: [ - "relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-[''] dark:before:shadow-[inset_0_-2px_0_0_var(--color-alpha-light-25)]", - "active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)] dark:active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-light-50)]", - "aria-expanded:*:translate-y-0.5 aria-expanded:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)] dark:aria-expanded:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-light-50)]", - "disabled:before:shadow-none disabled:active:*:translate-y-0", - "relative z-0 after:absolute after:inset-0 after:-z-10 after:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] after:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] after:shadow-[inset_0_1px_0_0_var(--color-alpha-light-20)] after:transition-all after:duration-150 after:content-[''] dark:after:shadow-[inset_0_1px_0_0_var(--color-alpha-dark-20)]", - "active:after:hidden" - ] - } + { size: "large", iconSide: "right", class: "pr-2.75" } ], defaultVariants: { variant: "default", -- 2.51.2