chore: expose brand colors (#2296)

razorpay · Jul 18, 2024 · f26cf80 · f26cf80
1 parent b547c18
commit f26cf80
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 20 deletions.
diff --git a/.changeset/hot-islands-heal.md 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
@@ -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
@@ -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 (
     <div>
-      <BladeProvider themeTokens={createTheme({ brandColor: '#83003D' })} colorScheme="light">
+      <BladeProvider themeTokens={createTheme({ brandColor: '#83003D' }).theme} colorScheme="light">
         <Heading>Foreground on Button is Light based on the brand color</Heading>
         <Button icon={CreditCardIcon}>Pay Now</Button>
       </BladeProvider>
-      <BladeProvider themeTokens={createTheme({ brandColor: '#5EDD55' })} colorScheme="light">
+      <BladeProvider themeTokens={createTheme({ brandColor: '#5EDD55' }).theme} colorScheme="light">
         <Heading marginTop="spacing.6">
           Foreground on Button is Dark based on the brand color
         </Heading>

diff --git 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 (
                   <BladeProvider 

diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx
@@ -22,7 +22,7 @@ const ThemePlayground = (): React.ReactElement => {
   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
@@ -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`] = `
 <View
   style={
     {
@@ -1355,7 +1375,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
 </View>
 `;
 
-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`] = `
 <View
   style={
     {

diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
@@ -1108,6 +1108,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`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
@@ -1250,7 +1270,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
 </button>
 `;
 
-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
@@ -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(
       <BladeProvider themeTokens={theme} colorScheme="light">
         <Button>Pay now</Button>
@@ -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(
       <BladeProvider themeTokens={theme} colorScheme="dark">
         <Button>Pay now</Button>
@@ -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
@@ -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(
       <BladeProvider themeTokens={theme} colorScheme="light">
         <Button>Pay now</Button>
@@ -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(
       <BladeProvider themeTokens={theme} colorScheme="dark">
         <Button>Pay now</Button>
@@ -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
@@ -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
@@ -265,7 +265,7 @@ const getTheme = () => {
   if(${Boolean(brandColor)}){
     return createTheme({
       brandColor: "${brandColor}",
-    });
+    }).theme;
   }
   return ${themeTokenName};
 }