fix(instantsearch.css): add cursor pointer to labels, use consistent rgba colors, remove redundant reduced-motion queries

Author: FabienMotte

packages/instantsearch.css/src/components/chat/_chat-sidepanel-layout.scss

@@ -13,10 +13,7 @@
   max-width: calc(100% - var(--ais-chat-margin) * 2);
   z-index: var(--ais-z-index-chat);
   pointer-events: none;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: width var(--ais-transition-duration) var(--ais-transition-timing-function);
-  }
+  transition: width var(--ais-transition-duration) var(--ais-transition-timing-function);
 
   &--maximized {
     width: var(--ais-chat-maximized-width);
@@ -27,11 +24,8 @@
     border-radius: 0;
     opacity: 0;
     transform: translateX(100%);
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition: opacity var(--ais-transition-duration) var(--ais-transition-timing-function),
-        transform var(--ais-transition-duration) var(--ais-transition-timing-function);
-    }
+    transition: opacity var(--ais-transition-duration) var(--ais-transition-timing-function),
+      transform var(--ais-transition-duration) var(--ais-transition-timing-function);
   }
 
   .ais-Chat-container--open {
@@ -45,11 +39,8 @@
     position: absolute;
     bottom: var(--ais-chat-margin);
     right: var(--ais-chat-margin);
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition: right var(--ais-transition-duration) var(--ais-transition-timing-function),
-        transform var(--ais-transition-duration) var(--ais-transition-timing-function);
-    }
+    transition: right var(--ais-transition-duration) var(--ais-transition-timing-function),
+      transform var(--ais-transition-duration) var(--ais-transition-timing-function);
   }
 
   .ais-Chat-container--open ~ .ais-Chat-toggleButtonWrapper {

packages/instantsearch.css/src/widgets/_breadcrumb.scss

@@ -16,18 +16,18 @@
 }
 
 .ais-Breadcrumb-item--selected {
-  color: rgb(var(--ais-text-color-rgb));
+  color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
   font-weight: var(--ais-font-weight-semibold);
 }
 
 .ais-Breadcrumb-separator {
-  color: rgb(var(--ais-muted-color-rgb));
+  color: rgba(var(--ais-muted-color-rgb), var(--ais-muted-color-alpha));
   font-weight: normal;
   margin: 0 calc(var(--ais-spacing) / 3);
 }
 
 .ais-Breadcrumb-link {
-  color: rgb(var(--ais-muted-color-rgb));
+  color: rgba(var(--ais-muted-color-rgb), var(--ais-muted-color-alpha));
   transition: color var(--ais-transition-duration)
     var(--ais-transition-timing-function);
 

packages/instantsearch.css/src/widgets/_current-refinements.scss

@@ -12,7 +12,7 @@
     rgba(var(--ais-border-color-rgb), var(--ais-border-color-alpha));
   border-radius: var(--ais-border-radius-sm);
   padding: calc(var(--ais-spacing) / 3) calc(var(--ais-spacing) / 2);
-  color: rgb(var(--ais-text-color-rgb));
+  color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
 }
 
 .ais-CurrentRefinements-label {
@@ -26,10 +26,10 @@
 }
 
 .ais-CurrentRefinements-delete {
-  color: rgb(var(--ais-muted-color-rgb));
+  color: rgba(var(--ais-muted-color-rgb), var(--ais-muted-color-alpha));
   margin-left: calc(var(--ais-spacing) / 3);
 
   &:hover {
-    color: rgba(var(--ais-text-color-rgb), var(--ais-primary-color-alpha));
+    color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
   }
 }

packages/instantsearch.css/src/widgets/_numeric-menu.scss

@@ -21,6 +21,7 @@
   align-items: center;
   padding: calc(var(--ais-spacing) * 0.375) calc(var(--ais-spacing) / 2);
   border-radius: var(--ais-border-radius-sm);
+  cursor: pointer;
   transition: background-color var(--ais-transition-duration)
       var(--ais-transition-timing-function),
     color var(--ais-transition-duration) var(--ais-transition-timing-function);

packages/instantsearch.css/src/widgets/_refinement-list.scss

@@ -25,6 +25,7 @@
   align-items: center;
   padding: calc(var(--ais-spacing) * 0.375) calc(var(--ais-spacing) / 2);
   border-radius: var(--ais-border-radius-sm);
+  cursor: pointer;
   transition: background-color var(--ais-transition-duration)
       var(--ais-transition-timing-function),
     color var(--ais-transition-duration) var(--ais-transition-timing-function);

packages/instantsearch.css/src/widgets/_toggle-refinement.scss

@@ -5,6 +5,7 @@
 .ais-ToggleRefinement-label {
   display: flex;
   align-items: center;
+  cursor: pointer;
   transition: color var(--ais-transition-duration)
     var(--ais-transition-timing-function);
 }