@telefonica/mistica 17.0.0 → 17.1.0

package/css/movistar.css

@@ -42,10 +42,11 @@
     --mistica-movistar-green400: #8dcc5b;
 
     /* Raw palette colors, for use with rgba() */
-    --mistica-movistar-raw-movistarBlack: 38, 36, 35;
-    --mistica-movistar-raw-black: 0, 0, 0;
     --mistica-movistar-raw-movistarBlue: 0, 102, 255;
+    --mistica-movistar-raw-movistarBlack: 38, 36, 35;
     --mistica-movistar-raw-white: 255, 255, 255;
+    --mistica-movistar-raw-black: 0, 0, 0;
+    --mistica-movistar-raw-darkModeMovistarBlue: 34, 122, 255;
     --mistica-movistar-raw-darkModeGrey: 21, 20, 20;
     --mistica-movistar-raw-darkModeBlack: 7, 7, 6;
     --mistica-movistar-raw-movistarWhite: 254, 250, 245;
@@ -53,6 +54,15 @@
     /* Colors */
     --mistica-color-background: var(--mistica-movistar-white);
     --mistica-color-backgroundAlternative: var(--mistica-movistar-movistarWhite);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-movistar-raw-movistarBlue), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-movistar-raw-movistarBlue), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-movistar-raw-movistarBlue), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-movistar-raw-movistarBlack), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-movistar-raw-movistarBlack), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-movistar-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.35);
     --mistica-color-backgroundBrand: var(--mistica-movistar-movistarBlue);
     --mistica-color-backgroundNegative: var(--mistica-movistar-movistarBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlack);
@@ -108,6 +118,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.3);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-movistar-grey100);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-movistar-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-movistar-grey100);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-movistar-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-movistar-grey100);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-movistar-white);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-movistar-grey100);
     --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-white);
@@ -171,6 +188,11 @@
     --mistica-color-textLinkDanger: var(--mistica-movistar-red);
     --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
     --mistica-color-textLinkSnackbar: var(--mistica-movistar-blue300);
+    --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarBlack);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarBlack);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarBlack);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarBlack);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-movistarBlack);
     --mistica-color-textActivated: var(--mistica-movistar-blueHigh);
     --mistica-color-textBrand: var(--mistica-movistar-blueHigh);
     --mistica-color-inputBorder: var(--mistica-movistar-grey500);
@@ -351,7 +373,6 @@
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 0px;
     --mistica-border-radius-input: 12px;
-    --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
@@ -443,6 +464,27 @@
 [data-mistica-skin='movistar'][data-mistica-color-scheme='dark'] {
     --mistica-color-background: var(--mistica-movistar-darkModeBlack);
     --mistica-color-backgroundAlternative: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(
+        var(--mistica-movistar-raw-darkModeMovistarBlue),
+        0.25
+    );
+    --mistica-color-backgroundSelectedBrandPressed: rgba(
+        var(--mistica-movistar-raw-darkModeMovistarBlue),
+        0.33
+    );
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(
+        var(--mistica-movistar-raw-darkModeMovistarBlue),
+        0.25
+    );
+    --mistica-color-backgroundSelectedNegativePressed: rgba(
+        var(--mistica-movistar-raw-darkModeMovistarBlue),
+        0.33
+    );
     --mistica-color-backgroundBrand: var(--mistica-movistar-darkModeBlack);
     --mistica-color-backgroundNegative: var(--mistica-movistar-darkModeBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
@@ -498,6 +540,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-movistar-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-movistar-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-movistar-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-movistarBlue);
@@ -561,6 +610,11 @@
     --mistica-color-textLinkDanger: var(--mistica-movistar-red350);
     --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
     --mistica-color-textLinkSnackbar: var(--mistica-movistar-darkModeMovistarBlue);
+    --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarWhite);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarWhite);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarWhite);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarWhite);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-white);
     --mistica-color-textActivated: var(--mistica-movistar-blue300);
     --mistica-color-textBrand: var(--mistica-movistar-blue300);
     --mistica-color-inputBorder: var(--mistica-movistar-grey400);
