@channel.io/bezier-react 3.6.6 → 4.0.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAI7C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,mGAgDhB,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAI7C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,mGAkDhB,CAAA"}

package/dist/types/components/Text/Text.types.d.ts

@@ -3,6 +3,7 @@ import { type BezierComponentProps, type ChildrenProps, type MarginProps, type P
 import { type SemanticColor } from "../../types/tokens";
 type Typography = '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '22' | '24' | '30' | '36';
 type TextAlign = 'left' | 'center' | 'right';
+type TextFontWeight = 400 | 500 | 600 | 700;
 interface TextOwnProps {
     /**
      * Typography style of the text.
@@ -18,6 +19,13 @@ interface TextOwnProps {
      * @default false
      */
     bold?: boolean;
+    /**
+     * Font weight of the text.
+     * If `bold` and `fontWeight` are used together, `fontWeight` takes precedence.
+     * This prop is currently intended for internal Bezier component usage.
+     * @internal
+     */
+    fontWeight?: TextFontWeight;
     /**
      * Whether the text is italic.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,gCAA+B;AAChE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,0BAAyB;AAC1B,OAAO,EAAE,KAAK,aAAa,EAAE,2BAA0B;AAEvD,KAAK,UAAU,GACX,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAA;AAER,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE5C,UAAU,YAAY;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAA;IACzC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,YAAY,CAAC,EACpD,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,YAAY;CAAG"}
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,gCAA+B;AAChE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,0BAAyB;AAC1B,OAAO,EAAE,KAAK,aAAa,EAAE,2BAA0B;AAEvD,KAAK,UAAU,GACX,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAA;AAER,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC5C,KAAK,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3C,UAAU,YAAY;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAA;IACzC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,YAAY,CAAC,EACpD,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,YAAY;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.6.6",
+  "version": "4.0.0-next.1",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.56.0",
+    "@channel.io/bezier-icons": "0.57.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.6.0",
+    "@channel.io/bezier-tokens": "1.0.0-next.1",
     "@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

@@ -39,7 +39,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 20px;
     padding: 0 4px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 3px;
     }
   }
@@ -48,7 +48,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 24px;
     padding: 0 6px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 3px;
     }
   }
@@ -57,7 +57,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 36px;
     padding: 0 10px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 4px;
     }
   }
@@ -66,7 +66,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 44px;
     padding: 0 14px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 6px;
     }
   }
@@ -75,7 +75,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 54px;
     padding: 0 18px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 6px;
     }
   }
@@ -87,6 +87,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: var(#{$background-color});
       }
     }
+
   }
 
   &:where(.variant-secondary) {
@@ -95,6 +96,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: var(#{$background-color});
       }
     }
+
+    &:where(.color-blue) {
+      background-color: var(--color-fill-neutral-light);
+    }
   }
 
   &:where(.variant-tertiary) {
@@ -112,6 +117,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       background-color: var(--color-fill-absolute-white-transparent);
     }
+
   }
 
   /* color */
@@ -130,6 +136,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       color: var(--color-text-absolute-black);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+    }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
@@ -162,6 +177,22 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         color: var(--color-icon-neutral);
       }
     }
