chore: fix staticWhite color rebrand

razorpay · Jan 11, 2024 · a692797 · a692797
1 parent 6b92f3c
commit a692797
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 47 deletions.
diff --git a/packages/blade/src/components/Button/BaseButton/buttonTokens.ts b/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
@@ -85,8 +85,8 @@ const textColor = (property: 'icon' | 'text') => {
   return {
     base: {
       primary: {
-        default: `interactive.${property}.staticWhite.normal`,
-        highlighted: `interactive.${property}.staticWhite.normal`,
+        default: `interactive.${property}.onPrimary.normal`,
+        highlighted: `interactive.${property}.onPrimary.normal`,
         disabled: `interactive.${property}.primary.disabled`,
       },
       secondary: {

diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
@@ -78,7 +78,7 @@ const CheckboxIcon = ({
   size,
 }: CheckboxIconProps) => {
   const { theme } = useTheme();
-  const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal');
+  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');
   return (
     <CheckboxIconWrapper
       size={size}

diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts
@@ -58,7 +58,7 @@ const radioIconColors: RadioIconColors = {
   variants: {
     default: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
         unchecked: 'colors.transparent',
       },
       border: {
@@ -72,8 +72,8 @@ const radioIconColors: RadioIconColors = {
     },
     disabled: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
-        unchecked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.interactive.icon.onPrimary.normal',
       },
       border: {
         checked: 'colors.transparent',
@@ -86,7 +86,7 @@ const radioIconColors: RadioIconColors = {
     },
     negative: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
         unchecked: 'colors.transparent',
       },
       border: {

diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts
@@ -104,15 +104,15 @@ const getOnLightOverrides = (
 ): DeepPartial<ThemeTokens['colors']['onLight']> => {
   // Select the most readable color to use as the foreground color on top of surface color
   // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceLight = tinycolor.isReadable(
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayLight[50],
     brandColors[600],
     WCAG2ContrastOptions,
   )
     ? brandColors[600]
     : globalColors.neutral.blueGrayLight[1100];
 
-  const staticWhiteDefault = tinycolor
+  const foregroundOnBrand = tinycolor
     .mostReadable(
       brandColors[900],
       [globalColors.neutral.white[500], globalColors.neutral.black[500]],
@@ -142,30 +142,30 @@ const getOnLightOverrides = (
       },
       text: {
         primary: {
-          normal: foregroundOnSurfaceLight,
-          disabled: foregroundOnSurfaceLight,
-          muted: foregroundOnSurfaceLight,
-          subtle: foregroundOnSurfaceLight,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
       icon: {
         primary: {
-          normal: foregroundOnSurfaceLight,
-          disabled: foregroundOnSurfaceLight,
-          muted: foregroundOnSurfaceLight,
-          subtle: foregroundOnSurfaceLight,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
     },
@@ -185,15 +185,15 @@ const getOnDarkOverrides = (
 ): DeepPartial<ThemeTokens['colors']['onDark']> => {
   // Select the most readable color to use as the foreground color on top of surface color
   // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceDark = tinycolor.isReadable(
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayDark[1100],
     brandColors[400],
     WCAG2ContrastOptions,
   )
     ? brandColors[400]
     : globalColors.neutral.blueGrayDark[0];
 
-  const staticWhiteDefault = tinycolor
+  const foregroundOnBrand = tinycolor
     .mostReadable(
       brandColors[900],
       [globalColors.neutral.white[500], globalColors.neutral.black[500]],
@@ -223,30 +223,30 @@ const getOnDarkOverrides = (
       },
       text: {
         primary: {
-          normal: foregroundOnSurfaceDark,
-          disabled: foregroundOnSurfaceDark,
-          muted: foregroundOnSurfaceDark,
-          subtle: foregroundOnSurfaceDark,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
       icon: {
         primary: {
-          normal: foregroundOnSurfaceDark,
-          disabled: foregroundOnSurfaceDark,
-          muted: foregroundOnSurfaceDark,
-          subtle: foregroundOnSurfaceDark,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
     },