@phillips/seldon 1.187.0 → 1.188.1

package/dist/components/ComposedModal/ComposedModal.d.ts

@@ -1,15 +1,5 @@
 import { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal';
-export interface ModalButtonProps {
-    /**
-     * Callback click function for button
-     */
-    onClick?: () => void | unknown;
-    /**
-     * Button label text
-     */
-    buttonLabel?: string;
-}
 export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role' | 'style'> {
     /**
      * Title for Composed Modal
@@ -30,11 +20,11 @@ export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role'
     /**
      * Left Button Props
      */
-    secondaryButton?: ModalButtonProps;
+    secondaryButton?: React.ReactNode;
     /**
      * Right Button Props
      */
-    primaryButton?: ModalButtonProps;
+    primaryButton?: React.ReactNode;
     /**
      * Footer content for bottom of Viewings Details
      */

package/dist/components/ComposedModal/ComposedModal.js

@@ -1,67 +1,65 @@
-import { jsxs as e, jsx as m, Fragment as C } from "react/jsx-runtime";
+import { jsxs as o, jsx as s, Fragment as $ } from "react/jsx-runtime";
 import g from "../../node_modules/classnames/index.js";
 import { forwardRef as x } from "react";
-import { getCommonProps as k, noOp as M } from "../../utils/index.js";
-import t from "../Button/Button.js";
-import { ButtonVariants as n } from "../Button/types.js";
-import y from "../Divider/Divider.js";
-import j from "../Modal/Modal.js";
-import { TextVariants as c } from "../Text/types.js";
-import p from "../Text/Text.js";
-const u = x(
+import { getCommonProps as b, noOp as C } from "../../utils/index.js";
+import M from "../Divider/Divider.js";
+import y from "../Modal/Modal.js";
+import { TextVariants as t } from "../Text/types.js";
+import c from "../Text/Text.js";
+const j = x(
   ({
-    children: f,
-    className: h,
-    overlayClassName: L,
-    isOpen: v = !1,
-    onClose: b = M,
+    children: p,
+    className: n,
+    overlayClassName: u,
+    isOpen: f = !1,
+    onClose: h = C,
     maxHeightValue: N = "60vh",
-    title: l,
-    footerContent: s,
-    secondaryButton: i,
-    primaryButton: o,
-    id: r,
-    ...d
+    title: r,
+    footerContent: m,
+    secondaryButton: d,
+    primaryButton: i,
+    id: e,
+    ...l
   }, _) => {
     const {
       className: a,
       "data-testid": P,
-      ...$
-    } = k({ id: r, ...d }, "ComposedModal");
-    return /* @__PURE__ */ e(
-      j,
+      ...v
+    } = b({ id: e, ...l }, "ComposedModal");
+    return /* @__PURE__ */ o(
+      y,
       {
-        isOpen: v,
-        onClose: b,
-        ...d,
-        ...$,
-        className: g(`${a}`, h),
-        id: r,
+        isOpen: f,
+        onClose: h,
+        ...l,
+        ...v,
+        className: g(`${a}`, n),
+        id: e,
         ref: _,
         children: [
-          l ? /* @__PURE__ */ m(p, { variant: c.heading3, className: `${a}__title`, children: l }) : null,
-          /* @__PURE__ */ m(
+          r ? /* @__PURE__ */ s(c, { variant: t.heading3, className: `${a}__title`, children: r }) : null,
+          /* @__PURE__ */ s(
             "div",
             {
               className: `${a}__body`,
               style: { "--max-modal-body-height": N },
-              children: f
+              children: p
             }
           ),
-          (i || o || s) && /* @__PURE__ */ e(C, { children: [
-            /* @__PURE__ */ m(y, { className: `${a}__divider`, id: `${r}-divider` }),
-            /* @__PURE__ */ e("div", { className: `${a}__btns-group`, children: [
-              i && /* @__PURE__ */ m(t, { id: `${r}-secondary-btn`, variant: n.secondary, onClick: i.onClick, children: i.buttonLabel }),
-              o && /* @__PURE__ */ m(t, { id: `${r}-primary-btn`, variant: n.primary, onClick: o.onClick, children: o.buttonLabel })
+          (d || i || m) && /* @__PURE__ */ o($, { children: [
+            /* @__PURE__ */ s(M, { className: `${a}__divider`, id: `${e}-divider` }),
+            /* @__PURE__ */ o("div", { className: `${a}__btns-group`, children: [
+              d,
+              i
             ] }),
-            s && /* @__PURE__ */ m(p, { variant: c.heading5, className: `${a}__disclaimer`, children: s })
+            m && /* @__PURE__ */ s(c, { variant: t.heading5, className: `${a}__disclaimer`, children: m })
           ] })
         ]
       }
     );
   }
 );
-u.displayName = "ComposedModal";
+j.displayName = "ComposedModal";
 export {
-  u as default
+  j as default
 };

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;