@aotearoan/neon 22.2.0 → 22.4.0

package/src/sass/components/_image-carousel.scss

@@ -1,12 +1,17 @@
+@use '../includes/layout';
 @use '../includes/outline';
 @use '../includes/responsive';
 @use '../includes/scrollbars';
+@use '../includes/svg';
 
 @mixin image-carousel {
   .neon-image-carousel {
     user-select: none;
+    transition: backdrop-filter ease-in-out var(--neon-animation-speed-fast);
+    width: 100%;
+    height: 100%;
 
-    &:focus {
+    &:focus-visible {
       outline: none;
       @include outline.box-shadow-outline(var(--neon-rgb-high-contrast));
     }
@@ -14,10 +19,11 @@
     .neon-image-carousel__container {
       flex-direction: row;
       align-items: center;
+      flex: 1 1 auto;
       gap: var(--neon-space-16);
-      height: calc(100% - 60rem);
+      min-height: 0;
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
     }
@@ -25,20 +31,24 @@
     .neon-image-carousel__items {
       display: flex;
       flex-direction: row;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       overscroll-behavior-x: contain;
 
       @include scrollbars.hide-scrollbars();
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
     }
 
     .neon-image-carousel__item {
       display: flex;
+      flex-direction: column;
+      gap: var(--neon-space-8);
+      justify-content: center;
       min-width: 100%;
       padding: var(--neon-space-2);
       scroll-snap-align: start;
@@ -46,21 +56,29 @@
       opacity: 0;
       transition: opacity ease-in-out var(--neon-animation-speed-fast);
 
-      &-wrapper {
-        width: 100%;
-        height: 100%;
+      &-title {
+        text-align: center;
+        font-weight: var(--neon-font-weight-normal);
+        font-size: var(--neon-font-size-m);
+        font-style: italic;
+        color: var(--neon-color-image-carousel-expanded-button);
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0 var(--neon-space-16);
+        text-shadow: var(--neon-text-shadow-image-carousel-expanded);
       }
     }
 
     .neon-image-carousel__image {
-      margin: auto;
-      min-width: 100%;
-      max-height: 100%;
       object-fit: contain;
+      cursor: pointer;
+      max-width: 100%;
+      max-height: 100%;
+      min-height: 0;
     }
 
     .neon-image-carousel__nav {
-      padding-top: var(--neon-space-24);
+      padding-top: var(--neon-space-12);
 
       flex-direction: row;
       flex-wrap: wrap;
@@ -90,11 +108,11 @@
         margin-left: var(--neon-image-carousel-swipe-distance);
       }
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
 
-      &-link:focus {
+      &-link:focus-visible {
         outline: none;
 
         .neon-image-carousel__nav-item-indicator {
@@ -119,6 +137,83 @@
         display: none;
       }
     }
+
+    &.neon-image-carousel--expanded {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      @include layout.height(100);
+      max-width: 100%;
+      max-height: 100%;
+      background-color: var(--neon-background-color-overlay);
+      z-index: var(--neon-z-index-top);
+      -webkit-backdrop-filter: blur(var(--neon-blur-radius-image-carousel));
+      backdrop-filter: blur(var(--neon-blur-radius-image-carousel));
+      gap: var(--neon-space-8);
+
+      .neon-image-carousel__container {
+        padding-top: var(--neon-gutter);
+        max-height: 100%;
+        min-height: 0;
+        height: 100%;
+
+        .neon-button {
+          &:not(:disabled) {
+            @include svg.color-with-svg(var(--neon-color-image-carousel-expanded-button));
+
+            &:hover,
+            &:focus-visible {
+              background-color: var(--neon-background-color-image-carousel-expanded-button);
+            }
+          }
+
+          &:disabled {
+            @include svg.color-with-svg(var(--neon-color-image-carousel-expanded-button-disabled));
+          }
+        }
+      }
+
+      .neon-image-carousel__image {
+        cursor: default;
+      }
+
+      .neon-image-carousel__close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0;
+      }
+
+      .neon-image-carousel__label {
+        font-size: var(--neon-font-size-m);
+        line-height: var(--neon-line-height-ratio);
+        color: var(--neon-color-image-carousel-expanded-label);
+        text-shadow: var(--neon-text-shadow-image-carousel-expanded);
+      }
+
+      .neon-image-carousel__nav-container {
+        padding-bottom: var(--neon-gutter);
+
+      }
+
+      .neon-image-carousel__nav-item {
+        width: 24rem;
+        height: 24rem;
+
+        &-indicator {
+          width: 12rem;
+          height: 12rem;
+          border-color: var(--neon-color-image-carousel-expanded-button);
+        }
+
+        &--active {
+          .neon-image-carousel__nav-item-indicator {
+            background-color: var(--neon-color-image-carousel-expanded-button);
+          }
+        }
+      }
+    }
   }
 
   .neon-image-carousel--initialised {

package/src/sass/components/_stepper.scss

@@ -1,4 +1,5 @@
 @use '../includes/palettes';
+@use '../includes/outline';
 
 @mixin stepper {
   .neon-stepper {
@@ -60,12 +61,11 @@
           height: var(--neon-space-10);
 
           svg {
-            path,
-            circle {
+            .neon-svg--fill {
               fill: var(--neon-color-stepper-indicator);
             }
 
-            circle {
+            .neon-svg--stroke {
               stroke: var(--neon-color-stepper-indicator);
             }
           }
@@ -113,6 +113,11 @@
         .neon-stepper__step--has-value {
           .neon-stepper__step-indicator {
             background: var(--neon-color-#{$color});
+
+            &:focus {
+              outline: none;
+              @include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
+            }
           }
         }
 

package/src/sass/components/_swiper.scss

@@ -6,18 +6,14 @@
     flex-direction: row;
     max-width: 100%;
     width: 100%;
-    overflow-x: hidden;
 
     .neon-swiper__container {
       position: relative;
       top: 0;
       left: 0;
-      overflow-x: auto;
       overscroll-behavior: contain;
       width: 100%;
       height: 100%;
-
-      @include scrollbars.hide-scrollbars();
     }
 
     .neon-swiper__fade-out {
@@ -29,40 +25,108 @@
       z-index: var(--neon-z-index-above);
       width: 100%;
       height: 100%;
+    }
+
+    &--horizontal {
+      overflow-x: hidden;
+
+      .neon-swiper__container {
+        overflow-x: auto;
+        flex-direction: row;
+        @include scrollbars.hide-scrollbars();
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          left: 0;
+          background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fast);
+        }
 
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fast);
+        &:after {
+          content: '';
+          position: absolute;
+          right: 0;
+          background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
       }
 
-      &:after {
-        content: '';
-        position: absolute;
-        right: 0;
-        background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fastest);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            width: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            width: var(--neon-space-24);
+          }
+        }
       }
     }
 
-    &--overflowing.neon-swiper--fade {
-      &:not(.neon-swiper--start) {
-        .neon-swiper__fade-out:before {
-          width: var(--neon-space-24);
+    &--vertical {
+      overflow-y: hidden;
+
+      .neon-swiper__container {
+        overflow-y: auto;
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          background: linear-gradient(to top, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          background: linear-gradient(to bottom, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
         }
       }
 
-      &:not(.neon-swiper--end) {
-        .neon-swiper__fade-out:after {
-          width: var(--neon-space-24);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            height: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            height: var(--neon-space-24);
+          }
         }
       }
     }
+
+    &.neon-swiper--hide-fade-start {
+      .neon-swiper__fade-out:before {
+        display: none;
+      }
+    }
+
+    &.neon-swiper--hide-fade-end {
+      .neon-swiper__fade-out:after {
+        display: none;
+      }
+    }
   }
 }

package/src/sass/components/_toggle.scss

@@ -19,7 +19,7 @@
       justify-content: center;
       white-space: nowrap;
 
-      &:focus {
+      &:focus-visible {
         outline: none;
       }
 
@@ -75,6 +75,7 @@
       }
     }
 
+    &--card,
     &--radio-buttons {
       align-items: flex-start;
 
@@ -89,22 +90,22 @@
 
           .neon-toggle__label:not(.neon-toggle__label--disabled) {
             .neon-toggle__radio-button {
-              border: var(--neon-border-radio-button);
+              border: var(--neon-border-width) var(--neon-border-style) var(--neon-color-#{$color});
               background: var(--neon-background-radio-button);
             }
 
             color: var(--neon-color-radio-button-label);
 
             &:hover,
-            &:focus {
+            &:focus-visible {
               &:not(.neon-toggle__label--checked) {
                 .neon-toggle__radio-button {
-                  background: var(--neon-color-radio-button-bg-active);
+                  background: rgba(var(--neon-rgb-#{$color}), 0.125);
                 }
               }
             }
 
-            &:focus {
+            &:focus-visible {
               border-bottom-color: var(--neon-color-#{$color});
             }
 
@@ -124,6 +125,16 @@
         }
       }
 
+      &.neon-toggle--card {
+        .neon-toggle__label {
+          &.neon-toggle__label--checked,
+          &.neon-toggle__label:hover,
+          &.neon-toggle__label:focus-visible {
+            border-color: var(--neon-color-#{$color});
+          }
+        }
+      }
+
       &.neon-toggle--disabled .neon-toggle__label,
       .neon-toggle__label--disabled {
         color: var(--neon-color-disabled-text);
@@ -140,12 +151,24 @@
       }
     }
 
+    &--card {
+      gap: var(--neon-space-16);
+
+      .neon-toggle__label {
+        padding: var(--neon-space-16);
+        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+        width: 100%;
+        border-radius: var(--neon-border-radius-input);
+      }
+    }
+
     &--horizontal {
       flex-direction: row;
       gap: var(--neon-space-24);
     }
 
-    &--disabled {
+    &--disabled,
+    &--disabled .neon-toggle__label {
       cursor: not-allowed;
     }
   }

package/src/sass/variables.scss

@@ -1,3 +1,4 @@
+@use './includes/responsive';
 @import './palette';
 @import './color-variables';
 
@@ -18,6 +19,18 @@
   --neon-gutter-tablet: 24rem;
   --neon-gutter-mobile: 16rem;
 
+  @include responsive.responsive(larger-than-tablet) {
+    --neon-gutter: var(--neon-gutter-desktop);
+  }
+
+  @include responsive.responsive(tablet) {
+    --neon-gutter: var(--neon-gutter-tablet);
+  }
+
+  @include responsive.responsive(mobile-large) {
+    --neon-gutter: var(--neon-gutter-mobile);
+  }
+
   /* spacings */
   --neon-space-1: calc(0.25 * var(--neon-base-space));
   --neon-space-2: calc(0.5 * var(--neon-base-space));
@@ -349,6 +362,9 @@
   /* card list */
   --neon-border-radius-card-list: calc(1.5 * var(--neon-base-space));
 
+  /* image carousel */
+  --neon-blur-radius-image-carousel: 5px;
+
   /**********************
   * DARK THEME VARIABLES
   **********************/
@@ -533,7 +549,6 @@
 
     /* radio buttons */
     --neon-background-radio-button: none;
-    --neon-border-radio-button: var(--neon-border-width) var(--neon-border-style) var(--neon-color-neutral-d2);
     --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.125);
     --neon-color-radio-button-label: var(--neon-color-label);
 
@@ -653,6 +668,13 @@
     --neon-background-color-swiper: var(--neon-background-color-card);
   }
 
+  /* image carousel */
+  --neon-color-image-carousel-expanded-button: var(--neon-color-text-primary);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d4);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d5);
+  --neon-color-image-carousel-expanded-label: var(--neon-color-text-tertiary);
+  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-inverse);
+
   /*********************
   * LIGHT THEME VARIABLES
   *********************/
@@ -840,7 +862,6 @@
 
     /* radio buttons */
     --neon-background-radio-button: none;
-    --neon-border-radio-button: var(--neon-border-width) var(--neon-border-style) var(--neon-color-neutral-l3);
     --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.25);
     --neon-color-radio-button-label: var(--neon-color-label);
 
@@ -959,5 +980,12 @@
 
     /* swiper */
     --neon-background-color-swiper: var(--neon-background-color-card);
+
+    /* image carousel */
+    --neon-color-image-carousel-expanded-button: var(--neon-color-inverse);
+    --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d2);
+    --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d3);
+    --neon-color-image-carousel-expanded-label: var(--neon-color-text-tertiary-dark);
+    --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-text-primary);
   }
 }