+
+    &:where(.variant-secondary.color-blue) {
+      color: var(--color-text-neutral);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
+
+    &:where(.variant-tertiary.color-blue) {
+      color: var(--color-text-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
   }
 
   &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
@@ -176,19 +207,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   /* border-radius */
   &:where(.variant-primary, .variant-secondary, .variant-tertiary) {
-    $border-radius-by-size: (
-      xs: var(--radius-6),
-      s: var(--radius-7),
-      m: var(--radius-10),
-      l: var(--radius-12),
-      xl: var(--radius-14),
-    );
-
-    @each $size, $border-radius in $border-radius-by-size {
-      &:where(.size-#{$size}) {
-        border-radius: $border-radius;
-      }
-    }
+    border-radius: 9999px;
   }
 
   /* TODO: use v2 token when design is specified */
@@ -201,6 +220,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
           background-color: var(#{$background-color}-hovered);
         }
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.variant-secondary) {
@@ -209,6 +232,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
           background-color: var(#{$background-color}-hovered);
         }
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
     }
 
     &:where(.variant-tertiary) {
@@ -228,6 +255,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-white-absolute) {
         background-color: var(--color-fill-absolute-white-transparent-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-transparent-hovered);
+      }
     }
 
     &:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {

package/src/components/AlphaButton/Button.tsx

@@ -109,7 +109,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           <Text
             className={styles.ButtonText}
             typo={getTypography(size)}
-            bold
+            fontWeight={500}
           >
             {text}
           </Text>

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

@@ -57,7 +57,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 20px;
     padding: 0 6px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 3px;
     }
   }
@@ -66,7 +66,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 24px;
     padding: 0 8px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 4px;
     }
   }
@@ -75,7 +75,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 36px;
     padding: 0 12px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 4px;
     }
   }
@@ -84,7 +84,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 44px;
     padding: 0 14px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 6px;
     }
   }
@@ -93,7 +93,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     height: 54px;
     padding: 0 18px;
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 6px;
     }
   }
@@ -105,10 +105,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: var(#{$background-color});
       }
     }
+
   }
 
   &:where(.variant-secondary) {
     background-color: var(--color-fill-grey);
+
   }
 
   /* color */
@@ -119,6 +121,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-dark-grey) {
       color: var(--color-text-inverse);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+    }
   }
 
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -136,6 +147,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-neutral);
+      background-color: var(--color-fill-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
   }
 
   /* visual effect on interaction */
@@ -148,6 +168,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       }
     }
 
+    &:where(.variant-primary.color-blue) {
+      background-color: var(--color-fill-neutral-heaviest-hovered);
+    }
+
     @each $button-color, $color in $hovered-color-map {
       &:where(.variant-secondary.color-#{'' + $button-color}) {
         color: var(#{$color});
@@ -157,6 +181,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         }
       }
     }
+
+    &:where(.variant-secondary.color-blue) {
+      color: var(--color-text-neutral-hovered);
+      background-color: var(--color-fill-neutral-light-hovered);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy-hovered);
+      }
+    }
   }
 
   &:where(.variant-primary.color-blue:focus-visible) {

package/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -107,7 +107,7 @@ export const FloatingButton = forwardRef<
         <Text
           className={styles.ButtonText}
           typo={getTypography(size)}
-          bold
+          fontWeight={500}
         >
           {text}
         </Text>

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

@@ -86,10 +86,12 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: var(#{$background-color});
       }
     }
+
   }
 
   &:where(.variant-secondary) {
     background-color: var(--color-fill-grey);
+
   }
 
   /* color */
@@ -104,6 +106,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-light-grey) {
       color: var(--color-text-absolute-white);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-icon-inverse-heavier);
+      background-color: var(--color-fill-neutral-heaviest);
+    }
   }
 
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -113,6 +120,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         color: var(#{$icon-color});
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-icon-neutral-heavy);
+      background-color: var(--color-fill-neutral-light);
+    }
   }
 
   /* TODO: use v2 token when design is specified */
@@ -127,6 +139,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
           background-color: var(#{$background-color}-hovered);
         }
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.variant-secondary) {
@@ -136,6 +152,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
           color: var(#{$hovered-color});
         }
       }
+
+    &:where(.color-blue) {
+        color: var(--color-icon-neutral-heavy-hovered);
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
     }
   }
 

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

@@ -60,6 +60,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: $background-color;
       }
     }
+
   }
 
   &:where(.variant-secondary) {
@@ -81,6 +82,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: $background-color;
       }
     }
+
+    &:where(.color-blue) {
+      background-color: var(--color-fill-neutral-light);
+    }
   }
 
   &:where(.variant-tertiary) {
@@ -98,6 +103,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       background-color: var(--color-fill-absolute-white-transparent);
     }
