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

type Size = "sm" | "md" | "lg";

const props = withDefaults(
  defineProps<{
    accent?: string;
    depth?: number;
    size?: Size;
    pressed?: boolean;
  }>(),
  { accent: "#FF6A1F", depth: 4, size: "md", pressed: false },
);

interface SizeConfig {
  fontSize: number;
  padding: string;
  radius: number;
  depthScale: number;
}

const SIZE_CONFIG: Record<Size, SizeConfig> = {
  sm: { fontSize: 18, padding: "7px 18px", radius: 5, depthScale: 0.7 },
  md: { fontSize: 24, padding: "10px 26px", radius: 6, depthScale: 1 },
  lg: { fontSize: 30, padding: "13px 34px", radius: 8, depthScale: 1.3 },
};

/** Same hue pushed far down in lightness so the ledge reads as thickness, never as black. */
function ledgeShade(hex: string): string {
  const m = hex.replace("#", "");
  const r = parseInt(m.slice(0, 2), 16) / 255;
  const g = parseInt(m.slice(2, 4), 16) / 255;
  const b = parseInt(m.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const lightness = (max + min) / 2;
  const delta = max - min;
  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
  let hue = 0;
  if (delta !== 0) {
    if (max === r) hue = 60 * (((g - b) / delta) % 6);
    else if (max === g) hue = 60 * ((b - r) / delta + 2);
    else hue = 60 * ((r - g) / delta + 4);
  }
  if (hue < 0) hue += 360;
  const ledgeLightness = Math.min(Math.max(lightness * 0.34, 0.1), 0.3);
  return "hsl(" + hue.toFixed(1) + " " + (Math.min(saturation, 1) * 100).toFixed(1) + "% " + (ledgeLightness * 100).toFixed(1) + "%)";
}

const config = computed(() => SIZE_CONFIG[props.size] ?? SIZE_CONFIG.md);
const ledge = computed(() => Math.max(2, Math.round(props.depth * config.value.depthScale)));
const vars = computed(() => ({
  "--ledge-face": props.accent,
  "--ledge-shade": ledgeShade(props.accent),
  "--ledge-depth": ledge.value + "px",
  "--ledge-radius": config.value.radius + "px",
  fontSize: config.value.fontSize + "px",
}));
</script>

<template>
  <button type="button" class="ledge-btn" :class="{ 'ledge-btn--pressed': pressed }" :style="vars">
    <span class="ledge-btn__cap" :style="{ padding: config.padding }"><slot /></span>
    <span aria-hidden="true" class="ledge-btn__ledge" :style="{ height: 'var(--ledge-depth)' }"></span>
  </button>
</template>

<style scoped>
.ledge-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--ledge-radius);
  background: none;
  cursor: pointer;
  user-select: none;
}
.ledge-btn:focus-visible {
  outline: 2px solid var(--ledge-face);
  outline-offset: 2px;
}
.ledge-btn__cap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ledge-radius);
  background: var(--ledge-face);
  color: #fff7f2;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: transform 120ms ease;
}
.ledge-btn:hover .ledge-btn__cap {
  filter: brightness(1.08);
}
.ledge-btn:active .ledge-btn__cap,
.ledge-btn--pressed .ledge-btn__cap {
  transform: translateY(var(--ledge-depth));
  transition-duration: 80ms;
}
.ledge-btn__ledge {
  display: block;
  border-radius: var(--ledge-radius);
  background: var(--ledge-shade);
  transform-origin: top;
  transition: transform 120ms ease;
}
.ledge-btn:active .ledge-btn__ledge,
.ledge-btn--pressed .ledge-btn__ledge {
  transform: scaleY(0);
  transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .ledge-btn__cap,
  .ledge-btn__ledge {
    transition: none;
  }
}
</style>

20:Teb3, 21:Tcc6c,

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

  type Size = "sm" | "md" | "lg";

  interface SizeConfig {
    fontSize: number;
    padding: string;
    radius: number;
    depthScale: number;
  }

  const SIZE_CONFIG: Record<Size, SizeConfig> = {
    sm: { fontSize: 18, padding: "7px 18px", radius: 5, depthScale: 0.7 },
    md: { fontSize: 24, padding: "10px 26px", radius: 6, depthScale: 1 },
    lg: { fontSize: 30, padding: "13px 34px", radius: 8, depthScale: 1.3 },
  };

  /** Same hue pushed far down in lightness so the ledge reads as thickness, never as black. */
  function ledgeShade(hex: string): string {
    const m = hex.replace("#", "");
    const r = parseInt(m.slice(0, 2), 16) / 255;
    const g = parseInt(m.slice(2, 4), 16) / 255;
    const b = parseInt(m.slice(4, 6), 16) / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const lightness = (max + min) / 2;
    const delta = max - min;
    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
    let hue = 0;
    if (delta !== 0) {
      if (max === r) hue = 60 * (((g - b) / delta) % 6);
      else if (max === g) hue = 60 * ((b - r) / delta + 2);
      else hue = 60 * ((r - g) / delta + 4);
    }
    if (hue < 0) hue += 360;
    const ledgeLightness = Math.min(Math.max(lightness * 0.34, 0.1), 0.3);
    return "hsl(" + hue.toFixed(1) + " " + (Math.min(saturation, 1) * 100).toFixed(1) + "% " + (ledgeLightness * 100).toFixed(1) + "%)";
  }

  let {
    accent = "#FF6A1F",
    depth = 4,
    size = "md",
    pressed = false,
    children,
  }: { accent?: string; depth?: number; size?: Size; pressed?: boolean; children?: Snippet } = $props();

  const config = $derived(SIZE_CONFIG[size] ?? SIZE_CONFIG.md);
  const ledge = $derived(Math.max(2, Math.round(depth * config.depthScale)));
</script>

<button
  type="button"
  class="ledge-btn"
  class:pressed
  data-pressed={pressed ? "" : undefined}
  style="--ledge-face: {accent}; --ledge-shade: {ledgeShade(accent)}; --ledge-depth: {ledge}px; --ledge-radius: {config.radius}px; font-size: {config.fontSize}px"
>
  <span class="ledge-btn__cap" style="padding: {config.padding}">{@render children?.()}</span>
  <span aria-hidden="true" class="ledge-btn__ledge" style="height: var(--ledge-depth)"></span>
</button>

<style>
  .ledge-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--ledge-radius);
    background: none;
    cursor: pointer;
    user-select: none;
  }
  .ledge-btn:focus-visible {
    outline: 2px solid var(--ledge-face);
    outline-offset: 2px;
  }
  .ledge-btn__cap {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ledge-radius);
    background: var(--ledge-face);
    color: #fff7f2;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: transform 120ms ease;
  }
  .ledge-btn:hover .ledge-btn__cap {
    filter: brightness(1.08);
  }
  .ledge-btn:active .ledge-btn__cap,
  .ledge-btn.pressed .ledge-btn__cap {
    transform: translateY(var(--ledge-depth));
    transition-duration: 80ms;
  }
  .ledge-btn__ledge {
    display: block;
    border-radius: var(--ledge-radius);
    background: var(--ledge-shade);
    transform-origin: top;
    transition: transform 120ms ease;
  }
  .ledge-btn:active .ledge-btn__ledge,
  .ledge-btn.pressed .ledge-btn__ledge {
    transform: scaleY(0);
    transition-duration: 80ms;
  }
  @media (prefers-reduced-motion: reduce) {
    .ledge-btn__cap,
    .ledge-btn__ledge {
      transition: none;
    }
  }
</style>

Nearby