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

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [28.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@28.0.0...@bonniernews/dn-design-system-web@28.0.1) (2025-02-11)
+
+
+### Bug Fixes
+
+* **web:** remove screenshots on update ([#1608](https://github.com/BonnierNews/dn-design-system/issues/1608)) ([363d51b](https://github.com/BonnierNews/dn-design-system/commit/363d51b6dd2ec71f6f81efb385709713048c0fb7))
+* **web:** run github actions after readme update ([#1609](https://github.com/BonnierNews/dn-design-system/issues/1609)) ([6e7de34](https://github.com/BonnierNews/dn-design-system/commit/6e7de342cf66e4e22434e6dbf3ce22f1d2d84f7e))
+* **web:** update web snapshots after color adjustments ([#1607](https://github.com/BonnierNews/dn-design-system/issues/1607)) ([9c7a347](https://github.com/BonnierNews/dn-design-system/commit/9c7a34707a71bb896824a42df81cd041e2dcc5da))
+
+
+### Maintenance
+
+* **deps-dev:** bump style-dictionary from 4.3.0 to 4.3.2 ([#1585](https://github.com/BonnierNews/dn-design-system/issues/1585)) ([06c2029](https://github.com/BonnierNews/dn-design-system/commit/06c2029191c8c2e0aa80b742cab087e19049c801))
+* **deps:** bump store2 from 2.14.2 to 2.14.4 ([#1595](https://github.com/BonnierNews/dn-design-system/issues/1595)) ([97b7e84](https://github.com/BonnierNews/dn-design-system/commit/97b7e84f354add4b60560008769471352a642115))
+* prerelease packages ([3c0cc37](https://github.com/BonnierNews/dn-design-system/commit/3c0cc3740e881ef01fd9924d86c5f089fe7116cc))
+* update icons ([#1612](https://github.com/BonnierNews/dn-design-system/issues/1612)) ([fe3eeb5](https://github.com/BonnierNews/dn-design-system/commit/fe3eeb5e8fa0369ad596f8a7bf085411daced1bd))
+
 ## [28.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@27.0.1...@bonniernews/dn-design-system-web@28.0.0) (2025-02-10)
 
 

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--default ds-btn--md 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: 'md',
+          variant: 'secondary',
+          size: 'medium',
           classNames: '',
           fullWidth: true,
           forcePx: params.forcePx,

package/components/buddy-menu/buddy-menu.njk

@@ -1,5 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
 {% macro BuddyMenu(params) %}
@@ -17,13 +18,12 @@
     <div class="{{ componentClassName + '__inner'}}">
       <div class="ds-buddy-menu__scrollable-container">
         <div class="ds-buddy-menu__content">
-          {{ Button({
+          {{ IconButton({
             variant: "transparent",
-            size: "sm",
+            size: "small",
             iconName: "close",
             classNames: "ds-buddy-menu__close",
-            forcePx: params.forcePx,
-            isIconButton: true
+            forcePx: params.forcePx
           })}}
 
           <div class="ds-buddy-menu__header">
@@ -46,7 +46,7 @@
 
                 {{ Button({
                   text: "Mitt konto",
-                  variant: "primaryBlack",
+                  variant: "primary",
                   fullWidth: true,
                   href: params.myAccountUrl | default("#"),
                   attributes: { "data-hide-promo" : "" },

package/components/buddy-menu/buddy-menu.scss

@@ -1,5 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
+@use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;
 
 :root {

package/components/button/README.md

@@ -9,25 +9,27 @@ Button
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| isIconButton | boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
-| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
+| text\* | string | \- |
 | disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | \- |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "large", "small", "medium", "xlarge" | "medium" |
 | loading | boolean | false |
-| text | string | \- |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
+| variant | Design variant<br />"brand", "secondary", "primary", "staticWhite" | "primary" |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | href | If href is set the button will be rendered as an a-tag<br />string | \- |
 | type | "button", "submit" | "button" |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| rounded | Button will be rounded<br />boolean | false |
 | iconPosition | "right", "none", "left" | "none" |
 
 ```jsx
 <Button
-  size="md"
+  emphasis="default"
+  size="medium"
   text="Primary"
   variant="primary"
 />

package/components/button/button-types.ts

@@ -1,20 +1,15 @@
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 
 export interface ButtonSharedProps {
-  /** Design variant */
-  variant?: 'primary' | 'primaryBlack' | 'secondaryFilled' | 'secondaryOutline' | 'transparent' | 'staticWhite'
   /** Note: only works on button-tag, not on a-tag */
   disabled?: boolean
-  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
-  iconName?: DsIcon
   classNames?: string
   /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
   attributes?: { [key: string]: string }
   /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
   forcePx?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  loading?: boolean,
-  isIconButton?: boolean
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
+  loading?: boolean
 }
 
 export interface AllyProps {
@@ -22,15 +17,23 @@ export interface AllyProps {
 }
 
 export interface ButtonBaseProps extends ButtonSharedProps {
+  /** Design variant */
+  variant?: 'primary' | 'secondary' | 'brand' | 'staticWhite'
   text?: string
+  emphasis?: 'default' | 'elevated' | 'outline' | 'transparent'
+  /** Button will be rounded */
+  rounded?: boolean
   /** Button will be full width on both desktop and mobile */
   fullWidth?: boolean
   /** Button will only full width on mobile */
   mobileFullWidth?: boolean
   iconPosition?: 'none' | 'left' | 'right'
+  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
+  iconName?: DsIcon
   type?: 'button' | 'submit'
   /** If href is set the button will be rendered as an a-tag */
   href?: string
+  isIconButton?: boolean
   a11y?: AllyProps
   selected?: boolean
   isToggle?: boolean
@@ -57,40 +60,28 @@ export interface ToggleWrapperProps {
   offChild?: any
 }
 
-export interface ButtonStandardProps
+export interface ButtonProps
   extends ButtonSharedProps,
     Pick<
       ButtonBaseProps,
-      'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'
+      'text' | 'variant' | 'emphasis' | 'rounded' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'iconName' | 'type' | 'href'
     > {
-      text: string
+      text: string // set as required
     }
 
-    export interface ButtonIconProps
+export interface ButtonToggleProps
   extends ButtonSharedProps,
-    Pick<
-      ButtonBaseProps,
-      'text' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'type' | 'href'> {
-        iconName: DsIcon
-      }
-
-export type ButtonProps =
-| ({ isIconButton: true } & ButtonIconProps)
-| ({ isIconButton?: false } & ButtonStandardProps)
-
-export interface ButtonToggleStandardProps
-  extends ButtonSharedProps,
-    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'selectedIconName' | 'fullWidth' | 'mobileFullWidth'> {
-      selectedText: string
+    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
+      selectedText: string // set as required
+      variant?: 'primary' | 'secondary' | 'brand'
     }
+export interface IconButtonProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'rounded' | 'href'> {
+  a11y?: object;
+  variant?: 'primary' | 'secondary' | 'brand'
+}
 
-export interface ButtonToggleIconProps
-extends ButtonSharedProps,
-  Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
-    iconName: DsIcon
-    selectedIconName: DsIcon
-  }
 
-  export type ButtonToggleProps =
-    | ({ isIconButton?: false } & ButtonToggleStandardProps)
-    | ({ isIconButton: true } & ButtonToggleIconProps)
+export interface IconButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'selectedIconName'> {
+  selected?: boolean;
+  variant?: 'primary' | 'secondary' | 'brand'
+}

package/components/button/button.njk

@@ -26,10 +26,15 @@
   {%- set attributes = getAttributes(params.attributes) %}
   {%- set ariaLabel = 'aria-label="' + text + '"' if params.text and not params.attributes["aria-label"] else "" %}
   {%- set buttonVariant = params.variant | default("primary") %}
+  {%- set emphasis = params.emphasis | default("default") %}
 
-  {% if params.variant == "staticWhite" or params.variant == "transparent" %}
+  {% if params.variant == "staticWhite" %}
+    {% if emphasis == "transparent" or emphasis == "outline" %}
+      {%- set spinnerVariant = "staticWhite" %}
+    {% else %}
       {%- set spinnerVariant = "staticBlack" %}
-  {% elif params.variant == "secondaryFilled" or params.variant == "secondaryOutline" %}
+    {% endif %}
+  {% elif emphasis == "transparent" or emphasis == "outline" or params.variant == "secondary" %}
     {%- set spinnerVariant = "primary" %}
   {% else %}
     {%- set spinnerVariant = "secondary" %}
@@ -39,19 +44,21 @@
     {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
-  {%- if params.iconName and ((params.iconPosition and params.iconPosition != "none") or params.isIconButton == true) %}
+  {%- 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 else classNamePrefix + "lg",
+    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 and not params.isIconButton,
-    classNamePrefix + "icon-only" if params.isIconButton,
+    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,
@@ -61,7 +68,7 @@
 
   {%- if params.isToggle %}
     {% call ToggleWrapper({ ariaLabel: ariaLabel, selected: params.selected, classes: classes, attributes: attributes, disabled: params.disabled, loadingHtml: loadingHtml }) %}
-      {%- if params.isIconButton %}
+      {%- 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 %}
@@ -75,7 +82,7 @@
     {% if params.href %}
       {% set loadingHtml = null %}
     {% endif %}
-    {% set buttonParams = { isIconButton: params.isIconButton, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
+    {% 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) }}

package/components/button/button.scss

@@ -19,7 +19,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
 
   cursor: pointer;
   border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
-  border-radius: 100px;
+  border-radius: ds-border-radius(012);
   position: relative;
   background-color: var(--ds-btn__background-color);
   color: var(--ds-btn__color);
@@ -32,35 +32,66 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   }
 
   &.ds-btn--primary {
-    --ds-btn__background-color: #{$ds-color-brand-600};
-    --ds-btn__color: #{$ds-color-text-on-brand};
-  }
-
-  &.ds-btn--primaryBlack {
-    --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
-    --ds-btn__color: #{$ds-color-text-primaryinvert};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-surface-primaryinvert};
+      --ds-btn__color: #{$ds-color-text-primaryinvert};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-border-primary-strongest};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
   }
 
-  &.ds-btn--secondaryFilled {
-    --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
-    --ds-btn__color: #{$ds-color-text-primary};
+  &.ds-btn--secondary {
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-surface-primary-raised-strong};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-border-primary-strong};
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-primary};
+    }
   }
 
-  &.ds-btn--secondaryOutline {
-    --ds-btn__background-color: transparent;
-    --ds-btn__color: #{$ds-color-text-primary};
-    --ds-btn__border-color: #{$ds-color-border-primary-strong};
+  &.ds-btn--brand {
+    --ds-btn__outline-color: #{$ds-color-border-brand};
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-surface-brand};
+      --ds-btn__color: #{$ds-color-neutral-white};
+    }
+    &.ds-btn--outline {
+      --ds-btn__border-color: #{$ds-color-surface-brand};
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-text-brand};
+    }
   }
 
   &.ds-btn--staticWhite {
     --ds-btn__outline-color: #{$ds-color-neutral-white};
-    --ds-btn__background-color: #{$ds-color-neutral-white};
-    --ds-btn__color: #{$ds-color-neutral-black};
-  }
-
-  &.ds-btn--transparent {
-    --ds-btn__color: #{$ds-color-text-primary};
-    --ds-btn__background-color: transparent;
+    &.ds-btn--default,
+    &.ds-btn--elevated {
+      --ds-btn__background-color: #{$ds-color-neutral-white};
+      --ds-btn__color: #{$ds-color-neutral-black};
+    }
+    &.ds-btn--outline {
+      --ds-btn__background-color: transparent;
+      --ds-btn__border-color: #{$ds-color-neutral-white};
+      --ds-btn__color: #{$ds-color-neutral-white};
+    }
+    &.ds-btn--transparent {
+      --ds-btn__color: #{$ds-color-neutral-white};
+    }
   }
 
   &.ds-btn--toggle.ds-btn--selected:not(.ds-btn--icon-only) {
@@ -69,87 +100,83 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     --ds-btn__border-color: #{$ds-color-border-primary-strongest};
     --ds-btn__outline-color: #{$ds-color-border-primary-strongest};
   }
+  &.ds-btn--transparent {
+    --ds-btn__background-color: transparent;
+  }
+
+  &.ds-btn--rounded {
+    border-radius: 100px;
+  }
 
-  &.ds-btn--sm {
+  &.ds-btn--elevated {
+    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-md);
+  }
+
+  &.ds-btn--small {
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
-    --ds-btn__icon-only-padding: #{ds-px-to-rem(5px)};
     padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-size: 20px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
-      --ds-btn__icon-only-padding: 5px;
       padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
       @include ds-typography(
-        $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-medium,
+        $variable: $ds-typography-functional-body-sm,
+        $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--md {
+  &.ds-btn--medium {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
-    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
     padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
-      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
       padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
       @include ds-typography(
         $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-medium,
+        $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--lg {
+  &.ds-btn--large {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
-    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075), true)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
 
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
-      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-075))};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
       @include ds-typography(
         $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-medium,
+        $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--xl {
-    --ds-btn__icon-size: #{ds-px-to-rem(24px)};
+  &.ds-btn--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)};
-    --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
-    padding: _btn-brdr(ds-spacing($ds-s-100), true) _btn-brdr(ds-spacing($ds-s-200), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-200), true);
+    @include ds-typography($variable: $ds-typography-functional-body-lg, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
-      --ds-btn__icon-size: 24px;
+      --ds-btn__icon-size: 32px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
-      --ds-btn__icon-only-padding: #{_btn-brdr(ds-spacing($ds-s-200))};
-      padding: _btn-brdr(ds-spacing($ds-s-100)) _btn-brdr(ds-spacing($ds-s-200));
+      padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-200));
       @include ds-typography(
-        $variable: $ds-typography-functional-body-md,
-        $fontWeight: $ds-fontweight-medium,
+        $variable: $ds-typography-functional-body-lg,
+        $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
     }
   }
 
-  &.ds-btn--icon-only {
-    padding: var(--ds-btn__icon-only-padding);
-    @at-root .ds-force-px#{&} {
-      padding: var(--ds-btn__icon-only-padding);
-    }
-  }
-
   span {
     pointer-events: none;
   }
@@ -240,7 +267,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
       margin: ds-spacing(0 0 0 $ds-s-050);
     }
   }
-  &.ds-btn--sm .ds-icon {
+  &.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);
@@ -254,7 +281,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   .ds-icon {
     margin: ds-spacing(0 $ds-s-050 0 0, rem);
   }
-  &.ds-btn--sm .ds-icon {
+  &.ds-btn--small .ds-icon {
     margin: ds-spacing(0 $ds-s-025 0 0, rem);
   }
   &.ds-force-px {
@@ -262,7 +289,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     .ds-icon {
       margin: ds-spacing(0 $ds-s-050 0 0);
     }
-    &.ds-btn--sm .ds-icon {
+    &.ds-btn--small .ds-icon {
       margin: ds-spacing(0 $ds-s-025 0 0);
     }
   }

package/components/button-toggle/README.md

@@ -16,27 +16,24 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| isIconButton | boolean | false |
-| selectedText | string | \- |
-| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
+| selectedText\* | string | \- |
+| variant | "brand", "secondary", "primary" | "primary" |
 | disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
-| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
 | classNames | string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
 | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
-| size | "sm", "md", "lg", "xl" | "md" |
+| size | "large", "small", "medium", "xlarge" | "medium" |
 | loading | boolean | false |
 | text | string | \- |
 | selected | boolean | false |
-| selectedIconName | "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 
 ```jsx
 <ButtonToggle
   selectedText="Följer"
-  size="lg"
+  size="large"
   text="Följ"
-  variant="primary"
+  variant="brand"
 />
 ```

package/components/button-toggle/button-toggle.njk

@@ -12,9 +12,6 @@
     size: params.size,
     fullWidth: params.fullWidth,
     mobile: params.mobile,
-    isIconButton: params.isIconButton,
-    iconName: params.iconName,
-    selectedIconName: params.selectedIconName,
     loading: params.loading,
     forcePx: params.forcePx,
     classNames: params.classNames,

package/components/divider/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| variant | "soft", "medium", "hard" | "soft" |
+| variant | "medium", "soft", "hard" | "soft" |
 | classNames | string | \- |
 | attributes | object | \- |
 

package/components/empty-state/empty-state.njk

@@ -35,7 +35,7 @@
           {% if params.brandButton %}
             {{ Button({
               text: params.brandButton.text,
-              variant: "primary",
+              variant: "brand",
               href: params.brandButton.href,
               classNames: params.brandButton.classNames,
               attributes: params.brandButton.attributes,
@@ -47,7 +47,8 @@
           {% if params.primaryButton %}
             {{ Button({
               text: params.primaryButton.text,
-              variant: "secondaryOutline",
+              variant: "primary",
+              emphasis: "outline",
               href: params.primaryButton.href,
               classNames: params.primaryButton.classNames,
               attributes: params.primaryButton.attributes,

package/components/factbox/factbox.njk

@@ -29,8 +29,8 @@
       <div class="{{ componentClassName + '__show-more'}}">
         {{ Button({
           text: 'Visa mer',
-          variant: 'secondaryFilled',
-          size: 'md',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_more',
           classNames: 'ds-factbox__expand-more',
@@ -40,8 +40,8 @@
         })}}
         {{ Button({
           text: 'Visa mindre',
-          variant: 'secondaryFilled',
-          size: 'md',
+          variant: 'secondary',
+          size: 'medium',
           iconPosition: 'right',
           iconName: 'expand_less',
           classNames: 'ds-factbox__expand-less',