Add AlphaButton component

.changeset/forty-days-cry.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Change outline color of primary and blue `Button` component when focused.

.changeset/olive-ants-explode.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Add `AlphaButton` component.

packages/bezier-react/src/components/AlphaButton/AlphaButton.stories.tsx

@@ -0,0 +1,29 @@
+import { ArrowRightIcon, PlusIcon } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import {
+  AlphaButton,
+  type AlphaButtonProps,
+} from '~/src/components/AlphaButton'
+
+const meta: Meta<typeof AlphaButton> = {
+  component: AlphaButton,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+}
+export default meta
+
+export const Playground: StoryObj<AlphaButtonProps> = {
+  args: {
+    text: 'Invite',
+    disabled: false,
+    active: false,
+    loading: false,
+    prefixIcon: PlusIcon,
+    suffixIcon: ArrowRightIcon,
+    size: 'm',
+    variant: 'primary',
+    color: 'blue',
+  },
+}

packages/bezier-react/src/components/AlphaButton/Button.module.scss

@@ -0,0 +1,267 @@
+$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
+
+.Button {
+  position: relative;
+  box-sizing: border-box;
+  transition: background-color var(--transition-s);
+
+  /* dimension */
+  &:where(.size-xs) {
+    height: 20px;
+    padding: 0 4px;
+
+    & :where(.ButtonText) {
+      padding: 0 3px;
+    }
+  }
+
+  &:where(.size-s) {
+    height: 24px;
+    padding: 0 6px;
+
+    & :where(.ButtonText) {
+      padding: 0 3px;
+    }
+
+    & :where(.ButtonContent) {
+      gap: 1px;
+    }
+  }
+
+  &:where(.size-m) {
+    height: 36px;
+    padding: 0 10px;
+
+    & :where(.ButtonText) {
+      padding: 0 4px;
+    }
+  }
+
+  &:where(.size-l) {
+    height: 44px;
+    padding: 0 14px;
+
+    & :where(.ButtonText) {
+      padding: 0 6px;
+    }
+  }
+
+  &:where(.size-xl) {
+    height: 54px;
+    padding: 0 18px;
+
+    & :where(.ButtonText) {
+      padding: 0 6px;
+    }
+  }
+
+  /* background-color */
+  &:where(.variant-primary) {
+    $background-color-by-color: (
+      blue: var(--alpha-color-primary-bg-normal),
+      cobalt: var(--alpha-color-accent-bg-normal),
+      red: var(--alpha-color-critical-bg-normal),
+      orange: var(--alpha-color-warning-bg-normal),
+      green: var(--alpha-color-success-bg-normal),
+      pink: var(--alpha-color-bg-pink-normal),
+      purple: var(--alpha-color-bg-purple-normal),
+      dark-grey: var(--alpha-color-bg-grey-darkest),
+      light-grey: var(--alpha-color-bg-black-dark),
+    );
+
+    @each $color, $background-color in $background-color-by-color {
+      &:where(.color-#{$color}) {
+        background-color: $background-color;
+      }
+    }
+  }
+
+  &:where(.variant-secondary) {
+    $background-color-by-color: (
+      blue: var(--alpha-color-primary-bg-lightest),
+      cobalt: var(--alpha-color-accent-bg-lightest),
+      red: var(--alpha-color-critical-bg-lightest),
+      orange: var(--alpha-color-warning-bg-lightest),
+      green: var(--alpha-color-success-bg-lightest),
+      pink: var(--alpha-color-bg-pink-lightest),
+      purple: var(--alpha-color-bg-purple-lightest),
+      dark-grey: var(--alpha-color-bg-black-lighter),
+      light-grey: var(--alpha-color-bg-black-lighter),
+    );
+
+    @each $color, $background-color in $background-color-by-color {
+      &:where(.color-#{$color}) {
+        background-color: $background-color;
+      }
+    }
+  }
+
+  &:where(.variant-tertiary) {
+    background-color: initial;
+  }
+
+  /* color */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:where(.variant-primary) {
+    color: var(--alpha-color-fg-absolute-white-dark);
+
+    &:where(.color-dark-grey) {
+      color: var(--alpha-color-fg-white-normal);
+    }
+
+    &:where(.color-light-grey) {
+      color: var(--alpha-color-fg-absolute-white-normal);
+    }
+  }
+
+  &:where(.variant-secondary, .variant-tertiary) {
+    $color-map: (
+      blue: var(--alpha-color-primary-fg-normal),
+      cobalt: var(--alpha-color-accent-fg-normal),
+      red: var(--alpha-color-critical-fg-normal),
+      orange: var(--alpha-color-warning-fg-normal),
+      green: var(--alpha-color-success-fg-normal),
+      pink: var(--alpha-color-fg-pink-normal),
+      purple: var(--alpha-color-fg-purple-normal),
+      dark-grey: var(--alpha-color-fg-black-darkest),
+      light-grey: var(--alpha-color-fg-black-darker),
+    );
+
+    @each $button-color, $color in $color-map {
+      &:where(.color-#{$button-color}) {
+        color: $color;
+      }
+    }
+
+    &:where(.color-dark-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-darker);
+      }
+    }
+
+    &:where(.color-light-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-dark);
+      }
+    }
+  }
+
+  &:where(.variant-tertiary.color-white) {
+    & :where(.ButtonIcon) {
+      color: var(--alpha-color-fg-absolute-white-light);
+    }
+
+    & :where(.ButtonText) {
+      color: var(--alpha-color-fg-absolute-white-normal);
+    }
+  }
+
+  /* border-radius */
+  &:where(.variant-primary, .variant-secondary, .variant-tertiary) {
+    $border-radius-by-size: (
+      xs: var(--alpha-dimension-6),
+      s: var(--alpha-dimension-7),
+      m: var(--alpha-dimension-10),
+      l: var(--alpha-dimension-12),
+      xl: var(--alpha-dimension-14),
+    );
+
+    @each $size, $border-radius in $border-radius-by-size {
+      &:where(.size-#{$size}) {
+        border-radius: $border-radius;
+      }
+    }
+  }
+
+  /* TODO: use v2 token when design is specified */
+
+  /* visual effect on interaction */
+  &:where(.active, :hover):where(:not(:disabled)) {
+    &:where(.variant-primary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-dark);
+        }
+      }
+
+      &:where(.color-dark-grey) {
+        background-color: var(--bg-grey-darkest);
+      }
+
+      &:where(.color-light-grey) {
+        background-color: var(--bg-black-darker);
+      }
+    }
+
+    &:where(.variant-secondary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-lighter);
+        }
+      }
+
+      &:where(.color-dark-grey, .color-light-grey) {
+        background-color: var(--bg-black-light);
+      }
+    }
+
+    &:where(.variant-tertiary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-lightest);
+        }
+      }
+
+      &:where(.color-dark-grey, .color-light-grey, .color-white) {
+        background-color: var(--bg-black-lighter);
+      }
+    }
+
+    &:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darkest);
+      }
+    }
+
+    &:where(.color-light-grey):where(.variant-secondary, .variant-tertiary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darker);
+      }
+    }
+
+    &:where(.color-white.variant-tertiary) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-absolute-white-normal);
+      }
+    }
+  }
+
+  &:where(.variant-primary.color-blue:focus-visible) {
+    outline: 3px solid var(--bgtxt-blue-light);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--alpha-opacity-disabled);
+  }
+
+  /* internal components */
+  .ButtonContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:where(.loading) {
+      visibility: hidden;
+    }
+  }
+
+  .ButtonLoader {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}