@dnb/eufemia 10.22.0 → 10.24.0

package/cjs/components/button/style/button--tertiary.scss

@@ -6,8 +6,16 @@
     --button-tertiary-focus-left: -0.5rem;
     --button-tertiary-focus-right: -0.5rem;
     --button-tertiary-focus-overflow--icon-top: -0.5rem;
+    --button-tertiary-underline-left: var(
+      --button-tertiary-underline-overflow
+    );
+    --button-tertiary-underline-right: var(
+      --button-tertiary-underline-overflow
+    );
     --button-tertiary-underline-overflow: 0;
-    --button-tertiary-underline-overflow--icon: -0.5rem;
+    --button-tertiary-underline-overflow--icon: calc(
+      (var(--button-icon-gutter) + var(--button-icon-size)) * -1
+    );
     // create underline (::after)
     .dnb-button__text {
       position: relative; // because of the underline
@@ -19,8 +27,8 @@
         [data-visual-test-wrapper] & {
           transition: none;
         }
-        left: var(--button-tertiary-underline-overflow);
-        right: var(--button-tertiary-underline-overflow);
+        left: var(--button-tertiary-underline-left);
+        right: var(--button-tertiary-underline-right);
       }
     }
 
@@ -62,28 +70,14 @@
     }
 
     &.dnb-button--has-text {
-      padding-left: 0;
-      padding-right: 0;
+      --button-padding-left: 0;
+      --button-padding-right: 0;
+      --button-icon-margin-top: calc(
+        (var(--button-height) - var(--button-icon-size)) / 2
+      );
 
       .dnb-button__icon {
         align-self: flex-start; // needed to vertically center icon
-
-        margin-top: calc(var(--button-height) / 2 - 0.5rem);
-        &.dnb-icon--medium {
-          margin-top: calc(var(--button-height) / 2 - 0.75rem);
-        }
-        &.dnb-icon--large {
-          margin-top: calc(var(--button-height) / 2 - 1rem);
-        }
-      }
-      &.dnb-button--size-large .dnb-button__icon {
-        margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
-      }
-      &.dnb-button--size-medium .dnb-button__icon {
-        margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
-      }
-      &.dnb-button--size-small .dnb-button__icon {
-        margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
       }
     }
 
@@ -99,10 +93,8 @@
       vertical-align: middle;
 
       &.dnb-button--has-text {
-        padding: 0;
-
+        --button-icon-margin-top: 0.5rem;
         .dnb-button__icon {
-          margin-top: 0.5rem;
           align-self: center;
         }
       }
