@7shifts/sous-chef 3.77.0-beta.1 → 3.77.0-beta.2

package/dist/actions/Button/constants.d.ts

@@ -7,6 +7,7 @@ export declare const BUTTON_THEMES: {
     PRIMARY: "primary";
     DANGER: "danger";
     UPSELL: "upsell";
+    MARKETING: "marketing";
     HOLLOW: "hollow";
     HOLLOW_CONTRAST: "hollow-contrast";
     LINK_PRIMARY: "link-primary";

package/dist/actions/Button/types.d.ts

@@ -1,4 +1,4 @@
-export type ButtonTheme = 'default' | 'primary' | 'danger' | 'upsell' | 'hollow' | 'hollow-contrast' | 'link-primary' | 'link-danger' | 'link-upsell' | 'link-toolbar' | 'link-contrast' | 'link-icon';
+export type ButtonTheme = 'default' | 'primary' | 'danger' | 'upsell' | 'marketing' | 'hollow' | 'hollow-contrast' | 'link-primary' | 'link-danger' | 'link-upsell' | 'link-toolbar' | 'link-contrast' | 'link-icon';
 export type ButtonSize = 'full-width' | 'min-width-100';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonTarget = '_blank' | '_self';

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -1,4 +1,66 @@
 export declare const COLORS: {
+    readonly white: "var(--color-white)";
+    readonly black: "var(--color-black)";
+    readonly 'tangerine-100': "var(--color-tangerine-100)";
+    readonly 'tangerine-200': "var(--color-tangerine-200)";
+    readonly 'tangerine-300': "var(--color-tangerine-300)";
+    readonly 'tangerine-400': "var(--color-tangerine-400)";
+    readonly 'tangerine-500': "var(--color-tangerine-500)";
+    readonly 'tangerine-600': "var(--color-tangerine-600)";
+    readonly 'eggplant-100': "var(--color-eggplant-100)";
+    readonly 'eggplant-200': "var(--color-eggplant-200)";
+    readonly 'eggplant-300': "var(--color-eggplant-300)";
+    readonly 'eggplant-400': "var(--color-eggplant-400)";
+    readonly 'eggplant-500': "var(--color-eggplant-500)";
+    readonly 'eggplant-600': "var(--color-eggplant-600)";
+    readonly 'mint-100': "var(--color-mint-100)";
+    readonly 'mint-200': "var(--color-mint-200)";
+    readonly 'mint-300': "var(--color-mint-300)";
+    readonly 'mint-400': "var(--color-mint-400)";
+    readonly 'mint-500': "var(--color-mint-500)";
+    readonly 'mint-600': "var(--color-mint-600)";
+    readonly 'radish-100': "var(--color-radish-100)";
+    readonly 'radish-200': "var(--color-radish-200)";
+    readonly 'radish-300': "var(--color-radish-300)";
+    readonly 'radish-400': "var(--color-radish-400)";
+    readonly 'radish-500': "var(--color-radish-500)";
+    readonly 'radish-600': "var(--color-radish-600)";
+    readonly 'blueberry-100': "var(--color-blueberry-100)";
+    readonly 'blueberry-200': "var(--color-blueberry-200)";
+    readonly 'blueberry-300': "var(--color-blueberry-300)";
+    readonly 'blueberry-400': "var(--color-blueberry-400)";
+    readonly 'blueberry-500': "var(--color-blueberry-500)";
+    readonly 'blueberry-600': "var(--color-blueberry-600)";
+    readonly 'banana-100': "var(--color-banana-100)";
+    readonly 'banana-200': "var(--color-banana-200)";
+    readonly 'banana-300': "var(--color-banana-300)";
+    readonly 'banana-400': "var(--color-banana-400)";
+    readonly 'banana-500': "var(--color-banana-500)";
+    readonly 'banana-600': "var(--color-banana-600)";
+    readonly 'grey-100': "var(--color-grey-100)";
+    readonly 'grey-200': "var(--color-grey-200)";
+    readonly 'grey-300': "var(--color-grey-300)";
+    readonly 'grey-400': "var(--color-grey-400)";
+    readonly 'grey-500': "var(--color-grey-500)";
+    readonly 'grey-600': "var(--color-grey-600)";
+    readonly 'oat-100': "var(--color-oat-100)";
+    readonly 'oat-200': "var(--color-oat-200)";
+    readonly 'oat-300': "var(--color-oat-300)";
+    readonly 'oat-400': "var(--color-oat-400)";
+    readonly 'oat-500': "var(--color-oat-500)";
+    readonly 'oat-600': "var(--color-oat-600)";
+    readonly 'lime-100': "var(--color-lime-100)";
+    readonly 'lime-200': "var(--color-lime-200)";
+    readonly 'lime-300': "var(--color-lime-300)";
+    readonly 'lime-400': "var(--color-lime-400)";
+    readonly 'lime-500': "var(--color-lime-500)";
+    readonly 'lime-600': "var(--color-lime-600)";
+    readonly 'blackberry-100': "var(--color-blackberry-100)";
+    readonly 'blackberry-200': "var(--color-blackberry-200)";
+    readonly 'blackberry-300': "var(--color-blackberry-300)";
+    readonly 'blackberry-400': "var(--color-blackberry-400)";
+    readonly 'blackberry-500': "var(--color-blackberry-500)";
+    readonly 'blackberry-600': "var(--color-blackberry-600)";
     readonly 'surface-color-dim': "var(--color-surface-color-dim)";
     readonly 'surface-color': "var(--color-surface-color)";
     readonly 'surface-on-color-disabled': "var(--color-surface-on-color-disabled)";
@@ -15,6 +77,7 @@ export declare const COLORS: {
     readonly 'surface-on-inverse': "var(--color-surface-on-inverse)";
     readonly outline: "var(--color-outline)";
     readonly 'outline-variant': "var(--color-outline-variant)";
+    readonly 'outline-inverse': "var(--color-outline-inverse)";
     readonly 'primary-color': "var(--color-primary-color)";
     readonly 'primary-on-color': "var(--color-primary-on-color)";
     readonly 'primary-color-variant': "var(--color-primary-color-variant)";
@@ -40,6 +103,7 @@ export declare const COLORS: {
     readonly 'success-container': "var(--color-success-container)";
     readonly 'success-on-container': "var(--color-success-on-container)";
     readonly 'success-container-variant': "var(--color-success-container-variant)";
+    readonly 'success-on-container-variant': "var(--color-success-on-container-variant)";
     readonly 'danger-color': "var(--color-danger-color)";
     readonly 'danger-on-color': "var(--color-danger-on-color)";
     readonly 'danger-container': "var(--color-danger-container)";

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'outline' | 'outline-variant' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant';

package/dist/index.css

@@ -45,6 +45,130 @@
   --p-font-weight-bold: 600;
 }
 :root {
+  --color-white: #fff;
+  --color-white-rgb: 255, 255, 255;
+  --color-black: #000;
+  --color-black-rgb: 0, 0, 0;
+  --color-tangerine-100: #fef1ed;
+  --color-tangerine-100-rgb: 254, 241, 237;
+  --color-tangerine-200: #fdd5c8;
+  --color-tangerine-200-rgb: 253, 213, 200;
+  --color-tangerine-300: #fcab91;
+  --color-tangerine-300-rgb: 252, 171, 145;
+  --color-tangerine-400: #ff6808;
+  --color-tangerine-400-rgb: 255, 104, 8;
+  --color-tangerine-500: #cf5406;
+  --color-tangerine-500-rgb: 207, 84, 6;
+  --color-tangerine-600: #95400a;
+  --color-tangerine-600-rgb: 149, 64, 10;
+  --color-eggplant-100: #f8f3ff;
+  --color-eggplant-100-rgb: 248, 243, 255;
+  --color-eggplant-200: #ebdcff;
+  --color-eggplant-200-rgb: 235, 220, 255;
+  --color-eggplant-300: #d9bff4;
+  --color-eggplant-300-rgb: 217, 191, 244;
+  --color-eggplant-400: #c293f1;
+  --color-eggplant-400-rgb: 194, 147, 241;
+  --color-eggplant-500: #846db3;
+  --color-eggplant-500-rgb: 132, 109, 179;
+  --color-eggplant-600: #453e75;
+  --color-eggplant-600-rgb: 69, 62, 117;
+  --color-mint-100: #ecfaf8;
+  --color-mint-100-rgb: 236, 250, 248;
+  --color-mint-200: #c6f1eb;
+  --color-mint-200-rgb: 198, 241, 235;
+  --color-mint-300: #8de4d7;
+  --color-mint-300-rgb: 141, 228, 215;
+  --color-mint-400: #3abda9;
+  --color-mint-400-rgb: 58, 189, 169;
+  --color-mint-500: #35ac9a;
+  --color-mint-500-rgb: 53, 172, 154;
+  --color-mint-600: #1d5e54;
+  --color-mint-600-rgb: 29, 94, 84;
+  --color-radish-100: #fcf0f0;
+  --color-radish-100-rgb: 252, 240, 240;
+  --color-radish-200: #f7d1d1;
+  --color-radish-200-rgb: 247, 209, 209;
+  --color-radish-300: #f0a3a3;
+  --color-radish-300-rgb: 240, 163, 163;
+  --color-radish-400: #e76767;
+  --color-radish-400-rgb: 231, 103, 103;
+  --color-radish-500: #d33434;
+  --color-radish-500-rgb: 211, 52, 52;
+  --color-radish-600: #793133;
+  --color-radish-600-rgb: 121, 49, 49;
+  --color-blueberry-100: #f6fdff;
+  --color-blueberry-100-rgb: 246, 253, 255;
+  --color-blueberry-200: #ceecf5;
+  --color-blueberry-200-rgb: 206, 236, 245;
+  --color-blueberry-300: #9cd9eb;
+  --color-blueberry-300-rgb: 156, 217, 235;
+  --color-blueberry-400: #5bc0de;
+  --color-blueberry-400-rgb: 91, 192, 222;
+  --color-blueberry-500: #51acc7;
+  --color-blueberry-500-rgb: 81, 172, 199;
+  --color-blueberry-600: #2c5d6b;
+  --color-blueberry-600-rgb: 44, 93, 107;
+  --color-banana-100: #fff9ed;
+  --color-banana-100-rgb: 255, 249, 237;
+  --color-banana-200: #ffeec9;
+  --color-banana-200-rgb: 255, 238, 201;
+  --color-banana-300: #ffdd92;
+  --color-banana-300-rgb: 255, 221, 146;
+  --color-banana-400: #f7ba11;
+  --color-banana-400-rgb: 247, 186, 17;
+  --color-banana-500: #bf9436;
+  --color-banana-500-rgb: 191, 148, 54;
+  --color-banana-600: #765f2c;
+  --color-banana-600-rgb: 118, 95, 44;
+  --color-grey-100: #f3f3f3;
+  --color-grey-100-rgb: 243, 243, 243;
+  --color-grey-200: #d5d5d5;
+  --color-grey-200-rgb: 213, 213, 213;
+  --color-grey-300: #949494;
+  --color-grey-300-rgb: 148, 148, 148;
+  --color-grey-400: #767676;
+  --color-grey-400-rgb: 118, 118, 118;
+  --color-grey-500: #464646;
+  --color-grey-500-rgb: 70, 70, 70;
+  --color-grey-600: #323232;
+  --color-grey-600-rgb: 50, 50, 50;
+  --color-oat-100: #f1f0ec;
+  --color-oat-100-rgb: 241, 240, 236;
+  --color-oat-200: #e2ded6;
+  --color-oat-200-rgb: 226, 222, 214;
+  --color-oat-300: #c7c0b2;
+  --color-oat-300-rgb: 199, 192, 178;
+  --color-oat-400: #6e6d6c;
+  --color-oat-400-rgb: 110, 109, 108;
+  --color-oat-500: #4c4b49;
+  --color-oat-500-rgb: 76, 75, 73;
+  --color-oat-600: #383430;
+  --color-oat-600-rgb: 56, 52, 48;
+  --color-lime-100: #efffe0;
+  --color-lime-100-rgb: 239, 255, 224;
+  --color-lime-200: #c6ff94;
+  --color-lime-200-rgb: 198, 255, 148;
+  --color-lime-300: #81ffac;
+  --color-lime-300-rgb: 129, 255, 172;
+  --color-lime-400: #00feb2;
+  --color-lime-400-rgb: 0, 254, 178;
+  --color-lime-500: #3fb994;
+  --color-lime-500-rgb: 63, 185, 148;
+  --color-lime-600: #244f47;
+  --color-lime-600-rgb: 36, 79, 71;
+  --color-blackberry-100: #ecf0ff;
+  --color-blackberry-100-rgb: 236, 240, 255;
+  --color-blackberry-200: #d6e0ff;
+  --color-blackberry-200-rgb: 214, 224, 255;
+  --color-blackberry-300: #a0bbff;
+  --color-blackberry-300-rgb: 160, 187, 255;
+  --color-blackberry-400: #4570ff;
+  --color-blackberry-400-rgb: 69, 112, 255;
+  --color-blackberry-500: #1c5cbb;
+  --color-blackberry-500-rgb: 28, 92, 187;
+  --color-blackberry-600: #193f78;
+  --color-blackberry-600-rgb: 25, 63, 120;
   --color-surface-color-dim: #fafafa;
   --color-surface-color: #fff;
   --color-surface-on-color-disabled: #d5d5d5;
@@ -61,6 +185,7 @@
   --color-surface-on-inverse: #fff;
   --color-outline: #d5d5d5;
   --color-outline-variant: #949494;
+  --color-outline-inverse: #fff;
   --color-primary-color: #4570ff;
   --color-primary-on-color: #fff;
   --color-primary-color-variant: #193f78;
@@ -86,6 +211,7 @@
   --color-success-container: #c6f1eb;
   --color-success-on-container: #323232;
   --color-success-container-variant: #ecfaf8;
+  --color-success-on-container-variant: #1d5e54;
   --color-danger-color: #e76767;
   --color-danger-on-color: #fff;
   --color-danger-container: #f7d1d1;
@@ -106,7 +232,7 @@
   --color-upsell-on-container: #323232;
   --color-upsell-container-variant: #f8f3ff;
   --color-upsell-on-container-variant: #453e75;
-  --color-warning-color: #bf9436;
+  --color-warning-color: #f7ba11;
   --color-warning-on-color: #fff;
   --color-warning-container: #ffeec9;
   --color-warning-on-container: #323232;
@@ -133,10 +259,11 @@
   --color-surface-container-disabled: #464646;
   --color-surface-container-disabled-variant: #464646;
   --color-surface-on-container-disabled: #949494;
-  --color-surface-inverse: #d5d5d5;
+  --color-surface-inverse: #f3f3f3;
   --color-surface-on-inverse: #323232;
   --color-outline: #464646;
   --color-outline-variant: #767676;
+  --color-outline-inverse: #323232;
   --color-primary-color: #4570ff;
   --color-primary-on-color: #fff;
   --color-primary-color-variant: #193f78;
@@ -159,7 +286,9 @@
   --color-tertiary-on-container-variant: #323232;
   --color-success-color: #3abda9;
   --color-success-on-color: #323232;
+  --color-success-container: #1d5e54;
   --color-success-on-container: #fff;
+  --color-success-container-variant: #1d5e54;
   --color-success-on-container-variant: #8de4d7;
   --color-danger-color: #e76767;
   --color-danger-on-color: #323232;
@@ -175,13 +304,13 @@
   --color-info-on-container-variant: #9cd9eb;
   --color-upsell-color: #c293f1;
   --color-upsell-on-color: #323232;
-  --color-upsell-color-variant: #c293f1;
+  --color-upsell-color-variant: #d9bff4;
   --color-upsell-on-color-variant: #323232;
   --color-upsell-container: #453e75;
   --color-upsell-on-container: #fff;
   --color-upsell-container-variant: #453e75;
   --color-upsell-on-container-variant: #d9bff4;
-  --color-warning-color: #e5b242;
+  --color-warning-color: #f7ba11;
   --color-warning-on-color: #323232;
   --color-warning-container: #765f2c;
   --color-warning-on-container: #fff;
@@ -190,9 +319,9 @@
   --color-neutral-color: #c7c0b2;
   --color-neutral-on-color: #323232;
   --color-neutral-container: #4c4b49;
-  --color-neutral-on-container: #e2ded6;
+  --color-neutral-on-container: #fff;
   --color-neutral-container-variant: #383430;
-  --color-neutral-on-container-variant: #e2ded6;
+  --color-neutral-on-container-variant: #c7c0b2;
 }
 :root {
   --border-radius-300: 4px;
@@ -623,8 +752,8 @@ Just for future references:
   color: var(--color-primary-on-color-variant);
 }
 ._XwJWT:hover {
-  border-color: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-inverse) 5%);
-  background: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-inverse) 5%);
+  border-color: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-container) 25%);
+  background: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-container) 25%);
   color: var(--color-primary-on-color-variant);
 }
 ._XwJWT:disabled {
@@ -644,8 +773,8 @@ Just for future references:
   color: var(--color-danger-on-color);
 }
 ._gr3Dh:hover {
-  border-color: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-inverse) 5%);
-  background: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-inverse) 5%);
+  border-color: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
+  background: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
   color: var(--color-danger-on-color);
 }
 ._gr3Dh:disabled {
@@ -665,8 +794,8 @@ Just for future references:
   color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:hover {
-  border-color: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-inverse) 5%);
-  background: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-inverse) 5%);
+  border-color: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
+  background: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
   color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:disabled {
@@ -680,6 +809,27 @@ Just for future references:
   color: var(--color-surface-on-container-disabled);
 }
 
