@dnb/eufemia 10.14.0 → 10.15.1

package/components/accordion/style/dnb-accordion.css

@@ -7,14 +7,16 @@
  */
 .dnb-accordion {
   --accordion-border-width: 0.0625rem;
-  --accordion-border-radius: 0.25rem;
+  --accordion-border-radius: 0.5rem;
   --accordion-easing: var(--easing-default);
-  --accordion-header-margin-vertical: 1.5rem;
-  --accordion-header-margin-vertical--description: 1rem;
-  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-margin-vertical: 1.25rem;
+  --accordion-header-margin-vertical--description: 0.75rem;
+  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: 1rem;
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
+  --accordion-title-font-weight: var(--font-weight-basis);
+  --accordion-title-font-weight--expanded: var(--font-weight-medium);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -62,7 +64,7 @@
   transition: transform 400ms var(--accordion-easing);
 }
 .dnb-accordion__header--description .dnb-accordion__header__icon {
-  margin-top: 1rem;
+  margin-top: var(--accordion-header-margin-vertical--description);
 }
 .dnb-accordion__header--icon-right {
   justify-content: space-between;
@@ -86,9 +88,15 @@
 .dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
   margin-left: 0;
 }
+.dnb-accordion__header--expanded {
+  --accordion-title-font-weight: var(
+    --accordion-title-font-weight--expanded
+  );
+}
 .dnb-accordion__header__title {
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
+  font-weight: var(--accordion-title-font-weight);
 }
 .dnb-accordion__header__description {
   font-size: var(--font-size-small);

package/components/accordion/style/dnb-accordion.min.css

@@ -1 +1,3 @@
-.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.5rem;--accordion-header-margin-vertical--description:1rem;--accordion-header-wrapper-margin:2rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:var(--font-size-basis);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}
+.dnb-accordion{--accordion-border-width:0.0625rem;--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;border:var(--accordion-border-width) solid transparent;border-radius:var(--accordion-border-radius);cursor:pointer;display:flex;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;user-select:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:flex-start;font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
+    --accordion-title-font-weight--expanded
+  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}

package/components/accordion/style/dnb-accordion.scss

@@ -7,21 +7,25 @@
 
 .dnb-accordion {
   --accordion-border-width: 0.0625rem;
-  --accordion-border-radius: 0.25rem;
+  --accordion-border-radius: 0.5rem;
   --accordion-easing: var(--easing-default);
 
   // vertical spacing
-  --accordion-header-margin-vertical: 1.5rem;
-  --accordion-header-margin-vertical--description: 1rem;
+  --accordion-header-margin-vertical: 1.25rem;
+  --accordion-header-margin-vertical--description: 0.75rem;
 
   // wrapper
-  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: 1rem;
 
   // icon
   --accordion-header-icon-gutter: 1rem;
   --accordion-header-icon-margin: 1rem;
 
+  // Title
+  --accordion-title-font-weight: var(--font-weight-basis);
+  --accordion-title-font-weight--expanded: var(--font-weight-medium);
+
   position: relative;
 
   display: flex;
@@ -86,7 +90,7 @@
       transition: transform 400ms var(--accordion-easing);
     }
     &--description &__icon {
-      margin-top: 1rem;
+      margin-top: var(--accordion-header-margin-vertical--description);
     }
     &--icon-right {
       justify-content: space-between;
@@ -111,9 +115,16 @@
       margin-left: 0;
     }
 
+    &--expanded {
+      --accordion-title-font-weight: var(
+        --accordion-title-font-weight--expanded
+      );
+    }
+
     &__title {
       font-size: var(--font-size-basis);
       line-height: var(--line-height-basis);
+      font-weight: var(--accordion-title-font-weight);
     }
 
     &__description {

package/components/accordion/style/themes/dnb-accordion-theme-sbanken.css

@@ -5,57 +5,33 @@
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-accordion {
   --accordion-border-width: 0;
   --accordion-border-radius: 0;
   --accordion-header-margin-vertical: 1rem;
   --accordion-header-margin-vertical--description: 0.5rem;
-  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
-  --accordion-frame-color: transparent;
-  --accordion-frame-color--expanded: var(--sb-color-violet);
-  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
-  --accordion-frame-width: 0.1875rem;
-  --accordion-frame-width--active: 0rem;
-  --accordion-bg: transparent;
-  --accordion-bg--expanded: var(--sb-color-violet-light-4);
-  --accordion-bg--disabled: var(--sb-color-gray-light-2);
-  --accordion-content-padding-left: calc(
-    3.5rem - var(--accordion-frame-width)
+  --sb-accordion-frame-color: transparent;
+  --sb-accordion-frame-width: 0.1875rem;
+  --sb-accordion-frame-width--active: 0rem;
+  --sb-accordion-content-padding-left: calc(
+    3.5rem - var(--sb-accordion-frame-width)
   );
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
-  background-color: var(--accordion-bg);
-  border-left: var(--accordion-frame-width) solid var(--accordion-frame-color);
-}
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible[disabled] {
-  cursor: not-allowed;
+  background-color: var(--sb-accordion-background, transparent);
+  border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
 }
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) {
-  outline: none;
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-  z-index: 1;
-  border-radius: 0.125rem;
-  background-color: var(--sb-color-blue-light-3);
-  color: var(--border-color);
-}
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
   outline: none;
   --border-color: var(--focus-ring-color);
@@ -67,9 +43,6 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disa
   background-color: var(--sb-color-blue-light-3);
   color: var(--border-color);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) .dnb-accordion__header__icon {
-  color: var(--border-color);
-}
 html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
   color: var(--border-color);
 }