@@ -126,61 +118,24 @@
 
     &.dnb-button--has-icon {
       &.dnb-button--has-text {
+        &.dnb-button--icon-size-medium,
+        &.dnb-button--icon-size-large {
+          --button-tertiary-underline-overflow--icon: var(
+            --button-tertiary-underline-overflow
+          );
+        }
+
         &.dnb-button--icon-position-left {
           --button-tertiary-focus-right: -1rem;
-          .dnb-button__text {
-            padding-left: 1rem;
-
-            // underline
-            &::after {
-              left: var(--button-tertiary-underline-overflow--icon);
-            }
-          }
-          .dnb-button__icon {
-            margin-right: -0.5rem;
-            margin-left: 0;
-          }
-          &.dnb-button--icon-size-medium,
-          &.dnb-button--icon-size-large {
-            .dnb-button__text {
-              padding-left: 0;
-              margin-left: 1rem;
-
-              // underline
-              &::after {
-                left: 0;
-              }
-            }
-          }
+          --button-tertiary-underline-left: var(
+            --button-tertiary-underline-overflow--icon
+          );
         }
         &.dnb-button--icon-position-right {
           --button-tertiary-focus-left: -1rem;
-          /* stylelint-disable */
-          .dnb-button__text {
-            padding-right: 1rem;
-
-            // underline
-            &::after {
-              right: var(--button-tertiary-underline-overflow--icon);
-            }
-          }
-          .dnb-button__icon {
-            margin-left: -0.5rem;
-            margin-right: 0;
-          }
-          /* stylelint-enable */
-          &.dnb-button--icon-size-medium,
-          &.dnb-button--icon-size-large {
-            .dnb-button__text {
-              padding-right: 0;
-              margin-right: 1rem;
-
-              // underlinex
-              &::after {
-                right: 0;
-              }
-            }
-          }
+          --button-tertiary-underline-right: var(
+            --button-tertiary-underline-overflow--icon
+          );
         }
       }
 

package/cjs/components/button/style/dnb-button.css

@@ -8,12 +8,15 @@
 :root {
   --button-icon-size: 1rem;
   --button-height: 2.5rem;
-  --button-border-radius: calc(var(--button-height) / 2);
 }
 
 .dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
+  --button-icon-size--small: 0.75rem;
+  --button-icon-size--medium: 1.5rem;
+  --button-icon-size--large: 2rem;
+  --button-icon-gutter: 0.5rem;
   --button-width: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
@@ -23,10 +26,18 @@
   --button-height--large: 3rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius--small: calc(var(--button-height--small) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
-  --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--control-button: 0.25rem;
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-padding-icon: 1rem;
+  --button-padding--default: 1.5rem;
+  --button-padding--small: 1rem;
+  --button-padding--medium: 1rem;
+  --button-padding--large: 2rem;
+  --button-icon-margin-top: 0;
+  --button-icon-margin-left: 0;
+  --button-icon-margin-right: 0;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -38,7 +49,7 @@
   justify-content: center;
   width: var(--button-width);
   height: auto;
-  padding: 0;
+  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
   border: none;
   border-radius: var(--button-border-radius);
   text-align: left;
@@ -79,50 +90,28 @@
   background-color: transparent;
   border-radius: var(--button-border-radius);
 }
-.dnb-button--has-text {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
 .dnb-button--size-small {
+  --button-height: var(--button-height--small);
   width: var(--button-width--small);
   font-size: var(--button-font-size-small);
-  border-radius: var(--button-border-radius--small);
-}
-.dnb-button--size-small, .dnb-core-style .dnb-button--size-small {
-  line-height: var(--button-height--small);
 }
 .dnb-button--size-small .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-small {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--small);
+  --button-padding-right: var(--button-padding--small);
 }
 .dnb-button--size-medium {
+  --button-height: var(--button-height--medium);
   width: var(--button-width--medium);
-  border-radius: var(--button-border-radius--medium);
-}
-.dnb-button--size-medium, .dnb-core-style .dnb-button--size-medium {
-  line-height: var(--button-height--medium);
 }
 .dnb-button--size-medium .dnb-button__text {
   margin: 0;
 }
 .dnb-button--has-text.dnb-button--size-medium {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
-  padding-left: 0.5rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
-  padding-right: 0.5rem;
+  --button-padding-left: var(--button-padding--medium);
+  --button-padding-right: var(--button-padding--medium);
 }
 .dnb-button--control-before.dnb-button--size-medium {
   line-height: var(--button-height);
@@ -131,33 +120,38 @@
   line-height: var(--button-height);
 }
 .dnb-button--size-large {
+  --button-height: var(--button-height--large);
+  --button-padding-icon: 1.5rem;
   width: var(--button-width--large);
-  border-radius: var(--button-border-radius--large);
-}
-.dnb-button--size-large, .dnb-core-style .dnb-button--size-large {
-  line-height: var(--button-height--large);
 }
 .dnb-button--has-text.dnb-button--size-large {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
-  padding-left: 1rem;
-}
-.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
-  padding-right: 1rem;
+  --button-padding-left: var(--button-padding--large);
+  --button-padding-right: var(--button-padding--large);
 }
 .dnb-button--has-text {
+  --button-padding-left: var(--button-padding--default);
+  --button-padding-right: var(--button-padding--default);
   width: auto;
 }
