@sage/design-tokens 14.0.1 → 14.1.0

package/scss/product/small/dark.scss

@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #000000;
 $modes-color-status-ai-default-alt: #FFFFFF; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
 $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-$modes-color-status-generic-default: #008a89;
+$modes-color-status-callout-default-alt: #122211; // used for marketing banners
+$modes-color-status-callout-hover-alt: #263525; // marketing banner hover
 $modes-color-status-caution-default: #E04500;
 $modes-color-status-caution-default-alt: #251206; // Subtle message bg
 $modes-color-status-caution-hover: #eb6530; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #FFFFFF;
 $modes-color-status-content-inverse-with-default-alt: #000000f2;
 $modes-color-status-content-inverse-with-hover: #FFFFFF;
 $modes-color-status-content-inverse-with-hover-alt: #000000;
+$modes-color-status-custom-blue-default: #007FD9; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-blue-default-alt: #0d1219; // Pill bg
+$modes-color-status-custom-blue-hover: #4f91df; // used on pill hover states
+$modes-color-status-custom-blue-hover-alt: #142131; // used on pill hover states
+$modes-color-status-custom-teal-default: #008A89; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-teal-default-alt: #0a1313; // Pill bg
+$modes-color-status-custom-teal-hover: #449b9a; // used on pill hover states
+$modes-color-status-custom-teal-hover-alt: #082427; // used on pill hover states
+$modes-color-status-custom-green-default: #009023; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-green-default-alt: #0a1408; // Pill bg
+$modes-color-status-custom-green-hover: #44a146; // used on pill hover states
+$modes-color-status-custom-green-hover-alt: #0b2418; // used on pill hover states
+$modes-color-status-custom-lime-default: #6E8500; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-lime-default-alt: #111205; // Pill bg
+$modes-color-status-custom-lime-hover: #859635; // used on pill hover states
+$modes-color-status-custom-lime-hover-alt: #162311; // used on pill hover states
+$modes-color-status-custom-orange-default: #DB4B00; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-orange-default-alt: #1c0e04; // Pill bg
+$modes-color-status-custom-orange-hover: #e66930; // used on pill hover states
+$modes-color-status-custom-orange-hover-alt: #331816; // used on pill hover states
+$modes-color-status-custom-red-default: #F50058; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-red-default-alt: #1e0d0d; // Pill bg
+$modes-color-status-custom-red-hover: #fc4e6e; // used on pill hover states
+$modes-color-status-custom-red-hover-alt: #331720; // used on pill hover states
+$modes-color-status-custom-pink-default: #DD2BAB; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-pink-default-alt: #1b0d16; // Pill bg
+$modes-color-status-custom-pink-hover: #e558b7; // used on pill hover states
+$modes-color-status-custom-pink-hover-alt: #2d192b; // used on pill hover states
+$modes-color-status-custom-purple-default: #985FDC; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-purple-default-alt: #150f19; // Pill bg
+$modes-color-status-custom-purple-hover: #a977e2; // used on pill hover states
+$modes-color-status-custom-purple-hover-alt: #231c30; // used on pill hover states
+$modes-color-status-custom-gray-default: #7C7C7C; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-gray-default-alt: #111; // Pill bg
+$modes-color-status-custom-gray-hover: #8e8e8e; // used on pill hover states
+$modes-color-status-custom-gray-hover-alt: #1a202b; // used on pill hover states
+$modes-color-status-custom-slate-default: #5C8196; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-slate-default-alt: #0f1214; // Pill bg
+$modes-color-status-custom-slate-hover: #7493a5; // used on pill hover states
+$modes-color-status-custom-slate-hover-alt: #13222c; // used on pill hover states
+$modes-color-status-generic-default: #F0F;
+$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
+$modes-color-status-important-default-alt: #150d19; // Subtle message bg
+$modes-color-status-important-hover: #a267de; // used on pill hover states
+$modes-color-status-important-hover-alt: #231b30; // used on pill hover states and message bg
+$modes-color-status-important-inverse-default: #985FDC;
+$modes-color-status-important-inverse-default-alt: #f1e6fa; // Subtle message bg
+$modes-color-status-important-inverse-hover: #8051b8; // used on pill hover states
+$modes-color-status-important-inverse-hover-alt: #daceed; // used on pill hover states and message bg
 $modes-color-status-inactive-default: #4b4b4b; // For readonly pill bg and border
 $modes-color-status-inactive-with-default: #ffffffab; // For readonly filled pill text
 $modes-color-status-inactive-inverse-default: #a6a6a6; // For readonly pill bg and border
 $modes-color-status-inactive-inverse-with-default: #000000ab; // For readonly filled pill text
-$modes-color-status-important-default: #985FDC; // For tile status keylines to show if something is of high importance.
 $modes-color-status-info-default: #007ED9;
 $modes-color-status-info-default-alt: #111722; // Subtle message bg
 $modes-color-status-info-hover: #4f90df; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #00811F; // For pills and messages
 $modes-color-status-positive-inverse-default-alt: #e9f2e8; // Subtle message bg
 $modes-color-status-positive-inverse-hover: #0e6d1d; // used on pill hover states 
 $modes-color-status-positive-inverse-hover-alt: #cbe1c9; // used on pill hover states and message bg
