@dnb/eufemia 10.14.0 → 10.15.0

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,39 +5,29 @@
 /*
  * 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);
+  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;
@@ -88,8 +78,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 +88,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 +97,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[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(--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,173 @@
 /*
-* 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[disabled] {
+  cursor: not-allowed;
 }
-.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.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);
+}
+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);
+}
+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] {
+.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__header--filled.focus-visible[disabled] {
   cursor: not-allowed;
 }
-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);
+}
+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
+  );
 }

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

@@ -1 +1,27 @@
-.dnb-accordion__header{border:none}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--color-sea-green)}.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)}.dnb-accordion__variant--outlined>.dnb-accordion__header{--border-color:var(--color-black-8);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus[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[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);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-accordion__variant--outlined>.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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]){--border-color:var(--color-emerald-green);--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-accordion__variant--outlined>.dnb-accordion__header[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-accordion__variant--outlined>.dnb-accordion__header[disabled] *{color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.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);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.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}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]){--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active) *{color:var(--color-white)}
+.dnb-accordion__header{background-color:var(--ui-accordion-background--override,var(--ui-accordion-background));border:none;box-shadow:var(--ui-accordion-box-shadow);color:var(--ui-accordion-color--override,var(--ui-accordion-color))}.dnb-accordion__header__description{color:var(--ui-accordion-description-color--override,var(--ui-accordion-description-color))}.dnb-accordion__header--filled,.dnb-accordion__header--outlined{--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--filled[disabled],.dnb-accordion__header--outlined[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}html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible[disabled]{cursor:not-allowed}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)}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)}html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled]{cursor:not-allowed}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}.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}.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__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[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__header--filled.focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled.focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}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
+  )}