@telefonica/mistica 17.0.0 → 17.2.0

package/css/blau.css

@@ -37,10 +37,11 @@
     --mistica-blau-blauYellow40: #ffc364;
 
     /* Raw palette colors, for use with rgba() */
-    --mistica-blau-raw-blauBlueSecondary: 0, 114, 188;
+    --mistica-blau-raw-blauBluePrimary: 0, 182, 241;
     --mistica-blau-raw-darkModeBlack: 25, 25, 25;
-    --mistica-blau-raw-grey6: 0, 0, 0;
     --mistica-blau-raw-white: 255, 255, 255;
+    --mistica-blau-raw-blauBlueSecondary: 0, 114, 188;
+    --mistica-blau-raw-grey6: 0, 0, 0;
     --mistica-blau-raw-darkModeGrey: 36, 36, 36;
     --mistica-blau-raw-blauRed: 209, 41, 55;
     --mistica-blau-raw-blauPurple: 120, 20, 179;
@@ -48,6 +49,15 @@
     /* Colors */
     --mistica-color-background: var(--mistica-blau-white);
     --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-blau-raw-darkModeBlack), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-blau-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-blau-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-blau-raw-white), 0.35);
     --mistica-color-backgroundBrand: var(--mistica-blau-blauBluePrimary);
     --mistica-color-backgroundNegative: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-backgroundBrandSecondary: var(--mistica-blau-blauBluePrimary);
@@ -107,6 +117,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-blau-raw-white), 0.15);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-blau-raw-white), 0.15);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-blau-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-blau-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-blau-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-blau-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-blau-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-blau-white);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-blau-grey1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-blau-white);
@@ -170,6 +187,11 @@
     --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
     --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
     --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+    --mistica-color-textLinkNeutral: var(--mistica-blau-grey6);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-blau-grey6);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-blau-grey6);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-blau-grey6);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-blau-grey6);
     --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-textBrand: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-inputBorder: var(--mistica-blau-grey4);
@@ -346,10 +368,10 @@
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 8px;
-    --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 8px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 8px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -438,6 +460,15 @@
 [data-mistica-skin='blau'][data-mistica-color-scheme='dark'] {
     --mistica-color-background: var(--mistica-blau-darkModeBlack);
     --mistica-color-backgroundAlternative: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.33);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.33);
     --mistica-color-backgroundBrand: var(--mistica-blau-darkModeBlack);
     --mistica-color-backgroundNegative: var(--mistica-blau-darkModeBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-blau-darkModeBlack);
@@ -497,6 +528,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-blau-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-blau-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-blau-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-blau-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-blau-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-blau-blauBlueSecondary);
@@ -560,6 +598,11 @@
     --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
     --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
     --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+    --mistica-color-textLinkNeutral: var(--mistica-blau-grey2);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-blau-grey2);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-blau-grey2);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-blau-grey2);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-blau-white);
     --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
     --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
     --mistica-color-inputBorder: var(--mistica-blau-darkModeGrey5);
@@ -731,6 +774,18 @@
     [data-mistica-skin='blau'] {
         --mistica-color-background: var(--mistica-blau-darkModeBlack);
         --mistica-color-backgroundAlternative: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.33);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.33);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.18);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.25);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(
+            var(--mistica-blau-raw-blauBluePrimary),
+            0.33
+        );
         --mistica-color-backgroundBrand: var(--mistica-blau-darkModeBlack);
         --mistica-color-backgroundNegative: var(--mistica-blau-darkModeBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-blau-darkModeBlack);
@@ -796,6 +851,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-blau-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-blau-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-blau-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-blau-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-blau-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-blau-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.08);
         --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-blau-blauBlueSecondary);
@@ -859,6 +921,11 @@
         --mistica-color-textLinkDanger: var(--mistica-blau-blauRed40);
         --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
         --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+        --mistica-color-textLinkNeutral: var(--mistica-blau-grey2);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-blau-grey2);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-blau-grey2);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-blau-grey2);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-blau-white);
         --mistica-color-textActivated: var(--mistica-blau-blauBluePrimary);
         --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
         --mistica-color-inputBorder: var(--mistica-blau-darkModeGrey5);