-$modes-color-status-callout-default-alt: #122211; // used for marketing banners
-$modes-color-status-callout-hover-alt: #263525; // marketing banner hover
 $modes-color-status-reviews-default: #00D639;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
 $modes-color-status-reviews-hover: #17b333; // used on pill hover states

package/scss/product/small/light.scss

@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #FFFFFF;
 $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
 $modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-$modes-color-status-generic-default: #007c7b; // used in progress bar 
+$modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
+$modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
 $modes-color-status-caution-default: #D64309; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
 $modes-color-status-caution-hover: #b33b0d; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #000000;
 $modes-color-status-content-inverse-with-default-alt: #fffffff2;
 $modes-color-status-content-inverse-with-hover: #000000; // for pill hover X
 $modes-color-status-content-inverse-with-hover-alt: #FFFFFF; // for message text
+$modes-color-status-custom-blue-default: #0071C3; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-blue-default-alt: #ebf0f9; // Pill bg
+$modes-color-status-custom-blue-hover: #135fa3; // used on pill hover states
+$modes-color-status-custom-blue-hover-alt: #ced9ed; // used on pill hover states
+$modes-color-status-custom-teal-default: #007C7B; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-teal-default-alt: #e9f1f1; // Pill bg
+$modes-color-status-custom-teal-hover: #0e6968; // used on pill hover states
+$modes-color-status-custom-teal-hover-alt: #c4dde0; // used on pill hover states
+$modes-color-status-custom-green-default: #00811F; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-green-default-alt: #e9f2e8; // Pill bg
+$modes-color-status-custom-green-hover: #0e6d1d; // used on pill hover states
+$modes-color-status-custom-green-hover-alt: #c4decf; // used on pill hover states
+$modes-color-status-custom-lime-default: #637700; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-lime-default-alt: #eff1e6; // Pill bg
+$modes-color-status-custom-lime-hover: #546408; // used on pill hover states
+$modes-color-status-custom-lime-hover-alt: #cdddc9; // used on pill hover states
+$modes-color-status-custom-orange-default: #C54300; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-orange-default-alt: #feece5; // Pill bg
+$modes-color-status-custom-orange-hover: #a53a06; // used on pill hover states
+$modes-color-status-custom-orange-hover-alt: #f2d0ce; // used on pill hover states
+$modes-color-status-custom-red-default: #DC004E; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-red-default-alt: #ffebec; // Pill bg
+$modes-color-status-custom-red-hover: #b81242; // used on pill hover states
+$modes-color-status-custom-red-hover-alt: #f1cfd9; // used on pill hover states
+$modes-color-status-custom-pink-default: #C8269A; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-pink-default-alt: #fcecf5; // Pill bg
+$modes-color-status-custom-pink-hover: #a82581; // used on pill hover states
+$modes-color-status-custom-pink-hover-alt: #ead2e5; // used on pill hover states
+$modes-color-status-custom-purple-default: #8F4CD7; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-purple-default-alt: #f5edfc; // Pill bg
+$modes-color-status-custom-purple-hover: #7941b4; // used on pill hover states
+$modes-color-status-custom-purple-hover-alt: #ded4ee; // used on pill hover states
+$modes-color-status-custom-gray-default: #6F6F6F; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-gray-default-alt: #f0f0f0; // Pill bg
+$modes-color-status-custom-gray-hover: #5e5e5e; // used on pill hover states
+$modes-color-status-custom-gray-hover-alt: #d3d9e5; // used on pill hover states
+$modes-color-status-custom-slate-default: #527386; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-slate-default-alt: #edf0f2; // Pill bg
+$modes-color-status-custom-slate-hover: #466171; // used on pill hover states
+$modes-color-status-custom-slate-hover-alt: #cbdae6; // used on pill hover states
+$modes-color-status-generic-default: #F0F; // TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour.
+$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
+$modes-color-status-important-default-alt: #f5edfc; // Subtle message bg
+$modes-color-status-important-hover: #7941b4; // used on pill hover states
+$modes-color-status-important-hover-alt: #ded4ee; // used on pill hover states and message bg
+$modes-color-status-important-inverse-default: #985FDC;
+$modes-color-status-important-inverse-default-alt: #1b1422; // Subtle message bg
+$modes-color-status-important-inverse-hover: #a977e2; // used on pill hover states
+$modes-color-status-important-inverse-hover-alt: #282039; // used on pill hover states and message bg
 $modes-color-status-inactive-default: #a6a6a6; // For readonly pill bg and border
 $modes-color-status-inactive-with-default: #000000ab; // For readonly filled pill text
 $modes-color-status-inactive-inverse-default: #4b4b4b; // For readonly pill bg and border
 $modes-color-status-inactive-inverse-with-default: #ffffffab; // For readonly filled pill text
-$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
 $modes-color-status-info-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
 $modes-color-status-info-hover: #10518c; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #009023;
 $modes-color-status-positive-inverse-default-alt: #0e1a0b; // Subtle message bg
 $modes-color-status-positive-inverse-hover: #328e37; // used on pill hover states
 $modes-color-status-positive-inverse-hover-alt: #132912; // used on pill hover states and message bg
-$modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
-$modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
 $modes-color-status-reviews-default: #00811F;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
 $modes-color-status-reviews-hover: #0e6d1d;