@channel.io/bezier-react 4.0.0-next.0 → 4.0.0-next.2

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,4BAA4B,EAAE,WAAgD;AAoB5F,eAAO,MAAM,kBAAkB,4HAiE7B,CAAA"}
+{"version":3,"file":"FloatingIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,4BAA4B,EAAE,WAAgD;AAoB5F,eAAO,MAAM,kBAAkB,4HAkE7B,CAAA"}

package/dist/types/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAA2B,MAAM,gBAAgB,CAAA;AAI1E,eAAO,MAAM,cAAc,kBAAkB,CAAA;AAwE7C,eAAO,MAAM,MAAM,2GA8ElB,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAA2B,MAAM,gBAAgB,CAAA;AAI1E,eAAO,MAAM,cAAc,kBAAkB,CAAA;AAwE7C,eAAO,MAAM,MAAM,2GAiFlB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "4.0.0-next.0",
+  "version": "4.0.0-next.2",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "1.0.0-next.0",
+    "@channel.io/bezier-tokens": "1.0.0-next.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.2.2",

package/src/components/AlphaButton/Button.module.scss

@@ -42,6 +42,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     & .ButtonText {
       padding: 0 3px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &:where(.size-s) {
@@ -54,21 +59,31 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.size-m) {
-    height: 36px;
+    height: 32px;
     padding: 0 10px;
 
     & .ButtonText {
       padding: 0 4px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &:where(.size-l) {
-    height: 44px;
-    padding: 0 14px;
+    height: 40px;
+    padding: 0 12px;
 
     & .ButtonText {
       padding: 0 6px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   &:where(.size-xl) {
@@ -257,7 +272,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
 
       &:where(.color-blue) {
-        background-color: var(--color-fill-neutral-heaviest-hovered);
+        background-color: var(--color-fill-neutral-transparent-hovered);
       }
     }
 

package/src/components/AlphaButton/Button.tsx

@@ -49,10 +49,10 @@ function getIconSize(size: ButtonSize) {
 function getTypography(size: ButtonSize) {
   return (
     {
-      xs: '13',
+      xs: '12',
       s: '13',
-      m: '14',
-      l: '15',
+      m: '13',
+      l: '14',
       xl: '18',
     } as const
   )[size]

package/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -60,6 +60,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     & .ButtonText {
       padding: 0 3px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &:where(.size-s) {
@@ -72,21 +77,31 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.size-m) {
-    height: 36px;
+    height: 32px;
     padding: 0 12px;
 
     & .ButtonText {
       padding: 0 4px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &:where(.size-l) {
-    height: 44px;
-    padding: 0 14px;
+    height: 40px;
+    padding: 0 12px;
 
     & .ButtonText {
       padding: 0 6px;
     }
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   &:where(.size-xl) {

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -49,10 +49,10 @@ function getIconSize(size: FloatingButtonSize) {
 function getTypography(size: FloatingButtonSize) {
   return (
     {
-      xs: '13',
+      xs: '12',
       s: '13',
-      m: '14',
-      l: '15',
+      m: '13',
+      l: '14',
       xl: '18',
     } as const
   )[size]

package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -52,7 +52,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   &:where(.size-xs) {
     @include dimension.square(20px);
 
-    padding: 2px;
+    padding: 3px;
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &:where(.size-s) {
@@ -62,15 +67,25 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.size-m) {
-    @include dimension.square(36px);
+    @include dimension.square(32px);
+
+    padding: 7px;
 
-    padding: 8px;
+    & :is(.ButtonIcon, .Loader) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &:where(.size-l) {
-    @include dimension.square(44px);
+    @include dimension.square(40px);
+
+    padding: 10px;
 
-    padding: 12px;
+    & :is(.ButtonIcon, .Loader) {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   &:where(.size-xl) {

package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -67,6 +67,7 @@ export const FloatingIconButton = forwardRef<
           <Icon
             size={getIconSize(size)}
             source={content}
+            className={styles.ButtonIcon}
           />
         ) : (
           content

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -13,7 +13,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   &:where(.size-xs) {
     @include dimension.square(20px);
 
-    padding: 2px;
+    padding: 3px;
+
+    & :is(.ButtonIcon, .Loader) {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &:where(.size-s) {
@@ -23,15 +28,25 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   }
 
   &:where(.size-m) {
-    @include dimension.square(36px);
+    @include dimension.square(32px);
+
+    padding: 7px;
 
-    padding: 8px;
+    & :is(.ButtonIcon, .Loader) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &:where(.size-l) {
-    @include dimension.square(44px);
+    @include dimension.square(40px);
+
+    padding: 10px;
 
-    padding: 12px;
+    & :is(.ButtonIcon, .Loader) {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   &:where(.size-xl) {

package/src/components/Button/Button.module.scss

@@ -18,6 +18,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 7px;
     }
+
+    & :is(.ButtonIcon, .ButtonSpinner) {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   &:where(.size-s) {
@@ -31,22 +36,32 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   }
 
   &:where(.size-m) {
-    min-width: 36px;
-    height: 36px;
+    min-width: 32px;
+    height: 32px;
     padding: 0 10px;
 
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 14px;
     }
+
+    & :is(.ButtonIcon, .ButtonSpinner) {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &:where(.size-l) {
-    min-width: 44px;
-    height: 44px;
+    min-width: 40px;
+    height: 40px;
     padding: 0 12px;
 
     &:where(.style-floating, .style-floating-alt) {
-      padding: 0 18px;
+      padding: 0 12px;
+    }
+
+    & :is(.ButtonIcon, .ButtonSpinner) {
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -76,6 +91,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     }
   }
 
+
   /* Color variants */
   &:where(.style-primary) {
     @each $color-variant in $chromatic-color-variants {
@@ -228,7 +244,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       }
 
       &#{$active-selector} {
-        background-color: var(--color-fill-neutral-heaviest-hovered);
+        background-color: var(--color-fill-neutral-transparent-hovered);
       }
     }
   }

package/src/components/Button/Button.tsx

@@ -22,10 +22,10 @@ export const BUTTON_TEST_ID = 'bezier-button'
 function getTypography(size: ButtonSize) {
   return (
     {
-      xs: '13',
+      xs: '12',
       s: '13',
-      m: '14',
-      l: '15',
+      m: '13',
+      l: '14',
       xl: '18',
     } as const
   )[size]
@@ -161,7 +161,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
         {loading && (
           <div className={styles.ButtonLoader}>
-            <Spinner size={getSpinnerSize(size)} />
+            <Spinner
+              size={getSpinnerSize(size)}
+              className={styles.ButtonSpinner}
+            />
           </div>
         )}
       </Comp>