diff --git a/.changeset/hot-islands-heal.md b/.changeset/hot-islands-heal.md new file mode 100644 index 00000000000..0c2ef427985 --- /dev/null +++ b/.changeset/hot-islands-heal.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": minor +--- + +chore: expose brand colors diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index 192b1d0fe6a..0bb9dcf89d7 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/packages/blade/.storybook/react/preview.tsx @@ -82,7 +82,7 @@ export const parameters = { console.log('----', context); const getThemeTokens = () => { if (context.store.globals.globals.brandColor) { - return createTheme({ brandColor: context.store.globals.globals.brandColor }); + return createTheme({ brandColor: context.store.globals.globals.brandColor }).theme; } return bladeTheme; }; @@ -165,7 +165,7 @@ export const decorators = [ toggleHiddenStoryStyle(context.globals.showInternalComponents); const getThemeTokens = () => { if (context.globals.brandColor) { - return createTheme({ brandColor: context.globals.brandColor }); + return createTheme({ brandColor: context.globals.brandColor }).theme; } return bladeTheme; }; diff --git a/packages/blade/docs/guides/CreateTheme.stories.mdx b/packages/blade/docs/guides/CreateTheme.stories.mdx index 7fc4f2e55c1..17baebabe1e 100644 --- a/packages/blade/docs/guides/CreateTheme.stories.mdx +++ b/packages/blade/docs/guides/CreateTheme.stories.mdx @@ -1,4 +1,3 @@ -{/* TODO: Rebranding - Rexpose Theming once we fix white-labeling */} import { Meta } from '@storybook/addon-docs'; import { Collapsible, @@ -43,7 +42,7 @@ To make this possible, Blade allows you to customize the theme of the components ```tsx import { createTheme } from '@razorpay/blade/tokens'; -const customThemeTokens = createTheme({ +const { theme: customThemeTokens } = createTheme({ brandColor: '#83003D', // 'rgba(131, 0, 61)', 'hsl(332, 100%, 26%)' are also valid values }); @@ -70,11 +69,11 @@ Custom branded themes also contain support for light and dark color schemes. You export const ContrastDemo = () => { return (
- + Foreground on Button is Light based on the brand color - + Foreground on Button is Dark based on the brand color diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx index 8c3fe24252e..6289d2a0958 100644 --- a/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx +++ b/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx @@ -251,7 +251,7 @@ const ThemeSelector = ({ const Wrapper = () => { // create your custom theme here with any brand color - const customTheme = createTheme({ brandColor: '${selectedColor}' }) + const { theme: customTheme } = createTheme({ brandColor: '${selectedColor}' }) return ( { const [showInternalDemoConfig, setShowInternalDemoConfig] = useState(false); const getTheme = (): ThemeTokens => { if (selectedColor) { - return createTheme({ brandColor: selectedColor }); + return createTheme({ brandColor: selectedColor }).theme; } if (selectedPreBuiltTheme === 'paymentTheme') { return bladeTheme; diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap index 023560da389..c4609749c44 100644 --- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap +++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap @@ -1180,6 +1180,26 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = ` `; exports[`createTheme should create a theme with the correct brand colors 2`] = ` +{ + "100": "hsl(332, 57%, 55%)", + "1000": "hsl(332, 100%, 14%)", + "200": "hsl(332, 52%, 49%)", + "300": "hsl(332, 59%, 43%)", + "400": "hsl(332, 69%, 37%)", + "50": "hsl(332, 66%, 61%)", + "500": "hsl(332, 81%, 32%)", + "600": "hsl(332, 100%, 26%)", + "700": "hsl(332, 100%, 23%)", + "800": "hsl(332, 100%, 20%)", + "900": "hsl(332, 100%, 17%)", + "a100": "hsla(332, 100%, 26%, 0.12)", + "a150": "hsla(332, 100%, 26%, 0.09)", + "a200": "hsla(332, 100%, 26%, 0.18)", + "a50": "hsla(332, 100%, 26%, 0.09)", +} +`; + +exports[`createTheme should create a theme with the correct brand colors 3`] = ` `; -exports[`createTheme should create a theme with the correct brand colors 3`] = ` +exports[`createTheme should create a theme with the correct brand colors 4`] = ` { "border": { "radius": { @@ -2534,7 +2554,27 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = ` } `; -exports[`createTheme should create a theme with the correct brand colors 4`] = ` +exports[`createTheme should create a theme with the correct brand colors 5`] = ` +{ + "100": "hsl(60, 100%, 60%)", + "1000": "hsl(57, 100%, 32%)", + "200": "hsl(60, 100%, 58%)", + "300": "hsl(60, 100%, 57%)", + "400": "hsl(60, 100%, 55%)", + "50": "hsl(60, 100%, 61%)", + "500": "hsl(58, 100%, 54%)", + "600": "hsl(57, 100%, 52%)", + "700": "hsl(57, 100%, 47%)", + "800": "hsl(57, 100%, 42%)", + "900": "hsl(57, 100%, 37%)", + "a100": "hsla(57, 100%, 52%, 0.12)", + "a150": "hsla(57, 100%, 52%, 0.09)", + "a200": "hsla(57, 100%, 52%, 0.18)", + "a50": "hsla(57, 100%, 52%, 0.09)", +} +`; + +exports[`createTheme should create a theme with the correct brand colors 6`] = ` `; -exports[`createTheme should create a theme with the correct brand colors 3`] = ` +exports[`createTheme should create a theme with the correct brand colors 4`] = ` { "border": { "radius": { @@ -2357,7 +2377,27 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = ` } `; -exports[`createTheme should create a theme with the correct brand colors 4`] = ` +exports[`createTheme should create a theme with the correct brand colors 5`] = ` +{ + "100": "hsl(60, 100%, 60%)", + "1000": "hsl(57, 100%, 32%)", + "200": "hsl(60, 100%, 58%)", + "300": "hsl(60, 100%, 57%)", + "400": "hsl(60, 100%, 55%)", + "50": "hsl(60, 100%, 61%)", + "500": "hsl(58, 100%, 54%)", + "600": "hsl(57, 100%, 52%)", + "700": "hsl(57, 100%, 47%)", + "800": "hsl(57, 100%, 42%)", + "900": "hsl(57, 100%, 37%)", + "a100": "hsla(57, 100%, 52%, 0.12)", + "a150": "hsla(57, 100%, 52%, 0.09)", + "a200": "hsla(57, 100%, 52%, 0.18)", + "a50": "hsla(57, 100%, 52%, 0.09)", +} +`; + +exports[`createTheme should create a theme with the correct brand colors 6`] = ` .c0.c0.c0.c0.c0 { min-height: 36px; width: auto; diff --git a/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx b/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx index 9587f6df6b4..fa3205933ca 100644 --- a/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx +++ b/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx @@ -7,7 +7,7 @@ import { Button } from '~components/Button'; describe('createTheme', () => { it('should create a theme with the correct brand colors', () => { const brandColor = '#83003D'; - const theme = createTheme({ brandColor }); + const { theme, brandColors } = createTheme({ brandColor }); const { toJSON } = render( @@ -25,12 +25,13 @@ describe('createTheme', () => { ), ).toBe(true); expect(theme).toMatchSnapshot(); + expect(brandColors).toMatchSnapshot(); expect(toJSON()).toMatchSnapshot(); }); it('should create a theme with the correct brand colors', () => { const brandColor = '#FFF10A'; - const theme = createTheme({ brandColor }); + const { theme, brandColors } = createTheme({ brandColor }); const { toJSON } = render( @@ -47,6 +48,7 @@ describe('createTheme', () => { ), ).toBe(true); expect(theme).toMatchSnapshot(); + expect(brandColors).toMatchSnapshot(); expect(toJSON()).toMatchSnapshot(); }); }); diff --git a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx index 5a88893c530..950a8280c9d 100644 --- a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx +++ b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx @@ -7,7 +7,7 @@ import { Button } from '~components/Button'; describe('createTheme', () => { it('should create a theme with the correct brand colors', () => { const brandColor = '#83003D'; - const theme = createTheme({ brandColor }); + const { theme, brandColors } = createTheme({ brandColor }); const { getByRole } = render( @@ -25,12 +25,13 @@ describe('createTheme', () => { ), ).toBe(true); expect(theme).toMatchSnapshot(); + expect(brandColors).toMatchSnapshot(); expect(getByRole('button')).toMatchSnapshot(); }); it('should create a theme with the correct brand colors', () => { const brandColor = '#FFF10A'; - const theme = createTheme({ brandColor }); + const { theme, brandColors } = createTheme({ brandColor }); const { getByRole } = render( @@ -47,6 +48,7 @@ describe('createTheme', () => { ), ).toBe(true); expect(theme).toMatchSnapshot(); + expect(brandColors).toMatchSnapshot(); expect(getByRole('button')).toMatchSnapshot(); }); }); diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts index 266a466ff56..99101541814 100644 --- a/packages/blade/src/tokens/theme/createTheme.ts +++ b/packages/blade/src/tokens/theme/createTheme.ts @@ -293,9 +293,13 @@ const getOnDarkOverrides = ( * Creates a Blade Theme based on the custom brand color * @returns The Theme Tokens with the custom brand colors * @example - * const theme = createTheme({ brandColor: '#19BEA2'}) + * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'}) **/ -export const createTheme = ({ brandColor }: { brandColor: ColorInput }): ThemeTokens => { +export const createTheme = ({ + brandColor, +}: { + brandColor: ColorInput; +}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => { const chromaticBrandColors = generateChromaticBrandColors(brandColor); // Get onLight overrides const brandedLightTheme = getOnLightOverrides(chromaticBrandColors); @@ -317,5 +321,5 @@ export const createTheme = ({ brandColor }: { brandColor: ColorInput }): ThemeTo }, }); - return brandedThemeTokens; + return { theme: brandedThemeTokens, brandColors: chromaticBrandColors }; }; diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts index e4f759440f3..16c2fba6480 100644 --- a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts +++ b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts @@ -265,7 +265,7 @@ const getTheme = () => { if(${Boolean(brandColor)}){ return createTheme({ brandColor: "${brandColor}", - }); + }).theme; } return ${themeTokenName}; }