-.dnb-button--has-text .dnb-button__icon {
-  margin: 0 calc(var(--button-icon-size) / 2);
+.dnb-button__icon {
+  margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
 }
 .dnb-button--has-text.dnb-button--icon-position-left {
-  padding-left: 0.5rem;
+  --button-padding-left: var(--button-padding-icon);
+  --button-icon-margin-right: var(--button-icon-gutter);
 }
 .dnb-button--has-text.dnb-button--icon-position-right {
-  padding-right: 0.5rem;
+  --button-padding-right: var(--button-padding-icon);
+  --button-icon-margin-left: var(--button-icon-gutter);
+}
+.dnb-button--icon-size-small {
+  --button-icon-size: var(--button-icon-size--small);
+}
+.dnb-button--icon-size-medium {
+  --button-icon-size: var(--button-icon-size--medium);
+}
+.dnb-button--icon-size-large {
+  --button-icon-size: var(--button-icon-size--large);
 }
 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
   order: 2;

package/cjs/components/button/style/dnb-button.min.css

@@ -1 +1 @@
-:root{--button-icon-size:1rem;--button-height:2.5rem;--button-border-radius:calc(var(--button-height)/2)}.dnb-button{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2);--button-border-radius--control-button:0.25rem;align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;cursor:pointer;display:inline-flex;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-align:left;-webkit-text-decoration:none;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:var(--button-width)}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:var(--button-border-radius--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:var(--button-border-radius--medium);width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--control-after.dnb-button--size-medium,.dnb-button--control-before.dnb-button--size-medium{line-height:var(--button-height)}.dnb-button--size-large{border-radius:var(--button-border-radius--large);width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{order:2}.dnb-button--stretch{width:100%}.dnb-button--control-before{border-radius:var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button)}.dnb-button--control-after{border-radius:0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0}.dnb-button--reset{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}
+:root{--button-icon-size:1rem;--button-height:2.5rem}.dnb-button{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-icon-size--small:0.75rem;--button-icon-size--medium:1.5rem;--button-icon-size--large:2rem;--button-icon-gutter:0.5rem;--button-width:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius:calc(var(--button-height)/2);--button-border-radius--control-button:0.25rem;--button-padding-left:0;--button-padding-right:0;--button-padding-icon:1rem;--button-padding--default:1.5rem;--button-padding--small:1rem;--button-padding--medium:1rem;--button-padding--large:2rem;--button-icon-margin-top:0;--button-icon-margin-left:0;--button-icon-margin-right:0;align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;cursor:pointer;display:inline-flex;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0 var(--button-padding-right) 0 var(--button-padding-left);position:relative;text-align:left;-webkit-text-decoration:none;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:var(--button-width)}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--size-small{--button-height:var(--button-height--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{--button-padding-left:var(--button-padding--small);--button-padding-right:var(--button-padding--small)}.dnb-button--size-medium{--button-height:var(--button-height--medium);width:var(--button-width--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{--button-padding-left:var(--button-padding--medium);--button-padding-right:var(--button-padding--medium)}.dnb-button--control-after.dnb-button--size-medium,.dnb-button--control-before.dnb-button--size-medium{line-height:var(--button-height)}.dnb-button--size-large{--button-height:var(--button-height--large);--button-padding-icon:1.5rem;width:var(--button-width--large)}.dnb-button--has-text.dnb-button--size-large{--button-padding-left:var(--button-padding--large);--button-padding-right:var(--button-padding--large)}.dnb-button--has-text{--button-padding-left:var(--button-padding--default);--button-padding-right:var(--button-padding--default);width:auto}.dnb-button__icon{margin:var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left)}.dnb-button--has-text.dnb-button--icon-position-left{--button-padding-left:var(--button-padding-icon);--button-icon-margin-right:var(--button-icon-gutter)}.dnb-button--has-text.dnb-button--icon-position-right{--button-padding-right:var(--button-padding-icon);--button-icon-margin-left:var(--button-icon-gutter)}.dnb-button--icon-size-small{--button-icon-size:var(--button-icon-size--small)}.dnb-button--icon-size-medium{--button-icon-size:var(--button-icon-size--medium)}.dnb-button--icon-size-large{--button-icon-size:var(--button-icon-size--large)}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{order:2}.dnb-button--stretch{width:100%}.dnb-button--control-before{border-radius:var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button)}.dnb-button--control-after{border-radius:0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0}.dnb-button--reset{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}

package/cjs/components/button/style/dnb-button.scss

@@ -8,12 +8,15 @@
 :root {
   --button-icon-size: 1rem;
   --button-height: 2.5rem;
-  --button-border-radius: calc(var(--button-height) / 2);
 }
 
 .dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
+  --button-icon-size--small: 0.75rem;
+  --button-icon-size--medium: 1.5rem;
+  --button-icon-size--large: 2rem;
+  --button-icon-gutter: 0.5rem;
   --button-width: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
@@ -23,10 +26,18 @@
   --button-height--large: 3rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius--small: calc(var(--button-height--small) / 2);
-  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
-  --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--control-button: 0.25rem;
+  --button-padding-left: 0;
+  --button-padding-right: 0;
+  --button-padding-icon: 1rem;
+  --button-padding--default: 1.5rem;
+  --button-padding--small: 1rem;
+  --button-padding--medium: 1rem;
+  --button-padding--large: 2rem;
+  --button-icon-margin-top: 0;
+  --button-icon-margin-left: 0;
+  --button-icon-margin-right: 0;
 
   position: relative;
 
@@ -50,7 +61,7 @@
 
   width: var(--button-width);
   height: auto;
-  padding: 0;
+  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
 
   border: none;
   border-radius: var(--button-border-radius);
@@ -99,60 +110,31 @@
     border-radius: var(--button-border-radius);
   }
 
-  &--has-text {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   // size small
   &--size-small {
+    --button-height: var(--button-height--small);
     width: var(--button-width--small);
     font-size: var(--button-font-size-small);
-    border-radius: var(--button-border-radius--small);
-
-    // Safari needs a correct CSS specificity
-    &,
-    .dnb-core-style & {
-      line-height: var(--button-height--small);
-    }
   }
   &--size-small &__text {
     margin: 0;
   }
   &--has-text#{&}--size-small {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  &--has-text#{&}--icon-position-left#{&}--size-small {
-    padding-left: 0.5rem;
-  }
-  &--has-text#{&}--icon-position-right#{&}--size-small {
-    padding-right: 0.5rem;
+    --button-padding-left: var(--button-padding--small);
+    --button-padding-right: var(--button-padding--small);
   }
 
   // size medium
   &--size-medium {
+    --button-height: var(--button-height--medium);
     width: var(--button-width--medium);
-    border-radius: var(--button-border-radius--medium);
-
-    // Safari needs a correct CSS specificity
-    &,
-    .dnb-core-style & {
-      line-height: var(--button-height--medium);
-    }
   }
   &--size-medium &__text {
     margin: 0;
   }
   &--has-text#{&}--size-medium {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  &--has-text#{&}--icon-position-left#{&}--size-medium {
-    padding-left: 0.5rem;
-  }
-  &--has-text#{&}--icon-position-right#{&}--size-medium {
-    padding-right: 0.5rem;
+    --button-padding-left: var(--button-padding--medium);
+    --button-padding-right: var(--button-padding--medium);
   }
   &--control-before#{&}--size-medium {
     line-height: var(--button-height);
