@everymatrix/casino-filter-page 0.0.225 → 0.0.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-filter-page",
-  "version": "0.0.225",
+  "version": "0.0.227",
   "main": "dist/casino-filter-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f58cef61f569c3d9b496becafc3ab9e93cb5eca7"
+  "gitHead": "87c5d90286e7d4214a1e8f9ec974787cb1fd71a6"
 }

package/src/CasinoFilterPage.svelte

@@ -351,11 +351,11 @@
   .VendorBox {
     width: 230px;
     height: 125px;
-    border: 1px solid #E6E6E6;
+    border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
     border-radius: 5px;
     position: relative;
     &.VendorBoxSelected {
-      border: 1px solid #D0046C;
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
     }
   }
   .VendorImage {
@@ -374,12 +374,12 @@
     position: absolute;
     bottom: 5px;
     right: 5px;
-    background: #D0046C;
+    background: var(--emfe-w-color-primary, #D0046C);
     .CheckMark {
       width: 5px;
       height: 12px;
-      border-bottom: 2px solid #fff;
-      border-right: 2px solid #fff;
+      border-bottom: 2px solid var(--emfe-w-color-white, #FFFFFF);
+      border-right: 2px solid var(--emfe-w-color-white, #FFFFFF);
       display: inline-block;
       position: relative;
       top: -2px;
@@ -394,7 +394,7 @@
     .ClearFiltersButton, .ApplyFiltersButton {
       width: 180px;
       height: 50px;
-      border: 1px solid #D0046C;
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
       border-radius: 5px;
       display: flex;
       align-items: center;
@@ -408,15 +408,15 @@
       }
     }
     .ClearFiltersButton {
-      background: #fff;
-      color: #D0046C;
+      background: var(--emfe-w-color-white, #FFFFFF);
+      color: var(--emfe-w-color-primary, #D0046C);
     }
     .ApplyFiltersButton {
-      background: #D0046C;
-      color: #fff;
+      background: var(--emfe-w-color-primary, #D0046C);
+      color: var(--emfe-w-color-white, #FFFFFF);
       &.ApplyFilterButtonDisabled {
-        background: #E6E6E6;
-        border: 1px solid #E6E6E6;
+        background: var(--emfe-w-color-gray-100, #E6E6E6);
+        border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
         pointer-events: none !important;
         // disable accidental text selection when trying to click on a disabled button
         -webkit-touch-callout: none; /* iOS Safari */
@@ -428,7 +428,7 @@
                                         supported by Chrome, Edge, Opera and Firefox */
         &:hover {
           cursor: not-allowed;
-          border: 1px solid #E6E6E6;
+          border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
         }
       }
     }
@@ -438,7 +438,7 @@
     .FilterHeaderSection {
       margin-top: 20px;
       text-align: center;
-      color: #707070;
+      color: var(--emfe-w-color-gray-300, #58586B);
       .FilterHeaderTitle {
         font-size: 18px;
       }
@@ -460,8 +460,8 @@
       .CheckMark {
         width: 2px;
         height: 6px;
-        border-bottom: 1px solid #fff;
-        border-right: 1px solid #fff;
+        border-bottom: 1px solid var(--emfe-w-color-white, #FFFFFF);
+        border-right: 1px solid var(--emfe-w-color-white, #FFFFFF);
         top: 0px;
         left: 1px;
       }
@@ -487,8 +487,8 @@
     height: 64px;
     margin: 8px;
     border-radius: 50%;
-    border: 6px solid #D0046C;
-    border-color: #D0046C transparent #D0046C transparent;
+    border: 6px solid var(--emfe-w-color-primary, #D0046C);
+    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
     animation: lds-dual-ring 1.2s linear infinite;
   }
 @keyframes lds-dual-ring {