fix: carousel nav button tokens (#1741)

razorpay · Oct 30, 2023 · c6d1ad9 · c6d1ad9
1 parent fc7c840
commit c6d1ad9
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 119 deletions.
diff --git a/.changeset/proud-readers-dream.md b/.changeset/proud-readers-dream.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: update carousel nav button tokens
diff --git a/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts b/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts
@@ -24,9 +24,9 @@ const getIndicatorButtonStyles = ({
     cursor: 'pointer',
     padding: makeSpace(theme.spacing[0]),
     borderRadius: theme.border.radius.max,
-    // TODO: Temporary hard coded color,
-    // Replace this with new theme.overlay.background token once it's finalized
-    backgroundColor: isActive ? backgroundColor[variant] : 'hsla(214, 18%, 69%, 0.64)',
+    backgroundColor: isActive
+      ? backgroundColor[variant]
+      : theme.colors.surface.overlay.background[400],
     width: isActive ? makeSize(size[18]) : makeSize(size[6]),
     height: makeSize(size[6]),
 

diff --git a/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts b/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts
@@ -12,35 +12,40 @@ const getNavigationButtonStyles = (props: {
 
   const iconColor = {
     filled: {
-      default: theme.colors.action.icon.tertiary.default,
-      hover: theme.colors.action.icon.tertiary.hover,
-      focus: theme.colors.action.icon.tertiary.focus,
-      active: theme.colors.action.icon.tertiary.active,
+      default: theme.colors.white.action.icon.primary.default,
+      hover: theme.colors.white.action.icon.primary.hover,
+      focus: theme.colors.white.action.icon.primary.focus,
+      active: theme.colors.white.action.icon.primary.active,
     },
     stroked: {
       default: theme.colors.surface.action.icon.active.highContrast,
-      hover: theme.colors.surface.action.icon.active.highContrast,
-      focus: theme.colors.surface.action.icon.active.highContrast,
+      hover: theme.colors.surface.action.icon.hover.highContrast,
+      focus: theme.colors.surface.action.icon.focus.highContrast,
       active: theme.colors.surface.action.icon.active.highContrast,
     },
   };
 
   const backgroundColor = {
     filled: {
+      default: theme.colors.white.action.background.primary.default,
+      hover: theme.colors.white.action.background.primary.hover,
+      focus: theme.colors.white.action.background.primary.focus,
+      active: theme.colors.white.action.background.primary.active,
+    },
+    stroked: {
       default: theme.colors.action.background.tertiary.default,
       hover: theme.colors.action.background.tertiary.hover,
       focus: theme.colors.action.background.tertiary.focus,
       active: theme.colors.action.background.tertiary.active,
     },
-    stroked: {
-      default: 'transparent',
-      hover: theme.colors.brand.gray.a50.highContrast,
-      focus: theme.colors.brand.gray.a100.highContrast,
-      active: theme.colors.brand.gray.a100.highContrast,
-    },
   };
 
-  const borderColorToken = theme.colors.action.border.tertiary;
+  const borderColors = {
+    filled: theme.colors.surface.border.normal.lowContrast,
+    stroked: theme.colors.brand.gray[400].lowContrast,
+  } as const;
+
+  const borderColor = borderColors[variant];
   const borderWidth = theme.border.width.thin;
   const borderRadius = theme.border.radius.max;
   // on react-native isPressed will be passed
@@ -53,7 +58,7 @@ const getNavigationButtonStyles = (props: {
     borderStyle: 'solid',
     borderWidth,
     borderRadius,
-    borderColor: borderColorToken[state],
+    borderColor,
     backgroundColor: backgroundColor[variant][state],
     color: iconColor[variant][state],
 
@@ -73,7 +78,6 @@ const getNavigationButtonStyles = (props: {
 
           '&:hover': {
             color: iconColor[variant].hover,
-            borderColor: borderColorToken.hover,
             backgroundColor: backgroundColor[variant].hover,
           },
 
@@ -82,13 +86,11 @@ const getNavigationButtonStyles = (props: {
             outline: 'none',
             boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
             color: iconColor[variant].focus,
-            borderColor: borderColorToken.focus,
             backgroundColor: backgroundColor[variant].focus,
           },
 
           '&:active': {
             color: iconColor[variant].active,
-            borderColor: borderColorToken.active,
             backgroundColor: backgroundColor[variant].active,
           },
         }),

diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap
@@ -267,12 +267,12 @@ exports[`Carousel Snapshots should render 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "center",
-                "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                "borderColor": "hsla(216, 44%, 23%, 0)",
+                "backgroundColor": "hsla(0, 0%, 100%, 1)",
+                "borderColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(216, 33%, 29%, 1)",
+                "color": "hsla(218, 89%, 51%, 1)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -553,12 +553,12 @@ exports[`Carousel Snapshots should render 1`] = `
               {
                 "alignItems": "center",
                 "alignSelf": "center",
-                "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                "borderColor": "hsla(216, 44%, 23%, 0)",
+                "backgroundColor": "hsla(0, 0%, 100%, 1)",
+                "borderColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(216, 33%, 29%, 1)",
+                "color": "hsla(218, 89%, 51%, 1)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -961,12 +961,12 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               {
                 "alignItems": "center",
                 "alignSelf": "center",
-                "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                "borderColor": "hsla(216, 44%, 23%, 0)",
+                "backgroundColor": "hsla(0, 0%, 100%, 1)",
+                "borderColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(216, 33%, 29%, 1)",
+                "color": "hsla(218, 89%, 51%, 1)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -1320,12 +1320,12 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               {
                 "alignItems": "center",
                 "alignSelf": "center",
-                "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                "borderColor": "hsla(216, 44%, 23%, 0)",
+                "backgroundColor": "hsla(0, 0%, 100%, 1)",
+                "borderColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(216, 33%, 29%, 1)",
+                "color": "hsla(218, 89%, 51%, 1)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",

diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx byMjrV"><div data-blade-component="base-box" class="BaseBox-bmPWx emdMby"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 BFQxQ iovsgp"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx rJiOW"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 hQBNKU"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx Hevga"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 bUbBjs"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 Ovlue"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 Ovlue"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 hQBNKU"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
+exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx byMjrV"><div data-blade-component="base-box" class="BaseBox-bmPWx emdMby"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 BFQxQ iovsgp"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  jFKRQV"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx rJiOW"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 jJCErf"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx Hevga"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 bUbBjs"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 Ovlue"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 Ovlue"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 jJCErf"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
 
 exports[`<Carousel /> should render a Carousel ssr 2`] = `
 <div
@@ -109,7 +109,7 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
     >
       <button
         aria-label="Previous Slide"
-        class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 hQBNKU"
+        class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 jJCErf"
         data-blade-component="NavigationButton"
       >
         <svg
@@ -163,7 +163,7 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
       </div>
       <button
         aria-label="Next Slide"
-        class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 hQBNKU"
+        class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 jJCErf"
         data-blade-component="NavigationButton"
       >
         <svg