@@ -1029,6 +1096,15 @@
     [data-mistica-skin='blau'][data-mistica-color-scheme='light'] {
         --mistica-color-background: var(--mistica-blau-white);
         --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-blau-raw-darkModeBlack), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-blau-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-blau-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-blau-raw-white), 0.35);
         --mistica-color-backgroundBrand: var(--mistica-blau-blauBluePrimary);
         --mistica-color-backgroundNegative: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-backgroundBrandSecondary: var(--mistica-blau-blauBluePrimary);
@@ -1088,6 +1164,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-blau-raw-white), 0.15);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-blau-raw-white), 0.15);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-blau-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-blau-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-blau-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-blau-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-blau-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-blau-white);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-blau-grey1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-blau-white);
@@ -1151,6 +1234,11 @@
         --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
         --mistica-color-textLinkDangerMedia: var(--mistica-blau-blauRed);
         --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+        --mistica-color-textLinkNeutral: var(--mistica-blau-grey6);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-blau-grey6);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-blau-grey6);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-blau-grey6);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-blau-grey6);
         --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-textBrand: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-inputBorder: var(--mistica-blau-grey4);

package/css/esimflag.css

@@ -17,10 +17,10 @@
     --mistica-esimflag-blue15: #ccdeff;
     --mistica-esimflag-blue10: #e5efff;
     --mistica-esimflag-blue30: #80adff;
+    --mistica-esimflag-blue85: #001740;
     --mistica-esimflag-grey4: #828d9b;
     --mistica-esimflag-blue20: #b2ceff;
     --mistica-esimflag-tomato: #fa4549;
-    --mistica-esimflag-blue85: #001740;
     --mistica-esimflag-grass: #99d52a;
     --mistica-esimflag-peach: #ff9800;
     --mistica-esimflag-teal75: #197980;
@@ -34,7 +34,7 @@
     --mistica-esimflag-purple30: #d1a1e3;
     --mistica-esimflag-chili: #fa4549;
     --mistica-esimflag-purple55: #8b3aa8;
-    --mistica-esimflag-grass75: #5c8019;
+    --mistica-esimflag-grass75: #567718;
     --mistica-esimflag-teal10: #d5f8fb;
     --mistica-esimflag-darkModeBlack: #00001c;
     --mistica-esimflag-darkModeGrey: #08132b;
@@ -43,16 +43,27 @@
     --mistica-esimflag-darkModeBlue: #0f67ff;
 
     /* Raw palette colors, for use with rgba() */
+    --mistica-esimflag-raw-blue: 0, 92, 255;
     --mistica-esimflag-raw-blue55: 0, 78, 217;
+    --mistica-esimflag-raw-white: 255, 255, 255;
     --mistica-esimflag-raw-darkModeBlack: 0, 0, 28;
     --mistica-esimflag-raw-black: 0, 9, 26;
-    --mistica-esimflag-raw-white: 255, 255, 255;
     --mistica-esimflag-raw-purple55: 139, 58, 168;
+    --mistica-esimflag-raw-grey3: 204, 214, 229;
     --mistica-esimflag-raw-darkModeGrey: 8, 19, 43;
 
     /* Colors */
     --mistica-color-background: var(--mistica-esimflag-white);
     --mistica-color-backgroundAlternative: var(--mistica-esimflag-grey1);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-esimflag-raw-blue), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-esimflag-raw-blue), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-esimflag-raw-blue), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-esimflag-raw-blue55), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-esimflag-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.35);
     --mistica-color-backgroundBrand: linear-gradient(
         180deg,
         var(--mistica-esimflag-blue55) 0%,
@@ -118,6 +129,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-esimflag-raw-grey3), 0.4);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-esimflag-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-esimflag-grey2);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-esimflag-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-esimflag-grey2);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-esimflag-grey2);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-esimflag-grey2);
     --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-esimflag-white);
@@ -178,9 +196,14 @@
     --mistica-color-textLinkNegative: var(--mistica-esimflag-white);
     --mistica-color-textLinkBrand: var(--mistica-esimflag-white);
     --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
-    --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
-    --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
+    --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato60);
+    --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato60);
     --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
+    --mistica-color-textLinkNeutral: var(--mistica-esimflag-blue85);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-esimflag-blue85);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-esimflag-blue85);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-esimflag-blue85);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-esimflag-blue85);
     --mistica-color-textActivated: var(--mistica-esimflag-blue);
     --mistica-color-textBrand: var(--mistica-esimflag-blue);
     --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
