@bonniernews/dn-design-system-web 14.3.9 → 14.4.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [14.4.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.10...@bonniernews/dn-design-system-web@14.4.0-beta.0) (2024-03-20)
+
+
+### Features
+
+* **web:** refactor buttons ([e3124c6](https://github.com/BonnierNews/dn-design-system/commit/e3124c686fbe6b370eea0cd0acc8bebda926b29f))
+
+## [14.3.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.9...@bonniernews/dn-design-system-web@14.3.10) (2024-03-20)
+
+
+### Maintenance
+
+* **web:** upgrade to storybook 8.0.0 add UXD-readme ([#1194](https://github.com/BonnierNews/dn-design-system/issues/1194)) ([59adc00](https://github.com/BonnierNews/dn-design-system/commit/59adc00f9d797e0e999250f1aa92d68626c8091c))
+
 ## [14.3.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.8...@bonniernews/dn-design-system-web@14.3.9) (2024-03-20)
 
 
@@ -113,6 +127,18 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * prerelease packages ([2a8954c](https://github.com/BonnierNews/dn-design-system/commit/2a8954c0cce43dfc53d0b5617c0d41c6ae2ba94b))
 
+
+## [15.0.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@15.0.0-beta.0) (2024-03-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** refactor buttons
+
+### Features
+
+* **web:** refactor buttons ([6fc9ca6](https://github.com/BonnierNews/dn-design-system/commit/6fc9ca69cdde1e6cb209a86282b863c4fb8a8518))
+
 ## [14.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.3...@bonniernews/dn-design-system-web@14.0.4) (2024-03-07)
 
 

package/components/blocked-content/blocked-content.js

@@ -15,7 +15,7 @@ function dsBlockedContent(params) {
           <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
           <div class="ds-blocked-content__body">Innehållet ${ params.vendor ? `från ${params.vendor}` : '' } kunde inte visas på grund av dina val i kakinställningarna.</div>
         </div>
-        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--small ds-btn--full-width">
+        <button type="button" class="ds-btn ds-btn--secondary ds-btn--default ds-btn--medium ds-btn--full-width">
           <div class="ds-btn__inner">
             <span>Hantera kakor</span>
             <div class="ds-spinner ds-spinner--small ds-spinner--primary">

package/components/blocked-content/blocked-content.njk

@@ -23,8 +23,8 @@
       </div>
       {{ Button({
           text: 'Hantera kakor',
-          variant: 'secondaryFilled',
-          size: 'small',
+          variant: 'secondary',
+          size: 'medium',
           classNames: '',
           fullWidth: true,
           forcePx: params.forcePx,

package/components/button/README-UXD.md

@@ -0,0 +1,40 @@
+# Standard button
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Anatomy
+
+1. **Label:** The text displayed on the button, indicating its function.
+2. **Icon** Iconography that enhances the function.
+3. **Background:** The background color or style that defines the button's appearance.
+4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
+5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
+
+
+## Variants
+
+| Variant   | How to use                                                                              |
+| --------- | ---------------------------------------------------------------------------------------------------- |
+| [Brand](#brand)   | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
+| [Primary](#primary)    | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz.    |
+| [Secondary](#secondary)| Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news.   |
+| [Outline](#primary%20outline)  | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
+
+
+## Usage
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Dos
+
+- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
+- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
+- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
+
+### Don'ts
+
+- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels like ”Fortsätt” that might confuse users about the button's function.
+- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
+

package/components/button/README.md

@@ -12,8 +12,10 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |text | String | yes | | | |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | brand, business, criticalOutlined, primary, secondaryFilled, secondaryOutlined, staticWhiteFilled, staticWhiteOutlined | primary | Design variant |
-|size| String | no | default, small | default | |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|rounded | bool | no | true, false | false | Button will be rounded |
+|size| String | no | small, medium, large, xlarge | medium | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
 |iconPosition | String | no | none, left, right | none | |

package/components/{button-toggle/button-toggle.js → button/button.js}

@@ -7,8 +7,8 @@ function dsButtonToggle(toggleElements = []) {
   if (!toggleElements.length) return;
   toggleElements.forEach((toggleEl) => {
     toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-btn-toggle--disabled")) return;
-      toggleEl.classList.toggle("ds-btn-toggle--selected");
+      if (toggleEl.classList.contains("ds-btn--disabled")) return;
+      toggleEl.classList.toggle("ds-btn--selected");
       const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
       toggleEl.setAttribute("aria-checked", ariaChecked);
     });
@@ -16,6 +16,6 @@ function dsButtonToggle(toggleElements = []) {
 }
 
 function dsButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-btn-toggle"));
+  const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
   dsButtonToggle(toggleElements);
 }

package/components/button/button.njk

@@ -1,46 +1,93 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
+
+{% macro InnerButton(params) %}
+  {% if not params.isIconButton %}
+    <span aria-hidden="true">{{ params.text }}</span>
+  {% elif not params.attributes["aria-label"] and params.a11y and params.a11y.visuallyHidden %}
+    {{- VisuallyHidden({ text: params.a11y.visuallyHidden }) | safe -}}
+  {% endif %}
+  {{- params.iconSvg | safe if params.iconSvg -}} {{ params.loadingHtml | safe }}
+{% endmacro %}
+
+{% macro ToggleWrapper(params) %}
+  <button type="button" role="switch" {{ params.ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ params.classes }}" {{ "disabled" if params.disabled }} {{- params.attributes | safe }}>
+    {{ caller() }}
+    {{ params.loadingHtml | safe }}
+  </button>
+{% endmacro %}
 
 {% macro Button(params) %}
   {%- set componentClassName = "ds-btn" %}
   {%- set classNamePrefix = componentClassName + "--" %}
   {%- set text = params.text %}
   {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if params.text and not params.attributes["aria-label"] else "" %}
   {%- set buttonVariant = params.variant | default("primary") %}
-  {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
-  {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
+  {%- set emphasis = params.emphasis | default("default") %}
+
+  {% if params.variant == "staticWhite" %}
+    {% if emphasis == "transparent" or emphasis == "outline" %}
+      {%- set spinnerVariant = "staticWhite" %}
+    {% else %}
+      {%- set spinnerVariant = "staticBlack" %}
+    {% endif %}
+  {% elif emphasis == "transparent" or emphasis == "outline" or params.variant == "secondary" %}
+    {%- set spinnerVariant = "primary" %}
+  {% else %}
+    {%- set spinnerVariant = "secondary" %}
+  {% endif %}
+
   {%- set loadingHtml %}
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
-  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
+  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconBtn == true) %}
     {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {%- set classes = [
     componentClassName,
     classNamePrefix + buttonVariant,
+    classNamePrefix + emphasis,
     classNamePrefix + "selected" if params.selected,
-    classNamePrefix + params.size if params.size and params.size !== "default",
+    classNamePrefix + params.size if params.size else classNamePrefix + "large",
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
+    classNamePrefix + "icon-" + params.iconPosition if iconSvg and not params.isIconBtn,
+    classNamePrefix + "icon-only" if params.isIconBtn,
+    classNamePrefix + "rounded" if params.rounded,
+    classNamePrefix + "toggle" if params.isToggle,
+    classNamePrefix + "selected" if params.isToggle and params.selected,
     "ds-loading" if params.loading,
     "ds-force-px" if params.forcePx,
     params.classNames if params.classNames
   ] | join(" ") %}
 
-  {%- if params.href %}
-    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </a>
+  {%- if params.isToggle %}
+    {% call ToggleWrapper({ ariaLabel: ariaLabel, selected: params.selected, classes: classes, attributes: attributes, disabled: params.disabled, loadingHtml: loadingHtml }) %}
+      {%- if params.isIconBtn %}
+        <span class="ds-btn__off" aria-hidden="true">{{ IconUse({ icon: params.iconName }) }}</span>
+        <span class="ds-btn__on"  aria-hidden="true">{{ IconUse({ icon: params.selectedIconName }) }}</span>
+      {% else %}
+        <span class="ds-btn__off" aria-hidden="true"><span>{{ params.text }}</span></span>
+        <span class="ds-btn__on" aria-hidden="true">
+          {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
+        </span>
+      {% endif %}
+    {% endcall %}
   {% else %}
-    <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </button>
+    {% set buttonParams = { isIconButton: params.isIconBtn, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
+    {%- if params.href %}
+      <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
+        {{ InnerButton(buttonParams) }}
+      </a>
+    {% else %}
+      <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
+        {{ InnerButton(buttonParams) }}
+      </button>
+    {% endif %}
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -4,94 +4,147 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-border-width(x1);
-$ds-btn__icon-size: 24px;
+@function _btn-brdr($value, $rem: false) {
+  $value: (ds-strip-unit($value) - ds-strip-unit($ds-btn-outlined__border-width)) * 1px;
+  @if $rem {
+    @return ds-px-to-rem($value);
+  }
+  @return $value;
+}
 
 .ds-btn {
-  --ds-btn__background-color: transparent;
-  --ds-btn__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-btn__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-btn__border-color: #{$ds-color-border-primary-03};
+  --ds-btn__background-color: #{$ds-color-surface-background};
+  --ds-btn__border-color: transparent;
   --ds-btn__outline-color: #{$ds-color-border-focus-02};
-  --ds-btn__color: #{$ds-color-text-primary};
+  --ds-btn__icon-size: #{ds-px-to-rem(24px)};
+  @at-root .ds-force-px#{&} {
+    --ds-btn__icon-size: 24px;
+  }
 
   &.ds-btn--primary {
-    --ds-btn__background-color: #{$ds-color-component-primary};
-    --ds-btn__background-color-hover: #{$ds-color-component-secondary-overlay};
-    --ds-btn__background-color-active: #{$ds-color-component-secondary-overlay-02};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-secondary};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-component-primary};
+      --ds-btn__color: #{$ds-color-text-secondary};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-component-primary};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+  }
+  &.ds-btn--secondary {
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-border-primary-02};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
   }
-
   &.ds-btn--brand {
-    --ds-btn__background-color: #{$ds-color-component-brand};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-on-brand};
     --ds-btn__outline-color: #{$ds-color-border-focus};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-component-brand};
+      --ds-btn__color: #{$ds-color-text-secondary};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-component-brand};
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
   }
-
-  &.ds-btn--business {
-    --ds-btn__background-color: #{$ds-color-component-business};
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-text-on-business};
-    --ds-btn__outline-color: #{$ds-color-border-focus-04};
+  &.ds-btn--staticWhite {
+    --ds-btn__outline-color: #{$ds-color-static-white};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-static-white};
+      --ds-btn__color: #{$ds-color-static-black};
+    }
+    &.ds-btn--outline {
+      --ds-btn__background-color: transparent;
+      --ds-btn__border-color: #{$ds-color-static-white};
+      --ds-btn__color: #{$ds-color-static-white};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-static-white};
+    }
   }
 
-  &.ds-btn--secondaryFilled {
-    --ds-btn__background-color: #{$ds-color-component-primary-overlay};
-    --ds-btn__border-color: transparent;
+  &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
+    --ds-btn__background-color: transparent;
+    --ds-btn__color: #{$ds-color-text-primary};
+    --ds-btn__border-color: #{$ds-color-component-primary};
+    --ds-btn__outline-color: #{$ds-color-border-focus-02};
   }
-
-  &.ds-btn--staticWhiteFilled {
-    --ds-btn__background-color: #{$ds-color-static-white};
-    --ds-btn__background-color-hover: #0808081a; // static version of lightmode component-secondary-overlay
-    --ds-btn__background-color-active: #08080833; // static version of lightmode component-secondary-overlay-2
-    --ds-btn__border-color: transparent;
-    --ds-btn__color: #{$ds-color-static-black};
+  &.ds-btn--transparent {
+    --ds-btn__background-color: transparent;
+  }
+  &.ds-btn--rounded {
+    border-radius: 100px;
+  }
+  &.ds-btn--elevated {
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
   }
 
-  &.ds-btn--staticWhiteOutlined {
-    // static version of darkmode component-secondary-overlay
-    --ds-btn__background-color-hover: rgba(255, 255, 255, 0.101960784);
-    // static version of darkmode component-secondary-overlay-2
-    --ds-btn__background-color-active: rgba(255, 255, 255, 0.2);
-    --ds-btn__border-color: #{$ds-color-static-white};
-    --ds-btn__color: #{$ds-color-static-white};
-    --ds-btn__outline-color: #{$ds-color-static-white};
-
-    &:not(:disabled) .ds-icon {
-      --ds-btn__color: #{$ds-color-static-white};
+  &.ds-btn--small {
+    @include ds-typography($ds-typography-detailstandard-button-small);
+    --ds-btn__icon-size: #{ds-px-to-rem(20px)};
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button-small, true);
+      --ds-btn__icon-size: 20px;
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
+      padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
     }
   }
-
-  &.ds-btn--criticalOutlined {
-    --ds-btn__border-color: #{$ds-color-border-critical};
-    --ds-btn__color: #{$ds-color-text-critical};
-    --ds-btn__outline-color: #{$ds-color-border-focus-03};
-
-    &:not(:disabled) .ds-icon {
-      --ds-btn__color: #{$ds-color-icon-critical};
+  &.ds-btn--medium {
+    @include ds-typography($ds-typography-detailstandard-button);
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
+    @at-root .ds-force-px#{&} {
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
+      @include ds-typography($ds-typography-detailstandard-button, true);
+      padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
     }
   }
-
-  &.ds-btn--secondaryFilled,
-  &.ds-btn--secondaryOutlined,
-  &.ds-btn--criticalOutlined,
-  &.ds-btn--staticWhiteOutlined {
-    &:not(.ds-loading):disabled {
-      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
-      --ds-btn__border-color: transparent;
-      --ds-btn__color: #{ds-color-text-disabled};
-      cursor: not-allowed;
+  &.ds-btn--large {
+    @include ds-typography($ds-typography-detailstandard-button);
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
+    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button, true);
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
+      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
+    }
+  }
+  &.ds-btn--xlarge {
+    @include ds-typography($ds-typography-detailstandard-button-xlarge);
+    --ds-btn__icon-size: #{ds-px-to-rem(32px)};
+    --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200), true) - ds-px-to-rem(4px)};
+    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-200), true);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-detailstandard-button-xlarge, true);
+      --ds-btn__icon-size: 32px;
+      --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
+      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-200));
     }
   }
 
-  @include ds-typography($ds-typography-detailstandard-button);
   cursor: pointer;
   border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
   border-radius: ds-border-radius(x1);
-  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-      $ds-btn-outlined__border-width
-    );
   position: relative;
   background-color: var(--ds-btn__background-color);
   color: var(--ds-btn__color);
@@ -108,6 +161,11 @@ $ds-btn__icon-size: 24px;
     outline-offset: 2px;
   }
 
+  &:not(.ds-loading):disabled {
+    opacity: $ds-opacity-component-disabled;
+    cursor: not-allowed;
+  }
+
   @at-root a#{&} {
     box-sizing: border-box;
     text-align: center;
@@ -134,12 +192,12 @@ $ds-btn__icon-size: 24px;
   }
 
   @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading)::before {
-      background: var(--ds-btn__background-color-hover);
+    &:hover:not(:disabled):not(.ds-loading) {
+      opacity: $ds-opacity-component-hover-pressed;
     }
   }
   &:active:not(:disabled):not(.ds-loading)::before {
-    background: var(--ds-btn__background-color-active);
+    opacity: $ds-opacity-component-hover-pressed;
   }
 
   @include ds-loading();
@@ -150,11 +208,6 @@ $ds-btn__icon-size: 24px;
   box-sizing: border-box;
 }
 
-.ds-btn--small {
-  padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width)
-    ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-}
-
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn--mobile-full-width {
     width: 100%;
@@ -162,79 +215,84 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--icon-left,
-.ds-btn--icon-right {
+.ds-btn--icon-right,
+.ds-btn--toggle.ds-btn--selected,
+.ds-btn--icon-only {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   .ds-icon {
     display: flex;
-    height: ds-px-to-rem($ds-btn__icon-size);
-    width: ds-px-to-rem($ds-btn__icon-size);
-    margin: ds-spacing(0 0 0 $ds-s-050, rem);
+    height: var(--ds-btn__icon-size);
+    width: var(--ds-btn__icon-size);
     svg {
       fill: currentColor;
     }
   }
 }
-
-.ds-btn--icon-right {
-  padding-right: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-  &.ds-btn--small {
-    padding-right: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
+.ds-btn.ds-btn--icon-right {
+  padding-right: var(--ds-btn__icon-padding);
+  &.ds-force-px {
+    padding-right: var(--ds-btn__icon-padding);
+  }
+  .ds-icon {
+    margin: ds-spacing(0 0 0 $ds-s-050, rem);
+    @at-root .ds-force-px#{&} {
+      margin: ds-spacing(0 0 0 $ds-s-050);
+    }
+  }
+  &.ds-btn--small .ds-icon {
+    margin: ds-spacing(0 0 0 $ds-s-025, rem);
+    @at-root .ds-force-px#{&} {
+      margin: ds-spacing(0 0 0 $ds-s-025);
+    }
   }
 }
-
-.ds-btn--icon-left {
+.ds-btn.ds-btn--icon-left,
+.ds-btn.ds-btn--selected:not(.ds-btn--icon-only) {
   flex-direction: row-reverse;
-  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
+  padding-left: var(--ds-btn__icon-padding);
   .ds-icon {
     margin: ds-spacing(0 $ds-s-050 0 0, rem);
   }
-  &.ds-btn--small {
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
+  &.ds-btn--small .ds-icon {
+    margin: ds-spacing(0 $ds-s-025 0 0, rem);
   }
-}
-
-.ds-btn--brand,
-.ds-btn--business,
-.ds-btn--primary,
-.ds-btn--staticWhiteFilled {
-  &:not(.ds-loading):disabled {
-    opacity: $ds-opacity-component-disabled;
-    cursor: not-allowed;
+  &.ds-force-px {
+    padding-left: var(--ds-btn__icon-padding);
+    .ds-icon {
+      margin: ds-spacing(0 $ds-s-050 0 0);
+    }
+    &.ds-btn--small .ds-icon {
+      margin: ds-spacing(0 $ds-s-025 0 0);
+    }
   }
 }
 
-.ds-btn.ds-force-px {
-  /* stylelint-disable-next-line */
-  padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-150) -
-  $ds-btn-outlined__border-width;
-  @include ds-typography($ds-typography-detailstandard-button, true);
-
-  &.ds-btn--icon-left,
-  &.ds-btn--icon-right {
-    .ds-icon {
-      margin: ds-spacing(0 0 0 $ds-s-050);
-      height: $ds-btn__icon-size;
-      width: $ds-btn__icon-size;
-    }
+.ds-btn--toggle {
+  .ds-btn__on,
+  .ds-btn__off {
+    align-items: center;
   }
-  &.ds-btn--icon-right {
-    padding-right: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
+  .ds-btn__on {
+    display: none;
   }
-  &.ds-btn--icon-left {
-    padding-left: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-050 0 0);
+  &.ds-btn--selected {
+    .ds-btn__on {
+      display: flex;
     }
-  }
-  &.ds-btn--small {
-    padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
-    &.ds-btn--icon-right {
-      padding-right: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
+    .ds-btn__off {
+      display: none;
     }
-    &.ds-btn--icon-left {
-      padding-left: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
+  }
+
+  // we have to override spinner styling since spinner variant is based on "off" button variant
+  &.ds-btn--selected.ds-loading:not(.ds-btn--icon-only) {
+    .ds-spinner__inner {
+      border-top-color: $ds-color-icon-primary;
+      &::before {
+        border-color: $ds-color-icon-primary;
+      }
     }
   }
 }