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

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/dist/types/types/props-helpers.d.ts

@@ -39,7 +39,7 @@ export declare const getLayoutStyles: ({ padding, paddingHorizontal, paddingVert
         '--b-basis': string | 0 | undefined;
         '--b-shrink': import("csstype").Property.FlexShrink | undefined;
         '--b-grow': import("csstype").Property.FlexGrow | undefined;
-        '--b-background-color': "var(--color-text-action)" | "var(--color-text-action-hovered)" | "var(--color-text-success)" | "var(--color-text-success-hovered)" | "var(--color-text-highlight)" | "var(--color-text-highlight-hovered)" | "var(--color-text-warning)" | "var(--color-text-warning-hovered)" | "var(--color-text-critical)" | "var(--color-text-critical-hovered)" | "var(--color-text-neutral-heaviest)" | "var(--color-text-neutral-heaviest-hovered)" | "var(--color-text-neutral)" | "var(--color-text-neutral-hovered)" | "var(--color-text-neutral-light)" | "var(--color-text-neutral-light-hovered)" | "var(--color-text-neutral-lighter)" | "var(--color-text-neutral-lighter-hovered)" | "var(--color-text-accent-blue)" | "var(--color-text-accent-blue-hovered)" | "var(--color-text-accent-cobalt)" | "var(--color-text-accent-cobalt-hovered)" | "var(--color-text-accent-green)" | "var(--color-text-accent-green-hovered)" | "var(--color-text-accent-red)" | "var(--color-text-accent-red-hovered)" | "var(--color-text-accent-orange)" | "var(--color-text-accent-orange-hovered)" | "var(--color-text-accent-yellow)" | "var(--color-text-accent-yellow-hovered)" | "var(--color-text-accent-olive)" | "var(--color-text-accent-olive-hovered)" | "var(--color-text-accent-teal)" | "var(--color-text-accent-teal-hovered)" | "var(--color-text-accent-navy)" | "var(--color-text-accent-navy-hovered)" | "var(--color-text-accent-purple)" | "var(--color-text-accent-purple-hovered)" | "var(--color-text-accent-pink)" | "var(--color-text-accent-pink-hovered)" | "var(--color-text-absolute-white)" | "var(--color-text-absolute-white-hovered)" | "var(--color-text-absolute-black)" | "var(--color-text-absolute-black-hovered)" | "var(--color-text-inverse)" | "var(--color-text-inverse-hovered)" | "var(--color-fill-neutral-heaviest)" | "var(--color-fill-neutral-heaviest-hovered)" | "var(--color-fill-neutral-heavier)" | "var(--color-fill-neutral-heavier-hovered)" | "var(--color-fill-neutral-heavy)" | "var(--color-fill-neutral-heavy-hovered)" | "var(--color-fill-neutral-light)" | "var(--color-fill-neutral-light-hovered)" | "var(--color-fill-neutral-lighter)" | "var(--color-fill-neutral-lighter-hovered)" | "var(--color-fill-neutral-lightest)" | "var(--color-fill-neutral-lightest-hovered)" | "var(--color-fill-neutral-transparent)" | "var(--color-fill-neutral-transparent-hovered)" | "var(--color-fill-action)" | "var(--color-fill-action-hovered)" | "var(--color-fill-action-light)" | "var(--color-fill-action-light-hovered)" | "var(--color-fill-action-lighter)" | "var(--color-fill-action-lighter-hovered)" | "var(--color-fill-action-transparent)" | "var(--color-fill-action-transparent-hovered)" | "var(--color-fill-success)" | "var(--color-fill-success-hovered)" | "var(--color-fill-success-light)" | "var(--color-fill-success-light-hovered)" | "var(--color-fill-success-lighter)" | "var(--color-fill-success-lighter-hovered)" | "var(--color-fill-success-transparent)" | "var(--color-fill-success-transparent-hovered)" | "var(--color-fill-highlight)" | "var(--color-fill-highlight-hovered)" | "var(--color-fill-highlight-light)" | "var(--color-fill-highlight-light-hovered)" | "var(--color-fill-highlight-lighter)" | "var(--color-fill-highlight-lighter-hovered)" | "var(--color-fill-highlight-transparent)" | "var(--color-fill-highlight-transparent-hovered)" | "var(--color-fill-warning)" | "var(--color-fill-warning-hovered)" | "var(--color-fill-warning-light)" | "var(--color-fill-warning-light-hovered)" | "var(--color-fill-warning-lighter)" | "var(--color-fill-warning-lighter-hovered)" | "var(--color-fill-warning-transparent)" | "var(--color-fill-warning-transparent-hovered)" | "var(--color-fill-critical)" | "var(--color-fill-critical-hovered)" | "var(--color-fill-critical-light)" | "var(--color-fill-critical-light-hovered)" | "var(--color-fill-critical-lighter)" | "var(--color-fill-critical-lighter-hovered)" | "var(--color-fill-critical-transparent)" | "var(--color-fill-critical-transparent-hovered)" | "var(--color-fill-grey-light)" | "var(--color-fill-grey-light-hovered)" | "var(--color-fill-grey)" | "var(--color-fill-grey-hovered)" | "var(--color-fill-grey-heavy)" | "var(--color-fill-grey-heavy-hovered)" | "var(--color-fill-grey-heavier)" | "var(--color-fill-grey-heavier-hovered)" | "var(--color-fill-accent-blue)" | "var(--color-fill-accent-blue-hovered)" | "var(--color-fill-accent-blue-heavy)" | "var(--color-fill-accent-blue-heavy-hovered)" | "var(--color-fill-accent-blue-heavier)" | "var(--color-fill-accent-blue-heavier-hovered)" | "var(--color-fill-accent-blue-transparent)" | "var(--color-fill-accent-blue-transparent-hovered)" | "var(--color-fill-accent-cobalt)" | "var(--color-fill-accent-cobalt-hovered)" | "var(--color-fill-accent-cobalt-heavy)" | "var(--color-fill-accent-cobalt-heavy-hovered)" | "var(--color-fill-accent-cobalt-heavier)" | "var(--color-fill-accent-cobalt-heavier-hovered)" | "var(--color-fill-accent-cobalt-transparent)" | "var(--color-fill-accent-cobalt-transparent-hovered)" | "var(--color-fill-accent-green)" | "var(--color-fill-accent-green-hovered)" | "var(--color-fill-accent-green-heavy)" | "var(--color-fill-accent-green-heavy-hovered)" | "var(--color-fill-accent-green-heavier)" | "var(--color-fill-accent-green-heavier-hovered)" | "var(--color-fill-accent-green-transparent)" | "var(--color-fill-accent-green-transparent-hovered)" | "var(--color-fill-accent-red)" | "var(--color-fill-accent-red-hovered)" | "var(--color-fill-accent-red-heavy)" | "var(--color-fill-accent-red-heavy-hovered)" | "var(--color-fill-accent-red-heavier)" | "var(--color-fill-accent-red-heavier-hovered)" | "var(--color-fill-accent-red-transparent)" | "var(--color-fill-accent-red-transparent-hovered)" | "var(--color-fill-accent-orange)" | "var(--color-fill-accent-orange-hovered)" | "var(--color-fill-accent-orange-heavy)" | "var(--color-fill-accent-orange-heavy-hovered)" | "var(--color-fill-accent-orange-heavier)" | "var(--color-fill-accent-orange-heavier-hovered)" | "var(--color-fill-accent-orange-transparent)" | "var(--color-fill-accent-orange-transparent-hovered)" | "var(--color-fill-accent-yellow)" | "var(--color-fill-accent-yellow-hovered)" | "var(--color-fill-accent-yellow-heavy)" | "var(--color-fill-accent-yellow-heavy-hovered)" | "var(--color-fill-accent-yellow-heavier)" | "var(--color-fill-accent-yellow-heavier-hovered)" | "var(--color-fill-accent-yellow-transparent)" | "var(--color-fill-accent-yellow-transparent-hovered)" | "var(--color-fill-accent-olive)" | "var(--color-fill-accent-olive-hovered)" | "var(--color-fill-accent-olive-heavy)" | "var(--color-fill-accent-olive-heavy-hovered)" | "var(--color-fill-accent-olive-heavier)" | "var(--color-fill-accent-olive-heavier-hovered)" | "var(--color-fill-accent-olive-transparent)" | "var(--color-fill-accent-olive-transparent-hovered)" | "var(--color-fill-accent-teal)" | "var(--color-fill-accent-teal-hovered)" | "var(--color-fill-accent-teal-heavy)" | "var(--color-fill-accent-teal-heavy-hovered)" | "var(--color-fill-accent-teal-heavier)" | "var(--color-fill-accent-teal-heavier-hovered)" | "var(--color-fill-accent-teal-transparent)" | "var(--color-fill-accent-teal-transparent-hovered)" | "var(--color-fill-accent-navy)" | "var(--color-fill-accent-navy-hovered)" | "var(--color-fill-accent-navy-heavy)" | "var(--color-fill-accent-navy-heavy-hovered)" | "var(--color-fill-accent-navy-heavier)" | "var(--color-fill-accent-navy-heavier-hovered)" | "var(--color-fill-accent-navy-transparent)" | "var(--color-fill-accent-navy-transparent-hovered)" | "var(--color-fill-accent-purple)" | "var(--color-fill-accent-purple-hovered)" | "var(--color-fill-accent-purple-heavy)" | "var(--color-fill-accent-purple-heavy-hovered)" | "var(--color-fill-accent-purple-heavier)" | "var(--color-fill-accent-purple-heavier-hovered)" | "var(--color-fill-accent-purple-transparent)" | "var(--color-fill-accent-purple-transparent-hovered)" | "var(--color-fill-accent-pink)" | "var(--color-fill-accent-pink-hovered)" | "var(--color-fill-accent-pink-heavy)" | "var(--color-fill-accent-pink-heavy-hovered)" | "var(--color-fill-accent-pink-heavier)" | "var(--color-fill-accent-pink-heavier-hovered)" | "var(--color-fill-accent-pink-transparent)" | "var(--color-fill-accent-pink-transparent-hovered)" | "var(--color-fill-absolute-white)" | "var(--color-fill-absolute-white-hovered)" | "var(--color-fill-absolute-white-light)" | "var(--color-fill-absolute-white-light-hovered)" | "var(--color-fill-absolute-white-transparent)" | "var(--color-fill-absolute-white-transparent-hovered)" | "var(--color-fill-absolute-black)" | "var(--color-fill-absolute-black-hovered)" | "var(--color-fill-absolute-black-light)" | "var(--color-fill-absolute-black-light-hovered)" | "var(--color-fill-absolute-black-transparent)" | "var(--color-fill-absolute-black-transparent-hovered)" | "var(--color-fill-bright)" | "var(--color-fill-bright-hovered)" | "var(--color-surface)" | "var(--color-surface-hovered)" | "var(--color-surface-highest)" | "var(--color-surface-highest-hovered)" | "var(--color-surface-higher)" | "var(--color-surface-higher-hovered)" | "var(--color-surface-high)" | "var(--color-surface-high-hovered)" | "var(--color-surface-low)" | "var(--color-surface-low-hovered)" | "var(--color-surface-glass)" | "var(--color-surface-glass-hovered)" | "var(--color-surface-glass-highest)" | "var(--color-surface-glass-highest-hovered)" | "var(--color-surface-glass-higher)" | "var(--color-surface-glass-higher-hovered)" | "var(--color-surface-glass-high)" | "var(--color-surface-glass-high-hovered)" | "var(--color-dim-absolute-black)" | "var(--color-dim-absolute-black-hovered)" | "var(--color-dim-absolute-black-heavy)" | "var(--color-dim-absolute-black-heavy-hovered)" | "var(--color-dim-absolute-white)" | "var(--color-dim-absolute-white-hovered)" | "var(--color-dim-absolute-white-heavy)" | "var(--color-dim-absolute-white-heavy-hovered)" | "var(--color-bg-white-high)" | "var(--color-bg-white-normal)" | "var(--color-bg-white-low)" | "var(--color-bg-white-dim-dark)" | "var(--color-bg-white-dim-light)" | "var(--color-bg-gnb)" | "var(--color-bg-navi)" | "var(--color-bg-header)" | "var(--color-bg-header-float)" | "var(--color-bg-lounge)" | "var(--color-bg-black-darkest)" | "var(--color-bg-black-darker)" | "var(--color-bg-black-dark)" | "var(--color-bg-black-light)" | "var(--color-bg-black-lighter)" | "var(--color-bg-black-lightest)" | "var(--color-bg-grey-darkest)" | "var(--color-bg-grey-dark)" | "var(--color-bg-grey-dim-lightest)" | "var(--color-bg-grey-light)" | "var(--color-bg-grey-lighter)" | "var(--color-bg-grey-lightest)" | "var(--color-bgtxt-blue-dark)" | "var(--color-bgtxt-blue-normal)" | "var(--color-bgtxt-blue-light)" | "var(--color-bgtxt-blue-lighter)" | "var(--color-bgtxt-blue-lightest)" | "var(--color-bgtxt-cobalt-dark)" | "var(--color-bgtxt-cobalt-normal)" | "var(--color-bgtxt-cobalt-light)" | "var(--color-bgtxt-cobalt-lighter)" | "var(--color-bgtxt-cobalt-lightest)" | "var(--color-bgtxt-teal-dark)" | "var(--color-bgtxt-teal-normal)" | "var(--color-bgtxt-teal-light)" | "var(--color-bgtxt-teal-lighter)" | "var(--color-bgtxt-teal-lightest)" | "var(--color-bgtxt-green-dark)" | "var(--color-bgtxt-green-normal)" | "var(--color-bgtxt-green-light)" | "var(--color-bgtxt-green-lighter)" | "var(--color-bgtxt-green-lightest)" | "var(--color-bgtxt-olive-dark)" | "var(--color-bgtxt-olive-normal)" | "var(--color-bgtxt-olive-light)" | "var(--color-bgtxt-olive-lighter)" | "var(--color-bgtxt-olive-lightest)" | "var(--color-bgtxt-yellow-dark)" | "var(--color-bgtxt-yellow-normal)" | "var(--color-bgtxt-yellow-light)" | "var(--color-bgtxt-yellow-lighter)" | "var(--color-bgtxt-yellow-lightest)" | "var(--color-bgtxt-orange-dark)" | "var(--color-bgtxt-orange-normal)" | "var(--color-bgtxt-orange-light)" | "var(--color-bgtxt-orange-lighter)" | "var(--color-bgtxt-orange-lightest)" | "var(--color-bgtxt-red-dark)" | "var(--color-bgtxt-red-normal)" | "var(--color-bgtxt-red-light)" | "var(--color-bgtxt-red-lighter)" | "var(--color-bgtxt-red-lightest)" | "var(--color-bgtxt-pink-dark)" | "var(--color-bgtxt-pink-normal)" | "var(--color-bgtxt-pink-light)" | "var(--color-bgtxt-pink-lighter)" | "var(--color-bgtxt-pink-lightest)" | "var(--color-bgtxt-purple-dark)" | "var(--color-bgtxt-purple-normal)" | "var(--color-bgtxt-purple-light)" | "var(--color-bgtxt-purple-lighter)" | "var(--color-bgtxt-purple-lightest)" | "var(--color-bgtxt-navy-dark)" | "var(--color-bgtxt-navy-normal)" | "var(--color-bgtxt-navy-light)" | "var(--color-bgtxt-navy-lighter)" | "var(--color-bgtxt-navy-lightest)" | "var(--color-bgtxt-absolute-black-dark)" | "var(--color-bgtxt-absolute-black-normal)" | "var(--color-bgtxt-absolute-black-light)" | "var(--color-bgtxt-absolute-black-lighter)" | "var(--color-bgtxt-absolute-black-lightest)" | "var(--color-bgtxt-absolute-white-dark)" | "var(--color-bgtxt-absolute-white-normal)" | "var(--color-bgtxt-absolute-white-light)" | "var(--color-bgtxt-absolute-white-lighter)" | "var(--color-bgtxt-absolute-white-lightest)" | "var(--text-action)" | "var(--text-action-hovered)" | "var(--text-success)" | "var(--text-success-hovered)" | "var(--text-highlight)" | "var(--text-highlight-hovered)" | "var(--text-warning)" | "var(--text-warning-hovered)" | "var(--text-critical)" | "var(--text-critical-hovered)" | "var(--text-neutral-heaviest)" | "var(--text-neutral-heaviest-hovered)" | "var(--text-neutral)" | "var(--text-neutral-hovered)" | "var(--text-neutral-light)" | "var(--text-neutral-light-hovered)" | "var(--text-neutral-lighter)" | "var(--text-neutral-lighter-hovered)" | "var(--text-accent-blue)" | "var(--text-accent-blue-hovered)" | "var(--text-accent-cobalt)" | "var(--text-accent-cobalt-hovered)" | "var(--text-accent-green)" | "var(--text-accent-green-hovered)" | "var(--text-accent-red)" | "var(--text-accent-red-hovered)" | "var(--text-accent-orange)" | "var(--text-accent-orange-hovered)" | "var(--text-accent-yellow)" | "var(--text-accent-yellow-hovered)" | "var(--text-accent-olive)" | "var(--text-accent-olive-hovered)" | "var(--text-accent-teal)" | "var(--text-accent-teal-hovered)" | "var(--text-accent-navy)" | "var(--text-accent-navy-hovered)" | "var(--text-accent-purple)" | "var(--text-accent-purple-hovered)" | "var(--text-accent-pink)" | "var(--text-accent-pink-hovered)" | "var(--text-absolute-white)" | "var(--text-absolute-white-hovered)" | "var(--text-absolute-black)" | "var(--text-absolute-black-hovered)" | "var(--text-inverse)" | "var(--text-inverse-hovered)" | "var(--fill-neutral-heaviest)" | "var(--fill-neutral-heaviest-hovered)" | "var(--fill-neutral-heavier)" | "var(--fill-neutral-heavier-hovered)" | "var(--fill-neutral-heavy)" | "var(--fill-neutral-heavy-hovered)" | "var(--fill-neutral-light)" | "var(--fill-neutral-light-hovered)" | "var(--fill-neutral-lighter)" | "var(--fill-neutral-lighter-hovered)" | "var(--fill-neutral-lightest)" | "var(--fill-neutral-lightest-hovered)" | "var(--fill-neutral-transparent)" | "var(--fill-neutral-transparent-hovered)" | "var(--fill-action)" | "var(--fill-action-hovered)" | "var(--fill-action-light)" | "var(--fill-action-light-hovered)" | "var(--fill-action-lighter)" | "var(--fill-action-lighter-hovered)" | "var(--fill-action-transparent)" | "var(--fill-action-transparent-hovered)" | "var(--fill-success)" | "var(--fill-success-hovered)" | "var(--fill-success-light)" | "var(--fill-success-light-hovered)" | "var(--fill-success-lighter)" | "var(--fill-success-lighter-hovered)" | "var(--fill-success-transparent)" | "var(--fill-success-transparent-hovered)" | "var(--fill-highlight)" | "var(--fill-highlight-hovered)" | "var(--fill-highlight-light)" | "var(--fill-highlight-light-hovered)" | "var(--fill-highlight-lighter)" | "var(--fill-highlight-lighter-hovered)" | "var(--fill-highlight-transparent)" | "var(--fill-highlight-transparent-hovered)" | "var(--fill-warning)" | "var(--fill-warning-hovered)" | "var(--fill-warning-light)" | "var(--fill-warning-light-hovered)" | "var(--fill-warning-lighter)" | "var(--fill-warning-lighter-hovered)" | "var(--fill-warning-transparent)" | "var(--fill-warning-transparent-hovered)" | "var(--fill-critical)" | "var(--fill-critical-hovered)" | "var(--fill-critical-light)" | "var(--fill-critical-light-hovered)" | "var(--fill-critical-lighter)" | "var(--fill-critical-lighter-hovered)" | "var(--fill-critical-transparent)" | "var(--fill-critical-transparent-hovered)" | "var(--fill-grey-light)" | "var(--fill-grey-light-hovered)" | "var(--fill-grey)" | "var(--fill-grey-hovered)" | "var(--fill-grey-heavy)" | "var(--fill-grey-heavy-hovered)" | "var(--fill-grey-heavier)" | "var(--fill-grey-heavier-hovered)" | "var(--fill-accent-blue)" | "var(--fill-accent-blue-hovered)" | "var(--fill-accent-blue-heavy)" | "var(--fill-accent-blue-heavy-hovered)" | "var(--fill-accent-blue-heavier)" | "var(--fill-accent-blue-heavier-hovered)" | "var(--fill-accent-blue-transparent)" | "var(--fill-accent-blue-transparent-hovered)" | "var(--fill-accent-cobalt)" | "var(--fill-accent-cobalt-hovered)" | "var(--fill-accent-cobalt-heavy)" | "var(--fill-accent-cobalt-heavy-hovered)" | "var(--fill-accent-cobalt-heavier)" | "var(--fill-accent-cobalt-heavier-hovered)" | "var(--fill-accent-cobalt-transparent)" | "var(--fill-accent-cobalt-transparent-hovered)" | "var(--fill-accent-green)" | "var(--fill-accent-green-hovered)" | "var(--fill-accent-green-heavy)" | "var(--fill-accent-green-heavy-hovered)" | "var(--fill-accent-green-heavier)" | "var(--fill-accent-green-heavier-hovered)" | "var(--fill-accent-green-transparent)" | "var(--fill-accent-green-transparent-hovered)" | "var(--fill-accent-red)" | "var(--fill-accent-red-hovered)" | "var(--fill-accent-red-heavy)" | "var(--fill-accent-red-heavy-hovered)" | "var(--fill-accent-red-heavier)" | "var(--fill-accent-red-heavier-hovered)" | "var(--fill-accent-red-transparent)" | "var(--fill-accent-red-transparent-hovered)" | "var(--fill-accent-orange)" | "var(--fill-accent-orange-hovered)" | "var(--fill-accent-orange-heavy)" | "var(--fill-accent-orange-heavy-hovered)" | "var(--fill-accent-orange-heavier)" | "var(--fill-accent-orange-heavier-hovered)" | "var(--fill-accent-orange-transparent)" | "var(--fill-accent-orange-transparent-hovered)" | "var(--fill-accent-yellow)" | "var(--fill-accent-yellow-hovered)" | "var(--fill-accent-yellow-heavy)" | "var(--fill-accent-yellow-heavy-hovered)" | "var(--fill-accent-yellow-heavier)" | "var(--fill-accent-yellow-heavier-hovered)" | "var(--fill-accent-yellow-transparent)" | "var(--fill-accent-yellow-transparent-hovered)" | "var(--fill-accent-olive)" | "var(--fill-accent-olive-hovered)" | "var(--fill-accent-olive-heavy)" | "var(--fill-accent-olive-heavy-hovered)" | "var(--fill-accent-olive-heavier)" | "var(--fill-accent-olive-heavier-hovered)" | "var(--fill-accent-olive-transparent)" | "var(--fill-accent-olive-transparent-hovered)" | "var(--fill-accent-teal)" | "var(--fill-accent-teal-hovered)" | "var(--fill-accent-teal-heavy)" | "var(--fill-accent-teal-heavy-hovered)" | "var(--fill-accent-teal-heavier)" | "var(--fill-accent-teal-heavier-hovered)" | "var(--fill-accent-teal-transparent)" | "var(--fill-accent-teal-transparent-hovered)" | "var(--fill-accent-navy)" | "var(--fill-accent-navy-hovered)" | "var(--fill-accent-navy-heavy)" | "var(--fill-accent-navy-heavy-hovered)" | "var(--fill-accent-navy-heavier)" | "var(--fill-accent-navy-heavier-hovered)" | "var(--fill-accent-navy-transparent)" | "var(--fill-accent-navy-transparent-hovered)" | "var(--fill-accent-purple)" | "var(--fill-accent-purple-hovered)" | "var(--fill-accent-purple-heavy)" | "var(--fill-accent-purple-heavy-hovered)" | "var(--fill-accent-purple-heavier)" | "var(--fill-accent-purple-heavier-hovered)" | "var(--fill-accent-purple-transparent)" | "var(--fill-accent-purple-transparent-hovered)" | "var(--fill-accent-pink)" | "var(--fill-accent-pink-hovered)" | "var(--fill-accent-pink-heavy)" | "var(--fill-accent-pink-heavy-hovered)" | "var(--fill-accent-pink-heavier)" | "var(--fill-accent-pink-heavier-hovered)" | "var(--fill-accent-pink-transparent)" | "var(--fill-accent-pink-transparent-hovered)" | "var(--fill-absolute-white)" | "var(--fill-absolute-white-hovered)" | "var(--fill-absolute-white-light)" | "var(--fill-absolute-white-light-hovered)" | "var(--fill-absolute-white-transparent)" | "var(--fill-absolute-white-transparent-hovered)" | "var(--fill-absolute-black)" | "var(--fill-absolute-black-hovered)" | "var(--fill-absolute-black-light)" | "var(--fill-absolute-black-light-hovered)" | "var(--fill-absolute-black-transparent)" | "var(--fill-absolute-black-transparent-hovered)" | "var(--fill-bright)" | "var(--fill-bright-hovered)" | "var(--surface)" | "var(--surface-hovered)" | "var(--surface-highest)" | "var(--surface-highest-hovered)" | "var(--surface-higher)" | "var(--surface-higher-hovered)" | "var(--surface-high)" | "var(--surface-high-hovered)" | "var(--surface-low)" | "var(--surface-low-hovered)" | "var(--surface-glass)" | "var(--surface-glass-hovered)" | "var(--surface-glass-highest)" | "var(--surface-glass-highest-hovered)" | "var(--surface-glass-higher)" | "var(--surface-glass-higher-hovered)" | "var(--surface-glass-high)" | "var(--surface-glass-high-hovered)" | "var(--dim-absolute-black)" | "var(--dim-absolute-black-hovered)" | "var(--dim-absolute-black-heavy)" | "var(--dim-absolute-black-heavy-hovered)" | "var(--dim-absolute-white)" | "var(--dim-absolute-white-hovered)" | "var(--dim-absolute-white-heavy)" | "var(--dim-absolute-white-heavy-hovered)" | "var(--bg-white-high)" | "var(--bg-white-normal)" | "var(--bg-white-low)" | "var(--bg-white-dim-dark)" | "var(--bg-white-dim-light)" | "var(--bg-gnb)" | "var(--bg-navi)" | "var(--bg-header)" | "var(--bg-header-float)" | "var(--bg-lounge)" | "var(--bg-black-darkest)" | "var(--bg-black-darker)" | "var(--bg-black-dark)" | "var(--bg-black-light)" | "var(--bg-black-lighter)" | "var(--bg-black-lightest)" | "var(--bg-grey-darkest)" | "var(--bg-grey-dark)" | "var(--bg-grey-dim-lightest)" | "var(--bg-grey-light)" | "var(--bg-grey-lighter)" | "var(--bg-grey-lightest)" | "var(--bgtxt-blue-dark)" | "var(--bgtxt-blue-normal)" | "var(--bgtxt-blue-light)" | "var(--bgtxt-blue-lighter)" | "var(--bgtxt-blue-lightest)" | "var(--bgtxt-cobalt-dark)" | "var(--bgtxt-cobalt-normal)" | "var(--bgtxt-cobalt-light)" | "var(--bgtxt-cobalt-lighter)" | "var(--bgtxt-cobalt-lightest)" | "var(--bgtxt-teal-dark)" | "var(--bgtxt-teal-normal)" | "var(--bgtxt-teal-light)" | "var(--bgtxt-teal-lighter)" | "var(--bgtxt-teal-lightest)" | "var(--bgtxt-green-dark)" | "var(--bgtxt-green-normal)" | "var(--bgtxt-green-light)" | "var(--bgtxt-green-lighter)" | "var(--bgtxt-green-lightest)" | "var(--bgtxt-olive-dark)" | "var(--bgtxt-olive-normal)" | "var(--bgtxt-olive-light)" | "var(--bgtxt-olive-lighter)" | "var(--bgtxt-olive-lightest)" | "var(--bgtxt-yellow-dark)" | "var(--bgtxt-yellow-normal)" | "var(--bgtxt-yellow-light)" | "var(--bgtxt-yellow-lighter)" | "var(--bgtxt-yellow-lightest)" | "var(--bgtxt-orange-dark)" | "var(--bgtxt-orange-normal)" | "var(--bgtxt-orange-light)" | "var(--bgtxt-orange-lighter)" | "var(--bgtxt-orange-lightest)" | "var(--bgtxt-red-dark)" | "var(--bgtxt-red-normal)" | "var(--bgtxt-red-light)" | "var(--bgtxt-red-lighter)" | "var(--bgtxt-red-lightest)" | "var(--bgtxt-pink-dark)" | "var(--bgtxt-pink-normal)" | "var(--bgtxt-pink-light)" | "var(--bgtxt-pink-lighter)" | "var(--bgtxt-pink-lightest)" | "var(--bgtxt-purple-dark)" | "var(--bgtxt-purple-normal)" | "var(--bgtxt-purple-light)" | "var(--bgtxt-purple-lighter)" | "var(--bgtxt-purple-lightest)" | "var(--bgtxt-navy-dark)" | "var(--bgtxt-navy-normal)" | "var(--bgtxt-navy-light)" | "var(--bgtxt-navy-lighter)" | "var(--bgtxt-navy-lightest)" | "var(--bgtxt-absolute-black-dark)" | "var(--bgtxt-absolute-black-normal)" | "var(--bgtxt-absolute-black-light)" | "var(--bgtxt-absolute-black-lighter)" | "var(--bgtxt-absolute-black-lightest)" | "var(--bgtxt-absolute-white-dark)" | "var(--bgtxt-absolute-white-normal)" | "var(--bgtxt-absolute-white-light)" | "var(--bgtxt-absolute-white-lighter)" | "var(--bgtxt-absolute-white-lightest)" | undefined;
+        '--b-background-color': "var(--color-text-action)" | "var(--color-text-action-hovered)" | "var(--color-text-success)" | "var(--color-text-success-hovered)" | "var(--color-text-highlight)" | "var(--color-text-highlight-hovered)" | "var(--color-text-warning)" | "var(--color-text-warning-hovered)" | "var(--color-text-critical)" | "var(--color-text-critical-hovered)" | "var(--color-text-neutral-heaviest)" | "var(--color-text-neutral-heaviest-hovered)" | "var(--color-text-neutral)" | "var(--color-text-neutral-hovered)" | "var(--color-text-neutral-light)" | "var(--color-text-neutral-light-hovered)" | "var(--color-text-neutral-lighter)" | "var(--color-text-neutral-lighter-hovered)" | "var(--color-text-accent-blue)" | "var(--color-text-accent-blue-hovered)" | "var(--color-text-accent-cobalt)" | "var(--color-text-accent-cobalt-hovered)" | "var(--color-text-accent-green)" | "var(--color-text-accent-green-hovered)" | "var(--color-text-accent-red)" | "var(--color-text-accent-red-hovered)" | "var(--color-text-accent-orange)" | "var(--color-text-accent-orange-hovered)" | "var(--color-text-accent-yellow)" | "var(--color-text-accent-yellow-hovered)" | "var(--color-text-accent-olive)" | "var(--color-text-accent-olive-hovered)" | "var(--color-text-accent-teal)" | "var(--color-text-accent-teal-hovered)" | "var(--color-text-accent-navy)" | "var(--color-text-accent-navy-hovered)" | "var(--color-text-accent-purple)" | "var(--color-text-accent-purple-hovered)" | "var(--color-text-accent-pink)" | "var(--color-text-accent-pink-hovered)" | "var(--color-text-absolute-white)" | "var(--color-text-absolute-white-hovered)" | "var(--color-text-absolute-black)" | "var(--color-text-absolute-black-hovered)" | "var(--color-text-inverse)" | "var(--color-text-inverse-hovered)" | "var(--color-fill-neutral)" | "var(--color-fill-neutral-hovered)" | "var(--color-fill-neutral-heaviest)" | "var(--color-fill-neutral-heaviest-hovered)" | "var(--color-fill-neutral-heavier)" | "var(--color-fill-neutral-heavier-hovered)" | "var(--color-fill-neutral-heavy)" | "var(--color-fill-neutral-heavy-hovered)" | "var(--color-fill-neutral-light)" | "var(--color-fill-neutral-light-hovered)" | "var(--color-fill-neutral-lighter)" | "var(--color-fill-neutral-lighter-hovered)" | "var(--color-fill-neutral-lightest)" | "var(--color-fill-neutral-lightest-hovered)" | "var(--color-fill-neutral-transparent)" | "var(--color-fill-neutral-transparent-hovered)" | "var(--color-fill-action)" | "var(--color-fill-action-hovered)" | "var(--color-fill-action-light)" | "var(--color-fill-action-light-hovered)" | "var(--color-fill-action-lighter)" | "var(--color-fill-action-lighter-hovered)" | "var(--color-fill-action-transparent)" | "var(--color-fill-action-transparent-hovered)" | "var(--color-fill-success)" | "var(--color-fill-success-hovered)" | "var(--color-fill-success-light)" | "var(--color-fill-success-light-hovered)" | "var(--color-fill-success-lighter)" | "var(--color-fill-success-lighter-hovered)" | "var(--color-fill-success-transparent)" | "var(--color-fill-success-transparent-hovered)" | "var(--color-fill-highlight)" | "var(--color-fill-highlight-hovered)" | "var(--color-fill-highlight-light)" | "var(--color-fill-highlight-light-hovered)" | "var(--color-fill-highlight-lighter)" | "var(--color-fill-highlight-lighter-hovered)" | "var(--color-fill-highlight-transparent)" | "var(--color-fill-highlight-transparent-hovered)" | "var(--color-fill-warning)" | "var(--color-fill-warning-hovered)" | "var(--color-fill-warning-light)" | "var(--color-fill-warning-light-hovered)" | "var(--color-fill-warning-lighter)" | "var(--color-fill-warning-lighter-hovered)" | "var(--color-fill-warning-transparent)" | "var(--color-fill-warning-transparent-hovered)" | "var(--color-fill-critical)" | "var(--color-fill-critical-hovered)" | "var(--color-fill-critical-light)" | "var(--color-fill-critical-light-hovered)" | "var(--color-fill-critical-lighter)" | "var(--color-fill-critical-lighter-hovered)" | "var(--color-fill-critical-transparent)" | "var(--color-fill-critical-transparent-hovered)" | "var(--color-fill-grey-light)" | "var(--color-fill-grey-light-hovered)" | "var(--color-fill-grey)" | "var(--color-fill-grey-hovered)" | "var(--color-fill-grey-heavy)" | "var(--color-fill-grey-heavy-hovered)" | "var(--color-fill-grey-heavier)" | "var(--color-fill-grey-heavier-hovered)" | "var(--color-fill-accent-blue)" | "var(--color-fill-accent-blue-hovered)" | "var(--color-fill-accent-blue-heavy)" | "var(--color-fill-accent-blue-heavy-hovered)" | "var(--color-fill-accent-blue-heavier)" | "var(--color-fill-accent-blue-heavier-hovered)" | "var(--color-fill-accent-blue-transparent)" | "var(--color-fill-accent-blue-transparent-hovered)" | "var(--color-fill-accent-cobalt)" | "var(--color-fill-accent-cobalt-hovered)" | "var(--color-fill-accent-cobalt-heavy)" | "var(--color-fill-accent-cobalt-heavy-hovered)" | "var(--color-fill-accent-cobalt-heavier)" | "var(--color-fill-accent-cobalt-heavier-hovered)" | "var(--color-fill-accent-cobalt-transparent)" | "var(--color-fill-accent-cobalt-transparent-hovered)" | "var(--color-fill-accent-green)" | "var(--color-fill-accent-green-hovered)" | "var(--color-fill-accent-green-heavy)" | "var(--color-fill-accent-green-heavy-hovered)" | "var(--color-fill-accent-green-heavier)" | "var(--color-fill-accent-green-heavier-hovered)" | "var(--color-fill-accent-green-transparent)" | "var(--color-fill-accent-green-transparent-hovered)" | "var(--color-fill-accent-red)" | "var(--color-fill-accent-red-hovered)" | "var(--color-fill-accent-red-heavy)" | "var(--color-fill-accent-red-heavy-hovered)" | "var(--color-fill-accent-red-heavier)" | "var(--color-fill-accent-red-heavier-hovered)" | "var(--color-fill-accent-red-transparent)" | "var(--color-fill-accent-red-transparent-hovered)" | "var(--color-fill-accent-orange)" | "var(--color-fill-accent-orange-hovered)" | "var(--color-fill-accent-orange-heavy)" | "var(--color-fill-accent-orange-heavy-hovered)" | "var(--color-fill-accent-orange-heavier)" | "var(--color-fill-accent-orange-heavier-hovered)" | "var(--color-fill-accent-orange-transparent)" | "var(--color-fill-accent-orange-transparent-hovered)" | "var(--color-fill-accent-yellow)" | "var(--color-fill-accent-yellow-hovered)" | "var(--color-fill-accent-yellow-heavy)" | "var(--color-fill-accent-yellow-heavy-hovered)" | "var(--color-fill-accent-yellow-heavier)" | "var(--color-fill-accent-yellow-heavier-hovered)" | "var(--color-fill-accent-yellow-transparent)" | "var(--color-fill-accent-yellow-transparent-hovered)" | "var(--color-fill-accent-olive)" | "var(--color-fill-accent-olive-hovered)" | "var(--color-fill-accent-olive-heavy)" | "var(--color-fill-accent-olive-heavy-hovered)" | "var(--color-fill-accent-olive-heavier)" | "var(--color-fill-accent-olive-heavier-hovered)" | "var(--color-fill-accent-olive-transparent)" | "var(--color-fill-accent-olive-transparent-hovered)" | "var(--color-fill-accent-teal)" | "var(--color-fill-accent-teal-hovered)" | "var(--color-fill-accent-teal-heavy)" | "var(--color-fill-accent-teal-heavy-hovered)" | "var(--color-fill-accent-teal-heavier)" | "var(--color-fill-accent-teal-heavier-hovered)" | "var(--color-fill-accent-teal-transparent)" | "var(--color-fill-accent-teal-transparent-hovered)" | "var(--color-fill-accent-navy)" | "var(--color-fill-accent-navy-hovered)" | "var(--color-fill-accent-navy-heavy)" | "var(--color-fill-accent-navy-heavy-hovered)" | "var(--color-fill-accent-navy-heavier)" | "var(--color-fill-accent-navy-heavier-hovered)" | "var(--color-fill-accent-navy-transparent)" | "var(--color-fill-accent-navy-transparent-hovered)" | "var(--color-fill-accent-purple)" | "var(--color-fill-accent-purple-hovered)" | "var(--color-fill-accent-purple-heavy)" | "var(--color-fill-accent-purple-heavy-hovered)" | "var(--color-fill-accent-purple-heavier)" | "var(--color-fill-accent-purple-heavier-hovered)" | "var(--color-fill-accent-purple-transparent)" | "var(--color-fill-accent-purple-transparent-hovered)" | "var(--color-fill-accent-pink)" | "var(--color-fill-accent-pink-hovered)" | "var(--color-fill-accent-pink-heavy)" | "var(--color-fill-accent-pink-heavy-hovered)" | "var(--color-fill-accent-pink-heavier)" | "var(--color-fill-accent-pink-heavier-hovered)" | "var(--color-fill-accent-pink-transparent)" | "var(--color-fill-accent-pink-transparent-hovered)" | "var(--color-fill-absolute-white)" | "var(--color-fill-absolute-white-hovered)" | "var(--color-fill-absolute-white-light)" | "var(--color-fill-absolute-white-light-hovered)" | "var(--color-fill-absolute-white-transparent)" | "var(--color-fill-absolute-white-transparent-hovered)" | "var(--color-fill-absolute-black)" | "var(--color-fill-absolute-black-hovered)" | "var(--color-fill-absolute-black-light)" | "var(--color-fill-absolute-black-light-hovered)" | "var(--color-fill-absolute-black-transparent)" | "var(--color-fill-absolute-black-transparent-hovered)" | "var(--color-fill-bright)" | "var(--color-fill-bright-hovered)" | "var(--color-surface)" | "var(--color-surface-hovered)" | "var(--color-surface-highest)" | "var(--color-surface-highest-hovered)" | "var(--color-surface-higher)" | "var(--color-surface-higher-hovered)" | "var(--color-surface-high)" | "var(--color-surface-high-hovered)" | "var(--color-surface-low)" | "var(--color-surface-low-hovered)" | "var(--color-surface-glass)" | "var(--color-surface-glass-hovered)" | "var(--color-surface-glass-highest)" | "var(--color-surface-glass-highest-hovered)" | "var(--color-surface-glass-higher)" | "var(--color-surface-glass-higher-hovered)" | "var(--color-surface-glass-high)" | "var(--color-surface-glass-high-hovered)" | "var(--color-dim-absolute-black)" | "var(--color-dim-absolute-black-hovered)" | "var(--color-dim-absolute-black-heavy)" | "var(--color-dim-absolute-black-heavy-hovered)" | "var(--color-dim-absolute-white)" | "var(--color-dim-absolute-white-hovered)" | "var(--color-dim-absolute-white-heavy)" | "var(--color-dim-absolute-white-heavy-hovered)" | "var(--color-bg-white-high)" | "var(--color-bg-white-normal)" | "var(--color-bg-white-low)" | "var(--color-bg-white-dim-dark)" | "var(--color-bg-white-dim-light)" | "var(--color-bg-gnb)" | "var(--color-bg-navi)" | "var(--color-bg-header)" | "var(--color-bg-header-float)" | "var(--color-bg-lounge)" | "var(--color-bg-black-darkest)" | "var(--color-bg-black-darker)" | "var(--color-bg-black-dark)" | "var(--color-bg-black-light)" | "var(--color-bg-black-lighter)" | "var(--color-bg-black-lightest)" | "var(--color-bg-grey-darkest)" | "var(--color-bg-grey-dark)" | "var(--color-bg-grey-dim-lightest)" | "var(--color-bg-grey-light)" | "var(--color-bg-grey-lighter)" | "var(--color-bg-grey-lightest)" | "var(--color-bgtxt-blue-dark)" | "var(--color-bgtxt-blue-normal)" | "var(--color-bgtxt-blue-light)" | "var(--color-bgtxt-blue-lighter)" | "var(--color-bgtxt-blue-lightest)" | "var(--color-bgtxt-cobalt-dark)" | "var(--color-bgtxt-cobalt-normal)" | "var(--color-bgtxt-cobalt-light)" | "var(--color-bgtxt-cobalt-lighter)" | "var(--color-bgtxt-cobalt-lightest)" | "var(--color-bgtxt-teal-dark)" | "var(--color-bgtxt-teal-normal)" | "var(--color-bgtxt-teal-light)" | "var(--color-bgtxt-teal-lighter)" | "var(--color-bgtxt-teal-lightest)" | "var(--color-bgtxt-green-dark)" | "var(--color-bgtxt-green-normal)" | "var(--color-bgtxt-green-light)" | "var(--color-bgtxt-green-lighter)" | "var(--color-bgtxt-green-lightest)" | "var(--color-bgtxt-olive-dark)" | "var(--color-bgtxt-olive-normal)" | "var(--color-bgtxt-olive-light)" | "var(--color-bgtxt-olive-lighter)" | "var(--color-bgtxt-olive-lightest)" | "var(--color-bgtxt-yellow-dark)" | "var(--color-bgtxt-yellow-normal)" | "var(--color-bgtxt-yellow-light)" | "var(--color-bgtxt-yellow-lighter)" | "var(--color-bgtxt-yellow-lightest)" | "var(--color-bgtxt-orange-dark)" | "var(--color-bgtxt-orange-normal)" | "var(--color-bgtxt-orange-light)" | "var(--color-bgtxt-orange-lighter)" | "var(--color-bgtxt-orange-lightest)" | "var(--color-bgtxt-red-dark)" | "var(--color-bgtxt-red-normal)" | "var(--color-bgtxt-red-light)" | "var(--color-bgtxt-red-lighter)" | "var(--color-bgtxt-red-lightest)" | "var(--color-bgtxt-pink-dark)" | "var(--color-bgtxt-pink-normal)" | "var(--color-bgtxt-pink-light)" | "var(--color-bgtxt-pink-lighter)" | "var(--color-bgtxt-pink-lightest)" | "var(--color-bgtxt-purple-dark)" | "var(--color-bgtxt-purple-normal)" | "var(--color-bgtxt-purple-light)" | "var(--color-bgtxt-purple-lighter)" | "var(--color-bgtxt-purple-lightest)" | "var(--color-bgtxt-navy-dark)" | "var(--color-bgtxt-navy-normal)" | "var(--color-bgtxt-navy-light)" | "var(--color-bgtxt-navy-lighter)" | "var(--color-bgtxt-navy-lightest)" | "var(--color-bgtxt-absolute-black-dark)" | "var(--color-bgtxt-absolute-black-normal)" | "var(--color-bgtxt-absolute-black-light)" | "var(--color-bgtxt-absolute-black-lighter)" | "var(--color-bgtxt-absolute-black-lightest)" | "var(--color-bgtxt-absolute-white-dark)" | "var(--color-bgtxt-absolute-white-normal)" | "var(--color-bgtxt-absolute-white-light)" | "var(--color-bgtxt-absolute-white-lighter)" | "var(--color-bgtxt-absolute-white-lightest)" | "var(--text-action)" | "var(--text-action-hovered)" | "var(--text-success)" | "var(--text-success-hovered)" | "var(--text-highlight)" | "var(--text-highlight-hovered)" | "var(--text-warning)" | "var(--text-warning-hovered)" | "var(--text-critical)" | "var(--text-critical-hovered)" | "var(--text-neutral-heaviest)" | "var(--text-neutral-heaviest-hovered)" | "var(--text-neutral)" | "var(--text-neutral-hovered)" | "var(--text-neutral-light)" | "var(--text-neutral-light-hovered)" | "var(--text-neutral-lighter)" | "var(--text-neutral-lighter-hovered)" | "var(--text-accent-blue)" | "var(--text-accent-blue-hovered)" | "var(--text-accent-cobalt)" | "var(--text-accent-cobalt-hovered)" | "var(--text-accent-green)" | "var(--text-accent-green-hovered)" | "var(--text-accent-red)" | "var(--text-accent-red-hovered)" | "var(--text-accent-orange)" | "var(--text-accent-orange-hovered)" | "var(--text-accent-yellow)" | "var(--text-accent-yellow-hovered)" | "var(--text-accent-olive)" | "var(--text-accent-olive-hovered)" | "var(--text-accent-teal)" | "var(--text-accent-teal-hovered)" | "var(--text-accent-navy)" | "var(--text-accent-navy-hovered)" | "var(--text-accent-purple)" | "var(--text-accent-purple-hovered)" | "var(--text-accent-pink)" | "var(--text-accent-pink-hovered)" | "var(--text-absolute-white)" | "var(--text-absolute-white-hovered)" | "var(--text-absolute-black)" | "var(--text-absolute-black-hovered)" | "var(--text-inverse)" | "var(--text-inverse-hovered)" | "var(--fill-neutral)" | "var(--fill-neutral-hovered)" | "var(--fill-neutral-heaviest)" | "var(--fill-neutral-heaviest-hovered)" | "var(--fill-neutral-heavier)" | "var(--fill-neutral-heavier-hovered)" | "var(--fill-neutral-heavy)" | "var(--fill-neutral-heavy-hovered)" | "var(--fill-neutral-light)" | "var(--fill-neutral-light-hovered)" | "var(--fill-neutral-lighter)" | "var(--fill-neutral-lighter-hovered)" | "var(--fill-neutral-lightest)" | "var(--fill-neutral-lightest-hovered)" | "var(--fill-neutral-transparent)" | "var(--fill-neutral-transparent-hovered)" | "var(--fill-action)" | "var(--fill-action-hovered)" | "var(--fill-action-light)" | "var(--fill-action-light-hovered)" | "var(--fill-action-lighter)" | "var(--fill-action-lighter-hovered)" | "var(--fill-action-transparent)" | "var(--fill-action-transparent-hovered)" | "var(--fill-success)" | "var(--fill-success-hovered)" | "var(--fill-success-light)" | "var(--fill-success-light-hovered)" | "var(--fill-success-lighter)" | "var(--fill-success-lighter-hovered)" | "var(--fill-success-transparent)" | "var(--fill-success-transparent-hovered)" | "var(--fill-highlight)" | "var(--fill-highlight-hovered)" | "var(--fill-highlight-light)" | "var(--fill-highlight-light-hovered)" | "var(--fill-highlight-lighter)" | "var(--fill-highlight-lighter-hovered)" | "var(--fill-highlight-transparent)" | "var(--fill-highlight-transparent-hovered)" | "var(--fill-warning)" | "var(--fill-warning-hovered)" | "var(--fill-warning-light)" | "var(--fill-warning-light-hovered)" | "var(--fill-warning-lighter)" | "var(--fill-warning-lighter-hovered)" | "var(--fill-warning-transparent)" | "var(--fill-warning-transparent-hovered)" | "var(--fill-critical)" | "var(--fill-critical-hovered)" | "var(--fill-critical-light)" | "var(--fill-critical-light-hovered)" | "var(--fill-critical-lighter)" | "var(--fill-critical-lighter-hovered)" | "var(--fill-critical-transparent)" | "var(--fill-critical-transparent-hovered)" | "var(--fill-grey-light)" | "var(--fill-grey-light-hovered)" | "var(--fill-grey)" | "var(--fill-grey-hovered)" | "var(--fill-grey-heavy)" | "var(--fill-grey-heavy-hovered)" | "var(--fill-grey-heavier)" | "var(--fill-grey-heavier-hovered)" | "var(--fill-accent-blue)" | "var(--fill-accent-blue-hovered)" | "var(--fill-accent-blue-heavy)" | "var(--fill-accent-blue-heavy-hovered)" | "var(--fill-accent-blue-heavier)" | "var(--fill-accent-blue-heavier-hovered)" | "var(--fill-accent-blue-transparent)" | "var(--fill-accent-blue-transparent-hovered)" | "var(--fill-accent-cobalt)" | "var(--fill-accent-cobalt-hovered)" | "var(--fill-accent-cobalt-heavy)" | "var(--fill-accent-cobalt-heavy-hovered)" | "var(--fill-accent-cobalt-heavier)" | "var(--fill-accent-cobalt-heavier-hovered)" | "var(--fill-accent-cobalt-transparent)" | "var(--fill-accent-cobalt-transparent-hovered)" | "var(--fill-accent-green)" | "var(--fill-accent-green-hovered)" | "var(--fill-accent-green-heavy)" | "var(--fill-accent-green-heavy-hovered)" | "var(--fill-accent-green-heavier)" | "var(--fill-accent-green-heavier-hovered)" | "var(--fill-accent-green-transparent)" | "var(--fill-accent-green-transparent-hovered)" | "var(--fill-accent-red)" | "var(--fill-accent-red-hovered)" | "var(--fill-accent-red-heavy)" | "var(--fill-accent-red-heavy-hovered)" | "var(--fill-accent-red-heavier)" | "var(--fill-accent-red-heavier-hovered)" | "var(--fill-accent-red-transparent)" | "var(--fill-accent-red-transparent-hovered)" | "var(--fill-accent-orange)" | "var(--fill-accent-orange-hovered)" | "var(--fill-accent-orange-heavy)" | "var(--fill-accent-orange-heavy-hovered)" | "var(--fill-accent-orange-heavier)" | "var(--fill-accent-orange-heavier-hovered)" | "var(--fill-accent-orange-transparent)" | "var(--fill-accent-orange-transparent-hovered)" | "var(--fill-accent-yellow)" | "var(--fill-accent-yellow-hovered)" | "var(--fill-accent-yellow-heavy)" | "var(--fill-accent-yellow-heavy-hovered)" | "var(--fill-accent-yellow-heavier)" | "var(--fill-accent-yellow-heavier-hovered)" | "var(--fill-accent-yellow-transparent)" | "var(--fill-accent-yellow-transparent-hovered)" | "var(--fill-accent-olive)" | "var(--fill-accent-olive-hovered)" | "var(--fill-accent-olive-heavy)" | "var(--fill-accent-olive-heavy-hovered)" | "var(--fill-accent-olive-heavier)" | "var(--fill-accent-olive-heavier-hovered)" | "var(--fill-accent-olive-transparent)" | "var(--fill-accent-olive-transparent-hovered)" | "var(--fill-accent-teal)" | "var(--fill-accent-teal-hovered)" | "var(--fill-accent-teal-heavy)" | "var(--fill-accent-teal-heavy-hovered)" | "var(--fill-accent-teal-heavier)" | "var(--fill-accent-teal-heavier-hovered)" | "var(--fill-accent-teal-transparent)" | "var(--fill-accent-teal-transparent-hovered)" | "var(--fill-accent-navy)" | "var(--fill-accent-navy-hovered)" | "var(--fill-accent-navy-heavy)" | "var(--fill-accent-navy-heavy-hovered)" | "var(--fill-accent-navy-heavier)" | "var(--fill-accent-navy-heavier-hovered)" | "var(--fill-accent-navy-transparent)" | "var(--fill-accent-navy-transparent-hovered)" | "var(--fill-accent-purple)" | "var(--fill-accent-purple-hovered)" | "var(--fill-accent-purple-heavy)" | "var(--fill-accent-purple-heavy-hovered)" | "var(--fill-accent-purple-heavier)" | "var(--fill-accent-purple-heavier-hovered)" | "var(--fill-accent-purple-transparent)" | "var(--fill-accent-purple-transparent-hovered)" | "var(--fill-accent-pink)" | "var(--fill-accent-pink-hovered)" | "var(--fill-accent-pink-heavy)" | "var(--fill-accent-pink-heavy-hovered)" | "var(--fill-accent-pink-heavier)" | "var(--fill-accent-pink-heavier-hovered)" | "var(--fill-accent-pink-transparent)" | "var(--fill-accent-pink-transparent-hovered)" | "var(--fill-absolute-white)" | "var(--fill-absolute-white-hovered)" | "var(--fill-absolute-white-light)" | "var(--fill-absolute-white-light-hovered)" | "var(--fill-absolute-white-transparent)" | "var(--fill-absolute-white-transparent-hovered)" | "var(--fill-absolute-black)" | "var(--fill-absolute-black-hovered)" | "var(--fill-absolute-black-light)" | "var(--fill-absolute-black-light-hovered)" | "var(--fill-absolute-black-transparent)" | "var(--fill-absolute-black-transparent-hovered)" | "var(--fill-bright)" | "var(--fill-bright-hovered)" | "var(--surface)" | "var(--surface-hovered)" | "var(--surface-highest)" | "var(--surface-highest-hovered)" | "var(--surface-higher)" | "var(--surface-higher-hovered)" | "var(--surface-high)" | "var(--surface-high-hovered)" | "var(--surface-low)" | "var(--surface-low-hovered)" | "var(--surface-glass)" | "var(--surface-glass-hovered)" | "var(--surface-glass-highest)" | "var(--surface-glass-highest-hovered)" | "var(--surface-glass-higher)" | "var(--surface-glass-higher-hovered)" | "var(--surface-glass-high)" | "var(--surface-glass-high-hovered)" | "var(--dim-absolute-black)" | "var(--dim-absolute-black-hovered)" | "var(--dim-absolute-black-heavy)" | "var(--dim-absolute-black-heavy-hovered)" | "var(--dim-absolute-white)" | "var(--dim-absolute-white-hovered)" | "var(--dim-absolute-white-heavy)" | "var(--dim-absolute-white-heavy-hovered)" | "var(--bg-white-high)" | "var(--bg-white-normal)" | "var(--bg-white-low)" | "var(--bg-white-dim-dark)" | "var(--bg-white-dim-light)" | "var(--bg-gnb)" | "var(--bg-navi)" | "var(--bg-header)" | "var(--bg-header-float)" | "var(--bg-lounge)" | "var(--bg-black-darkest)" | "var(--bg-black-darker)" | "var(--bg-black-dark)" | "var(--bg-black-light)" | "var(--bg-black-lighter)" | "var(--bg-black-lightest)" | "var(--bg-grey-darkest)" | "var(--bg-grey-dark)" | "var(--bg-grey-dim-lightest)" | "var(--bg-grey-light)" | "var(--bg-grey-lighter)" | "var(--bg-grey-lightest)" | "var(--bgtxt-blue-dark)" | "var(--bgtxt-blue-normal)" | "var(--bgtxt-blue-light)" | "var(--bgtxt-blue-lighter)" | "var(--bgtxt-blue-lightest)" | "var(--bgtxt-cobalt-dark)" | "var(--bgtxt-cobalt-normal)" | "var(--bgtxt-cobalt-light)" | "var(--bgtxt-cobalt-lighter)" | "var(--bgtxt-cobalt-lightest)" | "var(--bgtxt-teal-dark)" | "var(--bgtxt-teal-normal)" | "var(--bgtxt-teal-light)" | "var(--bgtxt-teal-lighter)" | "var(--bgtxt-teal-lightest)" | "var(--bgtxt-green-dark)" | "var(--bgtxt-green-normal)" | "var(--bgtxt-green-light)" | "var(--bgtxt-green-lighter)" | "var(--bgtxt-green-lightest)" | "var(--bgtxt-olive-dark)" | "var(--bgtxt-olive-normal)" | "var(--bgtxt-olive-light)" | "var(--bgtxt-olive-lighter)" | "var(--bgtxt-olive-lightest)" | "var(--bgtxt-yellow-dark)" | "var(--bgtxt-yellow-normal)" | "var(--bgtxt-yellow-light)" | "var(--bgtxt-yellow-lighter)" | "var(--bgtxt-yellow-lightest)" | "var(--bgtxt-orange-dark)" | "var(--bgtxt-orange-normal)" | "var(--bgtxt-orange-light)" | "var(--bgtxt-orange-lighter)" | "var(--bgtxt-orange-lightest)" | "var(--bgtxt-red-dark)" | "var(--bgtxt-red-normal)" | "var(--bgtxt-red-light)" | "var(--bgtxt-red-lighter)" | "var(--bgtxt-red-lightest)" | "var(--bgtxt-pink-dark)" | "var(--bgtxt-pink-normal)" | "var(--bgtxt-pink-light)" | "var(--bgtxt-pink-lighter)" | "var(--bgtxt-pink-lightest)" | "var(--bgtxt-purple-dark)" | "var(--bgtxt-purple-normal)" | "var(--bgtxt-purple-light)" | "var(--bgtxt-purple-lighter)" | "var(--bgtxt-purple-lightest)" | "var(--bgtxt-navy-dark)" | "var(--bgtxt-navy-normal)" | "var(--bgtxt-navy-light)" | "var(--bgtxt-navy-lighter)" | "var(--bgtxt-navy-lightest)" | "var(--bgtxt-absolute-black-dark)" | "var(--bgtxt-absolute-black-normal)" | "var(--bgtxt-absolute-black-light)" | "var(--bgtxt-absolute-black-lighter)" | "var(--bgtxt-absolute-black-lightest)" | "var(--bgtxt-absolute-white-dark)" | "var(--bgtxt-absolute-white-normal)" | "var(--bgtxt-absolute-white-light)" | "var(--bgtxt-absolute-white-lighter)" | "var(--bgtxt-absolute-white-lightest)" | undefined;
         '--b-border-color': "var(--color-border-neutral)" | "var(--color-border-neutral-hovered)" | "var(--color-border-neutral-heavy)" | "var(--color-border-neutral-heavy-hovered)" | "var(--color-border-neutral-heavier)" | "var(--color-border-neutral-heavier-hovered)" | "var(--color-border-detach)" | "var(--color-border-detach-hovered)" | "var(--color-border-detach-highest)" | "var(--color-border-detach-highest-hovered)" | "var(--color-border-detach-higher)" | "var(--color-border-detach-higher-hovered)" | "var(--color-border-detach-high)" | "var(--color-border-detach-high-hovered)" | "var(--color-border-detach-low)" | "var(--color-border-detach-low-hovered)" | "var(--color-border-absolute-white)" | "var(--color-border-absolute-white-hovered)" | "var(--color-bdr-black-dark)" | "var(--color-bdr-black-light)" | "var(--color-bdr-black-lightest)" | "var(--color-bdr-grey-light)" | "var(--color-bdr-white)" | "var(--border-neutral)" | "var(--border-neutral-hovered)" | "var(--border-neutral-heavy)" | "var(--border-neutral-heavy-hovered)" | "var(--border-neutral-heavier)" | "var(--border-neutral-heavier-hovered)" | "var(--border-detach)" | "var(--border-detach-hovered)" | "var(--border-detach-highest)" | "var(--border-detach-highest-hovered)" | "var(--border-detach-higher)" | "var(--border-detach-higher-hovered)" | "var(--border-detach-high)" | "var(--border-detach-high-hovered)" | "var(--border-detach-low)" | "var(--border-detach-low-hovered)" | "var(--border-absolute-white)" | "var(--border-absolute-white-hovered)" | "var(--bdr-black-dark)" | "var(--bdr-black-light)" | "var(--bdr-black-lightest)" | "var(--bdr-grey-light)" | "var(--bdr-white)" | undefined;
         '--b-border-width': string | 0 | undefined;
         '--b-border-top-width': string | 0 | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.6.5",
+  "version": "4.0.0-next.0",
   "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.52.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.5.0",
+    "@channel.io/bezier-tokens": "1.0.0-next.0",
     "@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-heaviest-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);
+      }
     }
   }