feat(tokens): add new tokens, migrate overlay token (#1768)

* feat(tokens): add new tokens * fix: remove old changes * fix: remove npmrc * feat: migrate overlay tokens (#1772) * feat: migrate overlay token * Create honest-glasses-sin.md * empty commit * test: update snapshots * docs: changeset rephrasing --------- Co-authored-by: rzpcibot <tools+cibot@razorpay.com> --------- Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
razorpay · Oct 31, 2023 · a35f5df · a35f5df
1 parent 37c265d
commit a35f5df
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 51 deletions.
diff --git a/.changeset/honest-glasses-sin.md b/.changeset/honest-glasses-sin.md
@@ -0,0 +1,17 @@
+---
+'@razorpay/blade': minor
+---
+
+feat: update popup token, migrate overlay tokens
+
+> **Warning**
+>
+> `theme.colors.overlay.background` is moved to `theme.colors.surface.overlay.background[800]`.
+>
+> Based on our analytics data, its a rarely used token hence, its a non-breaking change for most consumers (1 instance in razorpay/x repo).
+> Although it is recommended to search for `colors.overlay.background` in your repo and confirm once if its not being used. If it is used you can follow migration step below.
+
+```diff
+- background={theme.colors.overlay.background}
++ background={theme.colors.surface.overlay.background[800]}
+```
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx
@@ -17,7 +17,7 @@ const BottomSheetBackdrop = (
       opacity={1}
       style={[
         props.style,
-        { backgroundColor: theme.colors.overlay.background, zIndex: props.zIndex },
+        { backgroundColor: theme.colors.surface.overlay.background[800], zIndex: props.zIndex },
       ]}
     />
   );

diff --git a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx
@@ -37,7 +37,7 @@ const BottomSheetBackdrop = ({ zIndex }: { zIndex: number }): React.ReactElement
       bottom="spacing.0"
       right="spacing.0"
       zIndex={zIndex}
-      backgroundColor={theme.colors.overlay.background}
+      backgroundColor={theme.colors.surface.overlay.background[800]}
     />
   );
 };

diff --git a/packages/blade/src/components/Modal/ModalBackdrop.tsx b/packages/blade/src/components/Modal/ModalBackdrop.tsx
@@ -16,7 +16,7 @@ const StyledModalBackdrop = styled(FloatingOverlay)(({ theme }) => {
       : castWebType(theme.motion.easing.exit.revealing),
     transitionProperty: 'opacity',
     opacity: isVisible ? 1 : 0,
-    backgroundColor: theme.colors.overlay.background,
+    backgroundColor: theme.colors.surface.overlay.background[800],
   };
 });
 

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
@@ -1362,9 +1362,6 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(231, 11%, 12%, 0.72)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -1424,7 +1421,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
         "popup": {
-          "background": "hsla(218, 11%, 84%, 1)",
+          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
           "muted": {
@@ -2896,9 +2893,6 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(214, 15%, 18%, 0.64)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -2958,7 +2952,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
         "popup": {
-          "background": "hsla(220, 30%, 96%, 1)",
+          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
           "muted": {
@@ -4856,9 +4850,6 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(231, 11%, 12%, 0.72)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -4918,7 +4909,7 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
         "popup": {
-          "background": "hsla(218, 11%, 84%, 1)",
+          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
           "muted": {
@@ -6390,9 +6381,6 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(214, 15%, 18%, 0.64)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -6452,7 +6440,7 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
         "popup": {
-          "background": "hsla(220, 30%, 96%, 1)",
+          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
           "muted": {

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
@@ -1362,9 +1362,6 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(231, 11%, 12%, 0.72)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -1424,7 +1421,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
         "popup": {
-          "background": "hsla(218, 11%, 84%, 1)",
+          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
           "muted": {
@@ -2896,9 +2893,6 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(214, 15%, 18%, 0.64)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -2958,7 +2952,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
           },
         },
         "popup": {
-          "background": "hsla(220, 30%, 96%, 1)",
+          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
           "muted": {
@@ -4752,9 +4746,6 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(231, 11%, 12%, 0.72)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -4814,7 +4805,7 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
         "popup": {
-          "background": "hsla(218, 11%, 84%, 1)",
+          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
           "muted": {
@@ -6286,9 +6277,6 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
       },
-      "overlay": {
-        "background": "hsla(214, 15%, 18%, 0.64)",
-      },
       "static": {
         "white": "hsla(0, 0%, 100%, 1)",
       },
@@ -6348,7 +6336,7 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
           },
         },
         "popup": {
-          "background": "hsla(220, 30%, 96%, 1)",
+          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
           "muted": {

diff --git a/packages/blade/src/tokens/theme/bankingTheme.ts b/packages/blade/src/tokens/theme/bankingTheme.ts
@@ -88,10 +88,7 @@ const colors: ColorsWithModes = {
           800: globalColors.neutral.ashGrayLight.a1100,
         },
       },
-      popup: { background: globalColors.neutral.navyGrayLight[700] },
-    },
-    overlay: {
-      background: globalColors.neutral.ashGrayLight.a1100,
+      popup: { background: globalColors.neutral.navyGrayLight[0] },
     },
     brand: {
       primary: {
@@ -1418,9 +1415,6 @@ const colors: ColorsWithModes = {
       },
       popup: { background: globalColors.neutral.navyGrayDark[700] },
     },
-    overlay: {
-      background: globalColors.neutral.ashGrayDark.a1100,
-    },
     brand: {
       primary: {
         300: globalColors.chromatic.azure.a100,

diff --git a/packages/blade/src/tokens/theme/paymentTheme.ts b/packages/blade/src/tokens/theme/paymentTheme.ts
@@ -88,10 +88,7 @@ const colors: ColorsWithModes = {
           800: globalColors.neutral.ashGrayLight.a1100,
         },
       },
-      popup: { background: globalColors.neutral.blueGrayLight[100] },
-    },
-    overlay: {
-      background: globalColors.neutral.ashGrayLight.a1100,
+      popup: { background: globalColors.neutral.blueGrayLight[0] },
     },
     brand: {
       primary: {
@@ -1416,10 +1413,7 @@ const colors: ColorsWithModes = {
           800: globalColors.neutral.ashGrayDark.a1100,
         },
       },
-      popup: { background: globalColors.neutral.blueGrayDark[100] },
-    },
-    overlay: {
-      background: globalColors.neutral.ashGrayDark.a1100,
+      popup: { background: globalColors.neutral.blueGrayDark[700] },
     },
     brand: {
       primary: {

diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts
@@ -146,7 +146,6 @@ export type Colors = {
     overlay: Record<'background', Record<400 | 800, string>>;
     popup: Record<'background', string>;
   };
-  overlay: Record<'background', string>;
   action: {
     background: Omit<ActionVariants, 'link'>;
     border: Omit<ActionVariants, 'link'>;