From 66c7a8f262789a24c53ea93ffb0fa55001435c07 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 13 Dec 2024 18:18:08 +0900 Subject: [PATCH 1/7] feat: add and export alpha tokens --- packages/bezier-react/src/index.ts | 2 + .../bezier-react/src/types/alpha-tokens.ts | 69 +++++++++++++++++++ packages/bezier-react/src/types/tokens.ts | 17 ++--- packages/bezier-react/src/types/utils.ts | 12 ++++ 4 files changed, 88 insertions(+), 12 deletions(-) create mode 100644 packages/bezier-react/src/types/alpha-tokens.ts create mode 100644 packages/bezier-react/src/types/utils.ts diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts index b9d8875985..33a52dd5c2 100644 --- a/packages/bezier-react/src/index.ts +++ b/packages/bezier-react/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' diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts new file mode 100644 index 0000000000..18be3b11d7 --- /dev/null +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -0,0 +1,69 @@ +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 +export type ThemeToken = typeof tokens.lightTheme | typeof tokens.darkTheme + +// NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names +export type FlattenGlobalToken = ExtractKeys +export type FlattenThemeToken = ExtractKeys +export type FlattenAllToken = FlattenGlobalToken | FlattenThemeToken + +export type GlobalColor = RemovePrefix< + 'alpha-color', + keyof GlobalToken['color'] +> + +/** + * Functional & Semantic color tokens + */ +export type ThemeColor = RemovePrefix<'alpha-color', keyof ThemeToken['color']> + +export type BackgroundFunctionalColor = StartsWithPrefix<'bg', ThemeColor> +export type ForegroundFunctionalColor = StartsWithPrefix<'fg', ThemeColor> +export type SurfaceFunctionalColor = StartsWithPrefix<'surface', ThemeColor> +export type ShadowFunctionalColor = StartsWithPrefix<'shadow', ThemeColor> +export type DimFunctionalColor = StartsWithPrefix<'dim', ThemeColor> + +export type FunctionalColor = + | BackgroundFunctionalColor + | ForegroundFunctionalColor + | SurfaceFunctionalColor + | ShadowFunctionalColor + | DimFunctionalColor + +export type SemanticColor = StartsWithPrefix< + 'primary' | 'critical' | 'warning' | 'accent' | 'success', + ThemeColor +> + +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 ThemeToken['shadow']> +export type FunctionalGradient = RemovePrefix< + 'alpha-gradient', + keyof ThemeToken['gradient'] +> diff --git a/packages/bezier-react/src/types/tokens.ts b/packages/bezier-react/src/types/tokens.ts index 9e5923a3e3..c757608785 100644 --- a/packages/bezier-react/src/types/tokens.ts +++ b/packages/bezier-react/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 extends Record ? 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' diff --git a/packages/bezier-react/src/types/utils.ts b/packages/bezier-react/src/types/utils.ts new file mode 100644 index 0000000000..1d0da6e616 --- /dev/null +++ b/packages/bezier-react/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 extends Record ? K : never From c8700033ee7ad3faebb9b60c5278e42e1d150895 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 13 Dec 2024 18:47:28 +0900 Subject: [PATCH 2/7] feat: implements AlphaTokenProvider --- .../AlphaTokenProvider/TokenProvider.tsx | 49 +++++++++++++++++++ .../AlphaTokenProvider/TokenProvider.types.ts | 20 ++++++++ .../components/AlphaTokenProvider/index.ts | 5 ++ .../bezier-react/src/types/alpha-tokens.ts | 3 ++ 4 files changed, 77 insertions(+) create mode 100644 packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx create mode 100644 packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts create mode 100644 packages/bezier-react/src/components/AlphaTokenProvider/index.ts diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx new file mode 100644 index 0000000000..621a1ec25c --- /dev/null +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx @@ -0,0 +1,49 @@ +'use client' + +import React, { 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 [AlphaTokenContextProvider, useAlphaTokenContext] = + createContext(null, 'AlphaTokenProvider') + +export { useAlphaTokenContext } + +const tokenSet: Record = Object.freeze({ + light: { + global: tokens.global, + theme: tokens.lightTheme, + }, + dark: { + global: tokens.global, + theme: tokens.darkTheme, + }, +}) + +/** + * @private + */ +export function TokenProvider({ themeName, children }: TokenProviderProps) { + return ( + ({ + themeName, + tokens: tokenSet[themeName], + }), + [themeName] + )} + > + {children} + + ) +} diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts new file mode 100644 index 0000000000..56734b8983 --- /dev/null +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts @@ -0,0 +1,20 @@ +import { + type GlobalToken, + type ThemeName, + type ThemeToken, +} from '~/src/types/alpha-tokens' + +export interface ThemeSpecificTokens { + global: GlobalToken + theme: ThemeToken +} + +export interface TokenContextValue { + themeName: ThemeName + tokens: ThemeSpecificTokens +} + +export interface TokenProviderProps { + themeName: ThemeName + children: React.ReactNode +} diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/index.ts b/packages/bezier-react/src/components/AlphaTokenProvider/index.ts new file mode 100644 index 0000000000..70e772ab27 --- /dev/null +++ b/packages/bezier-react/src/components/AlphaTokenProvider/index.ts @@ -0,0 +1,5 @@ +export { + TokenProvider as AlphaTokenProvider, + useAlphaTokenContext, +} from './TokenProvider' +export type { TokenProviderProps as AlphaTokenProviderProps } from './TokenProvider.types' diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts index 18be3b11d7..898d964d00 100644 --- a/packages/bezier-react/src/types/alpha-tokens.ts +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -10,6 +10,9 @@ import { export type ThemeName = 'light' | 'dark' export type GlobalToken = typeof tokens.global +/** + * FIXME: Separate functional and semantic tokens? + */ export type ThemeToken = typeof tokens.lightTheme | typeof tokens.darkTheme // NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names From 8b625ad99b500d78455a5444edd83c4b6d349d3f Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 15:05:50 +0900 Subject: [PATCH 3/7] refactor(alpha-token-provider): rename TokenProvider to AlphaTokenProvider --- .../components/AlphaTokenProvider/TokenProvider.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx index 621a1ec25c..ac5d6e34f3 100644 --- a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { useMemo } from 'react' +import { useMemo } from 'react' import { tokens } from '@channel.io/bezier-tokens/alpha' @@ -13,10 +13,11 @@ import { type TokenProviderProps, } from './TokenProvider.types' -const [AlphaTokenContextProvider, useAlphaTokenContext] = +const [TokenContextProvider, useTokenContext] = + // FIXME: (@ed) Change the name to TokenProvider after the migration is done createContext(null, 'AlphaTokenProvider') -export { useAlphaTokenContext } +export { useTokenContext as useAlphaTokenContext } const tokenSet: Record = Object.freeze({ light: { @@ -34,7 +35,7 @@ const tokenSet: Record = Object.freeze({ */ export function TokenProvider({ themeName, children }: TokenProviderProps) { return ( - ({ themeName, @@ -44,6 +45,6 @@ export function TokenProvider({ themeName, children }: TokenProviderProps) { )} > {children} - + ) } From e89048342816e5f9be8489cecf1d21ec7c4756c0 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:20:01 +0900 Subject: [PATCH 4/7] refactor: rename ThemeToken to SemanticToken & modify comment --- .../AlphaTokenProvider/TokenProvider.tsx | 2 +- .../AlphaTokenProvider/TokenProvider.types.ts | 4 +- .../bezier-react/src/types/alpha-tokens.ts | 41 +++++++++++++------ 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx index ac5d6e34f3..d7a806d0e6 100644 --- a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx @@ -14,7 +14,7 @@ import { } from './TokenProvider.types' const [TokenContextProvider, useTokenContext] = - // FIXME: (@ed) Change the name to TokenProvider after the migration is done + // FIXME: (@ed) Remove Alpha prefix after the migration is done createContext(null, 'AlphaTokenProvider') export { useTokenContext as useAlphaTokenContext } diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts index 56734b8983..71e41d2f7c 100644 --- a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts @@ -1,12 +1,12 @@ import { type GlobalToken, + type SemanticToken, type ThemeName, - type ThemeToken, } from '~/src/types/alpha-tokens' export interface ThemeSpecificTokens { global: GlobalToken - theme: ThemeToken + theme: SemanticToken } export interface TokenContextValue { diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts index 898d964d00..4ea4938fac 100644 --- a/packages/bezier-react/src/types/alpha-tokens.ts +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -13,12 +13,14 @@ export type GlobalToken = typeof tokens.global /** * FIXME: Separate functional and semantic tokens? */ -export type ThemeToken = typeof tokens.lightTheme | typeof tokens.darkTheme +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 -export type FlattenThemeToken = ExtractKeys -export type FlattenAllToken = FlattenGlobalToken | FlattenThemeToken +export type FlattenSemanticToken = ExtractKeys< + SemanticToken[keyof SemanticToken] +> +export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken export type GlobalColor = RemovePrefix< 'alpha-color', @@ -28,13 +30,28 @@ export type GlobalColor = RemovePrefix< /** * Functional & Semantic color tokens */ -export type ThemeColor = RemovePrefix<'alpha-color', keyof ThemeToken['color']> +export type BaseSemanticColor = RemovePrefix< + 'alpha-color', + keyof SemanticToken['color'] +> -export type BackgroundFunctionalColor = StartsWithPrefix<'bg', ThemeColor> -export type ForegroundFunctionalColor = StartsWithPrefix<'fg', ThemeColor> -export type SurfaceFunctionalColor = StartsWithPrefix<'surface', ThemeColor> -export type ShadowFunctionalColor = StartsWithPrefix<'shadow', ThemeColor> -export type DimFunctionalColor = StartsWithPrefix<'dim', ThemeColor> +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 @@ -45,7 +62,7 @@ export type FunctionalColor = export type SemanticColor = StartsWithPrefix< 'primary' | 'critical' | 'warning' | 'accent' | 'success', - ThemeColor + BaseSemanticColor > export type Color = GlobalColor | FunctionalColor | SemanticColor @@ -65,8 +82,8 @@ export type GlobalGradient = RemovePrefix< keyof GlobalToken['gradient'] > -export type Shadow = RemovePrefix<'alpha-shadow', keyof ThemeToken['shadow']> +export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']> export type FunctionalGradient = RemovePrefix< 'alpha-gradient', - keyof ThemeToken['gradient'] + keyof SemanticToken['gradient'] > From 1b531a9385b3497c98e3b803f6b3d8203e72d5fe Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:23:48 +0900 Subject: [PATCH 5/7] feat: apply AlphaTokenProvider and export useAlphaTokens --- .../components/AppProvider/AppProvider.tsx | 7 ++++- .../ThemeProvider/ThemeProvider.tsx | 30 ++++++++++++++----- .../src/components/ThemeProvider/index.ts | 1 + 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/bezier-react/src/components/AppProvider/AppProvider.tsx b/packages/bezier-react/src/components/AppProvider/AppProvider.tsx index 14d9200962..5bdb1dcefa 100644 --- a/packages/bezier-react/src/components/AppProvider/AppProvider.tsx +++ b/packages/bezier-react/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 ( - {children} + + + {children} + + ) diff --git a/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx b/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx index a00d8b5dda..2b82dcc080 100644 --- a/packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx +++ b/packages/bezier-react/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( function ThemeProvider({ themeName, children, ...rest }, forwardedRef) { return ( - - {children} - + + + {children} + + ) } diff --git a/packages/bezier-react/src/components/ThemeProvider/index.ts b/packages/bezier-react/src/components/ThemeProvider/index.ts index fdcb4ada4d..225adf1dbf 100644 --- a/packages/bezier-react/src/components/ThemeProvider/index.ts +++ b/packages/bezier-react/src/components/ThemeProvider/index.ts @@ -5,6 +5,7 @@ export { ThemeProvider, useThemeName, useTokens, + useAlphaTokens, } from './ThemeProvider' export { type FixedThemeProviderProps, From 4e3812bf62d6e27183e1c09d0831efff03e93826 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:25:44 +0900 Subject: [PATCH 6/7] feat: rename object key name from theme to semantic --- .../src/components/AlphaTokenProvider/TokenProvider.tsx | 4 ++-- .../src/components/AlphaTokenProvider/TokenProvider.types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx index d7a806d0e6..71315db2e0 100644 --- a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx @@ -22,11 +22,11 @@ export { useTokenContext as useAlphaTokenContext } const tokenSet: Record = Object.freeze({ light: { global: tokens.global, - theme: tokens.lightTheme, + semantic: tokens.lightTheme, }, dark: { global: tokens.global, - theme: tokens.darkTheme, + semantic: tokens.darkTheme, }, }) diff --git a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts index 71e41d2f7c..c8705ab735 100644 --- a/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts +++ b/packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts @@ -6,7 +6,7 @@ import { export interface ThemeSpecificTokens { global: GlobalToken - theme: SemanticToken + semantic: SemanticToken } export interface TokenContextValue { From ae9ed4fd5985ea24d9493b6b6423a5601617a3d2 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:39:32 +0900 Subject: [PATCH 7/7] chore(changeset): add changeset --- .changeset/old-oranges-wink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/old-oranges-wink.md diff --git a/.changeset/old-oranges-wink.md b/.changeset/old-oranges-wink.md new file mode 100644 index 0000000000..f4aa031ecd --- /dev/null +++ b/.changeset/old-oranges-wink.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-react': patch +--- + +Export the `alphaTokens`, `AlphaTokens`, and `useAlphaTokens` modules.