@phillips/seldon 1.187.0 → 1.188.0

package/dist/components/Icon/Icon.d.ts

@@ -13,7 +13,7 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     width?: number | string | null;
     /**
-     * Color of the icon. Can be set to "currentColor" if you want to control the color through css. Otherwise, it only accepts valid seldon color tokens. Defaults to $pure-black
+     * Color of the icon. Can be set to "currentColor" if you want to control the color through css. Otherwise, it only accepts valid seldon color tokens. Defaults to $black-100
      */
     color?: string;
     /**

package/dist/components/Icon/Icon.js

@@ -1,19 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import x from "../../node_modules/classnames/index.js";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import u from "../../node_modules/classnames/index.js";
 import { getCommonProps as C, px as N } from "../../utils/index.js";
 import { getScssVar as $ } from "../../utils/scssUtils.js";
 import * as I from "../../assets/formatted/index.js";
-import * as n from "../../assets/pictograms/formatted/index.js";
-const P = u(
+import * as e from "../../assets/pictograms/formatted/index.js";
+const P = x(
   ({ className: t, height: m, width: s, color: r, icon: o, isPictogram: p, ...c }, f) => {
-    const { className: l, ...i } = C(c, `Icon-${o}`), a = p ? n[o] : I[o] || n[o], d = {
-      color: r === "currentColor" ? r : $(r ?? "", "$pure-black"),
+    const { className: l, ...i } = C(c, `Icon-${o}`), a = p ? e[o] : I[o] || e[o], d = {
+      color: r === "currentColor" ? r : $(r ?? "", "$black-100"),
       ...m ? { height: m } : {},
       ...s ? { width: s } : {},
       ...i
     };
-    return a ? /* @__PURE__ */ e("div", { className: x(`${N}-icon`, l, t), ref: f, children: /* @__PURE__ */ e(a, { ...d }) }) : null;
+    return a ? /* @__PURE__ */ n("div", { className: u(`${N}-icon`, l, t), ref: f, children: /* @__PURE__ */ n(a, { ...d }) }) : null;
   }
 );
 P.displayName = "Icon";

package/dist/components/Toast/Toast.js

@@ -14,7 +14,7 @@ const x = d(
         /* @__PURE__ */ o(N, { children: m }),
         a && s && /* @__PURE__ */ o(u, { asChild: !0, altText: s, className: `${r}__action`, children: a })
       ] }),
-      /* @__PURE__ */ o(C, { className: `${r}__close`, "aria-label": t, asChild: !0, children: /* @__PURE__ */ o(T, { variant: $.link, children: /* @__PURE__ */ o(_, { icon: "CloseX", title: t, color: "$white", "aria-hidden": !0 }) }) })
+      /* @__PURE__ */ o(C, { className: `${r}__close`, "aria-label": t, asChild: !0, children: /* @__PURE__ */ o(T, { variant: $.link, children: /* @__PURE__ */ o(_, { icon: "CloseX", title: t, color: "$white-100", "aria-hidden": !0 }) }) })
     ] });
   }
 );

package/dist/design/colors-tokens/ColorCard.d.ts