@@ -736,6 +790,33 @@
     [data-mistica-skin='movistar'] {
         --mistica-color-background: var(--mistica-movistar-darkModeBlack);
         --mistica-color-backgroundAlternative: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.33
+        );
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-movistar-raw-darkModeMovistarBlue), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.25
+        );
+        --mistica-color-backgroundSelectedBrandPressed: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.33
+        );
+        --mistica-color-backgroundSelectedNegative: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.18
+        );
+        --mistica-color-backgroundSelectedNegativeHover: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.25
+        );
+        --mistica-color-backgroundSelectedNegativePressed: rgba(
+            var(--mistica-movistar-raw-darkModeMovistarBlue),
+            0.33
+        );
         --mistica-color-backgroundBrand: var(--mistica-movistar-darkModeBlack);
         --mistica-color-backgroundNegative: var(--mistica-movistar-darkModeBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
@@ -797,6 +878,22 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.2);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-movistar-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-movistar-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(
+            var(--mistica-movistar-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-movistar-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
+            var(--mistica-movistar-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-movistar-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(
+            var(--mistica-movistar-raw-white),
+            0.08
+        );
         --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-movistarBlue);
@@ -866,6 +963,11 @@
         --mistica-color-textLinkDanger: var(--mistica-movistar-red350);
         --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
         --mistica-color-textLinkSnackbar: var(--mistica-movistar-darkModeMovistarBlue);
+        --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarWhite);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarWhite);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarWhite);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarWhite);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-white);
         --mistica-color-textActivated: var(--mistica-movistar-blue300);
         --mistica-color-textBrand: var(--mistica-movistar-blue300);
         --mistica-color-inputBorder: var(--mistica-movistar-grey400);
@@ -1040,6 +1142,15 @@
     [data-mistica-skin='movistar'][data-mistica-color-scheme='light'] {
         --mistica-color-background: var(--mistica-movistar-white);
         --mistica-color-backgroundAlternative: var(--mistica-movistar-movistarWhite);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-movistar-raw-movistarBlue), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-movistar-raw-movistarBlue), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-movistar-raw-movistarBlue), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-movistar-raw-movistarBlack), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-movistar-raw-movistarBlack), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-movistar-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-movistar-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.35);
         --mistica-color-backgroundBrand: var(--mistica-movistar-movistarBlue);
         --mistica-color-backgroundNegative: var(--mistica-movistar-movistarBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlack);
@@ -1095,6 +1206,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-movistar-raw-white), 0.3);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-movistar-raw-white), 0.3);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-movistar-grey100);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-movistar-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-movistar-grey100);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-movistar-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-movistar-grey100);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-movistar-white);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-movistar-grey100);
         --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-movistar-white);
@@ -1161,6 +1279,11 @@
         --mistica-color-textLinkDanger: var(--mistica-movistar-red);
         --mistica-color-textLinkDangerMedia: var(--mistica-movistar-red);
         --mistica-color-textLinkSnackbar: var(--mistica-movistar-blue300);
+        --mistica-color-textLinkNeutral: var(--mistica-movistar-movistarBlack);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-movistar-movistarBlack);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-movistar-movistarBlack);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-movistar-movistarBlack);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-movistar-movistarBlack);
         --mistica-color-textActivated: var(--mistica-movistar-blueHigh);
         --mistica-color-textBrand: var(--mistica-movistar-blueHigh);
         --mistica-color-inputBorder: var(--mistica-movistar-grey500);

package/css/o2.css

@@ -14,9 +14,9 @@
     --mistica-o2-beyondBlue10: #e5edff;
     --mistica-o2-beyondBlue15: #ccdcff;
     --mistica-o2-beyondBlue30: #80a7ff;
+    --mistica-o2-black: #00001e;
     --mistica-o2-grey45: #8a8a98;
     --mistica-o2-grey60: #6e6e77;
-    --mistica-o2-black: #00001e;
     --mistica-o2-o2Green: #00dc7d;
     --mistica-o2-o2Orange60: #f06c00;
     --mistica-o2-o2Pink: #fa96ff;
@@ -41,16 +41,26 @@
     --mistica-o2-grey40: #b4b4be;
 
     /* Raw palette colors, for use with rgba() */
+    --mistica-o2-raw-beyondBlue: 0, 80, 255;
     --mistica-o2-raw-darkModeBlack: 0, 0, 28;
+    --mistica-o2-raw-white: 255, 255, 255;
     --mistica-o2-raw-black: 0, 0, 30;
-    --mistica-o2-raw-beyondBlue: 0, 80, 255;
     --mistica-o2-raw-beyondBlue90: 0, 16, 51;
-    --mistica-o2-raw-white: 255, 255, 255;
+    --mistica-o2-raw-beyondBlue30: 128, 167, 255;
     --mistica-o2-raw-darkModeGrey: 8, 19, 43;
 
     /* Colors */
     --mistica-color-background: var(--mistica-o2-white);
     --mistica-color-backgroundAlternative: var(--mistica-o2-grey20);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-o2-raw-beyondBlue), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-o2-raw-beyondBlue), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-o2-raw-beyondBlue), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-o2-raw-darkModeBlack), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-o2-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-o2-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-o2-raw-white), 0.35);
     --mistica-color-backgroundBrand: linear-gradient(
         180deg,
         var(--mistica-o2-darkBlue) 0%,
@@ -116,6 +126,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-o2-grey20);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-o2-white);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-o2-grey20);
     --mistica-color-buttonPrimaryBackground: var(--mistica-o2-beyondBlue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-white);
