@everymatrix/lottery-ticket 1.77.24 → 1.77.26

package/dist/collection/components/lottery-ticket/lottery-ticket.css

@@ -14,12 +14,12 @@
   overflow: auto;
 }
 .TicketTabs .TabButton {
-  color: var(--emw--color-typography, #009993);
+  color: var(--emw--color-primary, #009993);
   margin: 0 40px 10px 0;
   cursor: pointer;
 }
 .TicketTabs .Active {
-  border-bottom: 1px solid var(--emw--color-typography, #009993);
+  border-bottom: 1px solid var(--emw--color-primary, #009993);
 }
 
 .ButtonContainer {
@@ -37,7 +37,7 @@
   top: 2px;
   font-size: 14px;
   font-weight: lighter;
-  color: var(--emw--button-text-color, #000);
+  color: var(--emw--color-typography, #000);
 }
 
 input[type=number] {
@@ -101,7 +101,7 @@ input[type=number]::-webkit-outer-spin-button {
 .NumberInput input[type=number] .WagerInputTitle,
 .WagerInput input[type=number] .WagerInputTitle {
   font-size: 14px;
-  color: var(--emw--button-text-color, #000);
+  color: var(--emw--color-typography, #000);
   padding: 10px;
   margin-left: 8px;
 }
@@ -113,9 +113,9 @@ input[type=number]::-webkit-outer-spin-button {
   padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
-  border: 1px solid var(--emw--button-border-color, #00958f);
-  background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
-  color: var(--emw--button-text-color, #000);
+  border: 1px solid var(--emw--color-primary, #009993);
+  background: var(--emw--color-typography-inverse, #fff);
+  color: var(--emw--color-typography, #000);
   font-size: 12px;
   transition: all 0.2s linear;
   text-transform: uppercase;
@@ -123,8 +123,8 @@ input[type=number]::-webkit-outer-spin-button {
   letter-spacing: 0;
 }
 .AutoButton:active {
-  background: var(--emw--button-background-color, #00958f);
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  background: var(--emw--color-primary, #009993);
+  color: var(--emw--color-typography-inverse, #fff);
 }
 
 .ResetButton {
@@ -134,19 +134,19 @@ input[type=number]::-webkit-outer-spin-button {
   padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
-  color: var(--emw--button-text-color, #000);
+  color: var(--emw--color-typography, #000);
   font-size: 12px;
   transition: all 0.2s linear;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: 0;
-  background: var(--emw--color-error, #FF3D00);
-  border: 1px solid var(--emw--color-error, #FF3D00);
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  background: var(--emw--color-error, #ff3d00);
+  border: 1px solid var(--emw--color-error, #ff3d00);
+  color: var(--emw--color-typography-inverse, #fff);
 }
 .ResetButton:hover {
-  background: var(--emw--color-secondary, #FF6536);
-  border: 1px solid var(--emw--color-error, #FF3D00);
+  background: var(--emw--color-tertiary, #ff6536);
+  border: 1px solid var(--emw--color-error, #ff3d00);
 }
 
 .TicketGridHeader {
@@ -158,7 +158,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .TicketGridBullets {
-  background: var(--emw--color-gray-50, #F1F1F1);
+  background: var(--emw--color-background-secondary, #f5f5f5);
   border-radius: 4px;
   padding: 20px;
   margin-top: 5px;
@@ -173,7 +173,7 @@ input[type=number]::-webkit-outer-spin-button {
   width: 30px;
   height: 24px !important;
   margin-right: 10px;
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, #fff);
   background: var(--emw--color-background, #009993);
 }
 
@@ -182,7 +182,7 @@ input[type=number]::-webkit-outer-spin-button {
   width: 30px;
   height: 24px !important;
   margin-left: 10px;
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, #fff);
   background: var(--emw--color-background, #009993);
 }
 
@@ -190,12 +190,13 @@ input[type=number]::-webkit-outer-spin-button {
   width: auto;
   padding: 5px;
   margin: 0 auto;
-  border: 1px solid var(--emw--color-gray-transparency-80, #ccc);
+  border: 1px solid var(--emw--color-background-tertiary, #ccc);
   border-radius: 5px;
   position: relative;
 }
 
-.SelectButton, .SelectOptions li {
+.SelectButton,
+.SelectOptions li {
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -235,9 +236,9 @@ input[type=number]::-webkit-outer-spin-button {
   left: 0;
   top: 32px;
   padding: 0;
-  border: 1px solid var(--emw--color-gray-transparency-80, #ccc);
+  border: 1px solid var(--emw--color-background-tertiary, #ccc);
   overflow: hidden;
-  background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  background: var(--emw--color-typography-inverse, #fff);
   z-index: 20;
 }
 
@@ -249,7 +250,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .SelectContent .SelectOptions .SelectedValue {
   background-color: var(--emw--color-background, #009993);
-  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--color-typography-inverse, #fff);
 }
 
 .SelectOptions::-webkit-scrollbar {
@@ -257,12 +258,12 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .SelectOptions::-webkit-scrollbar-track {
-  background: var(--emw--color-gray-50, #F1F1F1);
+  background: var(--emw--color-background-secondary, #f5f5f5);
   border-radius: 25px;
 }
 
 .SelectOptions::-webkit-scrollbar-thumb {
-  background: var(--emw--color-gray-transparency-80, #ccc);
+  background: var(--emw--color-background-tertiary, #ccc);
   border-radius: 25px;
 }
 
@@ -273,5 +274,5 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .SelectOptions li:hover {
-  background: var(--emw--color-gray-150, #f2f2f2);
+  background: var(--emw--color-background-secondary, #f5f5f5);
 }