@@ -10,7 +10,7 @@ interface ColorCardProps {
     /**
      * Where is this token used?
      */
-    usage: string;
+    usage?: string;
     /**
      * class to add to color card container
      */

package/dist/design/colors-tokens/ColorTokensPage.d.ts

@@ -0,0 +1 @@
+export default function ColorTokensPage(): import("react/jsx-runtime").JSX.Element;

package/dist/scss/_sharedClasses.scss

@@ -19,13 +19,12 @@
   background-image: none !important;
   background-clip: initial !important;
   border-radius: 0.1875rem !important;
-
-  border-color: #0000 !important;
+  border-color: $black-100 !important;
   box-shadow: none !important;
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-box-decoration-break: clone !important;
   box-decoration-break: clone !important;
-  color: #0000 !important;
+  color: $black-100 !important;
   outline: none !important;
   pointer-events: none !important;
   /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -62,10 +61,10 @@ button.#{$px}-skeleton {
 
 @keyframes skeleton-pulse {
   0% {
-    background-color: #0000000f;
+    background-color: $grey-50;
   }
 
   100% {
-    background-color: #0000001f;
+    background-color: $black-25;
   }
 }

package/dist/scss/_utils.scss

@@ -15,7 +15,7 @@
 }
 
 @mixin warning-icon-before {
-  border-bottom: 1.25rem solid #d6d141;
+  border-bottom: 1.25rem solid $secondary-yellow;
   border-left: 0.75rem solid transparent;
   border-right: 0.75rem solid transparent;
   content: '';

package/dist/scss/_vars.scss

@@ -5,65 +5,122 @@ $px: seldon;
 /// COlORS:
 ///////////////////////
 
-// Primary color palette
-$pure-black: #000;
-$primary-black: #323232;
-$white: #fff;
-
-// Secondary color palette
-$soft-black: #545454;
-$dark-gray: #7b7474;
-$soft-black-2: #535050;
-
-// Utilititarian color palette
-$keyline-gray: #949494;
-$medium-gray: #c3bebb;
-$soft-gray: #fafafa;
-$pale-gray: #f4f4f4;
-$light-gray: #eceae7;
-$off-white: #f4f2f1;
-
-// Notification color palette
-$error-red: #f00;
-$error-pink: rgba(255, 229, 229, 90%);
-$warn-yellow: #d6d141;
-$post-sale-pink: #ff0086;
-$cta-blue: #4a90e2;
-$badge-blue: #0065fc;
-
-// AM color palette
-$widget-blue: #4a90e2;
-$widget-green: #6a9c53;
-$widget-maroon: #6b0000;
-$widget-red: #b00000;
-$clock-widget-blue: $widget-blue;
-$clock-widget-green: $widget-green;
-$clock-widget-maroon: $widget-maroon;
-$clock-widget-red: $widget-red;
-
-// Articker color palette
-$articker-red: #fc1e2b;
-$articker-orange: #ff8201;
-$articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
-$overlay-black: rgba(0, 0, 0, 80%);
+// Primary
+
+// White
+$white-100: #fff;
+$white-75: rgba(255, 255, 255, 75%);
+$white-50: rgba(255, 255, 255, 50%);
+$white-25: rgba(255, 255, 255, 25%);
+
+// Black
+$black-100: #000;
+$black-75: rgba(0, 0, 0, 75%);
+$black-50: rgba(0, 0, 0, 50%);
+$black-25: rgba(0, 0, 0, 25%);
+
+// Secondary
+
+// Highlight
+$highlight-yellow: #fff90a;
+$highlight-green: #46ea77;
+$highlight-blue: #0065fc;
+$highlight-red: #ff3d0a;
+$highlight-purple: #802dfa;
+
+// Functional
+
+// Greys
+$grey-100: #545454;
+$grey-75: #75716f;
+$grey-50: #eae9e6;
+$grey-25: #f9f8f7;
+
+// Semantic
+
+// Text
+$text-default: #000;
+$text-inverted: #fff;
+$text-supporting: #545454;
+
+// CTAs
+$cta-default: #000;
+$cta-disabled: #eae9e6;
+$cta-hover: #75716f;
+$cta-inactive: #75716f;
+$cta-focus: #545454;
+
+// Background
+$bg-default: #fff;
+$bg-soft: #f9f8f7;
+$bg-border: #eae9e6;
+$bg-inverted: #000;
+$bg-overlay: rgba(0, 0, 0, 50%);
+
+// Status
+$success-default: #00cc39;
+$warning-default: #ea0404;
+$status-info: #0065fc;
+$focus-default: #07c;
 
 // admin colors
 $admin-alert: #f24a4a;
 $admin-success: #10bc94;
 
-// Legacy mapping
-$pure-white: $white;
-$post-sale-magenta: $post-sale-pink;
-
-// Text variables
-$header-color: $pure-black;
-$text-color: $soft-black;
-
-// Interactive Colors
-$button-hover: #75716f;
-
-// Misc. Colors
-$countdown-compact: #b40919;
+// LEGACY MAPPING (updated to new tokens):
+// --- Legacy Primary color palette ---
+$pure-black: $black-100;
+$primary-black: $black-75;
+$white: $white-100;
+
+// --- Legacy Utilitarian color palette ---
+$soft-black: $grey-100;
+$dark-gray: $grey-75;
+$soft-black-2: $grey-100;
+$keyline-gray: $grey-75;
+$medium-gray: $grey-50;
+$soft-gray: $grey-25;
+$pale-gray: $grey-25;
+$light-gray: $grey-50;
+$off-white: $grey-25;
+
+// --- Legacy Notification color palette ---
+$error-red: $highlight-red;
+$error-pink: $highlight-purple;
+$warn-yellow: $highlight-yellow;
+$post-sale-pink: $highlight-purple;
+$cta-blue: $highlight-blue;
+$badge-blue: $highlight-blue;
+
+// --- Legacy AM color palette ---
+$widget-blue: $highlight-blue;
+$widget-green: $highlight-green;
+$widget-maroon: $highlight-red;
+$widget-red: $highlight-red;
+$clock-widget-blue: $highlight-blue;
+$clock-widget-green: $highlight-green;
+$clock-widget-maroon: $highlight-red;
+$clock-widget-red: $highlight-red;
+
+// --- Legacy Articker color palette ---
+$articker-red: $highlight-red;
+$articker-orange: $highlight-yellow;
+$articker-red-orange-gradient: linear-gradient(90deg, $highlight-red, $highlight-yellow);
+$overlay-black: $black-75;
+
+// --- Legacy legacy mapping ---
+$pure-white: $white-100;
+$post-sale-magenta: $highlight-purple;
+
+// --- Legacy Text variables ---
+$header-color: $black-100;
+$text-color: $grey-100;
+
+// --- Legacy Interactive Colors ---
+$button-hover: $grey-75;
+
+// --- Legacy Misc. Colors ---
+$countdown-compact: $highlight-red;
 
 ////////////////////////
 /// FONTS:

package/dist/scss/_vars.scss.js

@@ -5,65 +5,122 @@ $px: seldon;
 /// COlORS:
 ///////////////////////
 
-// Primary color palette
-$pure-black: #000;
-$primary-black: #323232;
-$white: #fff;
-
-// Secondary color palette
-$soft-black: #545454;
-$dark-gray: #7b7474;
-$soft-black-2: #535050;
-
-// Utilititarian color palette
-$keyline-gray: #949494;
-$medium-gray: #c3bebb;
-$soft-gray: #fafafa;
-$pale-gray: #f4f4f4;
-$light-gray: #eceae7;
-$off-white: #f4f2f1;
-
-// Notification color palette
-$error-red: #f00;
-$error-pink: rgba(255, 229, 229, 90%);
-$warn-yellow: #d6d141;
-$post-sale-pink: #ff0086;
-$cta-blue: #4a90e2;
-$badge-blue: #0065fc;
-
-// AM color palette
-$widget-blue: #4a90e2;
-$widget-green: #6a9c53;
-$widget-maroon: #6b0000;
-$widget-red: #b00000;
-$clock-widget-blue: $widget-blue;
-$clock-widget-green: $widget-green;
-$clock-widget-maroon: $widget-maroon;
-$clock-widget-red: $widget-red;
-
-// Articker color palette
-$articker-red: #fc1e2b;
-$articker-orange: #ff8201;
-$articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
-$overlay-black: rgba(0, 0, 0, 80%);
+// Primary
+
+// White
+$white-100: #fff;
+$white-75: rgba(255, 255, 255, 75%);
+$white-50: rgba(255, 255, 255, 50%);
+$white-25: rgba(255, 255, 255, 25%);
+
+// Black
+$black-100: #000;
+$black-75: rgba(0, 0, 0, 75%);
+$black-50: rgba(0, 0, 0, 50%);
+$black-25: rgba(0, 0, 0, 25%);
+
+// Secondary
+
+// Highlight
+$highlight-yellow: #fff90a;
+$highlight-green: #46ea77;
+$highlight-blue: #0065fc;
+$highlight-red: #ff3d0a;
+$highlight-purple: #802dfa;
+
+// Functional
+
+// Greys
+$grey-100: #545454;
+$grey-75: #75716f;
+$grey-50: #eae9e6;
+$grey-25: #f9f8f7;
+
+// Semantic
+
+// Text
+$text-default: #000;
+$text-inverted: #fff;
+$text-supporting: #545454;
+
+// CTAs
+$cta-default: #000;
+$cta-disabled: #eae9e6;
+$cta-hover: #75716f;
+$cta-inactive: #75716f;
+$cta-focus: #545454;
+
+// Background
+$bg-default: #fff;
+$bg-soft: #f9f8f7;
+$bg-border: #eae9e6;
+$bg-inverted: #000;
+$bg-overlay: rgba(0, 0, 0, 50%);
+
+// Status
+$success-default: #00cc39;
+$warning-default: #ea0404;
+$status-info: #0065fc;
+$focus-default: #07c;
 
 // admin colors
 $admin-alert: #f24a4a;
 $admin-success: #10bc94;
 
-// Legacy mapping
-$pure-white: $white;
-$post-sale-magenta: $post-sale-pink;
-
-// Text variables
-$header-color: $pure-black;
-$text-color: $soft-black;
-
-// Interactive Colors
-$button-hover: #75716f;
-
-// Misc. Colors
-$countdown-compact: #b40919;
+// LEGACY MAPPING (updated to new tokens):
+// --- Legacy Primary color palette ---
+$pure-black: $black-100;
+$primary-black: $black-75;
+$white: $white-100;
+
+// --- Legacy Utilitarian color palette ---
+$soft-black: $grey-100;
+$dark-gray: $grey-75;
+$soft-black-2: $grey-100;
+$keyline-gray: $grey-75;
+$medium-gray: $grey-50;
+$soft-gray: $grey-25;
+$pale-gray: $grey-25;
+$light-gray: $grey-50;
+$off-white: $grey-25;
+
+// --- Legacy Notification color palette ---
+$error-red: $highlight-red;
+$error-pink: $highlight-purple;
+$warn-yellow: $highlight-yellow;
+$post-sale-pink: $highlight-purple;
+$cta-blue: $highlight-blue;
+$badge-blue: $highlight-blue;
+
+// --- Legacy AM color palette ---
+$widget-blue: $highlight-blue;
+$widget-green: $highlight-green;
+$widget-maroon: $highlight-red;
+$widget-red: $highlight-red;
+$clock-widget-blue: $highlight-blue;
+$clock-widget-green: $highlight-green;
+$clock-widget-maroon: $highlight-red;
+$clock-widget-red: $highlight-red;
+
+// --- Legacy Articker color palette ---
+$articker-red: $highlight-red;
+$articker-orange: $highlight-yellow;
+$articker-red-orange-gradient: linear-gradient(90deg, $highlight-red, $highlight-yellow);
+$overlay-black: $black-75;
+
+// --- Legacy legacy mapping ---
+$pure-white: $white-100;
+$post-sale-magenta: $highlight-purple;
+
+// --- Legacy Text variables ---
+$header-color: $black-100;
+$text-color: $grey-100;
+
+// --- Legacy Interactive Colors ---
+$button-hover: $grey-75;
+
+// --- Legacy Misc. Colors ---
+$countdown-compact: $highlight-red;
 
 ////////////////////////
 /// FONTS:

package/dist/scss/components/AddToCalendar/_addToCalendar.scss

@@ -29,8 +29,8 @@
   }
 
   &-atcb-list {
-    background: #fff;
-    border: 1px solid#ECEAE7;
+    background: $white-100;
+    border: 1px solid $grey-50;
   }
 
   &-atcb-item {
@@ -73,7 +73,7 @@
 
       &:hover,
       &:focus-visible {
-        color: #000;
+        color: $black-100;
         outline: none;
         text-decoration: none;
       }

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

@@ -103,7 +103,7 @@
 
     &:hover {
       background-color: transparent;
-      box-shadow: 0 0 0 1px rgba(0, 0, 0, 100%);
+      box-shadow: 0 0 0 1px rgba($pure-black, 1);
     }
   }
 