@@ -88,8 +61,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   --border-color: var(--sb-color-violet);
-  border-left-width: var(--accordion-frame-width--active);
-  padding-left: calc(var(--accordion-frame-width) - var(--accordion-frame-width--active));
+  border-left-width: var(--sb-accordion-frame-width--active);
+  padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
 }
 .dnb-accordion__header__icon, .dnb-accordion__header__container {
   color: var(--sb-color-violet);
@@ -98,8 +71,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --accordion-header-icon-margin: 1.5rem;
 }
 .dnb-accordion__header--icon-right + .dnb-accordion__content {
-  --accordion-content-padding-left: calc(
-    1.5rem - var(--accordion-frame-width)
+  --sb-accordion-content-padding-left: calc(
+    1.5rem - var(--sb-accordion-frame-width)
   );
 }
 .dnb-accordion__header[disabled] * {
@@ -107,18 +80,15 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
 }
 .dnb-accordion__content__inner {
   margin-top: 0;
-  padding: 0 1rem 1rem var(--accordion-content-padding-left);
+  padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
 }
 .dnb-accordion--expanded {
-  --accordion-bg: var(--accordion-bg--expanded);
-  --accordion-frame-color: var(--accordion-frame-color--expanded);
-  --accordion-frame-width--active: 0.125rem;
-}
-.dnb-accordion--expanded > .dnb-accordion__header {
-  font-weight: var(--font-weight-medium);
+  --sb-accordion-background: var(--sb-color-violet-light-4);
+  --sb-accordion-frame-color: var(--sb-color-violet);
+  --sb-accordion-frame-width--active: 0.125rem;
 }
 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
-  --accordion-bg: var(--accordion-bg--disabled);
-  --accordion-frame-color: var(--accordion-frame-color--disabled);
+  --sb-accordion-background: var(--sb-color-gray-light-2);
+  --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
 }

package/components/accordion/style/themes/dnb-accordion-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--accordion-frame-width));--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--accordion-frame-width));--accordion-frame-color:transparent;--accordion-frame-color--expanded:var(--sb-color-violet);--accordion-frame-color--disabled:var(--sb-color-gray-dark-2);--accordion-frame-width:0.1875rem;--accordion-frame-width--active:0rem;--accordion-bg:transparent;--accordion-bg--expanded:var(--sb-color-violet-light-4);--accordion-bg--disabled:var(--sb-color-gray-light-2);--accordion-content-padding-left:calc(3.5rem - var(--accordion-frame-width));color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--accordion-bg);border-left:var(--accordion-frame-width) solid var(--accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--accordion-frame-width) - var(--accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--accordion-content-padding-left:calc(1.5rem - var(--accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--accordion-content-padding-left)}.dnb-accordion--expanded{--accordion-bg:var(--accordion-bg--expanded);--accordion-frame-color:var(--accordion-frame-color--expanded);--accordion-frame-width--active:0.125rem}.dnb-accordion--expanded>.dnb-accordion__header{font-weight:var(--font-weight-medium)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--accordion-bg:var(--accordion-bg--disabled);--accordion-frame-color:var(--accordion-frame-color--disabled)}
+.dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}

package/components/accordion/style/themes/dnb-accordion-theme-sbanken.scss

@@ -4,7 +4,6 @@
 */
 
 @import '../../../../style/core/utilities.scss';
-@import '../../../button/style/themes/button-mixins.scss';
 
 .dnb-accordion {
   --accordion-border-width: 0;
@@ -15,41 +14,33 @@
   --accordion-header-margin-vertical--description: 0.5rem;
 
   // header
-  --accordion-header-wrapper-margin: 1rem;
   --accordion-header-wrapper-margin--icon-right: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
 
   // icon
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
-    1.5rem - var(--accordion-frame-width)
+    1.5rem - var(--sb-accordion-frame-width)
   );
 
   // frame (left border on expand)