+._mI-Dx {
+  background: var(--color-secondary-color);
+  border-color: var(--color-secondary-color);
+  color: var(--color-secondary-on-color);
+}
+._mI-Dx:hover {
+  border-color: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
+  background: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
+  color: var(--color-secondary-on-color);
+}
+._mI-Dx:disabled {
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
+}
+._mI-Dx[aria-disabled=true] {
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
+}
+
 ._orywo {
   background: transparent;
   border-color: var(--color-outline);
@@ -687,7 +837,7 @@ Just for future references:
 }
 ._orywo:hover {
   border-color: var(--color-outline-variant);
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-surface-on-color-bold);
 }
 ._orywo:disabled {
@@ -703,12 +853,12 @@ Just for future references:
 
 ._obtsl {
   background: transparent;
-  border-color: var(--color-surface-on-inverse);
+  border-color: var(--color-outline-inverse);
   color: var(--color-surface-on-inverse);
 }
 ._obtsl:hover {
-  border-color: var(--color-surface-on-inverse);
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  border-color: var(--color-outline-inverse);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
   color: var(--color-surface-on-inverse);
 }
 ._obtsl:disabled {
@@ -730,7 +880,7 @@ Just for future references:
 }
 ._00jK4:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
   color: var(--color-surface-on-inverse);
   text-decoration: underline;
 }
