@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss

@@ -1,196 +1,198 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-favorites-collection-tile {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-
-  &__content {
+@layer seldon.patterns {
+  .#{$px}-favorites-collection-tile {
     display: flex;
     flex-direction: column;
-    height: 100%;
-  }
-
-  &__header {
-    align-items: flex-end;
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: $spacing-sm;
-  }
+    text-align: left;
 
-  &__info {
-    flex: 1;
-    min-height: calc($spacing-sm + $spacing-xsm + $font-size-label-medium + $font-size-body-medium);
-    overflow: hidden;
-  }
-
-  &__count {
-    color: $dark-gray;
-    display: block;
-    margin-bottom: $spacing-xsm;
-  }
-
-  h3.#{$px}-text {
-    margin-bottom: 0;
-  }
-
-  &__title {
-    -webkit-box-orient: vertical;
-    display: block;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    overflow: hidden;
-
-    &.#{$px}-text {
-      font-variation-settings: 'wght' 600;
-      margin-bottom: 0;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
     }
-  }
 
-  &__actions {
-    align-items: center;
-    align-self: normal;
-    background-position: center;
-    border-radius: $radius-3xl;
-    display: flex;
-    height: 2.5rem;
-    justify-content: center;
-    position: relative;
-    top: $spacing-micro;
-    transition: background 0.8s;
-    width: 2.5rem;
-
-    &:hover {
-      background: $light-gray radial-gradient(circle, transparent 1%, $light-gray 1%) center/15000%;
-      background-color: $light-gray;
-      cursor: pointer;
+    &__header {
+      align-items: flex-end;
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: $spacing-sm;
     }
 
-    &:active {
-      background-color: $medium-gray;
-      background-size: 100%;
-      transition: background 0s;
+    &__info {
+      flex: 1;
+      min-height: calc($spacing-sm + $spacing-xsm + $font-size-label-medium + $font-size-body-medium);
+      overflow: hidden;
     }
-  }
 
-  &__popover-content {
-    outline: none;
-  }
+    &__count {
+      color: $dark-gray;
+      display: block;
+      margin-bottom: $spacing-xsm;
+    }
 
-  &__dropdown {
-    box-shadow: 0 4px 6px $medium-gray;
+    h3.#{$px}-text {
+      margin-bottom: 0;
+    }
 
-    &--item {
-      all: unset;
-      background-color: $white-100;
-      cursor: pointer;
+    &__title {
+      -webkit-box-orient: vertical;
       display: block;
-      padding: 0.75rem 1rem;
-      width: 90px;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      overflow: hidden;
 
-      &:hover,
-      &:focus-visible {
-        background-color: $light-gray;
+      &.#{$px}-text {
+        font-variation-settings: 'wght' 600;
       }
     }
-  }
 
-  &__media-link {
-    &:hover {
-      color: inherit;
-      text-decoration: none;
-    }
-    &.#{$px}-link {
-      text-transform: none;
-    }
+    &__actions {
+      align-items: center;
+      align-self: normal;
+      background-position: center;
+      border-radius: $radius-3xl;
+      display: flex;
+      height: 2.5rem;
+      justify-content: center;
+      position: relative;
+      top: $spacing-micro;
+      transition: background 0.8s;
+      width: 2.5rem;
+
+      &:hover {
+        background: $light-gray radial-gradient(circle, transparent 1%, $light-gray 1%) center/15000%;
+        background-color: $light-gray;
+        cursor: pointer;
+      }
 
-    &:focus-visible {
-      @include focus-ring;
+      &:active {
+        background-color: $medium-gray;
+        background-size: 100%;
+        transition: background 0s;
+      }
     }
-  }
 
-  &__media-container {
-    background-color: $soft-gray;
-    position: relative;
-    width: 100%;
-  }
+    &__popover-content {
+      outline: none;
+    }
 
-  &__media {
-    background-position: center;
-    width: 100%;
-  }
+    &__dropdown {
+      box-shadow: 0 4px 6px $medium-gray;
+
+      &--item {
+        all: unset;
+        background-color: $white-100;
+        cursor: pointer;
+        display: block;
+        padding: 0.75rem 1rem;
+        width: 90px;
+
+        &:hover,
+        &:focus-visible {
+          background-color: $light-gray;
+        }
+      }
+    }
 
-  &__empty {
-    aspect-ratio: 1 / 1;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    cursor: pointer;
-    display: block;
-    position: relative;
+    &__media-link {
+      &:hover {
+        color: inherit;
+        text-decoration: none;
+      }
+      &.#{$px}-link {
+        text-transform: none;
+      }
 
-    &:focus-visible {
-      @include focus-ring;
+      &:focus-visible {
+        @include focus-ring;
+      }
     }
 
-    &--bg {
+    &__media-container {
       background-color: $soft-gray;
+      position: relative;
+      width: 100%;
     }
 
-    &--create-list {
-      background-color: $white-100;
-      border: 1px solid $black-25;
-      border-radius: 0;
+    &__media {
+      background-position: center;
+      width: 100%;
     }
 
-    &__content {
-      bottom: 20px;
-      left: 20px;
-      position: absolute;
-      width: calc(100% - 40px);
-    }
-  }
+    &__empty {
+      aspect-ratio: 1 / 1;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      cursor: pointer;
+      display: block;
+      position: relative;
 
-  &__icon {
-    justify-content: flex-start;
-    margin-bottom: $spacing-xsm;
-    pointer-events: none;
+      &:focus-visible {
+        @include focus-ring;
+      }
+
+      &--bg {
+        background-color: $soft-gray;
+      }
+
+      &--create-list {
+        background-color: $white-100;
+        border: 1px solid $black-25;
+        border-radius: 0;
+      }
 
-    &-rotate {
-      transform: rotate(90deg);
+      &__content {
+        bottom: 20px;
+        left: 20px;
+        position: absolute;
+        width: calc(100% - 40px);
+      }
     }
 
-    &-circle {
-      border: 2px solid $dark-gray;
-      border-radius: $radius-3xl;
-      height: 1.5rem;
+    &__icon {
       justify-content: flex-start;
-      width: 1.5rem;
+      margin-bottom: $spacing-xsm;
+      pointer-events: none;
+
+      &-rotate {
+        transform: rotate(90deg);
+      }
+
+      &-circle {
+        border: 2px solid $dark-gray;
+        border-radius: $radius-3xl;
+        height: 1.5rem;
+        justify-content: flex-start;
+        width: 1.5rem;
+      }
     }
-  }
 
-  &__icon-button {
-    pointer-events: none;
-  }
+    &__icon-button {
+      pointer-events: none;
+    }
 
-  // will update font size with variable rem sizing after design takes a pass at it some point in the future
-  &__text {
-    text-transform: none;
-  }
+    // will update font size with variable rem sizing after design takes a pass at it some point in the future
+    &__text {
+      text-transform: none;
+    }
 
-  [data-radix-popper-content-wrapper] > * {
-    all: unset;
-  }
+    [data-radix-popper-content-wrapper] > * {
+      all: unset;
+    }
 
-  &__create-variant {
-    all: unset;
-    background: none;
-    height: 100%;
-    width: 100%;
+    &__create-variant {
+      all: unset;
+      background: none;
+      height: 100%;
+      width: 100%;
 
-    &:focus-visible {
-      @include focus-ring;
+      &:focus-visible {
+        @include focus-ring;
+      }
     }
   }
 }

package/dist/scss/patterns/FilterMenu/_filterMenu.scss

@@ -1,16 +1,19 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-filter-menu {
-  align-self: stretch;
-  overflow-y: scroll;
-  padding-bottom: $spacing-sm;
+@layer seldon.patterns {
+  .#{$px}-filter-menu {
+    align-self: stretch;
+    overflow-y: scroll;
+    padding-bottom: $spacing-sm;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  .#{$px}-filter:not([hidden]) + .#{$px}-filter {
-    border-top: 1px solid $light-gray;
-    margin-top: $spacing-sm;
-    padding-top: $spacing-md;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .#{$px}-filter:not([hidden]) + .#{$px}-filter {
+      border-top: 1px solid $light-gray;
+      margin-top: $spacing-sm;
+      padding-top: $spacing-md;
+    }
   }
 }

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -1,50 +1,53 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-filter-button {
-  border: 2px solid $bg-border;
-  border-radius: $radius-3xl;
-  gap: 4px;
-  height: inherit;
-  padding: $spacing-xsm $spacing-sm;
-
-  &:hover {
-    border: 2px solid $black-100;
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    @include focus-ring($border-radius: $radius-3xl);
-  }
+@layer seldon.patterns {
+  .#{$px}-filter-button {
+    border: 2px solid $bg-border;
+    border-radius: $radius-3xl;
+    gap: 4px;
+    height: inherit;
+    padding: $spacing-xsm $spacing-sm;
 
-  &--selected {
-    border: 2px solid $black-100;
+    &:hover {
+      border: 2px solid $black-100;
+      box-shadow: none;
+    }
 
     &:focus-visible {
       @include focus-ring($border-radius: $radius-3xl);
     }
-  }
 
-  &__label {
-    font-variation-settings: 'wght' 600;
-  }
+    &--selected {
+      border: 2px solid $black-100;
 
-  &--count.#{$px}-filter-button--count.#{$px}-text {
-    background: $black-100;
-    border: 2px solid $white-100;
-    border-radius: $radius-3xl;
-    color: $white-100;
-    display: inline-block;
-    font-variation-settings: 'wght' 600;
-    height: 1.5rem;
-    line-height: 1.2rem;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: -15px;
-    width: 1.5rem;
-
-    @include media($breakpoint-md) {
-      line-height: 1.3rem;
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
+    }
+
+    &__label {
+      font-variation-settings: 'wght' 600;
+    }
+
+    &--count.#{$px}-filter-button--count.#{$px}-text {
+      background: $black-100;
+      border: 2px solid $white-100;
+      border-radius: $radius-3xl;
+      color: $white-100;
+      display: inline-block;
+      font-variation-settings: 'wght' 600;
+      height: 1.5rem;
+      line-height: 1.2rem;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: -15px;
+      width: 1.5rem;
+
+      @include media($breakpoint-md) {
+        line-height: 1.3rem;
+      }
     }
   }
 }