@@ -170,7 +170,7 @@
   }
 
   &:disabled {
-    background-color: $white;
+    background-color: $white-100;
     border: 1px solid $light-gray;
     color: $light-gray;
     cursor: default;

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

@@ -145,21 +145,21 @@
 
     &:focus-visible {
       border-radius: 50%;
-      outline: 0.5px solid #000;
+      outline: 0.5px solid $black-100;
 
       &-dot {
         &:hover {
           background-color: transparent;
-          outline: 1px solid #000;
+          outline: 1px solid $black-100;
         }
       }
     }
   }
 
   &-dot {
-    background-color: #eceae7;
+    background-color: $grey-50;
     border-radius: 50%;
-    outline-color: #eceae7;
+    outline-color: $grey-50;
 
     &--md {
       height: 100%;
@@ -173,15 +173,15 @@
 
     &:hover {
       background-color: transparent;
-      outline: 1px solid #000;
+      outline: 1px solid $black-100;
     }
 
     &--selected {
-      background-color: #000;
-      outline-color: #000;
+      background-color: $black-100;
+      outline-color: $black-100;
 
       &:hover {
-        background-color: #000;
+        background-color: $black-100;
         outline: none;
       }
     }

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

@@ -95,7 +95,7 @@
 
       &:hover {
         svg {
-          color: $white;
+          color: $white-100;
         }
       }
     }
@@ -115,10 +115,10 @@
 
   &__content {
     animation: fade-in 150ms ease-out;
-    background-color: $white;
-    border: 1px solid #e0e0e0;
+    background-color: $white-100;
+    border: 1px solid $grey-50;
     border-radius: 4px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 10%);
+    box-shadow: 0 5px 15px rgba($pure-black, 0.1);
     margin-top: 4px;
     max-height: 300px;
     overflow-y: auto;
@@ -142,7 +142,7 @@
   }
 
   &__item {
-    background-color: $white;
+    background-color: $white-100;
     padding: $padding-micro $padding-xsm;
     transition: background-color 0.1s ease;
 

package/dist/scss/components/ContentPeek/_contentPeek.scss

@@ -34,7 +34,7 @@
           rgba(250, 250, 250, 0%) 0%,
           rgba(255, 255, 255, 5%) 6.25%,
           rgba(255, 255, 255, 75%) 53.65%,
-          #fff 90.62%
+          $white 90.62%
         );
         content: '';
         height: 100px;
