fix(button): design review fixes

core-ds · Dec 7, 2020 · 4eca9d1 · 4eca9d1
1 parent 51d6188
commit 4eca9d1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -150,7 +150,7 @@ a.loading {
 .outlined {
     color: var(--color-light-text-primary);
     background-color: transparent;
-    border: 1px solid color-mod(var(--color-light-border-key) alpha(60%));
+    border: 1px solid var(--color-light-border-tertiary-inverted);
 
     &:hover {
         background-color: var(--color-light-specialbg-component);
@@ -238,11 +238,11 @@ a.loading {
     &.outlined {
         color: color-mod(var(--color-light-text-primary) alpha(30%));
         background-color: transparent;
-        border-color: color-mod(var(--color-light-border-key) alpha(10%));
+        border-color: color-mod(var(--color-light-border-tertiary-inverted) alpha(30%));
 
         &.loading {
             color: var(--color-light-text-primary);
-            border-color: color-mod(var(--color-light-border-key) alpha(60%));
+            border-color: var(--color-light-border-tertiary-inverted);
         }
     }
 

diff --git a/packages/themes/src/mixins/button/corp.css b/packages/themes/src/mixins/button/corp.css
@@ -5,13 +5,19 @@
     --color-light-border-key: #0b1f35;
     --color-light-specialbg-component: #eeeff1;
 
+    /* primary */
+    --button-primary-base-bg-color: var(--color-light-bg-accent);
+    --button-primary-hover-bg-color: color-mod(var(--color-light-bg-accent) shade(7%));
+    --button-primary-active-bg-color: color-mod(var(--color-light-bg-accent) shade(15%));
+    --button-primary-disabled-bg-color: color-mod(var(--color-light-bg-accent) alpha(30%));
+
     /* secondary */
     --button-secondary-base-bg-color: transparent;
-    --button-secondary-base-border-color: color-mod(var(--color-light-border-key) alpha(60%));
-    --button-secondary-hover-bg-color: color-mod(var(--color-light-specialbg-component) shade(7%));
-    --button-secondary-active-bg-color: color-mod(
-        var(--color-light-specialbg-component) shade(15%)
-    );
+    --button-secondary-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-secondary-hover-bg-color: var(--color-light-specialbg-component);
+    --button-secondary-active-bg-color: color-mod(var(--color-light-specialbg-component) shade(7%));
     --button-secondary-disabled-bg-color: transparent;
-    --button-secondary-disabled-border-color: color-mod(var(--color-light-border-key) alpha(10%));
+    --button-secondary-disabled-border-color: color-mod(
+        var(--color-light-border-tertiary-inverted) alpha(30%)
+    );
 }