@@ -251,7 +274,7 @@
     --mistica-color-success: var(--mistica-esimflag-grass);
     --mistica-color-warning: var(--mistica-esimflag-peach);
     --mistica-color-error: var(--mistica-esimflag-tomato);
-    --mistica-color-textError: var(--mistica-esimflag-tomato55);
+    --mistica-color-textError: var(--mistica-esimflag-tomato60);
     --mistica-color-textErrorInverse: var(--mistica-esimflag-white);
     --mistica-color-textErrorNegative: var(--mistica-esimflag-white);
     --mistica-color-textErrorBrand: var(--mistica-esimflag-white);
@@ -361,10 +384,10 @@
     --mistica-border-radius-chip: 8px;
     --mistica-border-radius-tag: 8px;
     --mistica-border-radius-input: 16px;
-    --mistica-border-radius-legacyDisplay: 20px;
     --mistica-border-radius-popup: 16px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 16px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -453,6 +476,15 @@
 [data-mistica-skin='esimflag'][data-mistica-color-scheme='dark'] {
     --mistica-color-background: var(--mistica-esimflag-darkModeBlack);
     --mistica-color-backgroundAlternative: var(--mistica-esimflag-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
     --mistica-color-backgroundBrand: var(--mistica-esimflag-darkModeBlack);
     --mistica-color-backgroundNegative: var(--mistica-esimflag-darkModeBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-darkModeBlack);
@@ -491,9 +523,9 @@
     --mistica-color-borderSelected: var(--mistica-esimflag-blue);
     --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
     --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
-    --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
-    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
-    --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
+    --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato60);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
     --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
     --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-esimflag-raw-white), 0);
     --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-esimflag-raw-white), 0);
@@ -508,6 +540,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-esimflag-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-esimflag-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-esimflag-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-esimflag-blue);
@@ -569,8 +608,13 @@
     --mistica-color-textLinkBrand: var(--mistica-esimflag-purple30);
     --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
     --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
-    --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
+    --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato60);
     --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
+    --mistica-color-textLinkNeutral: var(--mistica-esimflag-grey3);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-esimflag-grey3);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-esimflag-grey3);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-esimflag-grey3);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-esimflag-white);
     --mistica-color-textActivated: var(--mistica-esimflag-blue30);
     --mistica-color-textBrand: var(--mistica-esimflag-blue30);
     --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
@@ -629,7 +673,7 @@
     --mistica-color-neutralLow: var(--mistica-esimflag-grey6);
     --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey6);
     --mistica-color-textPrimary: var(--mistica-esimflag-grey3);
-    --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey3);
+    --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey2);
     --mistica-color-textPrimaryNegative: var(--mistica-esimflag-grey3);
     --mistica-color-textPrimaryBrand: var(--mistica-esimflag-grey3);
     --mistica-color-textPrimaryMedia: var(--mistica-esimflag-white);
@@ -746,6 +790,15 @@
     [data-mistica-skin='esimflag'] {
         --mistica-color-background: var(--mistica-esimflag-darkModeBlack);
         --mistica-color-backgroundAlternative: var(--mistica-esimflag-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-esimflag-raw-blue), 0.18);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-esimflag-raw-blue), 0.25);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-esimflag-raw-blue), 0.33);
         --mistica-color-backgroundBrand: var(--mistica-esimflag-darkModeBlack);
         --mistica-color-backgroundNegative: var(--mistica-esimflag-darkModeBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-esimflag-darkModeBlack);
@@ -784,9 +837,9 @@
         --mistica-color-borderSelected: var(--mistica-esimflag-blue);
         --mistica-color-coverBackgroundHover: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.25);
         --mistica-color-coverBackgroundPressed: rgba(var(--mistica-esimflag-raw-darkModeBlack), 0.35);
-        --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato);
-        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato55);
-        --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato55);
+        --mistica-color-buttonDangerBackground: var(--mistica-esimflag-tomato55);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-esimflag-tomato60);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-esimflag-tomato60);
         --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-esimflag-raw-white), 0);
         --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-esimflag-raw-white), 0);
         --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-esimflag-raw-white), 0);
