@youcan/celeste 0.6.3

package/src/components/badge/stories/status-badge.stories.ts

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

package/src/components/button/button.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: 'md',
+  variant: 'fill',
+  intent: 'primary',
+  as: 'button',
+});
+</script>
+
+<script lang="ts">
+export interface ButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xxs' | 'xs' | 'sm' | 'md';
+  intent?: 'primary' | 'neutral' | 'error';
+  variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :class="clsx(
+      'celeste-button',
+      `celeste-button-intent-${intent}`,
+      `celeste-button-size-${size}`,
+      `celeste-button-variant-${variant}`,
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+
+$size-map: (
+  'xxs': (
+    height: 28px,
+    border-radius: var(--radius-8),
+    padding: var(--spacing-4) var(--spacing-6),
+    gap: var(--spacing-4),
+  ),
+  'xs': (
+    height: 32px,
+    border-radius: var(--radius-8),
+    padding: var(--spacing-6) var(--spacing-8),
+    gap: var(--spacing-4),
+  ),
+  'sm': (
+    height: 36px,
+    border-radius: var(--radius-8),
+    padding: var(--spacing-8) var(--spacing-10),
+    gap: var(--spacing-6),
+  ),
+  'md': (
+    height: 40px,
+    border-radius: var(--radius-10),
+    padding: var(--spacing-10) var(--spacing-12),
+    gap: var(--spacing-6),
+  ),
+);
+$intent-map: (
+  'primary': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-primary-base),
+      border: var(--color-primary-base),
+      shadow: none,
+    ),
+    'stroke': (
+      fg: var(--color-primary-base),
+      bg: transparent,
+      border: var(--color-primary-base),
+      shadow: none,
+    ),
+    'lighter': (
+      fg: var(--color-primary-base),
+      bg: var(--color-primary-alpha-10),
+      border: transparent,
+      shadow: none,
+    ),
+    'ghost': (
+      fg: var(--color-primary-base),
+      bg: transparent,
+      border: transparent,
+      shadow: none,
+    ),
+  ),
+  'neutral': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-bg-strong-950),
+      border: var(--color-bg-strong-950),
+      shadow: none,
+    ),
+    'stroke': (
+      fg: var(--color-text-sub-600),
+      bg: transparent,
+      border: var(--color-bg-soft-200),
+      shadow: var(--shadow-regular-xs),
+    ),
+    'lighter': (
+      fg: var(--color-text-sub-600),
+      bg: var(--color-bg-weak-50),
+      border: var(--color-bg-weak-50),
+      shadow: none,
+    ),
+    'ghost': (
+      fg: var(--color-text-sub-600),
+      bg: transparent,
+      border: transparent,
+      shadow: none,
+    ),
+  ),
+  'error': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-state-error-base),
+      border: var(--color-state-error-base),
+      shadow: none,
+    ),
+    'stroke': (
+      fg: var(--color-state-error-base),
+      bg: transparent,
+      border: var(--color-state-error-base),
+      shadow: none,
+    ),
+    'lighter': (
+      fg: var(--color-state-error-base),
+      bg: var(--color-red-alpha-10),
+      border: transparent,
+      shadow: none,
+    ),
+    'ghost': (
+      fg: var(--color-state-error-base),
+      bg: transparent,
+      border: transparent,
+      shadow: none,
+    ),
+  ),
+);
+$hover-map: (
+  'primary': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-primary-darker),
+      border: var(--color-primary-darker),
+    ),
+    'stroke': (
+      fg: var(--color-primary-base),
+      bg: var(--color-primary-alpha-10),
+      border: transparent,
+    ),
+    'lighter': (
+      fg: var(--color-primary-base),
+      bg: transparent,
+      border: var(--color-primary-base),
+    ),
+    'ghost': (
+      fg: var(--color-primary-base),
+      bg: var(--color-primary-alpha-10),
+      border: transparent,
+    ),
+  ),
+  'neutral': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-bg-surface-800),
+      border: transparent,
+    ),
+    'stroke': (
+      fg: var(--color-text-strong-950),
+      bg: var(--color-bg-weak-50),
+      border: transparent,
+    ),
+    'lighter': (
+      fg: var(--color-text-strong-950),
+      bg: transparent,
+      border: var(--color-bg-soft-200),
+    ),
+    'ghost': (
+      fg: var(--color-text-strong-950),
+      bg: var(--color-bg-weak-50),
+      border: transparent,
+    ),
+  ),
+  'error': (
+    'fill': (
+      fg: var(--color-text-white-0),
+      bg: var(--color-red-700),
+      border: var(--color-red-700),
+    ),
+    'stroke': (
+      fg: var(--color-state-error-base),
+      bg: var(--color-red-alpha-10),
+      border: transparent,
+    ),
+    'lighter': (
+      fg: var(--color-state-error-base),
+      bg: transparent,
+      border: var(--color-state-error-base),
+    ),
+    'ghost': (
+      fg: var(--color-state-error-base),
+      bg: var(--color-red-alpha-10),
+      border: transparent,
+    ),
+  ),
+);
+
+.celeste-button {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  transition-property: background-color, color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: none;
+  border: 1px solid transparent;
+  background-color: transparent;
+  font: var(--label-sm);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+    cursor: default;
+  }
+
+  :deep(i) {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  @each $k, $v in $size-map {
+    &-size-#{$k} {
+      gap: map.get($v, gap);
+      height: map.get($v, height);
+      padding: map.get($v, padding);
+      border-radius: map.get($v, border-radius);
+    }
+  }
+
+  @each $intent, $sub in $intent-map {
+    @each $variant, $values in $sub {
+      &-intent-#{$intent}:not(:disabled).celeste-button-variant-#{$variant}:not(:disabled) {
+        border-color: map.get($values, border);
+        background-color: map.get($values, bg);
+        box-shadow: map.get($values, shadow);
+        color: map.get($values, fg);
+
+        &:hover:not(:disabled) {
+          $hover-values: map.get(map.get($hover-map, $intent), $variant);
+
+          border-color: map.get($hover-values, border);
+          background-color: map.get($hover-values, bg);
+          color: map.get($hover-values, fg);
+        }
+
+        &:focus:not(:disabled) {
+          outline: none;
+          box-shadow: if(
+            $intent == 'neutral',
+            var(--shadow-buttons-important-focus),
+            var(--shadow-buttons-#{$intent}-focus)
+          );
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/button/compact-button.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<CompactButtonProps>(), {
+  size: 'lg',
+  as: 'button',
+  variant: 'stroke',
+});
+</script>
+
+<script lang="ts">
+export interface CompactButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  icon: string;
+  size?: 'lg' | 'md';
+  rounded?: boolean;
+  variant?: 'stroke' | 'white' | 'ghost';
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :class="clsx(
+      'celeste-cbutton',
+      `celeste-cbutton-${size}`,
+      `celeste-cbutton-${variant}`,
+      rounded && `celeste-cbutton-rounded`,
+      props.class,
+    )"
+  >
+    <i :class="icon" />
+  </Primitive>
+</template>
+
+<style scoped lang="scss">
+.celeste-cbutton {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  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-6);
+  background-color: transparent;
+  color: var(--color-icon-sub-600);
+  font: var(--label-sm);
+  text-decoration: none;
+  cursor: pointer;
+  gap: var(--spacing-2);
+
+  &:disabled {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--color-icon-disabled-300);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &-rounded {
+    border-radius: var(--radius-full);
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: var(--color-bg-weak-50);
+    box-shadow: none;
+    color: var(--color-icon-strong-950);
+  }
+
+  &:focus {
+    border-color: transparent;
+    outline: none;
+    background-color: var(--color-bg-weak-50);
+    box-shadow: var(--shadow-buttons-important-focus);
+    color: var(--color-icon-strong-950);
+  }
+
+  &:active {
+    border-color: transparent;
+    outline: none;
+    background-color: var(--color-bg-strong-950);
+    box-shadow: none;
+    color: var(--color-icon-white-0);
+  }
+
+  &-lg {
+    width: 24px;
+    height: 24px;
+    padding: 2px;
+
+    :deep(i) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &-md {
+    width: 20px;
+    height: 20px;
+    padding: 1px;
+
+    :deep(i) {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &-stroke {
+    border-color: var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-xs);
+  }
+
+  &-white {
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-xs);
+  }
+}
+</style>

package/src/components/button/fancy-button.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<FancyButtonProps>(), {
+  size: 'md',
+  intent: 'primary',
+  as: 'button',
+});
+</script>
+
+<script lang="ts">
+export interface FancyButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  intent?: 'primary' | 'neutral' | 'error' | 'basic';
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :class="clsx(
+      'celeste-fbutton',
+      `celeste-fbutton-${intent}`,
+      `celeste-fbutton-${size}`,
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style scoped lang="scss">
+@use 'sass:map';
+
+@property --celeste-fbutton-bg-start {
+  syntax: '<color>';
+  initial-value: rgb(0 0 0 / 0%);
+  inherits: false;
+}
+
+@property --celeste-fbutton-bg-end {
+  syntax: '<color>';
+  initial-value: rgb(0 0 0 / 0%);
+  inherits: false;
+}
+
+$size-map: (
+  'xs': (
+    height: 32px,
+    border-radius: var(--radius-8),
+    padding: var(--spacing-6) var(--spacing-8),
+    gap: var(--spacing-4),
+  ),
+  'sm': (
+    height: 36px,
+    border-radius: var(--radius-8),
+    padding: var(--spacing-8) var(--spacing-10),
+    gap: var(--spacing-6),
+  ),
+  'md': (
+    height: 40px,
+    border-radius: var(--radius-10),
+    padding: var(--spacing-10) var(--spacing-12),
+    gap: var(--spacing-6),
+  ),
+);
+$intent-map: (
+  'primary': (
+    bg: var(--color-primary-base),
+  ),
+  'neutral': (
+    bg: var(--color-bg-strong-950),
+  ),
+  'error': (
+    bg: var(--color-state-error-base),
+  ),
+);
+
+.celeste-fbutton {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  transition-property: --celeste-fbutton-bg-start, --celeste-fbutton-bg-end, background-color, color, border-color,
+    box-shadow;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: none;
+  background-color: transparent;
+  font: var(--label-sm);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+    cursor: default;
+  }
+
+  :deep(i) {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  @each $k, $v in $size-map {
+    &-#{$k} {
+      gap: map.get($v, gap);
+      height: map.get($v, height);
+      padding: map.get($v, padding);
+      border-radius: map.get($v, border-radius);
+    }
+  }
+
+  @each $k, $v in $intent-map {
+    &-#{$k}:not(&-basic, :disabled) {
+      --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
+      --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
+
+      background:
+        linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%),
+        #{map.get($v, bg)};
+      box-shadow:
+        inset 0 1px 0.5px 0.5px hsl(0deg 0% 100% / 12%),
+        var(--shadow-fancy-buttons-#{$k});
+      color: var(--color-text-white-0);
+
+      &:hover {
+        --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
+        --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
+      }
+
+      &:focus {
+        --celeste-fbutton-bg-start: rgb(255 255 255 / 24%);
+        --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
+
+        box-shadow:
+          inset 0 1px 0.5px 0.5px hsl(0deg 0% 100% / 12%),
+          var(--shadow-fancy-buttons-#{$k}),
+          if($k == 'neutral', var(--shadow-buttons-important-focus), var(--shadow-buttons-#{$k}-focus));
+      }
+    }
+  }
+
+  &-basic {
+    background: var(--color-bg-white-0);
+    box-shadow: var(--shadow-fancy-buttons-stroke);
+    color: var(--color-text-sub-600);
+
+    &:hover {
+      background: var(--color-bg-weak-50);
+      box-shadow: none;
+      color: var(--text-strong-950);
+    }
+
+    &:focus {
+      background: var(--color-bg-weak-50);
+      box-shadow: var(--shadow-buttons-important-focus);
+      color: var(--text-strong-950);
+    }
+  }
+}
+</style>

package/src/components/button/index.ts

@@ -0,0 +1,14 @@
+export * from './button.vue';
+export { default as Button } from './button.vue';
+
+export * from './compact-button.vue';
+export { default as CompactButton } from './compact-button.vue';
+
+export * from './fancy-button.vue';
+export { default as FancyButton } from './fancy-button.vue';
+
+export * from './link-button.vue';
+export { default as LinkButton } from './link-button.vue';
+
+export * from './social-button.vue';
+export { default as SocialButton } from './social-button.vue';