feat: badge (#12)

packages/celeste-tokens/src/tokens/typo.json

@@ -478,7 +478,7 @@
       },
       "$type": "typography"
     },
-    "2xs": {
+    "xxs": {
       "$value": {
         "fontFamily": "{fontFamilies.sans}",
         "fontWeight": "{fontWeights.display-0}",

packages/celeste-vue/src/components/badge/badge.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  size: 'md',
+  color: 'faded',
+  variant: 'fill',
+  type: 'basic',
+});
+</script>
+
+<script lang="ts">
+export interface BadgeProps {
+  size?: 'sm' | 'md';
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  type?: 'basic' | 'dot' | 'leading-icon' | 'trailing-icon';
+  color?: 'faded' | 'information' | 'warning' | 'error' | 'success' | 'away' | 'feature' | 'verified' | 'highlighted' | 'stable';
+  disabled?: boolean;
+  icon?: string;
+  label?: string;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx(
+      'celeste-badge',
+      `celeste-badge-${size}`,
+      `celeste-badge-${type}`,
+      `celeste-badge-${color}`,
+      `celeste-badge-${variant}`,
+      disabled && 'celeste-badge-disabled',
+      props.class,
+    )"
+    :aria-label="label"
+    :aria-disabled="disabled || undefined"
+    role="badge"
+  >
+    <i v-if="type === 'dot'" class="i-celeste-dot dot" />
+    <i v-if="type === 'leading-icon'" :class="icon" />
+    <span v-if="label">{{ label }}</span>
+    <i v-if="type === 'trailing-icon'" :class="icon" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+$colors: faded, information, warning, error, success, awaiy, feature, verified, highlighted, stable;
+
+.celeste-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-8);
+  transition-property: background-color, color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  pointer-events: none;
+  user-select: none;
+  gap: 2px;
+
+  i.dot {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+  }
+
+  i:not(.dot) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:has(i.dot) {
+    gap: 0;
+    padding-inline-start: var(--spacing-2);
+  }
+
+  &-leading-icon {
+    padding-inline-start: var(--spacing-2);
+  }
+
+  &-trailing-icon {
+    padding-inline-end: var(--spacing-2);
+  }
+
+  &-disabled {
+    border-color: var(--color-stroke-soft-200);
+    background-color: transparent;
+    color: var(--color-text-disabled-300);
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--subheading-xxs);
+    text-transform: uppercase;
+  }
+
+  &-md {
+    height: 20px;
+    font: var(--label-xs);
+  }
+
+  @each $color in $colors {
+    &-fill.celeste-badge-#{$color}:not(&-disabled) {
+      background-color: var(--color-state-#{$color}-base);
+      color: var(--color-text-white-0);
+    }
+
+    &-light.celeste-badge-#{$color}:not(&-disabled) {
+      background-color: var(--color-state-#{$color}-light);
+      color: var(--color-state-#{$color}-dark);
+    }
+
+    &-lighter.celeste-badge-#{$color}:not(&-disabled) {
+      background-color: var(--color-state-#{$color}-lighter);
+      color: var(--color-state-#{$color}-base);
+    }
+
+    &-stroke.celeste-badge-#{$color}:not(&-disabled) {
+      border-color: var(--color-state-#{$color}-base);
+      color: var(--color-state-#{$color}-base);
+    }
+  }
+}
+</style>

packages/celeste-vue/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './badge.vue';
+export { default as Badge } from './badge.vue';

packages/celeste-vue/src/components/badge/stories/badge.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Badge from '../badge.vue';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+
+  },
+
+  render: args => ({
+    components: { Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Badge v-bind="args">
+      </Badge>
+    `,
+  }),
+};

packages/celeste-vue/src/components/button/button.vue

@@ -236,6 +236,7 @@ $hover-map: (
   }
 
   :deep(i) {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
   }

packages/celeste-vue/src/components/button/fancy-button.vue

@@ -103,6 +103,7 @@ $type-map: (
   }
 
   :deep(i) {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
   }

packages/celeste-vue/src/components/button/link-button.vue

@@ -72,6 +72,7 @@ export interface LinkButtonProps extends PrimitiveProps {
     font: var(--label-sm);
 
     :deep(i) {
+      flex-shrink: 0;
       width: 20px;
       height: 20px;
     }
@@ -82,6 +83,7 @@ export interface LinkButtonProps extends PrimitiveProps {
     font: var(--label-xs);
 
     :deep(i) {
+      flex-shrink: 0;
       width: 16px;
       height: 16px;
     }

packages/celeste-vue/src/components/button/social-button.vue

@@ -110,6 +110,7 @@ $brand-map: (
   }
 
   i {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
   }

packages/celeste-vue/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './alert';
+export * from './badge';
 export * from './button';