+
   }
 
   /* color */
@@ -116,6 +122,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       color: var(--color-text-absolute-black);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+    }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
@@ -148,6 +163,22 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         color: var(--color-icon-neutral);
       }
     }
+
+    &:where(.variant-secondary.color-blue) {
+      color: var(--color-text-neutral);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
+
+    &:where(.variant-tertiary.color-blue) {
+      color: var(--color-text-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
   }
 
   &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
@@ -158,19 +189,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   /* border-radius */
   &:where(.shape-rectangle) {
-    $border-radius-by-size: (
-      xs: var(--radius-6),
-      s: var(--radius-7),
-      m: var(--radius-10),
-      l: var(--radius-12),
-      xl: var(--radius-14),
-    );
-
-    @each $size, $border-radius in $border-radius-by-size {
-      &:where(.size-#{$size}) {
-        border-radius: $border-radius;
-      }
-    }
+    border-radius: 9999px;
   }
 
   &:where(.shape-circle) {
@@ -196,6 +215,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-light-grey) {
         background-color: var(--color-fill-neutral-heavier-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.variant-secondary) {
@@ -209,6 +232,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-dark-grey, .color-light-grey) {
         background-color: var(--color-fill-neutral-light-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
     }
 
     &:where(.variant-tertiary) {
@@ -228,6 +255,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-white-absolute) {
         background-color: var(--color-fill-absolute-white-transparent-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {

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

@@ -13,7 +13,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.size-xs) {
     min-width: 20px;
     height: 20px;
-    padding: 0 2px;
+    padding: 0 4px;
 
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 7px;
@@ -23,7 +23,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.size-s) {
     min-width: 24px;
     height: 24px;
-    padding: 0 4px;
+    padding: 0 6px;
 
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 9px;
@@ -61,7 +61,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   }
 
   &:where(.size-xs, .size-s) {
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 3px;
     }
   }
@@ -71,7 +71,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       gap: 2px;
     }
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 4px;
     }
   }
@@ -111,6 +111,19 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       color: var(--color-text-inverse);
       background-color: var(--color-fill-neutral-heaviest);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
+    }
   }
 
   &:where(.style-secondary) {
@@ -153,6 +166,19 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
         background-color: var(--color-fill-neutral-light-hovered);
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-neutral);
+      background-color: var(--color-fill-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
+    }
   }
 
   &:where(.style-tertiary) {
@@ -193,9 +219,23 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
         background-color: var(--color-fill-neutral-light-hovered);
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-transparent-hovered);
+      }
+    }
   }
 
   &:where(.style-floating, .style-floating-alt) {
+    overflow: hidden;
+
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--color-text-absolute-white);
@@ -225,36 +265,32 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       color: var(--color-text-neutral);
       background-color: var(--color-fill-bright);
     }
-  }
-
-  /* Effect */
-  &:where(.style-primary, .style-secondary, .style-tertiary) {
-    &:where(.size-xs) {
-      border-radius: var(--radius-6);
-    }
 
-    &:where(.size-s, .size-m) {
-      border-radius: var(--radius-8);
-    }
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
 
-    &:where(.size-l) {
-      border-radius: var(--radius-12);
-    }
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
 
-    &:where(.size-xl) {
-      border-radius: var(--radius-16);
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
   }
 
-  &:where(.style-floating) {
-    overflow: hidden;
+  /* Effect */
+  &:where(
+      .style-primary,
+      .style-secondary,
+      .style-tertiary,
+      .style-floating,
+      .style-floating-alt
+    ) {
     border-radius: 9999px;
   }
 
-  &:where(.style-floating-alt) {
-    border-radius: var(--radius-8);
-  }
-
   &:where(.style-primary.color-blue:focus-visible) {
     outline: 3px solid var(--color-state-action-light);
   }