@phillips/seldon 1.240.1 → 1.242.0

package/dist/scss/components/Button/_button.scss

@@ -1,5 +1,8 @@
+@use 'sass:color';
 @use '../../allPartials' as *;
 
+$destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
+
 .#{$px}-button {
   // we need this because we can't be sure that the Text component is being used as a child of the Button component
   @include text($labelMedium);
@@ -18,8 +21,10 @@
   padding: 0 $padding-sm;
   position: relative;
   transition:
-    color 0.25s,
-    background-color 0.25s;
+    color 0.25s ease-out,
+    background-color 0.25s ease-out,
+    border-color 0.25s ease-out,
+    box-shadow 0.25s ease-out;
 
   &--small {
     height: 32px; // Explicitly defined by design
@@ -50,20 +55,22 @@
 
     path {
       fill: $pure-white;
-      transition: 0.25s;
+      transition: fill 0.25s ease-out;
     }
   }
 
   &--primary,
   &--secondary,
-  &--tertiary {
+  &--tertiary,
+  &--destructive {
     &.#{$px}-link {
       text-decoration: none;
     }
   }
 
   &--primary.#{$px}-link,
-  &--secondary.#{$px}-link {
+  &--secondary.#{$px}-link,
+  &--destructive.#{$px}-link {
     font-variation-settings: 'wght' 600;
 
     .#{$px}-text {
@@ -91,8 +98,7 @@
   }
 
   &:focus-visible {
-    outline: 0.5px solid $pure-white;
-    outline-offset: -4.5px;
+    @include focus-ring($border-radius: $radius-3xl);
 
     svg {
       fill: $pure-white;
@@ -103,13 +109,19 @@
     background-color: transparent;
     border: 0;
     color: $pure-black;
+    font-variation-settings: 'wght' 400;
     height: auto;
     padding: 0;
     text-decoration: underline;
+
     .#{$px}-text {
       font-variation-settings: 'wght' 400;
     }
 
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
+
     &:hover {
       background-color: transparent;
       color: $pure-black;
@@ -142,8 +154,9 @@
     }
 
     &:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+
       background-color: $pure-white;
-      outline-color: $soft-black;
     }
 
     svg {
@@ -168,6 +181,51 @@
     }
   }
 
+  &--destructive {
+    background-color: $white-100;
+    border: 2px solid $warning-default;
+    color: $warning-default;
+
+    &:focus-visible {
+      background-color: $white-100;
+      border-radius: $radius-3xl;
+      outline: 2px solid $warning-default;
+      outline-offset: 4px;
+    }
+
+    // Spinner inside destructive button uses the same red
+    .#{$px}-loader {
+      border-color: $warning-default;
+      border-bottom-color: transparent;
+    }
+
+    svg {
+      fill: $warning-default;
+
+      path {
+        fill: $warning-default;
+      }
+    }
+
+    @include hoverOrActive {
+      background-color: $white-100;
+      border-color: $destructive-hover-disabled;
+      color: $destructive-hover-disabled;
+
+      svg {
+        fill: $destructive-hover-disabled;
+
+        path {
+          fill: $destructive-hover-disabled;
+        }
+      }
+
+      &:disabled {
+        box-shadow: none;
+      }
+    }
+  }
+
   &--tertiary {
     background-color: transparent;
     color: $pure-black;
@@ -194,10 +252,9 @@
     }
 
     &:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+
       background-color: $pure-white;
-      outline-color: $soft-black;
-      outline-offset: 4.5px;
-      padding: 0 4px;
     }
   }
 
@@ -227,6 +284,20 @@
     border-color: transparent;
   }
 
+  &--destructive:disabled {
+    background-color: $white-100;
+    border-color: $destructive-hover-disabled;
+    color: $destructive-hover-disabled;
+
+    svg {
+      fill: $destructive-hover-disabled;
+
+      path {
+        fill: $destructive-hover-disabled;
+      }
+    }
+  }
+
   &--link:disabled {
     border: 0;
   }

package/dist/scss/components/Carousel/_carousel.scss

@@ -34,10 +34,20 @@
       display: none;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       opacity: 1;
     }
 