@@ -163,40 +145,45 @@
 
   // size large
   &--size-large {
+    --button-height: var(--button-height--large);
+    --button-padding-icon: 1.5rem;
     width: var(--button-width--large);
-    border-radius: var(--button-border-radius--large);
-
-    // Safari needs a correct CSS specificity
-    &,
-    .dnb-core-style & {
-      line-height: var(--button-height--large);
-    }
   }
   &--has-text#{&}--size-large {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-  &--has-text#{&}--icon-position-left#{&}--size-large {
-    padding-left: 1rem;
-  }
-  &--has-text#{&}--icon-position-right#{&}--size-large {
-    padding-right: 1rem;
+    --button-padding-left: var(--button-padding--large);
+    --button-padding-right: var(--button-padding--large);
   }
 
   // size default
 
   /* stylelint-disable-next-line */
   &--has-text {
+    --button-padding-left: var(--button-padding--default);
+    --button-padding-right: var(--button-padding--default);
     width: auto;
   }
-  &--has-text &__icon {
-    margin: 0 calc(var(--button-icon-size) / 2);
+  &__icon {
+    margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0
+      var(--button-icon-margin-left);
   }
   &--has-text#{&}--icon-position-left {
-    padding-left: 0.5rem;
+    --button-padding-left: var(--button-padding-icon);
+    --button-icon-margin-right: var(--button-icon-gutter);
   }
   &--has-text#{&}--icon-position-right {
-    padding-right: 0.5rem;
+    --button-padding-right: var(--button-padding-icon);
+    --button-icon-margin-left: var(--button-icon-gutter);
+  }
+
+  // Icon sizes
+  &--icon-size-small {
+    --button-icon-size: var(--button-icon-size--small);
+  }
+  &--icon-size-medium {
+    --button-icon-size: var(--button-icon-size--medium);
+  }
+  &--icon-size-large {
+    --button-icon-size: var(--button-icon-size--large);
   }
 
   // Default -- icon set to right side

package/cjs/components/button/style/themes/button-mixins.scss

@@ -15,8 +15,8 @@
 }
 
 @mixin buttonHover(
-  $color,
-  $background-color,
+  $color: null,
+  $background-color: null,
   $border-color: var(--color-emerald-green),
   $enable-touch: null
 ) {
@@ -39,7 +39,7 @@
   }
 }
 
-@mixin buttonActive($color, $background-color) {
+@mixin buttonActive($color: null, $background-color: null) {
   @include active() {
     color: $color;
     background-color: $background-color;
@@ -52,8 +52,8 @@
 }
 
 @mixin buttonFocus(
-  $color,
-  $background-color,
+  $color: null,
+  $background-color: null,
   $focus-color: null,
   $extendShadow: null
 ) {
@@ -74,6 +74,27 @@
   }
 }
 
+@mixin buttonFocusVisible(
+  $color: null,
+  $background-color: null,
+  $focus-color: null,
+  $extendShadow: null
+) {
+  @include focus-visible() {
+    color: $color;
+    background-color: $background-color;
+
+    @include focusRing(
+      always,
+      $focus-color,
+      inset,
+      $extendShadow: $extendShadow
+    );
+
+    @content;
+  }
+}
+
 // Used in tertiary button variant
 @mixin buttonFocusRing(
   $whatinput: null,