@dnb/eufemia 9.48.0-beta.1 → 10.0.0-beta.2

package/cjs/components/button/style/themes/dnb-button-theme-sbanken.css

@@ -0,0 +1,583 @@
+/*
+* Button theme
+*
+*/
+/*
+* Button theme
+*
+*/
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-button {
+  border: none;
+  box-shadow: none;
+  text-align: left;
+}
+.dnb-button--primary {
+  color: var(--color-white);
+  background-color: var(--color-sea-green);
+}
+html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--primary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--primary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+.dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--primary[disabled] {
+  color: var(--color-white);
+  background-color: var(--color-sea-green-30);
+}
+.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error {
+  color: var(--color-white);
+  background-color: var(--color-fire-red);
+}
+.dnb-button--secondary {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-sea-green);
+  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  .dnb-button--secondary {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  .dnb-button--secondary {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--secondary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--secondary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+.dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]) {
+  color: var(--color-sea-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+  color: var(--color-sea-green-30);
+  background-color: var(--color-white);
+  --border-color: var(--color-sea-green-30);
+  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+  color: var(--color-fire-red);
+  --border-color: var(--color-fire-red);
+  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error {
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
+  }
+}
+.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon {
+  color: inherit;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-white);
+  --border-color: var(--color-emerald-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-white);
+}
+html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+.dnb-button--secondary:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+  color: var(--color-emerald-green);
+  background-color: var(--color-mint-green-50);
+  --border-color: transparent;
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--active {
+  --border-color: var(--color-emerald-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--tertiary {
+  position: relative;
+  color: var(--color-sea-green);
+  background-color: transparent;
+}
+.dnb-button--tertiary .dnb-button__text {
+  position: relative;
+}
+.dnb-button--tertiary .dnb-button__text::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: 0.095rem;
+  border-radius: 0.0475rem;
+  color: var(--color-sea-green);
+  background-color: currentcolor;
+  bottom: -0.0625rem;
+  color: transparent;
+  transition: color 250ms ease-in-out;
+}
+[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text::after {
+  transition: none;
+}
+.dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
+  content: none;
+}
+.dnb-button--tertiary.dnb-button--has-text {
+  padding-left: 0;
+  padding-right: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
+  left: -1rem;
+  right: -1rem;
+}
+.dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) {
+  outline: initial;
+}
+html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) {
+  box-shadow: none;
+}
+.dnb-button--tertiary:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+  --border-color: var(--color-emerald-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text::after {
+  visibility: hidden;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
+  visibility: visible;
+  color: var(--color-emerald-green);
+}
+.dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) {
+  outline: initial;
+}
+html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) {
+  box-shadow: none;
+}
+html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+  transition: none;
+  visibility: visible;
+  opacity: 1;
+  color: var(--color-emerald-green);
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
+  visibility: hidden;
+}
+.dnb-button--tertiary .dnb-button__icon {
+  align-self: flex-start;
+  margin-top: calc(var(--button-height) / 2 - 0.5rem);
+}
+.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+  margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
+}
+.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+  margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
+}
+.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+  margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
+}
+.dnb-button--tertiary.dnb-button--icon-position-top {
+  flex-direction: column;
+  border-radius: 0.5rem;
+  vertical-align: middle;
+}
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
+  padding: 0;
+}
+.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon {
+  margin-top: 0.5rem;
+  align-self: center;
+}
+.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+  font-size: var(--font-size-x-small);
+}
+.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after {
+  left: 0;
+  right: 0;
+}
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
+  font-size: var(--font-size-small);
+}
+.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment {
+  order: 3;
+  height: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text {
+  padding-left: 1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
+  left: -0.5rem;
+  right: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
+  margin-right: -0.5rem;
+  margin-left: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text {
+  padding-left: 0;
+  margin-left: 1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text::after {
+  left: -0.5rem;
+  right: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before {
+  right: -1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text {
+  padding-right: 1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
+  left: 0;
+  right: -0.5rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+  margin-right: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text {
+  padding-right: 0;
+  margin-right: 1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text::after, .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text::after {
+  right: 0;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before {
+  left: -1rem;
+}
+.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled])::before {
+  left: 0;
+  right: 0;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) {
+  --border-color: var(--color-sea-green);
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]) {
+  --border-color: var(--color-sea-green-30);
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text::after {
+  visibility: hidden;
+}
+.dnb-button--tertiary[disabled] {
+  color: var(--color-sea-green-30);
+}
+.dnb-button--signal {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+}
+html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: var(--color-ocean-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+html[data-whatintent=touch] .dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled] {
+  cursor: not-allowed;
+}
+html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: var(--color-ocean-green);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--signal:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--signal:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+}
+html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+@supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+  html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]) {
+    box-shadow: 0 0 0 0.125rem var(--border-color);
+  }
+}
+.dnb-button--signal:active[disabled], html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--signal:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]) {
+  color: var(--color-ocean-green);
+  background-color: var(--color-accent-yellow);
+  --border-color: transparent;
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--signal[disabled] {
+  color: var(--color-black-20);
+  background-color: var(--color-accent-yellow-30);
+}
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]) {
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled])::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0.0625rem;
+  background-color: currentcolor;
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover {
+  color: var(--color-white);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus::after, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover::after {
+  background-color: var(--color-sea-green);
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover {
+  border-radius: 0;
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active {
+  color: var(--color-sea-green);
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active, html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active::after {
+  background-color: var(--color-mint-green-50);
+}
+html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
+  color: var(--color-black-55);
+  background-color: var(--color-black-3);
+}
+
+.dnb-button--primary {
+  color: var(--sb-color-green);
+  background-color: var(--sb-color-purple-alternative);
+}
+html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]) {
+  color: var(--sb-color-green);
+  background-color: var(--sb-color-purple);
+  --border-color: var(--sb-color-purple);
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]) {
+  color: var(--sb-color-green);
+  background-color: var(--sb-color-purple-alternative);
+  --border-color: transparent;
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}
+.dnb-button--primary[disabled] {
+  color: var(--sb-color-gray-dark-2);
+  background-color: var(--sb-color-grey-light);
+  --border-color: var(--sb-color---sb-color-gray-dark-2);
+  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent;
+}

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

