diff --git a/web/src/app.css b/web/src/app.css index 959f9fbc2..fe2b4db2d 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -174,6 +174,7 @@ html { --color-shadow-inner-subtle: #e5e5e5; --color-shadow-ambient-strong: rgb(0 0 0 / 0.08); --color-shadow-ambient-subtle: rgb(0 0 0 / 0.04); + --color-shadow-ring: var(--color-alpha-dark-10); --color-inverse-background: #262626; --color-inverse-foreground: #f5f5f5; @@ -459,6 +460,21 @@ html { } } +@utility edge-ring { + @apply ring ring-shadow-ring; + @variant forced-colors { + outline: 1px solid; + } +} + +@utility edge-ring-inset { + @apply inset-ring inset-ring-shadow-ring; + @variant forced-colors { + outline: 1px solid; + outline-offset: -1px; + } +} + @utility hit-area { position: relative; diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte index b096563c2..133a4b377 100644 --- a/web/src/lib/components/profile/ProfileTabs.svelte +++ b/web/src/lib/components/profile/ProfileTabs.svelte @@ -98,4 +98,4 @@ ); - + diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte index 53fddbda4..39422b93c 100644 --- a/web/src/lib/components/repo/RepoTabs.svelte +++ b/web/src/lib/components/repo/RepoTabs.svelte @@ -51,4 +51,4 @@ ]); - + diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte index 6588537eb..87acb5670 100644 --- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte +++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte @@ -74,12 +74,12 @@ true: { container: "flex-col", textarea: "rounded-b-none", - button: "-mt-px h-9 w-full rounded-t-none disabled:border-border-default disabled:bg-background-default" + button: "-mt-px h-9 w-full rounded-t-none disabled:bg-background-default disabled:inset-ring-shadow-ring" }, false: { container: "items-stretch", textarea: "rounded-r-none", - button: "-ml-px w-9.5 self-stretch [--btn-radius-l:0px] disabled:border-border-default disabled:bg-background-default" + button: "-ml-px w-9.5 self-stretch [--btn-radius-l:0px] disabled:bg-background-default disabled:inset-ring-shadow-ring" } } } @@ -153,7 +153,7 @@
{#if framed} - + {#if references.length > 0}
    {#each references as reference (reference.key)} diff --git a/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte b/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte index fa36db6e4..f19a4da56 100644 --- a/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte +++ b/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte @@ -87,7 +87,7 @@ await expect(canvas.getByText("Owner", { exact: true })).toBeVisible(); const settings = canvas.getByRole("link", { name: "Settings" }); await expect(settings).toHaveAttribute("href", "/tangled.org?tab=settings"); - await expect(settings).toHaveClass("bg-transparent", "border-transparent"); + await expect(settings).toHaveClass("bg-transparent"); await expect(canvas.queryByRole("button", { name: "Leave" })).not.toBeInTheDocument(); await userEvent.clear(search); await userEvent.type(search, "microcosm.blue"); diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte index c44d86f7b..6ef3ccff6 100644 --- a/web/src/lib/components/ui/Button.svelte +++ b/web/src/lib/components/ui/Button.svelte @@ -4,7 +4,7 @@ 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)]", + "bg-(--btn-highlight) bg-linear-to-b from-(--btn-from) to-(--btn-brand) text-white shadow-[inset_0_2px_0_0_var(--btn-highlight)] edge-ring-inset inset-ring-(--btn-ring)", "hover:from-(--btn-highlight) aria-expanded:from-(--btn-highlight)", "focus-visible:outline-(--btn-brand)", "disabled:opacity-50 aria-disabled:opacity-50" @@ -20,37 +20,37 @@ variants: { variant: { default: [ - "border border-alpha-dark-10 bg-background-default text-foreground-default", + "bg-background-default text-foreground-default edge-ring-inset", "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" + "disabled:bg-background-subtle disabled:text-foreground-subtle disabled:inset-ring-transparent", + "aria-disabled:bg-background-subtle aria-disabled:text-foreground-subtle aria-disabled:inset-ring-transparent" ], primary: ["[--btn-brand:var(--color-background-info-emphasis)]", ...emphasis], destructive: ["[--btn-brand:var(--color-red-700)]", ...emphasis], ghost: [ - "border border-transparent bg-transparent", + "bg-transparent", "hover:bg-background-inset aria-expanded:bg-background-inset", "focus-visible:outline-border-focus", "disabled:text-foreground-disabled aria-disabled:text-foreground-disabled" ], danger: [ - "border border-alpha-dark-10 bg-background-default text-foreground-danger", + "bg-background-default text-foreground-danger edge-ring-inset", "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" + "disabled:text-foreground-danger-disabled disabled:inset-ring-border-subtle aria-disabled:text-foreground-danger-disabled" ], success: [ - "border border-alpha-dark-10 bg-background-default text-foreground-success", + "bg-background-default text-foreground-success edge-ring-inset", "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" + "disabled:text-foreground-success-disabled disabled:inset-ring-border-subtle aria-disabled:text-foreground-success-disabled" ], warning: [ - "border border-alpha-dark-10 bg-background-default text-foreground-warning", + "bg-background-default text-foreground-warning edge-ring-inset", "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" + "disabled:text-foreground-warning-disabled disabled:inset-ring-border-subtle aria-disabled:text-foreground-warning-disabled" ] }, size: { diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte index 3032a6011..c94b73356 100644 --- a/web/src/lib/components/ui/ButtonCard.svelte +++ b/web/src/lib/components/ui/ButtonCard.svelte @@ -10,11 +10,8 @@ ], variants: { variant: { - default: [ - "border border-border-default bg-background-default", - "hover:bg-background-subtle" - ], - ghost: ["border border-transparent bg-transparent", "hover:bg-background-inset"] + default: ["bg-background-default edge-ring", "hover:bg-background-subtle"], + ghost: ["bg-transparent", "hover:bg-background-inset"] }, insetShadow: { true: "", @@ -26,7 +23,7 @@ variant: "default", insetShadow: true, class: [ - "relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:content-['']", + "relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-(--btn-radius) before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:content-['']", "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)]", "disabled:active:translate-y-0" diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte index beb811056..bd47caea8 100644 --- a/web/src/lib/components/ui/ButtonGroup.svelte +++ b/web/src/lib/components/ui/ButtonGroup.svelte @@ -29,13 +29,12 @@ class: [ "relative items-stretch gap-none overflow-hidden rounded-md bg-background-subtle dark:bg-background-canvas", "after:pointer-events-none after:absolute after:inset-0 after:z-20 after:rounded-md after:border after:border-border-default after:content-['']", - "*:relative *:border-y-transparent", + "*:relative", "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]", "[&>*:not(:last-child)]:[--btn-radius-r:0px]", // a Dropdown keeps its trigger one level down, and the radius vars only // inherit that far — Button re-declares them on itself, so the wrapper's // value loses. reach the nested trigger directly. - "[&>*>button]:border-y-transparent", "[&>*:not(:first-child)>button]:[--btn-radius-l:0px]", "[&>*:not(:last-child)>button]:[--btn-radius-r:0px]", "[&>*:not([data-variant=ghost])]:z-10", @@ -62,7 +61,7 @@ return selected ? { variant: "default", - class: "border-alpha-dark-10 shadow-sm hover:bg-background-default" + class: "shadow-sm hover:bg-background-default" } : { variant: "ghost", diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte index f2acee7ff..8869bbf0a 100644 --- a/web/src/lib/components/ui/Card.svelte +++ b/web/src/lib/components/ui/Card.svelte @@ -9,7 +9,7 @@ false: "" }, border: { - true: "border border-border-default", + true: "edge-ring", false: "" }, background: { diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte index d322bc42c..999fefd10 100644 --- a/web/src/lib/components/ui/Combobox.svelte +++ b/web/src/lib/components/ui/Combobox.svelte @@ -6,7 +6,7 @@ root: "relative inline-block w-full", trigger: "flex min-h-8 cursor-pointer items-center gap-xs px-2.5 py-2xs", value: "min-w-0 flex-1 truncate text-left typography-paragraph-regular", - panel: "combobox-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(24rem,calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-md border border-border-default bg-background-default p-none text-foreground-default shadow-regular open:flex dark:shadow-none", + panel: "combobox-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(24rem,calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-md bg-background-default p-none text-foreground-default shadow-regular edge-ring open:flex dark:shadow-none", search: "shrink-0 border-b border-border-default p-xs", list: "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-2xs [-webkit-overflow-scrolling:touch]", groupHeading: "px-xs pt-xs pb-2xs font-semibold text-foreground-muted first:pt-2xs", diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte index 780db4a86..517d814a2 100644 --- a/web/src/lib/components/ui/Dropdown.svelte +++ b/web/src/lib/components/ui/Dropdown.svelte @@ -10,7 +10,7 @@ root: "relative inline-flex", plainTrigger: "min-h-0 gap-2xs border-0 bg-transparent p-none text-inherit hover:bg-transparent aria-expanded:bg-transparent", - menu: "dropdown-menu fixed inset-auto z-50 m-none h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] touch-pan-y overflow-auto overscroll-contain rounded-md border-0 bg-background-default p-1 text-foreground-default shadow-lg ring ring-alpha-dark-10 [-webkit-overflow-scrolling:touch] [&>hr]:-mx-1 [&>hr]:my-1 [&>hr]:w-auto" + menu: "dropdown-menu fixed inset-auto z-50 m-none h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] touch-pan-y overflow-auto overscroll-contain rounded-md border-0 bg-background-default p-1 text-foreground-default shadow-lg edge-ring [-webkit-overflow-scrolling:touch] [&>hr]:-mx-1 [&>hr]:my-1 [&>hr]:w-auto" }, variants: { align: { diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte index b697c4250..0bc7b39f5 100644 --- a/web/src/lib/components/ui/Error.svelte +++ b/web/src/lib/components/ui/Error.svelte @@ -3,7 +3,7 @@ export const error = tv({ slots: { - root: "overflow-hidden rounded-md border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20", + root: "overflow-hidden rounded-md bg-background-danger-subtle text-foreground-danger edge-ring ring-border-danger dark:bg-background-danger-subtle/20 dark:ring-border-danger/60", header: "flex items-center gap-xs", icon: "shrink-0", label: "min-w-0", diff --git a/web/src/lib/components/ui/Hovercard.svelte b/web/src/lib/components/ui/Hovercard.svelte index d7875c2a9..2c5e5b19f 100644 --- a/web/src/lib/components/ui/Hovercard.svelte +++ b/web/src/lib/components/ui/Hovercard.svelte @@ -15,7 +15,7 @@ // overflow-visible so the card's own content (e.g. a nested popover) isn't clipped // pointer-events-auto because the card is a child of whatever the trigger sits in, // and a card the pointer falls through closes the moment it is reached for - card: "hovercard-card pointer-events-auto fixed inset-auto z-50 m-none h-fit popover-transition overflow-visible rounded-md border border-border-default bg-background-default text-foreground-default shadow-regular" + card: "hovercard-card pointer-events-auto fixed inset-auto z-50 m-none h-fit popover-transition overflow-visible rounded-md bg-background-default text-foreground-default shadow-regular edge-ring" }, variants: { align: { diff --git a/web/src/lib/components/ui/LayerCard.svelte b/web/src/lib/components/ui/LayerCard.svelte index c0545f7f7..390005ffc 100644 --- a/web/src/lib/components/ui/LayerCard.svelte +++ b/web/src/lib/components/ui/LayerCard.svelte @@ -2,7 +2,7 @@ import { tv } from "tailwind-variants"; export const layerCard = tv({ - base: "flex flex-col gap-(--layer-gap) rounded-[calc(var(--radius-md)+var(--layer-gap)+1px)] border border-border-default bg-background-subtle p-(--layer-gap) [--layer-gap:3px] dark:bg-background-canvas" + base: "flex flex-col gap-[calc(var(--layer-gap)+2px)] rounded-[calc(var(--radius-md)+var(--layer-gap)+1px)] bg-background-subtle p-[calc(var(--layer-gap)+1px)] edge-ring [--layer-gap:3px] dark:bg-background-canvas" }); diff --git a/web/src/lib/components/ui/LayerCardPrimary.svelte b/web/src/lib/components/ui/LayerCardPrimary.svelte index d0bb2a5b4..0f14097e2 100644 --- a/web/src/lib/components/ui/LayerCardPrimary.svelte +++ b/web/src/lib/components/ui/LayerCardPrimary.svelte @@ -2,7 +2,7 @@ import { tv, type VariantProps } from "tailwind-variants"; export const layerCardPrimary = tv({ - base: "relative min-w-0 overflow-clip rounded-md border border-border-default bg-background-default", + base: "relative min-w-0 overflow-clip rounded-md bg-background-default edge-ring", variants: { padding: { regular: "p-md", diff --git a/web/src/lib/components/ui/LayerCardSecondary.svelte b/web/src/lib/components/ui/LayerCardSecondary.svelte index 34913c2ee..72fea7522 100644 --- a/web/src/lib/components/ui/LayerCardSecondary.svelte +++ b/web/src/lib/components/ui/LayerCardSecondary.svelte @@ -2,7 +2,7 @@ import { tv } from "tailwind-variants"; export const layerCardSecondary = tv({ - base: "flex min-w-0 items-center gap-xs px-[calc(var(--spacing-md)+1px)] py-1.25 text-foreground-muted" + base: "flex min-w-0 items-center gap-xs px-md py-1 text-foreground-muted" }); diff --git a/web/src/lib/components/ui/Lightbox.svelte b/web/src/lib/components/ui/Lightbox.svelte index 92408baea..9252f114d 100644 --- a/web/src/lib/components/ui/Lightbox.svelte +++ b/web/src/lib/components/ui/Lightbox.svelte @@ -8,7 +8,7 @@ flight: "absolute inset-0 flex items-center justify-center p-4 sm:p-14", image: "size-auto max-h-full max-w-full", bar: "pointer-events-none absolute inset-0 flex items-start gap-2 p-3 sm:p-4", - badge: "flex min-h-9.5 items-center rounded-md border border-border-default bg-background-default px-3 typography-paragraph-small text-foreground-default", + badge: "flex min-h-9.5 items-center rounded-md bg-background-default px-3 typography-paragraph-small text-foreground-default edge-ring-inset", controls: "pointer-events-auto ml-auto flex items-center gap-2", button: "pointer-events-auto min-h-9 w-9 px-0" }, diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte index 8c66ed506..493252a04 100644 --- a/web/src/lib/components/ui/MarkdownEditor.svelte +++ b/web/src/lib/components/ui/MarkdownEditor.svelte @@ -9,7 +9,7 @@ toolbar: "flex items-center justify-between gap-md border-b border-border-default bg-background-subtle p-2xs", body: "relative flex [&:has([data-preview-ready])_textarea]:invisible", - field: "rounded-none border-0 bg-transparent focus-within:ring-0" + field: "rounded-none bg-transparent inset-ring-0 focus-within:ring-0 forced-colors:outline-none" }, variants: { transparent: { @@ -33,7 +33,7 @@ toolbar: "border-b-0 bg-transparent p-px", body: layerCardPrimary({ padding: "none", - class: "focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong" + class: "focus-within:ring-2 focus-within:ring-border-strong" }) }, false: "" @@ -44,19 +44,18 @@ } }, compoundVariants: [ - { compact: false, layered: false, class: { root: "rounded-md border" } }, + { compact: false, layered: false, class: { root: "rounded-md edge-ring" } }, { compact: false, disabled: true, - class: { root: "cursor-not-allowed border-border-disabled" } + class: { root: "cursor-not-allowed ring-border-disabled" } }, - { compact: false, disabled: false, class: { root: "border-border-default" } }, { compact: false, layered: false, disabled: false, class: { - root: "focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong" + root: "focus-within:ring-2 focus-within:ring-border-strong" } } ], diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte index f8dd41d32..d12a8a6d4 100644 --- a/web/src/lib/components/ui/Modal.svelte +++ b/web/src/lib/components/ui/Modal.svelte @@ -3,7 +3,7 @@ export const modal = tv({ slots: { - panel: "modal-panel m-auto w-[95%] flex-col gap-md overscroll-none rounded-xl border border-border-default bg-background-default p-md text-foreground-default shadow-lg", + panel: "modal-panel m-auto w-[95%] flex-col gap-md overscroll-none rounded-xl bg-background-default p-md text-foreground-default shadow-lg edge-ring", title: "flex flex-row items-center gap-xs px-3xs typography-paragraph-large font-medium", titleIcon: "size-4 text-foreground-muted", description: "text-foreground-muted", diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte index 46ab035d7..e6079ea50 100644 --- a/web/src/lib/components/ui/Pagination.svelte +++ b/web/src/lib/components/ui/Pagination.svelte @@ -5,7 +5,7 @@ slots: { nav: "inline-flex items-center gap-2xs", track: "relative typography-paragraph-regular tabular-nums [--gap:0.25rem]", - plate: "pointer-events-none absolute inset-y-0 left-0 w-(--slot) rounded-md border border-border-default bg-background-default", + plate: "pointer-events-none absolute inset-y-0 left-0 w-(--slot) rounded-md bg-background-default edge-ring-inset", list: "relative flex gap-(--gap)", slot: "w-(--slot)", page: "w-full px-none", diff --git a/web/src/lib/components/ui/RangeSelector.svelte b/web/src/lib/components/ui/RangeSelector.svelte index a9423eb98..4dd4b9e2f 100644 --- a/web/src/lib/components/ui/RangeSelector.svelte +++ b/web/src/lib/components/ui/RangeSelector.svelte @@ -348,7 +348,7 @@ {@render bandBox( rowsOf(selectedRange, whole), - "relative z-10 rounded-md border border-border-default dark:border-border-strong" + "relative z-10 rounded-md edge-ring-inset inset-ring-border-default dark:inset-ring-border-strong" )} {/if} {@render pill(displayRows)} diff --git a/web/src/lib/components/ui/SignupPrompt.svelte b/web/src/lib/components/ui/SignupPrompt.svelte index 28ada3356..8dcb0530b 100644 --- a/web/src/lib/components/ui/SignupPrompt.svelte +++ b/web/src/lib/components/ui/SignupPrompt.svelte @@ -11,7 +11,7 @@
    diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte index 29b3dd1bb..ce6a804e6 100644 --- a/web/src/lib/components/ui/Tabs.svelte +++ b/web/src/lib/components/ui/Tabs.svelte @@ -25,8 +25,8 @@ vertical: { true: { nav: "relative flex w-full flex-col gap-2xs bg-background-navigation-frame p-xs", - plate: "rounded-md border border-border-navigation-item-active bg-background-navigation-item", - item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-md border border-transparent px-sm py-1.5 typography-paragraph-regular text-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus", + plate: "rounded-md bg-background-navigation-item edge-ring-inset inset-ring-border-navigation-item-active", + item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-md px-sm py-1.5 typography-paragraph-regular text-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus", icon: "size-3.5 shrink-0", label: "min-w-0 truncate", count: "ml-auto" @@ -49,8 +49,7 @@ } }, layered: { true: {}, false: {} }, - ready: { true: { plate: "opacity-100" }, false: { plate: "opacity-0" } }, - overlapBottom: { true: { nav: "-mb-px" }, false: {} } + ready: { true: { plate: "opacity-100" }, false: { plate: "opacity-0" } } }, compoundVariants: [ { @@ -58,7 +57,7 @@ selected: true, ready: false, class: { - item: "border-border-navigation-item-active bg-background-navigation-item" + item: "bg-background-navigation-item edge-ring-inset inset-ring-border-navigation-item-active" } }, { @@ -106,8 +105,7 @@ vertical: false, selected: false, ready: false, - layered: false, - overlapBottom: false + layered: false } }); @@ -130,7 +128,6 @@ active: string; label?: string; vertical?: boolean; - overlapBottom?: boolean; layered?: boolean; class?: string; } @@ -140,7 +137,6 @@ active, label, vertical = false, - overlapBottom = false, layered = false, class: navClass }: Props = $props(); @@ -220,7 +216,7 @@ ready = true; }); - const style = $derived(tabs({ vertical, ready, overlapBottom, layered })); + const style = $derived(tabs({ vertical, ready, layered })); const plateStyle = $derived( vertical diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte index f58527478..2c2977898 100644 --- a/web/src/lib/components/ui/Tag.svelte +++ b/web/src/lib/components/ui/Tag.svelte @@ -5,17 +5,13 @@ base: "inline-flex items-center gap-2xs rounded-full leading-none select-none", variants: { color: { - default: - "border border-border-default bg-background-default text-foreground-default", - gray: "border border-transparent bg-background-inset text-foreground-default", - highlight: - "border border-transparent bg-background-highlight text-foreground-highlight", - success: - "border border-transparent bg-background-success-subtle text-foreground-success-strong", - danger: "border border-transparent bg-background-danger-subtle text-foreground-danger-strong", - warning: - "border border-transparent bg-background-warning-subtle text-foreground-warning", - info: "border border-transparent bg-background-info-subtle text-foreground-info-strong" + default: "bg-background-default text-foreground-default edge-ring-inset", + gray: "bg-background-inset text-foreground-default", + highlight: "bg-background-highlight text-foreground-highlight", + success: "bg-background-success-subtle text-foreground-success-strong", + danger: "bg-background-danger-subtle text-foreground-danger-strong", + warning: "bg-background-warning-subtle text-foreground-warning", + info: "bg-background-info-subtle text-foreground-info-strong" }, size: { mini: "px-2xs py-xs typography-paragraph-mini", diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte index f28e814a0..f491904a1 100644 --- a/web/src/lib/components/ui/TagInput.svelte +++ b/web/src/lib/components/ui/TagInput.svelte @@ -7,14 +7,14 @@ list: "flex min-w-0 flex-1 flex-wrap content-center items-center", item: "flex min-w-0", draftItem: "flex min-w-0 flex-1 items-center", - chip: "max-w-full rounded border-0 py-0 ring-1 ring-border-default", + chip: "max-w-full rounded py-0 ring-1 inset-ring-0 ring-border-default", icon: "shrink-0 text-foreground-subtle", spinner: "shrink-0 self-start", field: "shrink-0 opacity-70", label: "truncate", remove: "text-foreground-inherit flex min-h-0 min-w-0 shrink-0 rounded p-none shadow-none hover:bg-alpha-dark-10 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-border-focus", draft: "w-full min-w-0 bg-transparent px-1 outline-none placeholder:text-foreground-placeholder placeholder:transition-opacity placeholder:duration-200 disabled:cursor-not-allowed motion-reduce:placeholder:transition-none", - panel: "tag-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-md border border-border-default bg-background-default p-none text-foreground-default open:flex", + panel: "tag-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-md bg-background-default p-none text-foreground-default edge-ring open:flex", options: "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-2xs [-webkit-overflow-scrolling:touch]", option: "flex w-full cursor-pointer items-center gap-xs rounded bg-transparent px-xs py-1.5 text-left data-active:bg-background-subtle", diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte index a3d03b5ee..6f6205353 100644 --- a/web/src/lib/components/ui/Textarea.svelte +++ b/web/src/lib/components/ui/Textarea.svelte @@ -8,7 +8,7 @@ export const textareaField = tv({ slots: { - root: "relative flex items-start gap-2xs rounded-md border bg-background-default transition-colors", + root: "relative flex items-start gap-2xs rounded-md bg-background-default edge-ring-inset transition-colors", textarea: "flex-1 self-stretch bg-transparent py-xs outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none" }, @@ -16,29 +16,29 @@ // `regular` keeps textareaMinHeight above in sync — it's 2px shorter because the // root's border sits outside it. size: { - regular: { textarea: "min-h-63.5" }, + regular: { textarea: textareaMinHeight }, small: { textarea: "min-h-20" }, unsized: { textarea: "" } }, error: { false: { - root: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong" + root: "focus-within:ring-1 focus-within:ring-border-strong focus-within:inset-ring-border-strong" }, true: { - root: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger", + root: "bg-background-danger-subtle text-foreground-danger inset-ring-border-danger focus-within:ring-1 focus-within:ring-border-focus-danger focus-within:inset-ring-border-focus-danger", textarea: "placeholder:text-foreground-danger" } }, disabled: { false: "", true: { - root: "cursor-not-allowed border-border-disabled bg-background-subtle text-foreground-muted" + root: "cursor-not-allowed bg-background-subtle text-foreground-muted inset-ring-border-disabled" } }, readonly: { false: "", true: { - root: "cursor-default border-border-disabled bg-background-subtle text-foreground-muted" + root: "cursor-default bg-background-subtle text-foreground-muted inset-ring-border-disabled" } }, resizeable: { diff --git a/web/src/lib/components/ui/inputField.ts b/web/src/lib/components/ui/inputField.ts index f3e706dcd..3f26c9ee7 100644 --- a/web/src/lib/components/ui/inputField.ts +++ b/web/src/lib/components/ui/inputField.ts @@ -24,7 +24,7 @@ export const TAG_COMMIT_CHARS: Record = { }; export const inputField = tv({ - base: "flex items-center rounded-md border bg-background-default transition-colors", + base: "flex items-center rounded-md bg-background-default edge-ring-inset transition-colors", variants: { size: { mini: "min-h-6 gap-2xs rounded typography-paragraph-mini", @@ -33,15 +33,15 @@ export const inputField = tv({ large: "min-h-9 gap-2.5 typography-paragraph-large" }, error: { - false: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong", - true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger" + false: "focus-within:ring-1 focus-within:ring-border-strong focus-within:inset-ring-border-strong", + true: "bg-background-danger-subtle text-foreground-danger inset-ring-border-danger focus-within:ring-1 focus-within:ring-border-focus-danger focus-within:inset-ring-border-focus-danger" }, disabled: { false: "", true: "cursor-not-allowed bg-background-inset text-foreground-disabled" }, rich: { - true: "items-center p-[3px]", + true: "items-center p-1", false: "" } }, diff --git a/web/src/lib/components/ui/selectField.ts b/web/src/lib/components/ui/selectField.ts index e917399b2..860060bb2 100644 --- a/web/src/lib/components/ui/selectField.ts +++ b/web/src/lib/components/ui/selectField.ts @@ -16,16 +16,16 @@ export type SelectAlign = "left" | "right"; export const selectField = tv({ slots: { - box: "w-full rounded-md border bg-background-default transition-colors outline-none disabled:cursor-not-allowed", + box: "w-full rounded-md bg-background-default edge-ring-inset transition-colors focus-visible:outline-none disabled:cursor-not-allowed", chevron: "shrink-0 text-foreground-subtle" }, variants: { error: { false: { - box: "border-border-default text-foreground-default focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong aria-expanded:border-border-strong aria-expanded:ring-1 aria-expanded:ring-border-strong" + box: "text-foreground-default focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:inset-ring-border-strong aria-expanded:ring-1 aria-expanded:ring-border-strong aria-expanded:inset-ring-border-strong" }, true: { - box: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-visible:border-border-focus-danger focus-visible:ring-1 focus-visible:ring-border-focus-danger aria-expanded:border-border-focus-danger aria-expanded:ring-1 aria-expanded:ring-border-focus-danger", + box: "bg-background-danger-subtle text-foreground-danger inset-ring-border-danger focus-visible:ring-1 focus-visible:ring-border-focus-danger focus-visible:inset-ring-border-focus-danger aria-expanded:ring-1 aria-expanded:ring-border-focus-danger aria-expanded:inset-ring-border-focus-danger", chevron: "text-foreground-danger" } }, @@ -42,7 +42,7 @@ export const selectField = tv({ error: true, disabled: true, class: { - box: "border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle", + box: "bg-background-danger-subtle text-foreground-danger-subtle inset-ring-border-danger-subtle", chevron: "text-foreground-danger-subtle" } } diff --git a/web/src/routes/dev/components/+page.svelte b/web/src/routes/dev/components/+page.svelte index 45401309b..f4b566290 100644 --- a/web/src/routes/dev/components/+page.svelte +++ b/web/src/routes/dev/components/+page.svelte @@ -352,8 +352,9 @@ {/snippet} {#snippet tabsDemo()} -
    - +
    + +
    {/snippet}