@@ -807,6 +860,22 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-esimflag-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(
+            var(--mistica-esimflag-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-esimflag-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
+            var(--mistica-esimflag-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-esimflag-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(
+            var(--mistica-esimflag-raw-white),
+            0.08
+        );
         --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-blue);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-esimflag-blue);
@@ -874,8 +943,13 @@
         --mistica-color-textLinkBrand: var(--mistica-esimflag-purple30);
         --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
         --mistica-color-textLinkDanger: var(--mistica-esimflag-chili);
-        --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
+        --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato60);
         --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
+        --mistica-color-textLinkNeutral: var(--mistica-esimflag-grey3);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-esimflag-grey3);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-esimflag-grey3);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-esimflag-grey3);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-esimflag-white);
         --mistica-color-textActivated: var(--mistica-esimflag-blue30);
         --mistica-color-textBrand: var(--mistica-esimflag-blue30);
         --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
@@ -934,7 +1008,7 @@
         --mistica-color-neutralLow: var(--mistica-esimflag-grey6);
         --mistica-color-neutralLowAlternative: var(--mistica-esimflag-grey6);
         --mistica-color-textPrimary: var(--mistica-esimflag-grey3);
-        --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey3);
+        --mistica-color-textPrimaryInverse: var(--mistica-esimflag-grey2);
         --mistica-color-textPrimaryNegative: var(--mistica-esimflag-grey3);
         --mistica-color-textPrimaryBrand: var(--mistica-esimflag-grey3);
         --mistica-color-textPrimaryMedia: var(--mistica-esimflag-white);
@@ -1050,6 +1124,15 @@
     [data-mistica-skin='esimflag'][data-mistica-color-scheme='light'] {
         --mistica-color-background: var(--mistica-esimflag-white);
         --mistica-color-backgroundAlternative: var(--mistica-esimflag-grey1);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-esimflag-raw-blue), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-esimflag-raw-blue), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-esimflag-raw-blue), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-esimflag-raw-blue55), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-esimflag-raw-blue55), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-esimflag-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-esimflag-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.35);
         --mistica-color-backgroundBrand: linear-gradient(
             180deg,
             var(--mistica-esimflag-blue55) 0%,
@@ -1115,6 +1198,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-esimflag-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-esimflag-raw-grey3), 0.4);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-esimflag-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-esimflag-grey2);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-esimflag-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-esimflag-grey2);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-esimflag-grey2);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-esimflag-grey2);
         --mistica-color-buttonPrimaryBackground: var(--mistica-esimflag-blue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-esimflag-white);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-esimflag-white);
@@ -1181,9 +1271,14 @@
         --mistica-color-textLinkNegative: var(--mistica-esimflag-white);
         --mistica-color-textLinkBrand: var(--mistica-esimflag-white);
         --mistica-color-textLinkMedia: var(--mistica-esimflag-white);
-        --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato55);
-        --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato55);
+        --mistica-color-textLinkDanger: var(--mistica-esimflag-tomato60);
+        --mistica-color-textLinkDangerMedia: var(--mistica-esimflag-tomato60);
         --mistica-color-textLinkSnackbar: var(--mistica-esimflag-blue30);
+        --mistica-color-textLinkNeutral: var(--mistica-esimflag-blue85);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-esimflag-blue85);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-esimflag-blue85);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-esimflag-blue85);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-esimflag-blue85);
         --mistica-color-textActivated: var(--mistica-esimflag-blue);
         --mistica-color-textBrand: var(--mistica-esimflag-blue);
         --mistica-color-inputBorder: var(--mistica-esimflag-grey4);
@@ -1254,7 +1349,7 @@
         --mistica-color-success: var(--mistica-esimflag-grass);
         --mistica-color-warning: var(--mistica-esimflag-peach);
         --mistica-color-error: var(--mistica-esimflag-tomato);
-        --mistica-color-textError: var(--mistica-esimflag-tomato55);
+        --mistica-color-textError: var(--mistica-esimflag-tomato60);
         --mistica-color-textErrorInverse: var(--mistica-esimflag-white);
         --mistica-color-textErrorNegative: var(--mistica-esimflag-white);
         --mistica-color-textErrorBrand: var(--mistica-esimflag-white);