@@ -0,0 +1 @@
+.dnb-button{border:none;box-shadow:none;text-align:left}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);color:var(--color-sea-green)}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 .125rem var(--border-color);color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color);color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-button--secondary{box-shadow:0 0 0 .0625rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-button--secondary{box-shadow:0 0 0 .0625rem var(--border-color)}}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 .125rem var(--border-color);color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color);color:var(--color-sea-green-30)}@supports (-webkit-touch-callout:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{box-shadow:0 0 0 .0625rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{box-shadow:0 0 0 .0625rem var(--border-color)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 .0625rem var(--border-color);color:var(--color-fire-red)}@supports (-webkit-touch-callout:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{box-shadow:0 0 0 .0625rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{box-shadow:0 0 0 .0625rem var(--border-color)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 .125rem var(--border-color);color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color);color:var(--color-emerald-green)}.dnb-button--active{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green);position:relative}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-1rem;right:-1rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green);visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green);opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0;right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color)}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){--border-color:var(--color-sea-green-30);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color)}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 .125rem var(--border-color);color:var(--color-ocean-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){box-shadow:0 0 0 .125rem var(--border-color)}}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-button--primary{background-color:var(--sb-color-purple-alternative);color:var(--sb-color-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--sb-color-purple);background-color:var(--sb-color-purple);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color);color:var(--sb-color-green)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;background-color:var(--sb-color-purple-alternative);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color);color:var(--sb-color-green)}.dnb-button--primary[disabled]{--border-color:var(--sb-color---sb-color-gray-dark-2);background-color:var(--sb-color-grey-light);border-color:transparent;box-shadow:0 0 0 .0625rem var(--border-color);color:var(--sb-color-gray-dark-2)}

package/cjs/components/button/style/themes/dnb-button-theme-sbanken.scss

@@ -0,0 +1,30 @@
+/*
+* Button theme
+*
+*/
+
+@import './dnb-button-theme-ui.scss';
+
+// WIP
+.dnb-button--primary {
+  color: var(--sb-color-green);
+  background-color: var(--sb-color-purple-alternative);
+
+  @include buttonHover(
+    var(--sb-color-green),
+    var(--sb-color-purple),
+    var(--sb-color-purple)
+  );
+  @include buttonActive(
+    var(--sb-color-green),
+    var(--sb-color-purple-alternative)
+  );
+
+  &[disabled] {
+    color: var(--sb-color-gray-dark-2);
+    background-color: var(--sb-color-grey-light);
+
+    // // only because of href/anchor button
+    @include fakeBorder(var(--sb-color---sb-color-gray-dark-2));
+  }
+}