feat(themes): updated button mobile theme

core-ds · Dec 10, 2020 · ebdf5a1 · ebdf5a1
1 parent 51d6188
commit ebdf5a1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -6,6 +6,8 @@
     --button-primary-hover-bg-color: color-mod(var(--button-primary-base-bg-color) shade(7%));
     --button-primary-active-bg-color: color-mod(var(--button-primary-base-bg-color) shade(15%));
     --button-primary-disabled-bg-color: color-mod(var(--button-primary-base-bg-color) alpha(30%));
+    --button-primary-color: var(--color-light-text-primary-inverted);
+    --button-primary-disabled-color: var(--color-light-text-primary-inverted);
 
     /* secondary */
     --button-secondary-color: var(--color-light-text-primary);
@@ -121,7 +123,7 @@ a.loading {
 /* Type */
 
 .primary {
-    color: var(--color-light-text-primary-inverted);
+    color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
 
     &:hover {
@@ -216,6 +218,7 @@ a.loading {
     cursor: var(--disabled-cursor);
 
     &.primary {
+        color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color);
 
         &.loading {

diff --git a/packages/themes/src/mixins/button/mobile.css b/packages/themes/src/mixins/button/mobile.css
@@ -2,20 +2,27 @@
 
 @define-mixin button-mobile {
     /* core vars */
+    --color-light-bg-secondary-inverted: #1c1c1e;
+    --color-light-bg-primary-inverted: #000;
+    --color-light-text-tertiary-inverted: #464649;
     --color-light-bg-secondary: #f3f4f5;
+    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-text-disabled: #dcdcdd;
 
     /* theme */
     --button-border-radius: 12px;
 
-    /* primary TODO secret color from the future */
-    --button-primary-base-bg-color: #2b2b2b;
-    --button-primary-hover-bg-color: color-mod(#2b2b2b shade(10%));
-    --button-primary-active-bg-color: color-mod(#2b2b2b shade(30%));
-    --button-primary-disabled-bg-color: color-mod(#2b2b2b alpha(30%));
+    /* primary */
+    --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);
+    --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted);
+    --button-primary-active-bg-color: var(--color-light-bg-primary-inverted);
+    --button-primary-disabled-bg-color: var(--color-light-bg-secondary-inverted);
+    --button-primary-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* secondary */
     --button-secondary-base-bg-color: var(--color-light-bg-secondary);
-    --button-secondary-hover-bg-color: color-mod(var(--color-light-bg-secondary) shade(10%));
-    --button-secondary-active-bg-color: color-mod(var(--color-light-bg-secondary) shade(30%));
-    --button-secondary-disabled-bg-color: color-mod(var(--color-light-bg-secondary) alpha(30%));
+    --button-secondary-hover-bg-color: var(--color-light-bg-secondary);
+    --button-secondary-active-bg-color: var(--color-light-bg-tertiary);
+    --button-secondary-disabled-bg-color: var(--color-light-bg-secondary);
+    --button-secondary-disabled-color: var(--color-light-text-disabled);
 }