@@ -756,7 +906,7 @@ Just for future references:
 }
 ._JPwJ7:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
@@ -782,7 +932,7 @@ Just for future references:
 }
 ._9TprN:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-danger-color);
   text-decoration: underline;
 }
@@ -808,7 +958,7 @@ Just for future references:
 }
 ._tktX-:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-upsell-color);
   text-decoration: underline;
 }
@@ -834,7 +984,7 @@ Just for future references:
 }
 ._r3SQl:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
@@ -860,7 +1010,7 @@ Just for future references:
 }
 ._oFBLN:hover {
   border-color: transparent;
-  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
   color: var(--color-surface-on-color-subtle);
   text-decoration: underline;
 }
@@ -1216,7 +1366,7 @@ Just for future references:
   background: var(--color-info-container-variant);
 }
 ._CRmFE ._T80if {
-  color: rgb(var(--color-info-on-container-variant));
+  color: var(--color-info-on-container-variant);
   padding-top: 10px;
 }
 ._CRmFE ._uJl2Y {
@@ -1227,7 +1377,7 @@ Just for future references:
   background: var(--color-success-container-variant);
 }
 ._PgpTw ._T80if {
-  color: rgb(var(--color-success-on-container-variant));
+  color: var(--color-success-on-container-variant);
   padding-top: 10px;
 }
 ._PgpTw ._uJl2Y {
@@ -1238,7 +1388,7 @@ Just for future references:
   background: var(--color-danger-container-variant);
 }
 ._O-lNW ._T80if {
-  color: rgb(var(--color-danger-on-container-variant));
+  color: var(--color-danger-on-container-variant);
   padding-top: 10px;
 }
 ._O-lNW ._uJl2Y {
@@ -1249,7 +1399,7 @@ Just for future references:
   background: var(--color-warning-container-variant);
 }
 ._fICdJ ._T80if {
-  color: rgb(var(--color-warning-on-container-variant));
+  color: var(--color-warning-on-container-variant);
   padding-top: 10px;
 }
 ._fICdJ ._uJl2Y {
@@ -1260,7 +1410,7 @@ Just for future references:
   background: var(--color-upsell-container-variant);
 }
 ._kUB2k ._T80if {
-  color: rgb(var(--color-upsell-on-container-variant));
+  color: var(--color-upsell-on-container-variant);
   padding-top: 10px;
 }
 ._kUB2k ._uJl2Y {
@@ -1409,6 +1559,7 @@ h5._6SgoN {
   font-size: var(--font-size-700);
   line-height: var(--font-line-height-700);
   font-weight: var(--p-font-weight-semibold);
+  color: var(--color-surface-on-color-bold);
 }
 ._yZbuO {
   font-family: var(--font-family-body);
@@ -1583,6 +1734,9 @@ h5._6SgoN {
   cursor: auto;
   color: var(--color-surface-on-color-disabled);
 }
+._0OB5b svg {
+  color: var(--color-surface-on-color-disabled) !important;
+}
 ._0OB5b ._xS6fS {
   color: var(--color-surface-on-color-disabled);
 }
@@ -1843,7 +1997,7 @@ h5._6SgoN {
   padding: 0 6px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-secondary-on-color);
+  border: 1px solid var(--color-surface-color);
 }
 ._RXV4h svg {
   fill: var(--color-secondary-on-color);
@@ -1996,7 +2150,7 @@ h5._6SgoN {
 ._et9Fs {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container);
+  --rdp-accent-color: var(--color-primary-container-variant);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
@@ -2042,7 +2196,7 @@ h5._6SgoN {
 }
 
 ._X7MoW:not(._AeJUw) {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
   font-weight: 700;
 }
 
@@ -2062,8 +2216,8 @@ h5._6SgoN {
 }
 
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled) {
-  background-color: var(--color-primary-container);
-  color: var(--color-primary-color);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-primary-on-container-variant);
   opacity: 1;
 }
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled):hover {
@@ -2079,7 +2233,7 @@ h5._6SgoN {
 ._QLSA6 {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container);
+  --rdp-accent-color: var(--color-primary-container-variant);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
@@ -2125,7 +2279,7 @@ h5._6SgoN {
 }
 
 ._Snv-V:not(._Zf-6C) {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
   font-weight: 700;
 }
 
@@ -2145,11 +2299,11 @@ h5._6SgoN {
 }
 
 ._e0lOH._e0lOH {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
   border-radius: 0;
 }
 ._e0lOH._e0lOH:hover {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
 }
 ._e0lOH._e0lOH:disabled {
   background-color: var(--color-primary-container-variant);
@@ -2159,10 +2313,10 @@ h5._6SgoN {
 ._4N7l-._4N7l- {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
 }
 ._4N7l-._4N7l-:hover {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
 }
 ._4N7l-._4N7l-:disabled {
   background-color: var(--color-primary-container-variant);
@@ -2172,10 +2326,10 @@ h5._6SgoN {
 ._fMjHG._fMjHG {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
 }
 ._fMjHG._fMjHG:hover {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
 }
 ._fMjHG._fMjHG:disabled {
   background-color: var(--color-primary-container-variant);
@@ -2481,7 +2635,7 @@ input:disabled + ._kmvBP::after {
 }
 ._ASOQd {
   background: var(--color-danger-container-variant);
-  color: var(--color-danger-color);
+  color: var(--color-danger-on-container-variant);
 }
 ._HjPNI {
   height: 100%;
@@ -3297,9 +3451,10 @@ input:disabled + ._kmvBP::after {
   justify-content: center;
   margin: -6px;
 }
-._Yti6k:hover > input:not(:disabled) ~ ._JXakU, ._Yti6k:hover > input:not(:disabled) ~ ._MsKVV {
+._Yti6k:hover > input:not(:disabled) ~ ._JXakU, ._MsKVV:hover {
   background-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
   border-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
+  cursor: pointer;
 }
 ._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU {
   background-color: color-mix(in srgb, var(--color-primary-container) 100%, var(--color-surface-inverse) 5%);
@@ -3744,7 +3899,7 @@ input:disabled + ._Yfxkl::after {
 ._SsQ7L {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container);
+  --rdp-accent-color: var(--color-primary-container-variant);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
@@ -3790,7 +3945,7 @@ input:disabled + ._Yfxkl::after {
 }
 
 ._lFzs7:not(._TjttB) {
-  color: var(--color-primary-color);
+  color: var(--color-primary-on-container-variant);
   font-weight: 700;
 }
 
@@ -5087,27 +5242,27 @@ input._TEU6N {
 }
 ._b60R5 {
   background-color: var(--color-secondary-container);
-  color: var(--color-secondary-on-container-variant);
+  color: var(--color-secondary-on-container);
 }
 ._ItVyo {
   background-color: var(--color-success-container);
-  color: var(--color-success-on-container-variant);
+  color: var(--color-success-on-container);
 }
 ._iUCAH {
   background-color: var(--color-upsell-container);
-  color: var(--color-upsell-on-container-variant);
+  color: var(--color-upsell-on-container);
 }
 ._RbXoR {
   background-color: var(--color-warning-container);
-  color: var(--color-warning-on-container-variant);
+  color: var(--color-warning-on-container);
 }
 ._NiP9z {
   background-color: var(--color-info-container);
-  color: var(--color-info-on-container-variant);
+  color: var(--color-info-on-container);
 }
 ._2ltep {
   background-color: var(--color-danger-container);
-  color: var(--color-danger-on-container-variant);
+  color: var(--color-danger-on-container);
 }
 ._vOTWZ {
   font-family: var(--font-family-body);