MPWW-13141: Updated radio pill styles, add colors (#276)

Author: maksymnado

packages/core/src/components/radio-pill/_radio-pill.scss

@@ -10,6 +10,7 @@
   .#{$ray-class-prefix}radio-pill {
     display: flex;
     flex-grow: 1;
+    flex-basis: 0;
     text-align: center;
     align-items: center;
     min-width: 0;
@@ -62,30 +63,36 @@
     z-index: -99999;
 
     &:checked + .#{$ray-class-prefix}radio-pill__label {
-      background-color: $ray-color-blue-20;
+      border: 1px solid $ray-color-blue-50;
+      background-color: $ray-color-blue-03;
+      color: $ray-color-blue-50;
+      z-index: 1;
     }
 
     &:not(:checked) {
       &:hover + .#{$ray-class-prefix}radio-pill__label {
-        background-color: $ray-color-blue-10;
+        color: $ray-color-blue-50;
+        border: 1px solid $ray-color-blue-50;
+        background-color: $ray-color-white;
+        z-index: 1;
       }
     }
 
     &:focus {
       & + .#{$ray-class-prefix}radio-pill__label {
         box-shadow: $ray-box-shadow-focus-state;
-        z-index: 1;
+        z-index: 2;
       }
     }
   }
 
   .#{$ray-class-prefix}radio-pill__label {
     cursor: pointer;
-    color: $ray-color-blue-50;
+    color: $ray-color-black;
     background-color: $ray-color-white;
     flex-grow: 1;
     padding: $ray-radio-pill-v-spacing-compact $ray-radio-pill-h-spacing-compact;
-    border: $ray-border-width solid $ray-color-blue-50;
+    border: $ray-border-width solid $ray-color-gray-31;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

packages/core/src/global/_colors.scss

@@ -1,6 +1,7 @@
 $ray-color-white: #ffffff;
 $ray-color-black: #000000;
 
+$ray-color-blue-03: hsl(240, 100%, 100% - 03%);
 $ray-color-blue-10: hsl(240, 100%, 100% - 10%);
 $ray-color-blue-20: hsl(240, 100%, 100% - 20%);
 $ray-color-blue-50: hsl(240, 100%, 100% - 50%);
@@ -24,5 +25,6 @@ $ray-color-green-90: hsl(132, 76%, 100% - 90%);
 $ray-color-gray-03: hsl(0, 0%, 100% - 03%);
 $ray-color-gray-10: hsl(0, 0%, 100% - 11%);
 $ray-color-gray-30: hsl(0, 0%, 100% - 30%);
+$ray-color-gray-31: hsl(0, 0%, 100% - 31%);
 $ray-color-gray-50: hsl(0, 0%, 100% - 50%);
 $ray-color-gray-60: hsl(0, 0%, 100% - 60%);

packages/core/src/ray-exports.scss

@@ -27,6 +27,7 @@
 
   ray-color-white: $ray-color-white;
   ray-color-black: $ray-color-black;
+  ray-color-blue-03: $ray-color-blue-03;
   ray-color-blue-10: $ray-color-blue-10;
   ray-color-blue-20: $ray-color-blue-20;
   ray-color-blue-50: $ray-color-blue-50;
@@ -46,6 +47,7 @@
   ray-color-gray-03: $ray-color-gray-03;
   ray-color-gray-10: $ray-color-gray-10;
   ray-color-gray-30: $ray-color-gray-30;
+  ray-color-gray-31: $ray-color-gray-31;
   ray-color-gray-50: $ray-color-gray-50;
   ray-color-gray-60: $ray-color-gray-60;
 }