fix(Dropdown, Popover): use surface.popup.background token as backg…

…round (#1753)

* fix: change overlay token

* fix: update web snapshots

* feat(tokens): add new tokens

* 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>

* fix: payment theme conflict

* feat: use popup token in popover

* test: snapshots update

* Create new-crabs-dream.md

* fix: remove old changeset

---------

Co-authored-by: rzpcibot <tools+cibot@razorpay.com>

.changeset/new-crabs-dream.md

@@ -0,0 +1,9 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(Dropdown): use popup background color token in DropdownOverlay and Popover
+
+> **Note**
+>
+> For consumers, this changes the color of Dropdown overlay to fainter version in dark mode. It shouldn't break anything and hence the snapshots can be safely updated.

packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx

@@ -8,7 +8,7 @@ const StyledDropdownOverlay = styled(BaseBox)<{
   const { theme, isInBottomSheet } = props;
 
   return {
-    backgroundColor: theme.colors.surface.background.level2.lowContrast,
+    backgroundColor: theme.colors.surface.popup.background,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
     borderColor: theme.colors.surface.border.normal.lowContrast,
     borderStyle: isInBottomSheet ? undefined : 'solid',

packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eoXGsO"><div data-blade-component="base-box" class="BaseBox-bmPWx epXLnJ"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  fXDQuH wNqcQ"><div class="BaseBox-bmPWx cbxZCZ tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx ivjPKl"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 kLPdfa"><p class="StyledBaseText-dVBfTO gVYHck" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bQSUVn"><div data-blade-component="base-box" class="BaseBox-bmPWx iqKjYJ"><div data-blade-component="base-box" class="BaseBox-bmPWx eZRnEP"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 knBhBu"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 jDmKOD"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx iUNcFw"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 havWiW hsiFVr"><div data-blade-component="base-box" class="BaseBox-bmPWx cknGXH"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx HnFxS"><div data-blade-component="base-box" class="BaseBox-bmPWx isYLKC"><div data-blade-component="base-box" class="BaseBox-bmPWx jPnCFC"><div data-blade-component="base-box" class="BaseBox-bmPWx lhloZM"><div data-blade-component="base-box" class="BaseBox-bmPWx kGcQUv"><h6 class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">Recent Searches</h6></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  iclxbZ"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx fDCmJa"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx fDCmJa"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx kGtVIy"></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eoXGsO"><div data-blade-component="base-box" class="BaseBox-bmPWx epXLnJ"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  fXDQuH wNqcQ"><div class="BaseBox-bmPWx cbxZCZ tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx ivjPKl"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 kLPdfa"><p class="StyledBaseText-dVBfTO gVYHck" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bQSUVn"><div data-blade-component="base-box" class="BaseBox-bmPWx iqKjYJ"><div data-blade-component="base-box" class="BaseBox-bmPWx eZRnEP"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 knBhBu"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 jDmKOD"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx iUNcFw"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 havWiW jMbGiG"><div data-blade-component="base-box" class="BaseBox-bmPWx cknGXH"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx HnFxS"><div data-blade-component="base-box" class="BaseBox-bmPWx isYLKC"><div data-blade-component="base-box" class="BaseBox-bmPWx jPnCFC"><div data-blade-component="base-box" class="BaseBox-bmPWx lhloZM"><div data-blade-component="base-box" class="BaseBox-bmPWx kGcQUv"><h6 class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">Recent Searches</h6></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  iclxbZ"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx fDCmJa"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx fDCmJa"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx kGtVIy"></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> should render dropdown and make it visible on click 2`] = `
 <div