File restored

Amsterdam · Feb 12, 2024 · b55af64 · b55af64
1 parent 9a90aa3
commit b55af64
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -8,12 +8,59 @@
 }
 
 .amsterdam-button {
+  border: none;
+  cursor: var(--amsterdam-action-activate-cursor);
+  display: inline-flex;
+  font-family: var(--amsterdam-button-font-family);
   font-size: var(--amsterdam-button-font-size);
+  gap: var(--amsterdam-button-gap);
   line-height: var(--amsterdam-button-line-height);
+  outline-offset: var(--amsterdam-button-outline-offset);
+  padding-block: var(--amsterdam-button-padding-block-start) var(--amsterdam-button-padding-block-end);
+  padding-inline: var(--amsterdam-button-padding-inline-start) var(--amsterdam-button-padding-inline-end);
+  touch-action: manipulation;
+
+  &:hover {
+    cursor: var(--amsterdam-action-activate-cursor);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: var(--amsterdam-action-disabled-cursor);
+  }
 
   @include reset;
 }
 
+@mixin amsterdam-button-forced-color-mode {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+  }
+}
+
+.amsterdam-button--busy:hover {
+  cursor: var(--amsterdam-action-busy-cursor);
+}
+
+.amsterdam-button--primary {
+  background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
+  color: var(--amsterdam-button-primary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+  }
+
+  @include amsterdam-button-forced-color-mode;
+}
+
 .amsterdam-button--secondary {
   background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);