@@ -45,7 +45,7 @@
   }
 
   &-overlay-trigger-wrapper {
-    background: #fff;
+    background: $white-100;
     display: flex;
     justify-content: center;
     pointer-events: auto;

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

@@ -74,7 +74,7 @@
   .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
   .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
   .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-    box-shadow: -10px 0 0 #e6e6e6;
+    box-shadow: -10px 0 0 $grey-50;
   }
 
   &.arrowTop::before,

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

@@ -3,7 +3,7 @@
 .#{$px}-descriptive-radio-button {
   &__container {
     align-items: flex-start;
-    background: $white;
+    background: $white-100;
     border: 1px solid $light-gray;
     border-radius: 4px;
     cursor: pointer;

package/dist/scss/components/Drawer/_drawer.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-drawer {
   align-items: center;
-  background-color: $white;
+  background-color: $white-100;
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -37,7 +37,7 @@
   }
 
   &__overlay {
-    background-color: $overlay-black;
+    background-color: $black-75;
     inset: 0;
     position: fixed;
     z-index: 10;
@@ -46,7 +46,7 @@
   // Bottom sheet modifier
   &--bottom {
     border-radius: 16px 16px 0 0;
-    box-shadow: 0 -2px 16px rgba(0, 0, 0, 8%);
+    box-shadow: 0 -2px 16px rgba($pure-black, 0.08);
     height: auto;
     inset: auto 0 0;
     max-width: 100%;

package/dist/scss/components/Drawer/_drawerHeader.scss

@@ -28,7 +28,7 @@
   &__title {
     @include DistinctDisplay;
 
-    color: $primary-black;
+    color: $text-default;
     font-size: $heading-size4;
     font-variation-settings: 'wght' 600;
     line-height: $body-line-height-size1;
@@ -40,6 +40,6 @@
   }
 
   .#{$px}-icon-close-x:hover {
-    color: $white;
+    color: $white-100;
   }
 }

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

@@ -5,7 +5,7 @@
 
   &__trigger {
     align-items: center;
-    background-color: $white;
+    background-color: $white-100;
     border: none;
     display: inline-flex;
     gap: 10px;
@@ -42,7 +42,7 @@
   }
 
   &__content {
-    background-color: $white;
+    background-color: $white-100;
     border: 1px solid $light-gray;
 
     // following will add additional arrows if list is near edge of viewport

package/dist/scss/components/FavoritingTileButton/_favoritingTileButton.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-favoriting-tile-button {
   align-items: center;
-  background-color: $white;
+  background-color: $white-100;
   border: 1px solid $light-gray;
   display: flex;
   flex-shrink: 0;
@@ -33,7 +33,7 @@
     align-items: center;
     background: $button-hover;
     border: 1px solid $button-hover;
-    color: $white;
+    color: $white-100;
     cursor: pointer;
   }
 }

package/dist/scss/components/Icon/_icon.stories.scss

@@ -1,7 +1,7 @@
 @import '../../allPartials';
 
 .story-icon-flex-wrapper {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 20%);
+  box-shadow: 0 0 8px 0 rgba($pure-black, 0.2);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -24,7 +24,7 @@
 
   .icon-wrapper {
     &.show-border {
-      border: 1px solid black;
+      border: 1px solid $pure-black;
     }
 
     margin: 0 auto;

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

@@ -13,7 +13,7 @@
     width: $button-label-line-height;
 
     &:hover {
-      color: $white;
+      color: $white-100;
     }
   }
 
@@ -110,7 +110,7 @@
   }
 
   &:disabled {
-    background-color: $white;
+    background-color: $white-100;
     border: 1px solid $light-gray;
 
     svg {

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

@@ -30,9 +30,9 @@ $lg: #{$px}-input--lg;
   &__wrapper {
     @include text($string2);
 
-    accent-color: $soft-black;
+    accent-color: $black-100;
     align-items: center;
-    border: 1px solid $keyline-gray;
+    border: 1px solid $black-100;
     border-radius: 0.1875rem;
     display: inline-flex;
     font-variation-settings: 'wght' 600;
@@ -74,8 +74,8 @@ $lg: #{$px}-input--lg;
   &__input {
     @include text($string2);
 
-    accent-color: $soft-black;
-    border: 1px solid $keyline-gray;
+    accent-color: $black-100;
+    border: 1px solid $black-100;
     border-radius: 0.1875rem;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0.25rem;
@@ -88,6 +88,11 @@ $lg: #{$px}-input--lg;
     &:focus-visible {
       outline: 1px solid $pure-black;
     }
+
+    &:hover {
+      accent-color: $cta-hover;
+      border-color: $cta-hover;
+    }
   }
 
   &__validation {
@@ -138,7 +143,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__input {
-      background-color: rgba(239, 239, 239, 30%);
+      background-color: rgba($pure-black, 0.05);
     }
   }
 

package/dist/scss/components/Loader/_loader.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-loader {
   animation: rotation 1s linear infinite;
-  border: 2px solid $primary-black;
+  border: 2px solid $black-100;
   border-bottom-color: transparent;
   border-radius: 50%;
   box-sizing: border-box;

package/dist/scss/components/Modal/_modal.scss

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-modal {
-  background-color: $white;
+  background-color: $white-100;
   left: 50%;
   max-height: 100%;
   max-width: 100%;
@@ -18,7 +18,7 @@
   }
 
   &__overlay {
-    background-color: $overlay-black;
+    background-color: $black-75;
     inset: 0;
     position: fixed;
     z-index: 15;

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -48,7 +48,7 @@
 
   @include isHeaderDesktop {
     & > .#{$px}-nav__list-item-trigger::before {
-      background: #f4f4f4;
+      background: $grey-50;
       content: '';
       height: 2px;
       left: 0;

package/dist/scss/components/Navigation/_navigation.scss

@@ -48,6 +48,6 @@
 
   &__close-btn:hover,
   &__close-btn:focus {
-    background-color: #f4f4f4;
+    background-color: $grey-50;
   }
 }

package/dist/scss/components/ProgressIndicator/_progressIndicator.scss

@@ -30,10 +30,10 @@
     &--active,
     &--current {
       background-color: $pure-black;
-      color: $white;
+      color: $white-100;
 
       svg {
-        color: $white;
+        color: $white-100;
       }
     }
   }

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-search__results {
   align-items: flex-start;
-  background: $white;
+  background: $white-100;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
@@ -24,7 +24,7 @@
   }
 
   &-container {
-    background: $white;
+    background: $white-100;
     display: flex;
     flex-direction: column;
     font-family: Montserrat, sans-serif;

package/dist/scss/components/Search/_search.scss

@@ -12,7 +12,7 @@
   transition: left 0.25s ease-in;
 
   &::after {
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid $black-100;
     bottom: 0;
     content: '';
     display: flex;
@@ -82,7 +82,7 @@
       }
 
       &-enter-active input {
-        background: $white;
+        background: $white-100;
 
         &::placeholder {
           opacity: 1;

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

@@ -35,7 +35,7 @@
   &:focus-visible,
   &:active {
     &::after {
-      border-bottom: 1px solid #000;
+      border-bottom: 1px solid $black-100;
       bottom: 0;
       content: '';
       display: flex;

package/dist/scss/components/SplitPanel/_splitPanel.stories.scss

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .split-panel-story {
-  background-color: #f4f2f1;
+  background-color: $grey-50;
 
   &__text {
     font-family: Montserrat, serif;

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

@@ -24,7 +24,7 @@
       border-bottom 0.2s ease-out;
 
     &:focus-visible {
-      box-shadow: rgb(11, 11, 12) 0 0 0 1px inset;
+      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
     }
 
@@ -46,7 +46,7 @@
     color: $pure-black;
 
     &:focus-visible {
-      box-shadow: rgb(11, 11, 12) 0 0 0 1px inset;
+      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
     }
     .#{$px}-text {

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

@@ -8,26 +8,27 @@
 
   &:focus-visible {
     border: unset;
-    outline: 1px solid $button-hover;
+    outline: 1px solid $black-100;
     outline-offset: 1px;
   }
 
   .#{$px}-tag {
-    border: 1px solid $button-hover;
+    border: 1px solid $black-100;
     border-radius: 6.25rem;
     gap: $spacing-micro;
     padding: $spacing-micro $spacing-xsm $spacing-micro $spacing-sm;
+    transition: border-color 0.25s;
 
     &__icon {
       svg {
-        color: $button-hover;
+        color: $black-100;
         height: 1rem;
         width: 1rem;
       }
     }
 
     &__label {
-      color: $button-hover;
+      color: $black-100;
       font-size: $body-size3;
       font-variation-settings: 'wght' 600;
       text-align: center;
@@ -35,14 +36,15 @@
     }
 
     &:hover {
-      color: $pure-black;
+      border-color: $cta-hover;
+      color: $cta-hover;
 
       .#{$px}-tag__label {
-        color: $pure-black;
+        color: $cta-hover;
       }
 
       svg {
-        color: $pure-black;
+        color: $cta-hover;
       }
     }
   }
@@ -54,7 +56,7 @@
     border-color: $pure-white;
     border-style: solid;
     border-width: 1px;
-    color: $button-hover;
+    color: $black-100;
     display: flex;
     gap: $spacing-micro;
     height: 2rem;
@@ -65,30 +67,30 @@
     }
 
     svg {
-      fill: $button-hover;
+      fill: $black-100;
       height: 1rem;
       width: 1rem;
 
       path {
-        fill: $button-hover;
+        fill: $black-100;
       }
     }
 
     &:hover {
-      color: $pure-black;
+      color: $cta-hover;
       cursor: pointer;
 
       svg {
-        fill: $pure-black;
+        fill: $cta-hover;
 
         path {
-          fill: $pure-black;
+          fill: $cta-hover;
         }
       }
     }
 
     &:focus-visible {
-      border-color: $button-hover;
+      border-color: $black-100;
       border-radius: 6.25rem;
       border-style: solid;
       border-width: 1px;

package/dist/scss/components/Toast/_toast.scss

@@ -2,10 +2,9 @@
 
 .#{$px}-toast {
   align-items: center;
-  background-color: $primary-black;
+  background-color: $black-100;
   border-radius: 4px;
-  box-shadow: 0 6px 14px 0 $primary-black;
-  color: $white;
+  color: $white-100;
   column-gap: $spacing-sm;
   display: grid;
   grid-template-areas: 'title action';
@@ -18,10 +17,10 @@
   }
 
   &__action {
-    color: $cta-blue;
+    color: $text-inverted;
 
     &:hover {
-      color: $white;
+      color: $text-inverted;
     }
   }
 

package/dist/scss/components/Toggle/_toggle.scss

@@ -29,7 +29,7 @@ $lg: #{$px}-input--lg;
     }
 
     &::before {
-      background-color: rgba(0, 0, 0, 40%);
+      background-color: rgba($pure-black, 0.4);
       border-radius: 1rem;
       height: 1rem;
       left: 0;
@@ -41,12 +41,12 @@ $lg: #{$px}-input--lg;
 
     &::after {
       // background-color: transparent;
-      background: #fff linear-gradient(transparent, rgba($pure-black, 0.05));
+      background: $white linear-gradient(transparent, rgba($pure-black, 0.05));
       border-radius: 50%;
       box-shadow:
         0 1px 2px 0 rgba($pure-black, 0.15),
         0 0 0 1px rgba($pure-black, 0.15) inset;
-      color: white;
+      color: $white-100;
       height: 1rem;
       left: 0;
       transform: translate(0, 0);

package/dist/scss/patterns/CountryPicker/_countryPickerModal.scss

@@ -20,7 +20,7 @@
   }
 
   &__header {
-    background: $white;
+    background: $white-100;
     margin-bottom: 24px; // no token for this yet
     position: sticky;
     top: 0;
@@ -54,7 +54,7 @@
   }
 
   &__button-container {
-    background: $white;
+    background: $white-100;
     border-top: 1px solid $light-gray;
     margin-top: auto;
     padding-top: 1rem;

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

@@ -3,7 +3,7 @@
 .#{$px}-country-picker {
   &__option {
     align-items: center;
-    background: $white;
+    background: $white-100;
     border: 1px solid transparent;
     border-radius: 6px;
     cursor: pointer;

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

@@ -19,7 +19,7 @@
     &-btn {
       align-items: center;
       appearance: none;
-      background: $white;
+      background: $white-100;
       border: 1px solid $light-gray;
       border-radius: 6px;
       box-sizing: border-box;

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

@@ -133,8 +133,8 @@
     }
 
     &--create-list {
-      background-color: $white;
-      border: 1px solid #0000001f;
+      background-color: $white-100;
+      border: 1px solid $black-25;
       border-radius: 0;
     }
 

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

@@ -15,9 +15,9 @@
 
   &--count {
     background: $pure-black;
-    border: 2px solid $white;
+    border: 2px solid $white-100;
     border-radius: 50%;
-    color: $white;
+    color: $white-100;
     display: inline-block;
     font-size: var(--label-size3);
     height: 1.5rem;

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-filter-dropdown-menu {
-  background: $white;
+  background: $white-100;
   border-radius: $spacing-xsm;
   box-shadow: 0 4px 6px $medium-gray;
   display: flex;
@@ -92,7 +92,7 @@
   }
 
   &__button-text {
-    color: $white;
+    color: $white-100;
   }
 
   &--mobile {

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

@@ -56,7 +56,7 @@ $num_icons: 5;
   &.#{$px}-social {
     ul {
       align-items: center;
-      border-top: 1px solid #eae8e4;
+      border-top: 1px solid $grey-50;
       display: flex;
       gap: 0 $icon_gap;
       justify-content: flex-start;

package/dist/scss/patterns/ViewingsList/_viewingsList.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-viewings-list {
   align-items: center;
-  background-color: $off-white;
+  background-color: $white-100;
   display: flex;
   flex-direction: column;
   gap: 2.5rem;

package/dist/scss/site-furniture/Footer/_footer.scss

@@ -74,7 +74,7 @@
   }
 
   .#{$px}-accordion {
-    border-bottom: 1px solid #eae8e4;
+    border-bottom: 1px solid $grey-50;
     border-top: unset;
     margin-bottom: $spacing-md;
     width: 100%;
@@ -99,14 +99,14 @@
       }
 
       &__border-bottom {
-        border-bottom: 1px solid #eae8e4;
+        border-bottom: 1px solid $grey-50;
       }
     }
   }
 
   &__copyright {
     align-items: center;
-    background-color: $white;
+    background-color: $white-100;
     display: flex;
     flex-direction: column;
     width: 100%;

package/dist/scss/site-furniture/Header/_header.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-header {
   align-items: center;
-  background-color: $white;
+  background-color: $white-100;
   border-bottom: 1px solid $light-gray;
   display: flex;
   flex-direction: column;
@@ -167,7 +167,7 @@
     display: none;
 
     &--active {
-      background: rgba(0, 0, 0, 60%);
+      background: $black-75;
       display: block;
       height: 100vh;
       left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.187.0",
+  "version": "1.188.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"