Feat: Add button mixin

dfinity · Jan 23, 2024 · 7b49259 · 7b49259
1 parent 7f1b6c4
commit 7b49259
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 67 deletions.
diff --git a/src/lib/styles/global/button.scss b/src/lib/styles/global/button.scss
@@ -1,5 +1,6 @@
 @use "../mixins/effect";
 @use "../mixins/fonts";
+@use "../mixins/button";
 
 button {
   &[disabled],
@@ -8,10 +9,7 @@ button {
   }
 
   &.with-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--padding-0_5x);
+    @include button.with-icon;
   }
 
   &.ghost,
@@ -36,7 +34,7 @@ button {
   }
 
   &.full-width {
-    width: 100%;
+    @include button.full-width;
   }
 
   &.icon-only {
@@ -60,53 +58,15 @@ button {
   &.success,
   &.danger,
   &.warning {
-    padding: var(--padding) var(--padding-2x);
-
-    border-radius: var(--border-radius);
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
-
-    position: relative;
-    min-height: var(--button-min-height);
-
-    font-weight: var(--font-weight-bold);
-
-    &[disabled],
-    &[disabled]:hover {
-      background: var(--button-disable-background);
-      color: var(--button-disable-color);
-      cursor: default;
-      box-shadow: none;
-    }
-
-    &:focus {
-      filter: contrast(1.25);
-    }
+    @include button.base;
   }
 
   &.primary {
-    background: var(--primary);
-    color: var(--primary-contrast);
-
-    &:not([disabled]):hover,
-    &:not([disabled]):focus {
-      background: var(--primary-shade);
-    }
+    @include button.primary;
   }
 
   &.secondary {
-    background: transparent;
-    color: var(--button-secondary-color);
-    border: solid 2px var(--primary);
-
-    &[disabled] {
-      border: solid 2px transparent;
-    }
-
-    &:not([disabled]):hover,
-    &:not([disabled]):focus {
-      background: var(--button-card-focus-background);
-    }
+    @include button.secondary;
   }
 
   &.success {

diff --git a/src/lib/styles/global/link.scss b/src/lib/styles/global/link.scss
@@ -1,4 +1,5 @@
 /** Similar behavior as button.text */
+@use "../mixins/button";
 
 a {
   font-size: inherit;
@@ -15,6 +16,8 @@ a {
   }
 
   &.button {
+    @include button.base;
+
     // Default is `inline` and buttons are `inline-block` but they have a hidden flex implemented in the browser.
     // https://stackoverflow.com/questions/15764600/what-makes-the-text-on-a-button-element-vertically-centered/34612505#34612505
     // Therefore, to make sure the a.button behaves the same, we set it to `inline-flex`.
@@ -24,37 +27,22 @@ a {
 
     box-sizing: border-box;
 
-    padding: var(--padding) var(--padding-2x);
-
-    border-radius: var(--border-radius);
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
-
-    position: relative;
-    min-height: var(--button-min-height);
-
-    font-weight: var(--font-weight-bold);
     text-decoration: none;
 
     &.primary {
-      background: var(--primary);
-      color: var(--primary-contrast);
+      @include button.primary;
+    }
 
-      &:hover,
-      &:focus {
-        background: var(--primary-shade);
-      }
+    &.secondary {
+      @include button.secondary;
     }
 
     &.full-width {
-      width: 100%;
+      @include button.full-width;
     }
 
     &.with-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--padding-0_5x);
+      @include button.with-icon;
     }
   }
 }
diff --git a/src/lib/styles/mixins/_button.scss b/src/lib/styles/mixins/_button.scss
@@ -0,0 +1,60 @@
+@mixin base {
+  padding: var(--padding) var(--padding-2x);
+
+  border-radius: var(--border-radius);
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+
+  position: relative;
+  min-height: var(--button-min-height);
+
+  font-weight: var(--font-weight-bold);
+
+  &[disabled],
+  &[disabled]:hover {
+    background: var(--button-disable-background);
+    color: var(--button-disable-color);
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &:focus {
+    filter: contrast(1.25);
+  }
+}
+
+@mixin primary {
+  background: var(--primary);
+  color: var(--primary-contrast);
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background: var(--primary-shade);
+  }
+}
+
+@mixin secondary {
+  background: transparent;
+  color: var(--button-secondary-color);
+  border: solid 2px var(--primary);
+
+  &[disabled] {
+    border: solid 2px transparent;
+  }
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background: var(--button-card-focus-background);
+  }
+}
+
+@mixin with-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--padding-0_5x);
+}
+
+@mixin full-width {
+  width: 100%;
+}
diff --git a/src/routes/(page)/utility-classes/links/+page.md b/src/routes/(page)/utility-classes/links/+page.md
@@ -17,6 +17,7 @@ All styles that can be applied to anchor tags.
 | --------------------------------------------------------------------------------- |
 | <a href="#">Default Link</a>                                                      |
 | <a href="#" class="button primary">Button Primary link</a>                        |
+| <a href="#" class="button secondary">Button Secondary link</a>                    |
 | <a href="#" class="button primary full-width">Button full-width link</a>          |
 | <a href="#" class="button primary with-icon"><IconAdd />Button with-icon link</a> |