@channel.io/bezier-react 3.0.0 → 3.0.1

package/dist/types/components/AlphaTokenProvider/TokenProvider.d.ts

@@ -0,0 +1,8 @@
+import { type TokenContextValue, type TokenProviderProps } from './TokenProvider.types';
+declare const useTokenContext: (consumerName: string) => TokenContextValue;
+export { useTokenContext as useAlphaTokenContext };
+/**
+ * @private
+ */
+export declare function TokenProvider({ themeName, children }: TokenProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TokenProvider.d.ts.map

package/dist/types/components/AlphaTokenProvider/TokenProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaTokenProvider/TokenProvider.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B,QAAA,MAA6B,eAAe,6CAEyB,CAAA;AAErE,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,CAAA;AAalD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAcxE"}

package/dist/types/components/AlphaTokenProvider/TokenProvider.types.d.ts

@@ -0,0 +1,14 @@
+import { type GlobalToken, type SemanticToken, type ThemeName } from "../../types/alpha-tokens";
+export interface ThemeSpecificTokens {
+    global: GlobalToken;
+    semantic: SemanticToken;
+}
+export interface TokenContextValue {
+    themeName: ThemeName;
+    tokens: ThemeSpecificTokens;
+}
+export interface TokenProviderProps {
+    themeName: ThemeName;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=TokenProvider.types.d.ts.map

package/dist/types/components/AlphaTokenProvider/TokenProvider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaTokenProvider/TokenProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,iCAAgC;AAEjC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,mBAAmB,CAAA;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B"}

package/dist/types/components/AlphaTokenProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { TokenProvider as AlphaTokenProvider, useAlphaTokenContext, } from './TokenProvider';
+export type { TokenProviderProps as AlphaTokenProviderProps } from './TokenProvider.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaTokenProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaTokenProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,kBAAkB,EACnC,oBAAoB,GACrB,MAAM,iBAAiB,CAAA;AACxB,YAAY,EAAE,kBAAkB,IAAI,uBAAuB,EAAE,MAAM,uBAAuB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAI3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAmB,EACnB,QAAa,EACb,MAAsB,GACvB,EAAE,gBAAgB,2CAoBlB"}
+{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAI3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAmB,EACnB,QAAa,EACb,MAAsB,GACvB,EAAE,gBAAgB,2CAwBlB"}

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

@@ -7,6 +7,11 @@ export declare function useThemeName(): import("../..").ThemeName;
  * `useTokens` is a hook that returns the design tokens of the current theme.
  */
 export declare function useTokens(): import("../TokenProvider/TokenProvider.types").ThemeSpecificTokens;
+/**
+ * `useAlphaTokens` is a hook that returns the alpha tokens of the current theme.
+ * @internal
+ */
+export declare function useAlphaTokens(): import("../AlphaTokenProvider/TokenProvider.types").ThemeSpecificTokens;
 /**
  * `ThemeProvider` is a wrapper component that provides theme context.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B;;GAEG;AACH,wBAAgB,YAAY,8BAE3B;AAED;;GAEG;AACH,wBAAgB,SAAS,uEAExB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,4GAezB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,iHAa7B,CAAA;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iHAa5B,CAAA;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iHAahC,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B;;GAEG;AACH,wBAAgB,YAAY,8BAE3B;AAED;;GAEG;AACH,wBAAgB,SAAS,uEAExB;AAED;;;GAGG;AACH,wBAAgB,cAAc,4EAE7B;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,4GAiBzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,iHAa7B,CAAA;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iHAa5B,CAAA;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iHAahC,CAAA"}

package/dist/types/components/ThemeProvider/index.d.ts

@@ -1,3 +1,3 @@
-export { DarkThemeProvider, InvertedThemeProvider, LightThemeProvider, ThemeProvider, useThemeName, useTokens, } from './ThemeProvider';
+export { DarkThemeProvider, InvertedThemeProvider, LightThemeProvider, ThemeProvider, useThemeName, useTokens, useAlphaTokens, } from './ThemeProvider';
 export { type FixedThemeProviderProps, type ThemeProviderProps, } from './ThemeProvider.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/ThemeProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,SAAS,GACV,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,GACxB,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ThemeProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,cAAc,GACf,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,GACxB,MAAM,uBAAuB,CAAA"}

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import '~/src/styles/index.scss';
 export { tokens } from '@channel.io/bezier-tokens';
+export { tokens as alphaTokens } from '@channel.io/bezier-tokens/alpha';
 export * from "./components/AlphaAvatar";
 export * from "./components/AlphaAvatarGroup";
 export * from "./components/AlphaButton";
@@ -69,4 +70,5 @@ export * from "./components/WindowProvider";
 export * from "./hooks/useKeyboardActionLockerWhileComposing";
 export type * from "./types/props";
 export type * from "./types/tokens";
+export type * as AlphaTokens from "./types/alpha-tokens";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,yCAA4C;AAC5C,8CAAiD;AACjD,+CAAkD;AAClD,oDAAuD;AACvD,yDAA4D;AAC5D,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,mCAAsC;AACtC,oCAAuC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAGvE,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,yCAA4C;AAC5C,8CAAiD;AACjD,+CAAkD;AAClD,oDAAuD;AACvD,yDAA4D;AAC5D,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,mCAAsC;AACtC,oCAAuC;AACvC,YAAY,KAAK,WAAW,6BAAgC"}

package/dist/types/types/alpha-tokens.d.ts

@@ -0,0 +1,32 @@
+import { type tokens } from '@channel.io/bezier-tokens/alpha';
+import { type ExtractKeys, type RemovePrefix, type StartsWithPrefix } from './utils';
+export type ThemeName = 'light' | 'dark';
+export type GlobalToken = typeof tokens.global;
+/**
+ * FIXME: Separate functional and semantic tokens?
+ */
+export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme;
+export type FlattenGlobalToken = ExtractKeys<GlobalToken[keyof GlobalToken]>;
+export type FlattenSemanticToken = ExtractKeys<SemanticToken[keyof SemanticToken]>;
+export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken;
+export type GlobalColor = RemovePrefix<'alpha-color', keyof GlobalToken['color']>;
+/**
+ * Functional & Semantic color tokens
+ */
+export type BaseSemanticColor = RemovePrefix<'alpha-color', keyof SemanticToken['color']>;
+export type BackgroundFunctionalColor = StartsWithPrefix<'bg', BaseSemanticColor>;
+export type ForegroundFunctionalColor = StartsWithPrefix<'fg', BaseSemanticColor>;
+export type SurfaceFunctionalColor = StartsWithPrefix<'surface', BaseSemanticColor>;
+export type ShadowFunctionalColor = StartsWithPrefix<'shadow', BaseSemanticColor>;
+export type DimFunctionalColor = StartsWithPrefix<'dim', BaseSemanticColor>;
+export type FunctionalColor = BackgroundFunctionalColor | ForegroundFunctionalColor | SurfaceFunctionalColor | ShadowFunctionalColor | DimFunctionalColor;
+export type SemanticColor = StartsWithPrefix<'primary' | 'critical' | 'warning' | 'accent' | 'success', BaseSemanticColor>;
+export type Color = GlobalColor | FunctionalColor | SemanticColor;
+export type Radius = RemovePrefix<'alpha-radius', keyof GlobalToken['radius']>;
+export type Opacity = RemovePrefix<'alpha-opacity', keyof GlobalToken['opacity']>;
+export type Font = RemovePrefix<'alpha-font', keyof GlobalToken['font']>;
+export type Typography = RemovePrefix<'alpha-typography', keyof GlobalToken['typography']>;
+export type GlobalGradient = RemovePrefix<'alpha-gradient', keyof GlobalToken['gradient']>;
+export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']>;
+export type FunctionalGradient = RemovePrefix<'alpha-gradient', keyof SemanticToken['gradient']>;
+//# sourceMappingURL=alpha-tokens.d.ts.map

package/dist/types/types/alpha-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha-tokens.d.ts","sourceRoot":"","sources":["../../../src/types/alpha-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iCAAiC,CAAA;AAE7D,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAA;AAGhB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,MAAM,CAAA;AAC9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,UAAU,GAAG,OAAO,MAAM,CAAC,SAAS,CAAA;AAG9E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,aAAa,CAAC,MAAM,aAAa,CAAC,CACnC,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,oBAAoB,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,YAAY,CACpC,aAAa,EACb,MAAM,WAAW,CAAC,OAAO,CAAC,CAC3B,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAC1C,aAAa,EACb,MAAM,aAAa,CAAC,OAAO,CAAC,CAC7B,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CACtD,IAAI,EACJ,iBAAiB,CAClB,CAAA;AACD,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CACtD,IAAI,EACJ,iBAAiB,CAClB,CAAA;AACD,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CACnD,SAAS,EACT,iBAAiB,CAClB,CAAA;AACD,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAClD,QAAQ,EACR,iBAAiB,CAClB,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAA;AAE3E,MAAM,MAAM,eAAe,GACvB,yBAAyB,GACzB,yBAAyB,GACzB,sBAAsB,GACtB,qBAAqB,GACrB,kBAAkB,CAAA;AAEtB,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAC1C,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,EACzD,iBAAiB,CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,eAAe,GAAG,aAAa,CAAA;AAEjE,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,cAAc,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;AAC9E,MAAM,MAAM,OAAO,GAAG,YAAY,CAChC,eAAe,EACf,MAAM,WAAW,CAAC,SAAS,CAAC,CAC7B,CAAA;AACD,MAAM,MAAM,IAAI,GAAG,YAAY,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;AACxE,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,kBAAkB,EAClB,MAAM,WAAW,CAAC,YAAY,CAAC,CAChC,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,YAAY,CACvC,gBAAgB,EAChB,MAAM,WAAW,CAAC,UAAU,CAAC,CAC9B,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,cAAc,EAAE,MAAM,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAA;AAChF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAC3C,gBAAgB,EAChB,MAAM,aAAa,CAAC,UAAU,CAAC,CAChC,CAAA"}

package/dist/types/types/tokens.d.ts

@@ -1,7 +1,5 @@
 import { type tokens } from '@channel.io/bezier-tokens';
-type RemovePrefix<Prefix extends string, Value extends string> = Value extends `${Prefix}-${infer Rest}` ? Rest : never;
-type StartsWithPrefix<Prefix extends string, Value extends string> = Value extends `${Prefix}-${infer Rest}` ? Value : never;
-type ExtractKeys<T> = T extends Record<infer K, any> ? K : never;
+import { type ExtractKeys, type RemovePrefix, type StartsWithPrefix } from './utils';
 export type ThemeName = 'light' | 'dark';
 export type GlobalToken = typeof tokens.global;
 export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme;
@@ -22,5 +20,4 @@ export type BorderSemanticColor = StartsWithPrefix<'bdr', SemanticColor>;
 export type ShadowSemanticColor = StartsWithPrefix<'shdw', SemanticColor>;
 export type Elevation = Exclude<RemovePrefix<'ev', keyof SemanticToken['elevation']>, 'base' | 'inner'>;
 export type InputShadow = RemovePrefix<'input', keyof SemanticToken['input']>;
-export {};
 //# sourceMappingURL=tokens.d.ts.map

package/dist/types/types/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/types/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAEvD,KAAK,YAAY,CACf,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,MAAM,IAClB,KAAK,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1D,KAAK,gBAAgB,CACnB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,MAAM,IAElB,KAAK,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,EAAE,GAAG,KAAK,GAAG,KAAK,CAAA;AAE3D,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAGhE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,MAAM,CAAA;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,UAAU,GAAG,OAAO,MAAM,CAAC,SAAS,CAAA;AAE9E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,aAAa,CAAC,MAAM,aAAa,CAAC,CACnC,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,oBAAoB,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC,OAAO,CAAC,CAAA;AACpD,MAAM,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;AAClE,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;AAC3E,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;AACxE,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,YAAY,EACZ,MAAM,WAAW,CAAC,YAAY,CAAC,CAChC,CAAA;AACD,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC,OAAO,CAAC,CAAA;AACxD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AAC3E,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CACxD,OAAO,EACP,aAAa,CACd,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AACtE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AACxE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,OAAO,CAC7B,YAAY,CAAC,IAAI,EAAE,MAAM,aAAa,CAAC,WAAW,CAAC,CAAC,EACpD,MAAM,GAAG,OAAO,CACjB,CAAA;AACD,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,aAAa,CAAC,OAAO,CAAC,CAAC,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/types/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAEvD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAA;AAGhB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,MAAM,CAAA;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,UAAU,GAAG,OAAO,MAAM,CAAC,SAAS,CAAA;AAE9E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,aAAa,CAAC,MAAM,aAAa,CAAC,CACnC,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,oBAAoB,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC,OAAO,CAAC,CAAA;AACpD,MAAM,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC,CAAA;AAClE,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;AAC3E,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;AACxE,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,YAAY,EACZ,MAAM,WAAW,CAAC,YAAY,CAAC,CAChC,CAAA;AACD,MAAM,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC,OAAO,CAAC,CAAA;AACxD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AAC3E,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CACxD,OAAO,EACP,aAAa,CACd,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AACtE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AACxE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,OAAO,CAC7B,YAAY,CAAC,IAAI,EAAE,MAAM,aAAa,CAAC,WAAW,CAAC,CAAC,EACpD,MAAM,GAAG,OAAO,CACjB,CAAA;AACD,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,aAAa,CAAC,OAAO,CAAC,CAAC,CAAA"}

package/dist/types/types/utils.d.ts

@@ -0,0 +1,4 @@
+export type RemovePrefix<Prefix extends string, Value extends string> = Value extends `${Prefix}-${infer Rest}` ? Rest : never;
+export type StartsWithPrefix<Prefix extends string, Value extends string> = Value extends `${Prefix}-${infer Rest}` ? Value : never;
+export type ExtractKeys<T> = T extends Record<infer K, any> ? K : never;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/types/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,CACtB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,MAAM,IAClB,KAAK,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1D,MAAM,MAAM,gBAAgB,CAC1B,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,MAAM,IAElB,KAAK,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,EAAE,GAAG,KAAK,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -132,7 +132,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.2.13",
+    "@channel.io/bezier-tokens": "0.3.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/AlphaTokenProvider/TokenProvider.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { tokens } from '@channel.io/bezier-tokens/alpha'
+
+import { type ThemeName } from '~/src/types/tokens'
+import { createContext } from '~/src/utils/react'
+
+import {
+  type ThemeSpecificTokens,
+  type TokenContextValue,
+  type TokenProviderProps,
+} from './TokenProvider.types'
+
+const [TokenContextProvider, useTokenContext] =
+  // FIXME: (@ed) Remove Alpha prefix after the migration is done
+  createContext<TokenContextValue | null>(null, 'AlphaTokenProvider')
+
+export { useTokenContext as useAlphaTokenContext }
+
+const tokenSet: Record<ThemeName, ThemeSpecificTokens> = Object.freeze({
+  light: {
+    global: tokens.global,
+    semantic: tokens.lightTheme,
+  },
+  dark: {
+    global: tokens.global,
+    semantic: tokens.darkTheme,
+  },
+})
+
+/**
+ * @private
+ */
+export function TokenProvider({ themeName, children }: TokenProviderProps) {
+  return (
+    <TokenContextProvider
+      value={useMemo(
+        () => ({
+          themeName,
+          tokens: tokenSet[themeName],
+        }),
+        [themeName]
+      )}
+    >
+      {children}
+    </TokenContextProvider>
+  )
+}

package/src/components/AlphaTokenProvider/TokenProvider.types.ts

@@ -0,0 +1,20 @@
+import {
+  type GlobalToken,
+  type SemanticToken,
+  type ThemeName,
+} from '~/src/types/alpha-tokens'
+
+export interface ThemeSpecificTokens {
+  global: GlobalToken
+  semantic: SemanticToken
+}
+
+export interface TokenContextValue {
+  themeName: ThemeName
+  tokens: ThemeSpecificTokens
+}
+
+export interface TokenProviderProps {
+  themeName: ThemeName
+  children: React.ReactNode
+}

package/src/components/AlphaTokenProvider/index.ts

@@ -0,0 +1,5 @@
+export {
+  TokenProvider as AlphaTokenProvider,
+  useAlphaTokenContext,
+} from './TokenProvider'
+export type { TokenProviderProps as AlphaTokenProviderProps } from './TokenProvider.types'

package/src/components/AppProvider/AppProvider.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 
 import { getWindow } from 'ssr-window'
 
+import { AlphaTokenProvider } from '~/src/components/AlphaTokenProvider'
 import { FeatureProvider } from '~/src/components/FeatureProvider'
 import { TokenProvider } from '~/src/components/TokenProvider'
 import { WindowProvider } from '~/src/components/WindowProvider'
@@ -52,7 +53,11 @@ export function AppProvider({
   return (
     <WindowProvider window={window}>
       <FeatureProvider features={features}>
-        <TokenProvider themeName={themeName}>{children}</TokenProvider>
+        <TokenProvider themeName={themeName}>
+          <AlphaTokenProvider themeName={themeName}>
+            {children}
+          </AlphaTokenProvider>
+        </TokenProvider>
       </FeatureProvider>
     </WindowProvider>
   )

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -4,6 +4,10 @@ import { forwardRef } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 
+import {
+  AlphaTokenProvider,
+  useAlphaTokenContext,
+} from '~/src/components/AlphaTokenProvider'
 import { TokenProvider, useTokenContext } from '~/src/components/TokenProvider'
 
 import {
@@ -25,6 +29,14 @@ export function useTokens() {
   return useTokenContext('useTokens').tokens
 }
 
+/**
+ * `useAlphaTokens` is a hook that returns the alpha tokens of the current theme.
+ * @internal
+ */
+export function useAlphaTokens() {
+  return useAlphaTokenContext('useAlphaTokens').tokens
+}
+
 /**
  * `ThemeProvider` is a wrapper component that provides theme context.
  *
@@ -34,14 +46,16 @@ export const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(
   function ThemeProvider({ themeName, children, ...rest }, forwardedRef) {
     return (
       <TokenProvider themeName={themeName}>
-        <Slot
-          ref={forwardedRef}
-          // TODO: Change data attribute constant to import from bezier-tokens
-          data-bezier-theme={themeName}
-          {...rest}
-        >
-          {children}
-        </Slot>
+        <AlphaTokenProvider themeName={themeName}>
+          <Slot
+            ref={forwardedRef}
+            // TODO: Change data attribute constant to import from bezier-tokens
+            data-bezier-theme={themeName}
+            {...rest}
+          >
+            {children}
+          </Slot>
+        </AlphaTokenProvider>
       </TokenProvider>
     )
   }

package/src/components/ThemeProvider/index.ts

@@ -5,6 +5,7 @@ export {
   ThemeProvider,
   useThemeName,
   useTokens,
+  useAlphaTokens,
 } from './ThemeProvider'
 export {
   type FixedThemeProviderProps,

package/src/index.ts

@@ -3,6 +3,7 @@ import '~/src/styles/index.scss'
 
 /* --------------------------------- TOKENS --------------------------------- */
 export { tokens } from '@channel.io/bezier-tokens'
+export { tokens as alphaTokens } from '@channel.io/bezier-tokens/alpha'
 
 /* ------------------------------- COMPONENTS ------------------------------- */
 export * from '~/src/components/AlphaAvatar'
@@ -78,3 +79,4 @@ export * from '~/src/hooks/useKeyboardActionLockerWhileComposing'
 /* ---------------------------------- TYPES --------------------------------- */
 export type * from '~/src/types/props'
 export type * from '~/src/types/tokens'
+export type * as AlphaTokens from '~/src/types/alpha-tokens'

package/src/styles/components/elevation.module.scss

@@ -1,6 +1,7 @@
-$elevations: 1, 2, 3, 4, 5, 6;
+@use 'sass:map';
+@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/scss' as *;
 
-@each $ev in $elevations {
+@each $ev in map.keys(map.get($tokens, 'light-theme', 'ev')) {
   :where(.elevation-#{$ev}) {
     /* stylelint-disable-next-line bezier/validate-token */
     box-shadow: var(--ev-#{$ev});

package/src/styles/components/radius.module.scss

@@ -1,17 +1,7 @@
-$radiuses:
-  2,
-  3,
-  4,
-  6,
-  8,
-  12,
-  16,
-  20,
-  32,
-  44,
-  42-p;
+@use 'sass:map';
+@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/scss' as *;
 
-@each $radius in $radiuses {
+@each $radius in map.keys(map.get($tokens, 'global', 'radius')) {
   :where(.radius-#{$radius}) {
     /* stylelint-disable-next-line bezier/validate-token */
     border-radius: var(--radius-#{$radius});

package/src/styles/components/z-index.module.scss

@@ -1,6 +1,7 @@
-$z-indices: hidden, base, floating, overlay, modal, toast, tooltip, important;
+@use 'sass:map';
+@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/scss' as *;
 
-@each $z-index in $z-indices {
+@each $z-index in map.keys(map.get($tokens, 'global', 'z-index')) {
   :where(.z-index-#{$z-index}) {
     /* stylelint-disable-next-line bezier/validate-token */
     z-index: var(--z-index-#{$z-index});

package/src/types/alpha-tokens.ts

@@ -0,0 +1,89 @@
+import { type tokens } from '@channel.io/bezier-tokens/alpha'
+
+import {
+  type ExtractKeys,
+  type RemovePrefix,
+  type StartsWithPrefix,
+} from './utils'
+
+// TODO: Change theme name constant to import from bezier-tokens
+export type ThemeName = 'light' | 'dark'
+
+export type GlobalToken = typeof tokens.global
+/**
+ * FIXME: Separate functional and semantic tokens?
+ */
+export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme
+
+// NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names
+export type FlattenGlobalToken = ExtractKeys<GlobalToken[keyof GlobalToken]>
+export type FlattenSemanticToken = ExtractKeys<
+  SemanticToken[keyof SemanticToken]
+>
+export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken
+
+export type GlobalColor = RemovePrefix<
+  'alpha-color',
+  keyof GlobalToken['color']
+>
+
+/**
+ * Functional & Semantic color tokens
+ */
+export type BaseSemanticColor = RemovePrefix<
+  'alpha-color',
+  keyof SemanticToken['color']
+>
+
+export type BackgroundFunctionalColor = StartsWithPrefix<
+  'bg',
+  BaseSemanticColor
+>
+export type ForegroundFunctionalColor = StartsWithPrefix<
+  'fg',
+  BaseSemanticColor
+>
+export type SurfaceFunctionalColor = StartsWithPrefix<
+  'surface',
+  BaseSemanticColor
+>
+export type ShadowFunctionalColor = StartsWithPrefix<
+  'shadow',
+  BaseSemanticColor
+>
+export type DimFunctionalColor = StartsWithPrefix<'dim', BaseSemanticColor>
+
+export type FunctionalColor =
+  | BackgroundFunctionalColor
+  | ForegroundFunctionalColor
+  | SurfaceFunctionalColor
+  | ShadowFunctionalColor
+  | DimFunctionalColor
+
+export type SemanticColor = StartsWithPrefix<
+  'primary' | 'critical' | 'warning' | 'accent' | 'success',
+  BaseSemanticColor
+>
+
+export type Color = GlobalColor | FunctionalColor | SemanticColor
+
+export type Radius = RemovePrefix<'alpha-radius', keyof GlobalToken['radius']>
+export type Opacity = RemovePrefix<
+  'alpha-opacity',
+  keyof GlobalToken['opacity']
+>
+export type Font = RemovePrefix<'alpha-font', keyof GlobalToken['font']>
+export type Typography = RemovePrefix<
+  'alpha-typography',
+  keyof GlobalToken['typography']
+>
+export type GlobalGradient = RemovePrefix<
+  'alpha-gradient',
+  keyof GlobalToken['gradient']
+>
+
+export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']>
+export type FunctionalGradient = RemovePrefix<
+  'alpha-gradient',
+  keyof SemanticToken['gradient']
+>

package/src/types/tokens.ts

@@ -1,17 +1,10 @@
 import { type tokens } from '@channel.io/bezier-tokens'
 
-type RemovePrefix<
-  Prefix extends string,
-  Value extends string,
-> = Value extends `${Prefix}-${infer Rest}` ? Rest : never
-
-type StartsWithPrefix<
-  Prefix extends string,
-  Value extends string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-> = Value extends `${Prefix}-${infer Rest}` ? Value : never
-
-type ExtractKeys<T> = T extends Record<infer K, any> ? K : never
+import {
+  type ExtractKeys,
+  type RemovePrefix,
+  type StartsWithPrefix,
+} from './utils'
 
 // TODO: Change theme name constant to import from bezier-tokens
 export type ThemeName = 'light' | 'dark'

package/src/types/utils.ts

@@ -0,0 +1,12 @@
+export type RemovePrefix<
+  Prefix extends string,
+  Value extends string,
+> = Value extends `${Prefix}-${infer Rest}` ? Rest : never
+
+export type StartsWithPrefix<
+  Prefix extends string,
+  Value extends string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+> = Value extends `${Prefix}-${infer Rest}` ? Value : never
+
+export type ExtractKeys<T> = T extends Record<infer K, any> ? K : never