-  --accordion-frame-color: transparent;
-  --accordion-frame-color--expanded: var(--sb-color-violet);
-  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
-  --accordion-frame-width: 0.1875rem;
-  --accordion-frame-width--active: 0rem;
-
-  // background
-  --accordion-bg: transparent;
-  --accordion-bg--expanded: var(--sb-color-violet-light-4);
-  --accordion-bg--disabled: var(--sb-color-gray-light-2);
+  --sb-accordion-frame-color: transparent;
+  --sb-accordion-frame-width: 0.1875rem;
+  --sb-accordion-frame-width--active: 0rem;
 
   // other
-  --accordion-content-padding-left: calc(
-    3.5rem - var(--accordion-frame-width)
+  --sb-accordion-content-padding-left: calc(
+    3.5rem - var(--sb-accordion-frame-width)
   );
 
   color: var(--sb-color-text);
 
   &__header,
   &__content {
-    background-color: var(--accordion-bg);
-    border-left: var(--accordion-frame-width) solid
-      var(--accordion-frame-color);
+    background-color: var(--sb-accordion-background, transparent);
+    border-left: var(--sb-accordion-frame-width) solid
+      var(--sb-accordion-frame-color);
   }
 
   &__header {
@@ -73,9 +64,11 @@
       @include fakeBorder(null, null, inset);
       // must be set after fakeBorder()
       --border-color: var(--sb-color-violet);
-      border-left-width: var(--accordion-frame-width--active);
+      border-left-width: var(--sb-accordion-frame-width--active);
       padding-left: calc(
-        var(--accordion-frame-width) - var(--accordion-frame-width--active)
+        var(--sb-accordion-frame-width) - var(
+            --sb-accordion-frame-width--active
+          )
       );
     }
 
@@ -87,8 +80,8 @@
     &--icon-right {
       --accordion-header-icon-margin: 1.5rem;
       + .dnb-accordion__content {
-        --accordion-content-padding-left: calc(
-          1.5rem - var(--accordion-frame-width)
+        --sb-accordion-content-padding-left: calc(
+          1.5rem - var(--sb-accordion-frame-width)
         );
       }
     }
@@ -103,23 +96,19 @@
 
   &__content__inner {
     margin-top: 0;
-    padding: 0 1rem 1rem var(--accordion-content-padding-left);
+    padding: 0 1rem 1rem var(--sb-accordion-content-padding-left);
   }
 
   &--expanded {
-    --accordion-bg: var(--accordion-bg--expanded);
-    --accordion-frame-color: var(--accordion-frame-color--expanded);
-    --accordion-frame-width--active: 0.125rem;
-
-    > .dnb-accordion__header {
-      font-weight: var(--font-weight-medium);
-    }
+    --sb-accordion-background: var(--sb-color-violet-light-4);
+    --sb-accordion-frame-color: var(--sb-color-violet);
+    --sb-accordion-frame-width--active: 0.125rem;
 
     // disabled
     > .dnb-accordion__header[disabled],
     > .dnb-accordion__header[disabled] + .dnb-accordion__content {
-      --accordion-bg: var(--accordion-bg--disabled);
-      --accordion-frame-color: var(--accordion-frame-color--disabled);
+      --sb-accordion-background: var(--sb-color-gray-light-2);
+      --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
     }
   }
 }

package/components/accordion/style/themes/dnb-accordion-theme-ui.css

@@ -1,125 +1,157 @@
 /*
-* Accordion theme
-*
-*/
+ * Accordion theme
+ *
+ */
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-accordion__header {
+  color: var(--ui-accordion-color--override, var(--ui-accordion-color));
+  background-color: var(--ui-accordion-background--override, var(--ui-accordion-background));
+  box-shadow: var(--ui-accordion-box-shadow);
   border: none;
-}
-.dnb-accordion__header__icon, .dnb-accordion__header__container {
-  color: var(--color-sea-green);
+  /* 
+   * VARIANTS
+   * Each variant is mutually exclusive
+   */
+  /* 
+   * STATES
+   * States that can exist across all variants.
+   */
 }
 .dnb-accordion__header__description {
-  color: var(--color-black-55);
-}
-.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title {
-  font-weight: var(--font-weight-medium);
+  color: var(--ui-accordion-description-color--override, var(--ui-accordion-description-color));
+}
+.dnb-accordion__header--outlined, .dnb-accordion__header--filled {
+  --ui-accordion-border-inset: inset;
+  --ui-accordion-box-shadow: var(--ui-accordion-border-inset) 0 0 0
+    var(--accordion-border-width)
+    var(
+      --ui-accordion-border-color--override,
+      var(--ui-accordion-border-color)
+    );
+}
+.dnb-accordion__header--outlined[disabled], .dnb-accordion__header--filled[disabled] {
+  --ui-accordion-color: var(--color-sea-green-30);
+  --ui-accordion-background-: var(--color-white);
+  --ui-accordion-border-color: var(--color-sea-green-30);
+  --ui-accordion-description-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green-30);
+}
+.dnb-accordion__header--outlined {
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-black-8);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-expanded-color: var(--color-white);
+  --ui-accordion-expanded-background: var(--color-sea-green);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-expanded-background
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-expanded-color
+  );
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible[disabled] {
+  cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-8);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-border-color: var(--color-emerald-green);
+  --ui-accordion-expanded-color: var(--color-emerald-green);
+  --ui-accordion-expanded-background: var(--color-mint-green);
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([disabled]) {
+  --accordion-border-width: 0.125rem;
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-white);
+  --ui-accordion-border-color: var(--color-emerald-green);
+  --ui-accordion-description-color: var(--color-black-55);
+  --ui-accordion-border-inset: ;
+  --ui-accordion-expanded-color: var(--ui-accordion-color);
+  --ui-accordion-expanded-background: var(--ui-accordion-background);
+  --ui-accordion-expanded-border-color: var(
+    --ui-accordion-border-color
+  );
+  --ui-accordion-expanded-description-color: var(
+    --ui-accordion-description-color
+  );
+  --ui-accordion-after-click-color: var(--color-white);
+  --ui-accordion-after-click-background: var(--color-sea-green);
+  --ui-accordion-after-click-border-color: var(--color-sea-green);
+  --ui-accordion-after-click-description-color: var(--color-white);
+}
+.dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled] {
+  cursor: not-allowed;
 }
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+.dnb-accordion__header--outlined:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]) {
+  --accordion-border-width: 0.0625rem;
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-inset: inset;
 }
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-accordion__header--filled {
+  --accordion-border-width: 0.125rem;
+  --accordion-title-font-weight--expanded: var(--font-weight-basis);
+  --ui-accordion-color: var(--color-emerald-green);
+  --ui-accordion-background: var(--color-pistachio);
+  --ui-accordion-border-color: var(--color-pistachio);
+  --ui-accordion-description-color: var(--color-black-55);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]) {
+  --ui-accordion-background: var(--color-white);
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] {
+.dnb-accordion__header--filled:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
-  color: var(--color-emerald-green);
-  background-color: var(--color-pistachio);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
-  background-color: var(--color-white);
-  --border-color: var(--color-sea-green-30);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * {
-  color: var(--color-sea-green-30);
-}
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] {
-  background-color: var(--color-sea-green-30);
-}
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] * {
-  color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-  background-color: var(--color-mint-green);
-}
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
-  color: var(--color-emerald-green);
-}
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-  --border-color: var(--color-emerald-green);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * {
-  color: var(--color-white);
-}
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] {
-  cursor: not-allowed;
+.dnb-accordion__header--filled:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]) {
+  --ui-accordion-color: var(--color-white);
+  --ui-accordion-background: var(--color-sea-green);
+  --ui-accordion-border-color: var(--color-sea-green);
+  --ui-accordion-description-color: ar(--color-white);
 }
