1  <script lang="ts">
  2    export let variant:
  3      | "caution"
  4      | "foreground"
  5      | "background"
  6      | "outline"
  7      | "yellow"
  8      | "neutral"
  9      | "negative"
 10      | "positive"
 11      | "primary"
 12      | "foreground-emphasized"
 13      | "delegate"
 14      | "secondary";
 15    export let round: boolean = false;
 16    export let style: string | undefined = undefined;
 17    export let size: "tiny" | "small" | "medium" = "tiny";
 18    export let title: string | undefined = undefined;
 19  </script>
 20  
 21  <style>
 22    .badge {
 23      border-radius: var(--border-radius-round);
 24      font-size: var(--font-size-tiny);
 25      font-weight: var(--font-weight-bold);
 26      line-height: 1.6;
 27      height: var(--button-tiny-height);
 28      display: flex;
 29      white-space: nowrap;
 30      align-items: center;
 31      gap: 0.25rem;
 32    }
 33    .background {
 34      color: currentColor;
 35      background: var(--color-background-float);
 36    }
 37    .foreground {
 38      color: var(--color-foreground-dim);
 39      background: var(--color-fill-ghost);
 40    }
 41    .foreground-emphasized {
 42      background-color: var(--color-fill-selected);
 43      color: var(--color-foreground-emphasized-hover);
 44    }
 45    .delegate {
 46      color: var(--color-foreground-primary);
 47      background: var(--color-fill-delegate);
 48    }
 49    .neutral {
 50      color: var(--color-foreground-contrast);
 51      background: var(--color-fill-ghost);
 52    }
 53    .positive {
 54      color: var(--color-foreground-success);
 55      background-color: var(--color-fill-diff-green-light);
 56    }
 57    .secondary {
 58      color: var(--color-fill-secondary-hover);
 59      background-color: var(--color-fill-counter-emphasized);
 60    }
 61    .yellow {
 62      color: var(--color-fill-yellow);
 63      background-color: var(--color-fill-yellow);
 64    }
 65    .outline {
 66      border: 1px solid var(--color-border-hint);
 67      background-color: transparent;
 68    }
 69    .outline:hover {
 70      border-color: var(--color-fill-secondary);
 71    }
 72    .negative {
 73      color: var(--color-foreground-red);
 74      background-color: var(--color-fill-diff-red-light);
 75    }
 76    .primary {
 77      color: var(--color-foreground-primary);
 78      background: var(--color-fill-delegate);
 79    }
 80    .caution {
 81      color: var(--color-foreground-yellow);
 82      background: var(--color-fill-private);
 83    }
 84    .tiny {
 85      height: 1.5rem;
 86      font-size: var(--font-size-tiny);
 87      font-weight: var(--font-weight-semibold);
 88      padding: 0.25rem 0.5rem;
 89    }
 90    .small {
 91      height: 2rem;
 92      font-size: var(--font-size-small);
 93      padding: 0.5rem 0.75rem;
 94    }
 95    .medium {
 96      height: 2.5rem;
 97      font-size: var(--font-size-small);
 98      padding: 0.75rem 1rem;
 99    }
100    .round {
101      aspect-ratio: 1/1;
102      justify-content: center;
103      padding: unset;
104    }
105  </style>
106  
107  <!-- svelte-ignore a11y-click-events-have-key-events -->
108  <span
109    role="button"
110    tabindex="0"
111    on:click
112    on:mouseenter
113    on:mouseleave
114    class="badge"
115    {style}
116    {title}
117    class:round
118    class:tiny={size === "tiny"}
119    class:small={size === "small"}
120    class:medium={size === "medium"}
121    class:caution={variant === "caution"}
122    class:yellow={variant === "yellow"}
123    class:delegate={variant === "delegate"}
124    class:outline={variant === "outline"}
125    class:foreground-emphasized={variant === "foreground-emphasized"}
126    class:background={variant === "background"}
127    class:foreground={variant === "foreground"}
128    class:neutral={variant === "neutral"}
129    class:negative={variant === "negative"}
130    class:positive={variant === "positive"}
131    class:primary={variant === "primary"}
132    class:secondary={variant === "secondary"}>
133    <slot />
134  </span>