diff --git a/web/src/app.css b/web/src/app.css index 7bf8583e6..5bf6db1e7 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -390,8 +390,8 @@ html { --color-shadow-inner-strong: var(--color-wool-600); --color-shadow-inner-strong-hover: var(--color-wool-600); --color-shadow-inner-subtle: var(--color-wool-400); - --color-shadow-ambient-strong: rgb(0 0 0 / 0.08); - --color-shadow-ambient-subtle: rgb(0 0 0 / 0.04); + --color-shadow-ambient-strong: transparent; + --color-shadow-ambient-subtle: transparent; --color-inverse-background: var(--color-wool-1300); --color-inverse-foreground: var(--color-wool-300); @@ -925,7 +925,7 @@ html { @utility row-breathe { animation: row-breathe 1.2s ease-in-out infinite; background-color: var(--color-background-muted); - border-radius: var(--radius-sm, 0.25rem); + border-radius: var(--radius-md, 0.375rem); @media (prefers-reduced-motion: reduce) { animation: none; @@ -1078,8 +1078,8 @@ html { --color-shadow-inner-strong: var(--color-wool-1600); --color-shadow-inner-strong-hover: var(--color-wool-1300); --color-shadow-inner-subtle: var(--color-wool-1500); - --color-shadow-ambient-strong: rgb(0 0 0 / 0.35); - --color-shadow-ambient-subtle: rgb(0 0 0 / 0.2); + --color-shadow-ambient-strong: transparent; + --color-shadow-ambient-subtle: transparent; --color-inverse-background: var(--color-white); --color-inverse-foreground: var(--color-wool-1500); diff --git a/web/src/fixtures/diff.ts b/web/src/fixtures/diff.ts index 9c5abd5fe..7d25c7f35 100644 --- a/web/src/fixtures/diff.ts +++ b/web/src/fixtures/diff.ts @@ -230,7 +230,7 @@ import NotificationItem from "./NotificationItem.svelte"; let { notifications = [] } = $props(); // end script -
+
{#each notifications as n} {/each} @@ -260,7 +260,7 @@ let { notifications = [], loading = false, title }: Props = $props(); {#if loading} {:else} -
+
{#if title}
{title}
{/if} diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte index 83100e5da..cf2756c70 100644 --- a/web/src/lib/components/comment/CommentBox.svelte +++ b/web/src/lib/components/comment/CommentBox.svelte @@ -56,7 +56,7 @@ {#if isThread}
{@render editor()}
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte index 306068f8f..f7830a619 100644 --- a/web/src/lib/components/comment/CommentCard.svelte +++ b/web/src/lib/components/comment/CommentCard.svelte @@ -193,7 +193,7 @@ {/snippet} -
+
{:else}
Login to leave a reply diff --git a/web/src/lib/components/editor/PierreEditor.svelte b/web/src/lib/components/editor/PierreEditor.svelte index e09761289..cb7c52b95 100644 --- a/web/src/lib/components/editor/PierreEditor.svelte +++ b/web/src/lib/components/editor/PierreEditor.svelte @@ -93,7 +93,7 @@
{@render demo()}
+ diff --git a/web/src/lib/components/home/FeatureStack.svelte b/web/src/lib/components/home/FeatureStack.svelte index 926f32b7f..0e4219166 100644 --- a/web/src/lib/components/home/FeatureStack.svelte +++ b/web/src/lib/components/home/FeatureStack.svelte @@ -20,15 +20,47 @@ "[--card:calc(100svh-var(--pin)-var(--spacing-md))]", "md:[--band:6rem] md:[--gap:var(--spacing-md)] md:[--step:12px]", "md:[--card:min(34rem,calc(100svh-var(--band)-2*var(--gap)-var(--depth)*var(--step)))]", - "md:[--pin:max(calc(var(--band)+var(--gap)),calc((100svh-var(--card)-var(--depth)*var(--step))/2))]" + "md:[--pin:max(calc(var(--band)+var(--gap)),calc((var(--band)+(100svh-var(--card)-var(--depth)*var(--step))/2)/2))]" ].join(" "); const PINNED = [ "sticky h-(--card) md:h-(--card) md:self-center", "top-[calc(var(--pin)+var(--i)*var(--step))] mb-[calc((var(--depth)-var(--i))*var(--step))]", "md:w-[calc(100%-(var(--depth)-var(--i))*2rem)]" ].join(" "); + + const FADE = 0.7; + + let stack = $state(); + let fades = $state([]); + let frame = 0; + + function measure() { + frame = 0; + if (!stack) return; + const cards = Array.from(stack.querySelectorAll(":scope > article")); + const covered = cards.map((card) => { + const { top, height } = card.getBoundingClientRect(); + const pinned = parseFloat(getComputedStyle(card).top) || 0; + return Math.min(Math.max(1 - (top - pinned) / height, 0), 1); + }); + fades = cards.map((_, i) => { + const depth = covered.slice(i + 1).reduce((sum, value) => sum + value, 0); + return 1 - FADE ** depth; + }); + } + + function schedule() { + if (!frame) frame = requestAnimationFrame(measure); + } + + $effect(() => { + measure(); + return () => cancelAnimationFrame(frame); + }); + + {#snippet showcase(demo: Feature["demo"])} {#if demo === "stack"} @@ -60,10 +92,18 @@
{#each features as { tone, icon, title, href, body, demo: kind }, i (title)} - + {#each body as paragraph (paragraph)}

{paragraph}

{/each} diff --git a/web/src/lib/components/home/Hero.svelte b/web/src/lib/components/home/Hero.svelte index 1c5785bd8..5406dd79a 100644 --- a/web/src/lib/components/home/Hero.svelte +++ b/web/src/lib/components/home/Hero.svelte @@ -22,7 +22,7 @@ class="relative mb-2xl flex max-w-wide flex-col items-center px-md text-center" >

diff --git a/web/src/lib/components/home/Sticker.svelte b/web/src/lib/components/home/Sticker.svelte index 715ffd710..5db8db395 100644 --- a/web/src/lib/components/home/Sticker.svelte +++ b/web/src/lib/components/home/Sticker.svelte @@ -2,13 +2,25 @@ import { tv, type VariantProps } from "tailwind-variants"; export const sticker = tv({ - base: "inline-flex rotate-(--sticker-tilt) items-center justify-center border-4 border-background-canvas px-md py-1 text-2xl font-bold whitespace-nowrap transition-[rotate,scale] duration-500 ease-spring hover:scale-110 hover:rotate-0 motion-reduce:transition-none md:text-4xl", + base: "relative z-0 inline-flex rotate-(--sticker-tilt) items-center justify-center border-4 border-background-canvas bg-linear-to-b bg-clip-padding px-md py-1 text-2xl font-bold whitespace-nowrap transition-[rotate,scale] duration-500 ease-spring hover:z-20 hover:scale-110 hover:rotate-0 motion-reduce:transition-none md:text-4xl", variants: { tone: { - deep: "bg-inverse-background text-inverse-foreground", - soft: "bg-background-muted text-foreground-default", - accent: "bg-background-info-emphasis text-foreground-on-emphasis", - paper: "bg-background-default text-foreground-default" + deep: [ + "from-inverse-border to-inverse-shadow-inner text-inverse-foreground dark:from-inverse-background", + "shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25),inset_0_1px_0_0_var(--color-alpha-light-20)] dark:shadow-[inset_0_-2px_0_0_var(--color-alpha-light-25),inset_0_1px_0_0_var(--color-alpha-dark-20)]" + ], + soft: [ + "from-background-inset to-background-muted text-foreground-default border border-border-default dark:from-background-strong dark:to-background-muted", + "shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong)]" + ], + accent: [ + "from-background-info-emphasis to-background-info-emphasis-hover text-foreground-on-emphasis dark:from-background-info-emphasis-hover dark:to-background-info-emphasis", + "shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25),inset_0_1px_0_0_var(--color-alpha-light-20)] dark:shadow-[inset_0_-2px_0_0_var(--color-alpha-light-25),inset_0_1px_0_0_var(--color-alpha-dark-20)]" + ], + paper: [ + "from-background-default to-background-muted text-foreground-default dark:from-background-muted dark:to-background-default", + "shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)]" + ] }, round: { true: "aspect-square rounded-full px-sm", diff --git a/web/src/lib/components/import/GitHubRepoSelectStep.svelte b/web/src/lib/components/import/GitHubRepoSelectStep.svelte index 28a4124b9..31451d343 100644 --- a/web/src/lib/components/import/GitHubRepoSelectStep.svelte +++ b/web/src/lib/components/import/GitHubRepoSelectStep.svelte @@ -78,7 +78,7 @@ {/if} {/snippet} {#if account} -
+
{#each repos as repo (repo.id)} {@const draft = drafts[repo.id]} {@const locked = stepDisabled || !isMigratable(draft.migration)} diff --git a/web/src/lib/components/import/MethodPicker.svelte b/web/src/lib/components/import/MethodPicker.svelte index 79c10eff8..953162c7d 100644 --- a/web/src/lib/components/import/MethodPicker.svelte +++ b/web/src/lib/components/import/MethodPicker.svelte @@ -26,7 +26,7 @@
{#each methods as method (method.value)} {@const Icon = method.icon} @@ -35,7 +35,7 @@ type="button" aria-pressed={selected} onclick={() => onSelect(method.value)} - class="cursor-pointer rounded-sm border border-border-default p-4 text-left transition-colors {selected + class="cursor-pointer rounded-md border border-border-default p-4 text-left transition-colors {selected ? 'bg-background-default shadow-xs' : 'bg-background-subtle hover:bg-background-inset'}" > diff --git a/web/src/lib/components/import/MigrationRow.svelte b/web/src/lib/components/import/MigrationRow.svelte index e6e18ec81..552489281 100644 --- a/web/src/lib/components/import/MigrationRow.svelte +++ b/web/src/lib/components/import/MigrationRow.svelte @@ -33,7 +33,7 @@ ); -
+
{#if state === "running"}

diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte index d5c7bcfae..da84896df 100644 --- a/web/src/lib/components/repo/CommitRow.svelte +++ b/web/src/lib/components/repo/CommitRow.svelte @@ -96,7 +96,7 @@ {commit.shortHash} diff --git a/web/src/lib/components/repo/DiffFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte index c69871555..d44c0ee13 100644 --- a/web/src/lib/components/repo/DiffFileTree.svelte +++ b/web/src/lib/components/repo/DiffFileTree.svelte @@ -4,7 +4,7 @@ const treeRow = tv({ slots: { root: "pt-2xs pr-md pb-2xl pl-1.5", - row: "group my-3xs inline-flex w-full items-center gap-xs rounded-sm px-1.5 py-0.75 text-foreground-default transition-colors hover:bg-background-subtle", + row: "group my-3xs inline-flex w-full items-center gap-xs rounded-md px-1.5 py-0.75 text-foreground-default transition-colors hover:bg-background-subtle", icon: "size-3.5 shrink-0 text-foreground-placeholder transition-colors group-hover:text-foreground-default", name: "truncate select-none", children: "ml-[12.5px] border-l border-border-subtle pl-3xs" diff --git a/web/src/lib/components/repo/DiffStatPill.svelte b/web/src/lib/components/repo/DiffStatPill.svelte index d5e98cd4a..3ca7477e5 100644 --- a/web/src/lib/components/repo/DiffStatPill.svelte +++ b/web/src/lib/components/repo/DiffStatPill.svelte @@ -3,7 +3,7 @@ export const diffStatPill = tv({ slots: { - root: "flex items-center overflow-clip rounded-sm", + root: "flex items-center overflow-clip rounded-md", insertions: "text-foreground-success select-none", deletions: "text-foreground-danger select-none" }, diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte index 2f94c8f4a..c145b2415 100644 --- a/web/src/lib/components/repo/DiffView.svelte +++ b/web/src/lib/components/repo/DiffView.svelte @@ -317,7 +317,7 @@
{#if error}
{error}
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte index 8dbeb4bf4..f3c45082c 100644 --- a/web/src/lib/components/repo/EmptyRepo.svelte +++ b/web/src/lib/components/repo/EmptyRepo.svelte @@ -67,7 +67,7 @@ {#snippet codeBlock(lines: string[])} 
{lines.join(
+		class="overflow-x-auto rounded-md bg-background-inset p-sm typography-monospace-small">{lines.join(
 			"\n"
 		)}
{/snippet} @@ -123,7 +123,7 @@

{@render bullet(3)}Configure your remote to - {remote}

diff --git a/web/src/lib/components/repo/FileCardHeader.svelte b/web/src/lib/components/repo/FileCardHeader.svelte index 997fdda88..7d4aee5a5 100644 --- a/web/src/lib/components/repo/FileCardHeader.svelte +++ b/web/src/lib/components/repo/FileCardHeader.svelte @@ -30,9 +30,9 @@
diff --git a/web/src/lib/components/repo/FileHistoryView.svelte b/web/src/lib/components/repo/FileHistoryView.svelte index 76f5991b3..837aa17ce 100644 --- a/web/src/lib/components/repo/FileHistoryView.svelte +++ b/web/src/lib/components/repo/FileHistoryView.svelte @@ -55,7 +55,7 @@ href={blobHref(ownerHandle, repoName, ref, path)} title={path} aria-label={path} - class="flex min-w-0 rounded-sm bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default no-underline hover:underline" + class="flex min-w-0 rounded-md bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default no-underline hover:underline" >{#if parentPath}{parentPath}{/if}{fileName}
{@render children()}
diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte index 1c36ad9c6..80e189169 100644 --- a/web/src/lib/components/repo/FileTree.svelte +++ b/web/src/lib/components/repo/FileTree.svelte @@ -3,7 +3,7 @@ export const fileRow = tv({ slots: { - root: "group my-3xs grid items-center gap-md rounded-sm px-1.5 py-0.75 transition-colors hover:bg-background-subtle", + root: "group my-3xs grid items-center gap-md rounded-md px-1.5 py-0.75 transition-colors hover:bg-background-subtle", link: "flex min-w-0 cursor-pointer items-center gap-xs text-foreground-default no-underline hit-area-y-1", icon: "text-foreground-placeholder transition-colors group-hover:text-foreground-default", message: "hidden min-w-0 md:col-span-6 md:block", diff --git a/web/src/lib/components/repo/LabelPanel.svelte b/web/src/lib/components/repo/LabelPanel.svelte index aff26b32f..c0189f94c 100644 --- a/web/src/lib/components/repo/LabelPanel.svelte +++ b/web/src/lib/components/repo/LabelPanel.svelte @@ -189,13 +189,13 @@ {@render labelBall(label)} {:else} {@render labelBall(label)} diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte index 72307142e..1068eb0bd 100644 --- a/web/src/lib/components/repo/PanelHeader.svelte +++ b/web/src/lib/components/repo/PanelHeader.svelte @@ -41,7 +41,7 @@
diff --git a/web/src/lib/components/repo/SourceSelector.svelte b/web/src/lib/components/repo/SourceSelector.svelte index e9499dcb2..1e6cc7d1f 100644 --- a/web/src/lib/components/repo/SourceSelector.svelte +++ b/web/src/lib/components/repo/SourceSelector.svelte @@ -2,7 +2,7 @@ import { tv } from "tailwind-variants"; const composeTab = tv({ - base: "group flex flex-1 flex-col gap-1 rounded-sm p-3 text-left transition-colors disabled:cursor-not-allowed", + base: "group flex flex-1 flex-col gap-1 rounded-md p-3 text-left transition-colors disabled:cursor-not-allowed", variants: { active: { true: "cursor-default border border-border-default bg-background-default shadow-xs", diff --git a/web/src/lib/components/repo/pierreDiff.css b/web/src/lib/components/repo/pierreDiff.css index 8067e2a8e..cbdcb3db8 100644 --- a/web/src/lib/components/repo/pierreDiff.css +++ b/web/src/lib/components/repo/pierreDiff.css @@ -55,21 +55,21 @@ [data-diff] { border: 1px solid var(--color-border-default); border-top: 0; - border-bottom-right-radius: var(--radius-sm, 0.25rem); - border-bottom-left-radius: var(--radius-sm, 0.25rem); + border-bottom-right-radius: var(--radius-md, 0.375rem); + border-bottom-left-radius: var(--radius-md, 0.375rem); } [data-code][data-unified] { - border-bottom-right-radius: calc(var(--radius-sm, 0.25rem) - 1px); - border-bottom-left-radius: calc(var(--radius-sm, 0.25rem) - 1px); + border-bottom-right-radius: calc(var(--radius-md, 0.375rem) - 1px); + border-bottom-left-radius: calc(var(--radius-md, 0.375rem) - 1px); } [data-code][data-deletions] { - border-bottom-left-radius: calc(var(--radius-sm, 0.25rem) - 1px); + border-bottom-left-radius: calc(var(--radius-md, 0.375rem) - 1px); } [data-code][data-additions] { - border-bottom-right-radius: calc(var(--radius-sm, 0.25rem) - 1px); + border-bottom-right-radius: calc(var(--radius-md, 0.375rem) - 1px); } [data-separator] { diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte index d67d2a2d1..0bb796103 100644 --- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte +++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte @@ -10,7 +10,7 @@ triggerVerb: "text-foreground-muted", triggerRef: "font-semibold", triggerArrow: "size-3.5 shrink-0 text-foreground-muted", - sha: "shrink-0 self-center rounded-sm bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline", + sha: "shrink-0 self-center rounded-md bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline", meta: "flex flex-wrap items-center justify-between text-foreground-muted", metaSub: "mr-xs flex flex-wrap items-center gap-xs", workflows: "", diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte index 033e8c222..366fcd4fb 100644 --- a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte +++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte @@ -4,7 +4,7 @@ export const workflowLogs = tv({ slots: { - viewport: "overflow-y-auto rounded-sm typography-monospace-regular", + viewport: "overflow-y-auto rounded-md typography-monospace-regular", sizer: "relative w-full", row: "absolute top-0 left-0 flex w-full", header: "sticky top-0 z-10 flex w-full cursor-pointer items-center gap-xs rounded-t border-x border-t border-border-default bg-background-default px-sm text-left font-sans typography-paragraph-regular", @@ -14,7 +14,7 @@ body: "w-full min-w-0 border-x border-border-default bg-background-default px-sm", command: "break-all whitespace-pre-wrap text-foreground-info", line: "break-all whitespace-pre-wrap text-foreground-default", - empty: "flex items-center justify-center gap-xs rounded-sm border border-border-default bg-background-default p-4xl typography-paragraph-large text-foreground-muted italic", + empty: "flex items-center justify-center gap-xs rounded-md border border-border-default bg-background-default p-4xl typography-paragraph-large text-foreground-muted italic", status: "flex items-center gap-xs px-2xs py-xs text-foreground-muted" }, variants: { diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte index 6c6fba0a5..85e43c8ec 100644 --- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte +++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte @@ -7,11 +7,11 @@ slots: { list: "flex flex-col gap-xs", // the whole card is the link to the workflow - card: "flex flex-col gap-1.5 rounded-sm border px-sm py-2.5 no-underline transition-colors hover:no-underline", + card: "flex flex-col gap-1.5 rounded-md border px-sm py-2.5 no-underline transition-colors hover:no-underline", // the step rows are buttons, and a button can't nest inside the card element // itself, so the active card's chrome moves to this wrapper and the header // shrinks down to just its own area - wrapper: `overflow-hidden rounded-sm border ${ACTIVE_CHROME}`, + wrapper: `overflow-hidden rounded-md border ${ACTIVE_CHROME}`, header: "flex w-full cursor-pointer flex-col gap-1.5 px-sm py-2.5 text-left no-underline transition-colors hover:no-underline", divider: "border-t border-border-default dark:border-border-disabled", top: "flex items-center justify-between gap-sm", diff --git a/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte b/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte index cea9334a9..54add7c92 100644 --- a/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte +++ b/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte @@ -4,7 +4,7 @@ export const workflowSteps = tv({ slots: { list: "flex flex-col", - row: "flex h-9 items-center gap-2.5 rounded-sm px-xs text-left", + row: "flex h-9 items-center gap-2.5 rounded-md px-xs text-left", name: "min-w-0 flex-1 truncate", duration: "shrink-0 typography-monospace-regular font-normal text-foreground-muted tabular-nums transition-opacity duration-150 motion-reduce:transition-none" diff --git a/web/src/lib/components/repo/pipelines/WorkflowView.svelte b/web/src/lib/components/repo/pipelines/WorkflowView.svelte index bded594a5..d8aa69bb8 100644 --- a/web/src/lib/components/repo/pipelines/WorkflowView.svelte +++ b/web/src/lib/components/repo/pipelines/WorkflowView.svelte @@ -59,7 +59,7 @@ {#if workflow.error}