1f:Tdac7,

<script setup lang="ts">
import { computed, ref } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    pressDepth?: number;
    sweep?: boolean;
    radius?: number;
  }>(),
  { accent: "#1E90FF", pressDepth: 3, sweep: true, radius: 4 },
);

const held = ref(false);

function parseHex(hex: string): [number, number, number] {
  const value = hex.replace("#", "").trim();
  if (!/^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{3}$/.test(value)) return [30, 144, 255];
  const full = value.length === 3 ? value.split("").map((c) => c + c).join("") : value;
  const int = Number.parseInt(full, 16);
  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
}

function mix(hex: string, target: [number, number, number], amount: number): string {
  const [r, g, b] = parseHex(hex);
  const channel = (c: number, t: number) => Math.round(c + (t - c) * amount);
  return `rgb(${channel(r, target[0])}, ${channel(g, target[1])}, ${channel(b, target[2])})`;
}

const washDark = computed(() => mix(props.accent, [16, 20, 28], 0.38));
const washLight = computed(() => mix(props.accent, [255, 255, 255], 0.42));
const edge = computed(() => mix(props.accent, [10, 12, 18], 0.62));
const ink = computed(() => {
  const [r, g, b] = parseHex(props.accent);
  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.62 ? "#14181F" : "#FFFFFF";
});

function press() {
  held.value = true;
}
function release() {
  held.value = false;
}
function keyDown(event: KeyboardEvent) {
  if ((event.key === " " || event.key === "Enter") && !event.repeat) press();
}
function keyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") release();
}
</script>

<template>
  <button
    type="button"
    class="sweep-button"
    :class="[held ? 'sweep-button sweep-button--held' : 'sweep-button']"
    :style="{
      '--accent': accent,
      '--wash-dark': washDark,
      '--wash-light': washLight,
      '--edge': edge,
      '--ink': ink,
      '--press-depth': pressDepth + 'px',
      '--radius': radius + 'px'
    }"
    @pointerdown="press"
    @pointerup="release"
    @pointercancel="release"
    @pointerleave="release"
    @keydown="keyDown"
    @keyup="keyUp"
    @blur="release"
  >
    <span v-if="sweep" aria-hidden="true" class="sweep-button__wash"></span>
    <span class="sweep-button__label"><slot /></span>
  </button>
</template>

<style scoped>
.sweep-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.75rem;
  border: none;
  border-radius: var(--radius, 4px);
  background: var(--accent, #1e90ff);
  color: var(--ink, #fff);
  font: 500 17px/1.35 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    4px 5px 0 0 var(--edge, #0b2a4a);
  transition:
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 150ms ease-out;
  outline: none;
}
.sweep-button:focus-visible {
  outline: 2px solid var(--accent, #1e90ff);
  outline-offset: 4px;
}
.sweep-button--held {
  transform: translateY(var(--press-depth, 3px));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    1px 2px 0 0 var(--edge, #0b2a4a);
}
.sweep-button__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, var(--wash-dark) 0%, var(--accent) 52%, var(--wash-light) 100%);
  transition: opacity 200ms ease;
}
.sweep-button:hover .sweep-button__wash,
.sweep-button:focus-visible .sweep-button__wash {
  opacity: 1;
}
.sweep-button__label {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sweep-button,
  .sweep-button--held {
    transform: none;
    transition: none;
  }
}
</style>

20:Te29, 21:Te2fc,

<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    accent = "#1E90FF",
    pressDepth = 3,
    sweep = true,
    radius = 4,
    children,
  }: { accent?: string; pressDepth?: number; sweep?: boolean; radius?: number; children?: Snippet } = $props();

  let held = $state(false);

  function parseHex(hex: string): [number, number, number] {
    const value = hex.replace("#", "").trim();
    if (!/^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{3}$/.test(value)) return [30, 144, 255];
    const full = value.length === 3 ? value.split("").map((c) => c + c).join("") : value;
    const int = Number.parseInt(full, 16);
    return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
  }

  function mix(hex: string, target: [number, number, number], amount: number): string {
    const [r, g, b] = parseHex(hex);
    const channel = (c: number, t: number) => Math.round(c + (t - c) * amount);
    return `rgb(${channel(r, target[0])}, ${channel(g, target[1])}, ${channel(b, target[2])})`;
  }

  const colors = $derived.by(() => {
    const [r, g, b] = parseHex(accent);
    return {
      dark: mix(accent, [16, 20, 28], 0.38),
      light: mix(accent, [255, 255, 255], 0.42),
      edge: mix(accent, [10, 12, 18], 0.62),
      ink: (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.62 ? "#14181F" : "#FFFFFF",
    };
  });

  function press() {
    held = true;
  }
  function release() {
    held = false;
  }
  function keyDown(event: KeyboardEvent) {
    if ((event.key === " " || event.key === "Enter") && !event.repeat) press();
  }
  function keyUp(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") release();
  }
</script>

<button
  type="button"
  class="sweep-button"
  class:held
  style="--accent: {accent}; --wash-dark: {colors.dark}; --wash-light: {colors.light}; --edge: {colors.edge}; --ink: {colors.ink}; --press-depth: {pressDepth}px; --radius: {radius}px"
  onpointerdown={press}
  onpointerup={release}
  onpointercancel={release}
  onpointerleave={release}
  onkeydown={keyDown}
  onkeyup={keyUp}
  onblur={release}
>
  {#if sweep}
    <span aria-hidden="true" class="wash"></span>
  {/if}
  <span class="label">{@render children?.()}</span>
</button>

<style>
  .sweep-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.75rem;
    border: none;
    border-radius: var(--radius, 4px);
    background: var(--accent, #1e90ff);
    color: var(--ink, #fff);
    font: 500 17px/1.35 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      4px 5px 0 0 var(--edge, #0b2a4a);
    transition:
      transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 150ms ease-out;
    outline: none;
  }
  .sweep-button:focus-visible {
    outline: 2px solid var(--accent, #1e90ff);
    outline-offset: 4px;
  }
  .held {
    transform: translateY(var(--press-depth, 3px));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      1px 2px 0 0 var(--edge, #0b2a4a);
  }
  .wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, var(--wash-dark) 0%, var(--accent) 52%, var(--wash-light) 100%);
    transition: opacity 200ms ease;
  }
  .sweep-button:hover .wash,
  .sweep-button:focus-visible .wash {
    opacity: 1;
  }
  .label {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .sweep-button,
    .held {
      transform: none;
      transition: none;
    }
  }
</style>

Nearby