💄 [#462] Added borders to buttons

open-formulieren · Oct 25, 2023 · 8fdad04 · 8fdad04
1 parent 3fb2b40
commit 8fdad04
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
@@ -227,3 +227,61 @@ $button-padding-h: $grid-margin-2;
     }
   }
 }
+
+// TODO: can be removed once there are utrecht design tokens for the bottom/right border color
+// issue: https: //github.com/nl-design-system/utrecht/issues/1406
+.utrecht-button {
+  @include bem.modifier('primary-action') {
+    &:not(.utrecht-button--danger) {
+      // --utrecht-button-primary-action-focus-border-color is used to make the borders invisible,
+      // and the rules below to make the right/bottom borders visible
+      border-right-color: var(--of-button-primary-color-border);
+      border-bottom-color: var(--of-button-primary-color-border);
+
+      &:hover,
+      &:focus-visible {
+        border-right-color: var(--of-button-primary-focus-color-border) !important;
+        border-bottom-color: var(--of-button-primary-focus-color-border) !important;
+      }
+    }
+  }
+
+  @include bem.modifier('danger') {
+    &:not(.utrecht-button--subtle) {
+      // --utrecht-button-primary-action-danger-border-color is used to make the borders invisible,
+      // and the rules below to make the right/bottom borders visible
+      border-right-color: var(--of-button-danger-color-border);
+      border-bottom-color: var(--of-button-danger-color-border);
+
+      &:hover,
+      &:focus-visible {
+        border-right-color: var(--of-button-danger-focus-color-border) !important;
+        border-bottom-color: var(--of-button-danger-focus-color-border) !important;
+      }
+    }
+  }
+
+  @include bem.modifier('secondary-action') {
+    border-right-color: var(--of-button-active-color-border);
+    border-bottom-color: var(--of-button-active-color-border);
+
+    &:hover,
+    &:focus-visible {
+      border-right-color: var(--of-button-hover-color-border) !important;
+      border-bottom-color: var(--of-button-hover-color-border) !important;
+    }
+  }
+}
+
+.utrecht-button-link {
+  @include bem.modifier('html-a') {
+    border-right-color: var(--of-button-active-color-border);
+    border-bottom-color: var(--of-button-active-color-border);
+
+    &:hover,
+    &:focus-visible {
+      border-right-color: var(--of-button-hover-color-border) !important;
+      border-bottom-color: var(--of-button-hover-color-border) !important;
+    }
+  }
+}