-html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-  --border-color: var(--color-sea-green);
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled] {
+  cursor: not-allowed;
 }
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * {
-  color: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]) {
+  --ui-accordion-border-color: var(--color-sea-green);
+}
+.dnb-accordion__header--expanded {
+  --ui-accordion-color--override: var(
+    --ui-accordion-expanded-color--override,
+    var(--ui-accordion-expanded-color)
+  );
+  --ui-accordion-background--override: var(
+    --ui-accordion-expanded-background--override,
+    var(--ui-accordion-expanded-background)
+  );
+  --ui-accordion-border-color--override: var(
+    --ui-accordion-expanded-border-color--override,
+    var(--ui-accordion-expanded-border-color)
+  );
+  --ui-accordion-description-color--override: var(
+    --ui-accordion-expanded-description-color--override,
+    var(--ui-accordion-expanded-description-color)
+  );
+}
+.dnb-accordion__header--after-click {
+  --ui-accordion-expanded-color--override: var(
+    --ui-accordion-after-click-color
+  );
+  --ui-accordion-expanded-background--override: var(
+    --ui-accordion-after-click-background
+  );
+  --ui-accordion-expanded-border-color--override: var(
+    --ui-accordion-after-click-border-color
+  );
+  --ui-accordion-expanded-description-color--override: var(
+    --ui-accordion-after-click-description-color
+  );
 }