Add visual representation for filters (#3045)

Shopify · Oct 19, 2023 · fac0e41 · fac0e41
1 parent 069c198
commit fac0e41
Show file tree

Hide file tree

Showing 5 changed files with 338 additions and 69 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -272,11 +272,42 @@
   padding: 0.5rem 2rem;
 }
 
+.facets-layout-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  text-align: center;
+  padding: 2rem 2.4rem;
+  gap: 3rem 1rem;
+}
+
+.facets-layout-grid.facets__list--vertical {
+  padding: 1rem 0;
+}
+
 .facets__item {
   display: flex;
   align-items: center;
 }
 
+/* Hover/focus state */
+.facets-layout-list .facets__label:hover .facet-checkbox__text,
+.facets-layout-list input:focus ~ .facet-checkbox__text {
+  text-decoration: underline;
+}
+
+.facets-layout-grid > * {
+  align-items: flex-start;
+}
+
+.facets-layout-grid .visual-display-parent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0;
+  height: 100%;
+  font-size: 1.3rem;
+}
+
 .facets__item label,
 .facets__item input[type='checkbox'] {
   cursor: pointer;
@@ -291,6 +322,18 @@
   word-break: break-word;
 }
 
+/* Hover, active, and focus states */
+:is(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
+  color: rgba(var(--color-foreground), 1);
+}
+
+/* Focus states for older browsers */
+@supports not selector(:has(a, b)) {
+  .facets__label:focus-within {
+    color: rgba(var(--color-foreground), 1);
+  }
+}
+
 .facet-checkbox input[type='checkbox'] {
   position: absolute;
   opacity: 1;
@@ -303,6 +346,23 @@
   -webkit-appearance: none;
 }
 
+.facets-layout-grid input[type='checkbox'] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.facets__visual-display-wrapper {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .no-js .facet-checkbox input[type='checkbox'] {
   z-index: 0;
 }
@@ -336,8 +396,10 @@
   }
 }
 
-.facet-checkbox--disabled {
-  color: rgba(var(--color-foreground), 0.4);
+.facet-checkbox--disabled,
+.mobile-facets__label--disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }
 
 .facets__price {
@@ -744,20 +806,20 @@ details.menu-opening .mobile-facets__close svg {
 }
 
 .mobile-facets__highlight {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.mobile-facets__checkbox:checked + .mobile-facets__highlight {
-  visibility: visible;
-  opacity: 1;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   display: block;
   background-color: rgba(var(--color-foreground), 0.04);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.mobile-facets__checkbox:checked + .mobile-facets__highlight {
+  opacity: 1;
+  visibility: visible;
 }
 
 .mobile-facets__summary {
@@ -854,10 +916,6 @@ input.mobile-facets__checkbox {
   display: block;
 }
 
-.mobile-facets__label--disabled {
-  opacity: 0.5;
-}
-
 .mobile-facets__footer {
   border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
   padding: 2rem;

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
@@ -0,0 +1,89 @@
+.visual-display {
+  --visual-display__size: min(2.4rem, 100%);
+  position: relative;
+  width: var(--visual-display__size);
+  max-width: 100%;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  aspect-ratio: 1/1;
+}
+
+.visual-display.empty {
+  border-style: dashed;
+}
+
+.visual-display--presentation-swatch {
+  --visual-display__size: min(2.4rem, 100%);
+
+  border-radius: 100%;
+  overflow: hidden;
+}
+
+.visual-display-parent .visual-display--presentation-swatch {
+  outline-offset: 0.2rem;
+}
+
+/* Hover, active, and focus states */
+:is(
+    .visual-display-parent:hover .visual-display--presentation-swatch,
+    .visual-display-parent.active .visual-display--presentation-swatch,
+    .visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch
+  ) {
+  outline-style: solid;
+}
+
+/* Active state */
+.visual-display-parent.active .visual-display--presentation-swatch {
+  outline-width: 0.1rem;
+  outline-color: rgb(var(--color-foreground), 1);
+}
+
+/* Hover state */
+.visual-display-parent:hover .visual-display--presentation-swatch {
+  outline-width: 0.2rem;
+  outline-color: rgb(var(--color-foreground), 0.4);
+}
+
+/* Focus state */
+.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch {
+  outline-width: 0.2rem;
+  outline-color: rgb(var(--color-foreground), 0.4);
+  box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
+    0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
+}
+
+/* Focus state for older browsers */
+@supports not selector(:has(a, b)) {
+  .visual-display-parent:focus-within .visual-display--presentation-swatch {
+    outline-offset: 0.2rem;
+    outline: 0.2rem solid rgb(var(--color-foreground), 0.4);
+    box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
+      0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
+  }
+}
+
+.visual-display-parent.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Used to display the disabled dash */
+.visual-display-parent.disabled .visual-display::after {
+  display: block;
+  content: '';
+
+  /* 1.414 is not a magic number, it's the square root of 2, or the length of the diagonal */
+  width: calc(var(--visual-display__size) * 1.414);
+  border-bottom: 0.1rem solid rgb(var(--color-background-contrast));
+  transform: rotate(-45deg);
+  transform-origin: left;
+}
+
+.visual-display .visual-display__child {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.visual-display--presentation-swatch .visual-display__image {
+  object-fit: cover;
+}
diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -62,7 +62,21 @@
         {% else %}
           --gradient-background: {{ scheme.settings.background }};
         {% endif %}
+
+        {% liquid
+          assign background_color = scheme.settings.background
+          assign background_color_brightness = background_color | color_brightness
+          if background_color_brightness <= 26
+            assign background_color_contrast = background_color | color_lighten: 50
+          elsif background_color_brightness <= 65
+            assign background_color_contrast = background_color | color_lighten: 5
+          else
+            assign background_color_contrast = background_color | color_darken: 25
+          endif
+        %}
+
         --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
+        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
         --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
         --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
         --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};