@jorilindell/hds-core 4.10.1

package/lib/components/button/_button-mixin-2.scss

@@ -0,0 +1,294 @@
+/* stylelint-disable scss/function-no-unknown */
+
+@use '../../utils/multi-sass/exports' as *;
+
+@mixin button($modifiers: true, $elements: true, $extras: true, $config: null) {
+  $className: 'button';
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: $className,
+    $config: $config,
+  );
+
+  @include block {
+    @include if-content-allowed {
+      --border-width: 2px;
+      --outline-width-focus: 3px;
+      --padding-horizontal: var(--spacing-l);
+      --min-size: 56px;
+      --padding-vertical: var(--spacing-s);
+      --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+      --icon-reposition: calc(-1 * var(--spacing-2-xs));
+
+      /* logics, always falls back to previous (upper) if not given ->
+      (no) active color -> (no) hover color -> (no) focus color -> default color
+      */
+      --computed-background-color: var(--background-color, transparent);
+      --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));
+      --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));
+      --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));
+      --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent));
+      --computed-color: var(--color, inherit);
+      --computed-color-focus: var(--color-focus, var(--computed-color, inherit));
+      --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));
+      --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));
+      --computed-color-disabled: var(--color-disabled, var(--color-white, inherit));
+      --computed-border-color: var(--border-color, var(--computed-background-color));
+      --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));
+      --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));
+      --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));
+      --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent));
+      --computed-outline-color-focus: var(--outline-color-focus, transparent);
+      --computed-icon-size: var(--icon-size, var(--spacing-m));
+
+      align-items: center;
+      background-color: var(--computed-background-color);
+      border: var(--border-width) solid var(--computed-border-color);
+      border-radius: 0;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: var(--computed-color, inherit);
+      column-gap: var(--spacing-2-xs);
+      cursor: var(--cursor, pointer);
+      display: inline-flex;
+      font-family: inherit;
+      font-size: 100%;
+      font-weight: 500;
+      hyphens: auto;
+      place-content: flex-start center;
+      line-height: var(--lineheight-l);
+      margin: 0;
+      min-height: var(--min-size);
+      min-width: var(--min-size);
+      outline: none;
+      outline-offset: 2px;
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      padding: var(--padding);
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      text-transform: none;
+      vertical-align: top;
+
+      /* repositioning the icons, after & before usage */
+      &:after {
+        margin-right: var(--icon-reposition);
+      }
+
+      &:before {
+        margin-left: var(--icon-reposition);
+      }
+
+      &,
+      &[type='button'],
+      &[type='reset'],
+      &[type='submit'] {
+        -webkit-appearance: button;
+      }
+
+      &:focus-visible { /* focus */
+        background-color: var(--computed-background-color-focus);
+        border-color: var(--computed-border-color-focus);
+        color: var(--computed-color-focus);
+        outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);
+      }
+
+      &:hover { /* hover */
+        background-color: var(--computed-background-color-hover);
+        border-color: var(--computed-border-color-hover);
+        color: var(--computed-color-hover);
+      }
+
+      &:active { /* active */
+        background-color: var(--computed-background-color-active);
+        border-color: var(--computed-border-color-active);
+        color: var(--computed-color-active);
+        outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);
+      }
+
+      &:disabled { /* disabled */
+        --cursor: not-allowed;
+
+        background-color: var(--computed-background-color-disabled);
+        border-color: var(--computed-border-color-disabled);
+        color: var(--computed-color-disabled);
+        outline: none;
+      }
+      button.#{$className} {
+        -webkit-appearance: button;
+      }
+    }
+
+    @include element('icon') {
+      flex-shrink: 0;
+      height: var(--computed-icon-size);
+      width: var(--computed-icon-size);
+
+      /* start-side icon */
+      &:first-child:not(:last-child) {
+        margin-left: var(--icon-reposition);
+      }
+
+      &:last-child:not(:first-child) { /* end-side icon */
+        margin-right: var(--icon-reposition);
+      }
+    }
+
+    @include modifier('small') {
+      --min-size: 44px;
+      --padding-horizontal: var(--spacing-m);
+      --padding-vertical: var(--spacing-2-xs);
+    }
+
+    @include modifier('fullwidth') {
+      width: 100%;
+    }
+
+    @include modifier('primary') {
+      --background-color: var(--color-bus);
+      --background-color-hover: var(--color-bus-dark);
+      --background-color-focus: var(--color-bus);
+      --background-color-disabled: var(--color-black-20);
+      --border-color: transparent;
+      --color: var(--color-white);
+      --color-disabled: var(--color-white);
+      --outline-color-focus: var(--color-coat-of-arms);
+    }
+
+    @include modifier('secondary') {
+      --background-color: transparent;
+      --background-color-hover: var(--color-bus-light);
+      --background-color-focus: transparent;
+      --background-color-disabled: transparent;
+      --border-color: var(--color-bus);
+      --border-color-disabled: var(--color-disabled);
+      --color: var(--color-bus);
+      --color-disabled: var(--color-black-40);
+      --outline-color-focus: var(--color-coat-of-arms);
+    }
+
+    @include modifier('supplementary') {
+      --background-color: transparent;
+      --background-color-hover: var(--color-bus-light);
+      --background-color-focus: transparent;
+      --background-color-disabled: transparent;
+      --border-color: transparent;
+      --border-color-disabled: transparent;
+      --color: var(--color-bus);
+      --color-disabled: var(--color-black-40);
+      --outline-color-focus: var(--color-coat-of-arms);
+    }
+
+    @include modifier('clear') {
+      --background-color: transparent;
+      --background-color-disabled: transparent;
+      --border-color: transparent;
+      --border-color-disabled: transparent;
+      --color: var(--color-black-90);
+      --color-disabled: var(--color-black-90);
+    }
+
+    @include modifier('success') {
+      --background-color: var(--color-success);
+      --background-color-hover: var(--color-success-dark);
+      --background-color-focus: var(--color-success);
+      --border-color: var(--color-success);
+      --border-color-hover: var(--color-success-dark);
+      --border-color-focus: var(--color-success);
+      --color: var(--color-white);
+      --outline-color-focus: var(--color-coat-of-arms);
+    }
+
+    @include modifier('danger') {
+      --background-color: var(--color-error);
+      --background-color-hover: var(--color-error-dark);
+      --background-color-focus: var(--color-error);
+      --border-color: var(--color-error);
+      --border-color-hover: var(--color-error-dark);
+      --border-color-focus: var(--color-error);
+      --color: var(--color-white);
+      --outline-color-focus: var(--color-coat-of-arms);
+    }
+
+    @include extra('theme-coat') {
+      @include modifier('primary') {
+        @include compound-block-modifier('theme-coat') {
+          --background-color: var(--color-coat-of-arms);
+          --background-color-hover: var(--color-coat-of-arms-dark);
+          --background-color-focus: var(--color-coat-of-arms);
+          --border-color: var(--color-coat-of-arms);
+          --border-color-hover: var(--color-coat-of-arms-dark);
+          --border-color-focus: var(--color-coat-of-arms);
+          --color: var(--color-white);
+        }
+      }
+
+      @include modifier('secondary') {
+        @include compound-block-modifier('theme-coat') {
+          --background-color: transparent;
+          --background-color-hover: var(--color-coat-of-arms-light);
+          --background-color-focus: transparent;
+          --border-color: var(--color-coat-of-arms);
+          --color: var(--color-coat-of-arms);
+        }
+      }
+
+      @include modifier('supplementary') {
+        @include compound-block-modifier('theme-coat') {
+          --background-color: transparent;
+          --background-color-hover: var(--color-coat-of-arms-light);
+          --background-color-focus: transparent;
+          --border-color: transparent;
+          --color: var(--color-coat-of-arms);
+        }
+      }
+    }
+
+    @include extra('theme-black') {
+      @include modifier('primary') {
+        @include compound-block-modifier('theme-black') {
+          --background-color: var(--color-black);
+          --background-color-hover: var(--color-black);
+          --background-color-focus: var(--color-black);
+          --border-color: var(--color-black);
+          --border-color-hover: var(--color-black);
+          --border-color-focus: var(--color-black);
+          --color: var(--color-white);
+          --color-hover: var(--color-white);
+          --color-focus: var(--color-white);
+        }
+      }
+
+      @include modifier('secondary') {
+        @include compound-block-modifier('theme-black') {
+          --background-color: transparent;
+          --background-color-hover: var(--color-black-5);
+          --background-color-focus: transparent;
+          --border-color: var(--color-black);
+          --border-color-hover: var(--color-black);
+          --border-color-focus: var(--color-black);
+          --color: var(--color-black);
+          --color-hover: var(--color-black);
+          --color-focus: var(--color-black);
+        }
+      }
+
+      @include modifier('supplementary') {
+        @include compound-block-modifier('theme-black') {
+          --background-color: transparent;
+          --background-color-hover: var(--color-black-5);
+          --background-color-focus: transparent;
+          --border-color: transparent;
+          --border-color-hover: transparent;
+          --color: var(--color-black);
+          --color-hover: var(--color-black);
+          --color-focus: var(--color-black);
+        }
+      }
+    }
+  }
+}