+    &:focus-visible {
+      outline: none;
+
+      .#{$px}-carousel-arrows-next-btn__icon,
+      .#{$px}-carousel-arrows-prev-btn__icon {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
+    }
+
     &__icon {
       background-color: $pure-white;
       border-radius: $radius-3xl;
@@ -161,8 +171,7 @@
     width: 10px;
 
     &:focus-visible {
-      border-radius: $radius-3xl;
-      outline: 0.5px solid $black-100;
+      @include focus-ring($border-radius: $radius-3xl, $outline-offset: 0, $outline-width: 0.5px);
 
       &-dot {
         &:hover {

package/dist/scss/components/ComboBox/_combobox.scss

@@ -43,7 +43,7 @@
 
     &:focus-visible,
     &:focus {
-      outline: 1px solid $primary-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     &--invalid {
@@ -51,7 +51,7 @@
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus {
-        outline-color: $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
 
       &:hover {

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -26,6 +26,10 @@
     color: $pure-white;
   }
 
+  .flatpickr-day:focus {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   .flatpickr-day.today {
     border-color: transparent;
     font-variation-settings: 'wght' 700;

package/dist/scss/components/DescriptiveRadioButton/_descriptiveRadioButton.scss

@@ -10,10 +10,13 @@
     display: flex;
     padding: $spacing-sm;
 
-    &--selected,
-    &:has(input:focus-visible) {
+    &--selected {
       border: 1.5px solid $pure-black;
     }
+
+    &:has(input:focus-visible) {
+      @include focus-ring($border-radius: $radius-xs);
+    }
   }
 
   &__input {
@@ -27,6 +30,11 @@
     @media (min-width: $breakpoint-md) {
       margin-top: $spacing-micro;
     }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__input:checked {

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -37,8 +37,7 @@
     }
 
     &:focus-within:not(:disabled) {
-      box-shadow: 0 0 0 1px $light-gray;
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
   }
 

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -58,6 +58,11 @@
         font-size: $body-size2;
       }
     }
+
+    // Match button focus state when the link (wrapper) is focused
+    > a:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+    }
   }
 }
 

package/dist/scss/components/IconButton/_iconButton.scss

@@ -19,13 +19,10 @@
   }
 
   &:focus-visible {
-    &:focus-visible {
-      outline: 0.5px solid $soft-black;
-      outline-offset: 0;
+    @include focus-ring($border-radius: $radius-3xl);
 
-      svg {
-        fill: $pure-white;
-      }
+    svg {
+      fill: $pure-white;
     }
   }
 
@@ -78,7 +75,7 @@
   &--secondary,
   &--tertiary.#{$px}-icon-button {
     &:focus-visible {
-      border-radius: $radius-3xl;
+      @include focus-ring($border-radius: $radius-3xl);
     }
 
     & > svg {
@@ -94,7 +91,7 @@
 
   &--tertiary {
     &:focus-visible {
-      border-radius: $radius-3xl;
+      @include focus-ring($border-radius: $radius-3xl);
     }
 
     @include hoverOrActive {

package/dist/scss/components/Input/_input.scss

@@ -40,7 +40,7 @@ $lg: #{$px}-input--lg;
 
     &:focus-visible,
     &:focus-within {
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     .#{$px}-input__wrapper__input,
@@ -81,7 +81,7 @@ $lg: #{$px}-input--lg;
     }
 
     &:focus-visible {
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     &:hover {
@@ -166,7 +166,7 @@ $lg: #{$px}-input--lg;
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus-within {
-        outline: 1px solid $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
     }
 
@@ -217,6 +217,22 @@ $lg: #{$px}-input--lg;
   }
 }
 
+.#{$px}-radio-input .#{$px}-input__input {
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::before {
+      border: 2px solid $focus-default;
+      border-radius: $radius-3xl;
+      content: '';
+      inset: -6px;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+}
+
 .#{$px}-input--inline.#{$px}-radio-input,
 .#{$px}-input--inline.#{$px}-checkbox-input,
 .#{$px}-input--inline.#{$px}-toggle-input {

package/dist/scss/components/Link/_link.scss

@@ -4,6 +4,10 @@
   color: $pure-black;
   text-decoration: none;
 
+  &:focus-visible {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   &--email.#{$px}-link--email,
   &--link.#{$px}-link--link,
   &--linkSmall,

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -18,6 +18,10 @@
     @include isHeaderDesktop {
       color: unset;
       justify-content: center;
+
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
     }
   }
 

package/dist/scss/components/Pagination/_pagination.scss

@@ -52,7 +52,7 @@
 
     appearance: none;
     border: none;
-    border-bottom: 1px solid $pure-black;
+    border-bottom: 1px solid $black-100;
     border-radius: 0;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0;
@@ -73,7 +73,7 @@
     }
 
     &:focus-visible {
-      outline: 1px solid $medium-gray;
+      border-radius: 0;
     }
   }
 

package/dist/scss/components/Search/_searchButton.scss

@@ -30,8 +30,11 @@
     width: 1.5rem;
   }
 
+  &:focus-visible {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   &:hover,
-  &:focus-visible,
   &:active {
     &::after {
       border-bottom: 1px solid $black-100;

package/dist/scss/components/Select/_select.scss

@@ -67,10 +67,9 @@
         }
 
         &:focus-visible {
+          @include focus-ring($border-radius: $radius-3xl);
+
           background-color: $pure-white;
-          border-radius: $radius-3xl;
-          box-shadow: 0 0 0 0.5px $black-100;
-          outline: none;
         }
 
         svg {

package/dist/scss/components/Tabs/_tabs.scss

@@ -6,7 +6,7 @@
   &__tabs-list {
     display: flex;
     gap: 1rem;
-    overflow: hidden; /* Prevent overflow */
+    overflow: visible;
     position: relative;
   }
 
@@ -16,14 +16,24 @@
     border-bottom: 2px solid transparent;
     padding-bottom: $spacing-sm;
     padding-inline: 0;
+    position: relative;
     transition:
       background 0.2s ease,
       font-weight 0.2s ease-out,
       border-bottom 0.2s ease-out;
 
     &:focus-visible {
-      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
+
+      &::after {
+        border: 2px solid $focus-default;
+        border-radius: $radius-xs;
+        content: '';
+        inset: -4px -4px -6px;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+      }
     }
 
     .#{$px}-text {
@@ -42,8 +52,17 @@
     color: $pure-black;
 
     &:focus-visible {
-      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
+
+      &::after {
+        border: 2px solid $focus-default;
+        border-radius: $radius-xs;
+        content: '';
+        inset: -6px -6px -8px;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+      }
     }
     .#{$px}-text {
       color: $pure-black;

package/dist/scss/components/Tags/_tags.scss

@@ -6,12 +6,6 @@
   flex-flow: row wrap;
   gap: $spacing-sm;
 
-  &:focus-visible {
-    border: unset;
-    outline: 1px solid $black-100;
-    outline-offset: 1px;
-  }
-
   .#{$px}-tag {
     border: 1px solid $black-100;
     border-radius: $radius-3xl;
@@ -89,12 +83,8 @@
     }
 
     &:focus-visible {
-      border-color: $black-100;
-      border-radius: $radius-2xl;
-      border-style: solid;
-      border-width: 1px;
-      outline-color: transparent;
-      outline-offset: unset;
+      @include focus-ring($border-radius: $radius-3xl);
+
       padding: 0 $spacing-sm;
 
       @include media($breakpoint-xl) {

package/dist/scss/components/TextArea/_textArea.scss

@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 1px solid $pure-black;
+    @include focus-ring($border-radius: $radius-xs);
   }
 
   &__label {
@@ -87,7 +87,7 @@
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus-within {
-        outline: 1px solid $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
     }
   }

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -28,8 +28,8 @@
     }
 
     &--is-phone:focus-within {
-      outline: 1px solid $soft-black;
-      outline-offset: 1px;
+      box-shadow: inset 0 0 0 2px $focus-default;
+      outline: none;
     }
 
     &-content {
@@ -78,12 +78,10 @@
   }
 }
 
-// Override focus within styles when phone option is clicked
-// TODO: align with design on focus states since the radio input is hidden
+// When both selected and focused, show both the border and focus ring
 .#{$px}-country-picker__option--is-phone.#{$px}-country-picker__option--selected {
-  border: 1px solid $pure-black;
-
   &:focus-within {
+    box-shadow: inset 0 0 0 2px $focus-default;
     outline: none;
   }
 }

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -34,9 +34,7 @@
       width: 100%;
 
       &:focus-visible {
-        border-color: $pure-black;
-        box-shadow: 0 0 0 2px rgba($pure-black, 0.08);
-        outline: none;
+        @include focus-ring($border-radius: $radius-xs);
       }
 
       &--error {

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

@@ -108,6 +108,10 @@
     &.#{$px}-link {
       text-transform: none;
     }
+
+    &:focus-visible {
+      @include focus-ring;
+    }
   }
 
   &__media-container {
@@ -130,6 +134,10 @@
     display: block;
     position: relative;
 
+    &:focus-visible {
+      @include focus-ring;
+    }
+
     &--bg {
       background-color: $soft-gray;
     }
@@ -186,7 +194,7 @@
     width: 100%;
 
     &:focus-visible {
-      outline: 1px solid $pure-black;
+      @include focus-ring;
     }
   }
 }

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

@@ -12,16 +12,14 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 0.5px $bg-border;
-    outline: none;
+    @include focus-ring($border-radius: $radius-3xl);
   }
 
   &--selected {
     border: 2px solid $black-100;
 
     &:focus-visible {
-      box-shadow: 0 0 0 0.5px $black-100;
-      outline: none;
+      @include focus-ring($border-radius: $radius-3xl);
     }
   }
 

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -1,5 +1,17 @@
 @use '../../allPartials' as *;
 
+// Focus ring when the entire card acts as a link (wrapped in <a>)
+a:focus-visible > .#{$px}-sale-card {
+  @include focus-ring($border-radius: $radius-xs);
+}
+
+// Remove default browser outline from the link so only the card focus ring shows
+a:has(> .#{$px}-sale-card) {
+  &:focus {
+    outline: none;
+  }
+}
+
 .#{$px}-sale-card {
   align-items: center;
   display: flex;
@@ -87,6 +99,10 @@
     }
   }
 
+  &__modal-link .#{$px}-button {
+    @include text($linkSmall);
+  }
+
   &__badge {
     border: 1px solid $badge-blue;
     color: $badge-blue;

package/dist/scss/patterns/Social/_social.scss

@@ -33,9 +33,12 @@ $num_icons: 5;
   }
 
   &__button {
-    @include labelText('link');
+    @include text($linkMedium);
 
-    color: $pure-black;
+    border: 0;
+    height: auto;
+    margin-bottom: $spacing-sm;
+    margin-top: $spacing-xsm;
     padding: 0;
     text-align: left;
     text-decoration: underline;
@@ -49,9 +52,9 @@ $num_icons: 5;
       color: unset;
     }
 
-    &:focus {
-      background-color: unset;
-      color: unset;
+    &:focus-visible {
+      border-radius: $radius-xs;
+      padding: 0;
     }
   }