@@ -179,6 +196,11 @@
     --mistica-color-textLinkDanger: var(--mistica-o2-o2Red65);
     --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
     --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
+    --mistica-color-textLinkNeutral: var(--mistica-o2-black);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-o2-black);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-o2-black);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-black);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-o2-black);
     --mistica-color-textActivated: var(--mistica-o2-beyondBlue);
     --mistica-color-textBrand: var(--mistica-o2-beyondBlue);
     --mistica-color-inputBorder: var(--mistica-o2-grey45);
@@ -359,7 +381,6 @@
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 24px;
     --mistica-border-radius-input: 12px;
-    --mistica-border-radius-legacyDisplay: 16px;
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
@@ -451,6 +472,15 @@
 [data-mistica-skin='o2'][data-mistica-color-scheme='dark'] {
     --mistica-color-background: var(--mistica-o2-darkModeBlack);
     --mistica-color-backgroundAlternative: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
     --mistica-color-backgroundBrand: var(--mistica-o2-darkModeBlack);
     --mistica-color-backgroundNegative: var(--mistica-o2-darkModeBlack);
     --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
@@ -506,6 +536,13 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-o2-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-o2-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-o2-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonPrimaryBackground: var(--mistica-o2-darkModeBeyondBlue);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-darkModeBeyondBlue);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-darkModeBeyondBlue);
@@ -569,6 +606,11 @@
     --mistica-color-textLinkDanger: var(--mistica-o2-o2Red45);
     --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
     --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
+    --mistica-color-textLinkNeutral: var(--mistica-o2-grey30);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-o2-grey30);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-o2-grey30);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-grey30);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-o2-white);
     --mistica-color-textActivated: var(--mistica-o2-beyondBlue30);
     --mistica-color-textBrand: var(--mistica-o2-beyondBlue30);
     --mistica-color-inputBorder: var(--mistica-o2-grey45);
@@ -744,6 +786,15 @@
     [data-mistica-skin='o2'] {
         --mistica-color-background: var(--mistica-o2-darkModeBlack);
         --mistica-color-backgroundAlternative: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-o2-raw-beyondBlue30), 0.18);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-o2-raw-beyondBlue30), 0.25);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-o2-raw-beyondBlue30), 0.33);
         --mistica-color-backgroundBrand: var(--mistica-o2-darkModeBlack);
         --mistica-color-backgroundNegative: var(--mistica-o2-darkModeBlack);
         --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
@@ -799,6 +850,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-o2-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-o2-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-o2-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonPrimaryBackground: var(--mistica-o2-darkModeBeyondBlue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-darkModeBeyondBlue);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-darkModeBeyondBlue);
@@ -862,6 +920,11 @@
         --mistica-color-textLinkDanger: var(--mistica-o2-o2Red45);
         --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
         --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
+        --mistica-color-textLinkNeutral: var(--mistica-o2-grey30);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-o2-grey30);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-o2-grey30);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-grey30);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-o2-white);
         --mistica-color-textActivated: var(--mistica-o2-beyondBlue30);
         --mistica-color-textBrand: var(--mistica-o2-beyondBlue30);
         --mistica-color-inputBorder: var(--mistica-o2-grey45);
@@ -1036,6 +1099,15 @@
     [data-mistica-skin='o2'][data-mistica-color-scheme='light'] {
         --mistica-color-background: var(--mistica-o2-white);
         --mistica-color-backgroundAlternative: var(--mistica-o2-grey20);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-o2-raw-beyondBlue), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-o2-raw-beyondBlue), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-o2-raw-beyondBlue), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-o2-raw-darkModeBlack), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-o2-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-o2-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-o2-raw-white), 0.35);
         --mistica-color-backgroundBrand: linear-gradient(
             180deg,
             var(--mistica-o2-darkBlue) 0%,
@@ -1101,6 +1173,13 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-o2-grey20);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-o2-white);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-o2-grey20);
         --mistica-color-buttonPrimaryBackground: var(--mistica-o2-beyondBlue);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-o2-white);
@@ -1164,6 +1243,11 @@
         --mistica-color-textLinkDanger: var(--mistica-o2-o2Red65);
         --mistica-color-textLinkDangerMedia: var(--mistica-o2-o2Red65);
         --mistica-color-textLinkSnackbar: var(--mistica-o2-beyondBlue30);
+        --mistica-color-textLinkNeutral: var(--mistica-o2-black);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-o2-black);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-o2-black);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-o2-black);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-o2-black);
         --mistica-color-textActivated: var(--mistica-o2-beyondBlue);
         --mistica-color-textBrand: var(--mistica-o2-beyondBlue);
         --mistica-color-inputBorder: var(--mistica-o2-grey45);