Fix: Update button design tokens according to the latest design

lmc-eu · Dec 22, 2022 · e23431a · e23431a
1 parent e4e25da
commit e23431a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/examples/assets/examples.css b/examples/assets/examples.css
@@ -12,6 +12,13 @@
     --spirit-action-primary-default: #29616f;
     --spirit-action-primary-hover: #1b5260;
     --spirit-action-primary-active: #0b3a46;
+    --spirit-action-secondary-default: #a0a0a0;
+    --spirit-action-secondary-hover: #737373;
+    --spirit-action-secondary-active: #c4c4c4;
+    --spirit-background-interactive-default: transparent;
+    --spirit-background-interactive-hover: rgba(15, 56, 62, 0.2);
+    --spirit-background-interactive-active: rgba(15, 52, 60, 0.3);
+    --spirit-radius-100: 0.25em;
     --spirit-emotion-success-background: #f2f5e7;
 
     /* Bootstrap */
@@ -84,6 +91,7 @@ a:active,
     padding-inline: 1.5rem;
     padding-block: 0.4375rem;
     font-weight: 600;
+    border-radius: var(--spirit-radius-100);
 }
 
 .btn-primary,
@@ -102,27 +110,35 @@ a:active,
 }
 
 .btn-primary:active,
+.btn-primary.active,
+.btn-primary:first-child:active,
+:not(.btn-check) + .btn-primary:active,
 .nav-pills .nav-link.active:active {
     color: var(--spirit-text-primary-inverted-default);
     background-color: var(--spirit-action-primary-active);
     border-color: var(--spirit-action-primary-active);
 }
 
 .btn-outline-primary {
-    color: var(--spirit-action-primary-default);
-    border-color: var(--spirit-action-primary-default);
+    color: var(--spirit-text-primary-default);
+    background-color: var(--spirit-background-interactive-default);
+    border-color: var(--spirit-action-secondary-default);
 }
 
 .btn-outline-primary:hover,
 .btn-outline-primary:focus {
-    color: var(--spirit-action-primary-hover);
-    background-color: transparent;
-    border-color: var(--spirit-action-primary-hover);
+    color: var(--spirit-text-primary-default);
+    background-color: var(--spirit-background-interactive-hover);
+    border-color: var(--spirit-action-secondary-hover);
 }
 
-.btn-outline-primary:active {
-    color: var(--spirit-action-primary-active);
-    border-color: var(--spirit-action-primary-active);
+.btn-outline-primary:active,
+.btn-outline-primary.active,
+.btn-outline-primary:first-child:active,
+:not(.btn-check) + .btn-outline-primary:active {
+    color: var(--spirit-text-primary-default);
+    background-color: var(--spirit-background-interactive-active);
+    border-color: var(--spirit-action-secondary-active);
 }
 
 .form-switch .form-check-input:checked {

diff --git a/examples/theming.html b/examples/theming.html
@@ -47,10 +47,13 @@
             --lmcccm-btn-primary-active-bg: rgb(0, 0, 0);
             --lmcccm-btn-primary-active-text: var(--lmcccm-btn-primary-text);
             --lmcccm-btn-secondary-border: rgb(223, 223, 223);
+            --lmcccm-btn-secondary-bg: transparent;
             --lmcccm-btn-secondary-text: rgb(17, 17, 17);
             --lmcccm-btn-secondary-hover-border: rgb(146, 146, 146);
+            --lmcccm-btn-secondary-hover-bg: transparent;
             --lmcccm-btn-secondary-hover-text: var(--lmcccm-btn-secondary-text);
             --lmcccm-btn-secondary-active-border: rgb(17, 17, 17);
+            --lmcccm-btn-secondary-active-bg: transparent;
             --lmcccm-btn-secondary-active-text: var(--lmcccm-btn-secondary-text);
 
             /* Toggle */

diff --git a/src/scss/theme/_vanilla.scss → src/scss/theme/_default-to-vanilla.scss b/src/scss/theme/_vanilla.scss → src/scss/theme/_default-to-vanilla.scss
diff --git a/src/scss/theme/_default.scss b/src/scss/theme/_default.scss
@@ -50,15 +50,18 @@
     --lmcccm-p-btn-primary-active-border: var(--lmcccm-btn-primary-active-border, #{tokens.$action-primary-active});
     --lmcccm-p-btn-primary-active-bg: var(--lmcccm-btn-primary-active-bg, #{tokens.$action-primary-active});
     --lmcccm-p-btn-primary-active-text: var(--lmcccm-btn-primary-active-text, #{tokens.$text-primary-inverted-default});
-    --lmcccm-p-btn-secondary-border: var(--lmcccm-btn-secondary-border, #{tokens.$action-primary-default});
-    --lmcccm-p-btn-secondary-bg: var(--lmcccm-btn-secondary-bg, transparent);
-    --lmcccm-p-btn-secondary-text: var(--lmcccm-btn-secondary-text, #{tokens.$action-primary-default});
-    --lmcccm-p-btn-secondary-hover-border: var(--lmcccm-btn-secondary-hover-border, #{tokens.$action-primary-hover});
-    --lmcccm-p-btn-secondary-hover-bg: var(--lmcccm-btn-secondary-hover-bg, transparent);
-    --lmcccm-p-btn-secondary-hover-text: var(--lmcccm-btn-secondary-hover-text, #{tokens.$action-primary-hover});
-    --lmcccm-p-btn-secondary-active-border: var(--lmcccm-btn-secondary-active-border, #{tokens.$action-primary-active});
-    --lmcccm-p-btn-secondary-active-bg: var(--lmcccm-btn-secondary-active-bg, transparent);
-    --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$action-primary-active});
+    --lmcccm-p-btn-secondary-border: var(--lmcccm-btn-secondary-border, #{tokens.$action-secondary-default});
+    --lmcccm-p-btn-secondary-bg: var(--lmcccm-btn-secondary-bg, #{tokens.$background-interactive-default});
+    --lmcccm-p-btn-secondary-text: var(--lmcccm-btn-secondary-text, #{tokens.$text-primary-default});
+    --lmcccm-p-btn-secondary-hover-border: var(--lmcccm-btn-secondary-hover-border, #{tokens.$action-secondary-hover});
+    --lmcccm-p-btn-secondary-hover-bg: var(--lmcccm-btn-secondary-hover-bg, #{tokens.$background-interactive-hover});
+    --lmcccm-p-btn-secondary-hover-text: var(--lmcccm-btn-secondary-hover-text, #{tokens.$text-primary-default});
+    --lmcccm-p-btn-secondary-active-border: var(
+        --lmcccm-btn-secondary-active-border,
+        #{tokens.$action-secondary-active}
+    );
+    --lmcccm-p-btn-secondary-active-bg: var(--lmcccm-btn-secondary-active-bg, #{tokens.$background-interactive-active});
+    --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$text-primary-default});
 
     // Toggle
     --lmcccm-p-toggle-bg-off: var(--lmcccm-toggle-bg-off, #{tokens.$action-unselected-default});