@spectrabrain/eds 0.0.4 → 0.1.1

package/dist/components.css

@@ -3,162 +3,60 @@
   --eds-button-focus-root-outlineColor: var(--eds-color-stroke-focusRing);
   --eds-button-focus-root-outlineOffset: 2px;
   --eds-button-focus-root-outlineWidth: 2px;
-  --eds-button-size-md-iconBoth-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-md-iconBoth-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-md-iconBoth-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-md-iconBoth-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-md-iconBoth-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-md-iconBoth-prefixIcon-size: 16px;
-  --eds-button-size-md-iconBoth-root-cornerRadius: 6px;
-  --eds-button-size-md-iconBoth-root-gap: 4px;
-  --eds-button-size-md-iconBoth-root-height: 40px;
-  --eds-button-size-md-iconBoth-root-paddingX: 12px;
-  --eds-button-size-md-iconBoth-root-paddingY: 10px;
-  --eds-button-size-md-iconBoth-suffixIcon-size: 16px;
-  --eds-button-size-md-iconFirst-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-md-iconFirst-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-md-iconFirst-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-md-iconFirst-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-md-iconFirst-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-md-iconFirst-prefixIcon-size: 16px;
-  --eds-button-size-md-iconFirst-root-cornerRadius: 6px;
-  --eds-button-size-md-iconFirst-root-gap: 4px;
-  --eds-button-size-md-iconFirst-root-height: 40px;
-  --eds-button-size-md-iconFirst-root-paddingX: 12px;
-  --eds-button-size-md-iconFirst-root-paddingY: 10px;
-  --eds-button-size-md-iconLast-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-md-iconLast-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-md-iconLast-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-md-iconLast-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-md-iconLast-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-md-iconLast-root-cornerRadius: 6px;
-  --eds-button-size-md-iconLast-root-gap: 4px;
-  --eds-button-size-md-iconLast-root-height: 40px;
-  --eds-button-size-md-iconLast-root-paddingX: 12px;
-  --eds-button-size-md-iconLast-root-paddingY: 10px;
-  --eds-button-size-md-iconLast-suffixIcon-size: 16px;
   --eds-button-size-md-iconOnly-icon-size: 18px;
-  --eds-button-size-md-iconOnly-root-cornerRadius: 6px;
-  --eds-button-size-md-iconOnly-root-height: 40px;
   --eds-button-size-md-iconOnly-root-minWidth: 40px;
   --eds-button-size-md-iconOnly-root-paddingX: 10px;
   --eds-button-size-md-iconOnly-root-paddingY: 10px;
+  --eds-button-size-md-label-fontFamily: var(--eds-typography-title3-fontFamily);
+  --eds-button-size-md-label-fontSize: var(--eds-typography-title3-fontSize);
+  --eds-button-size-md-label-fontWeight: var(--eds-typography-title3-fontWeight);
+  --eds-button-size-md-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
+  --eds-button-size-md-label-lineHeight: var(--eds-typography-title3-lineHeight);
+  --eds-button-size-md-prefixIcon-size: 16px;
   --eds-button-size-md-progressCircle-size: 16px;
   --eds-button-size-md-progressCircle-thickness: 1.5px;
-  --eds-button-size-md-textOnly-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-md-textOnly-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-md-textOnly-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-md-textOnly-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-md-textOnly-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-md-textOnly-root-cornerRadius: 6px;
-  --eds-button-size-md-textOnly-root-gap: 4px;
-  --eds-button-size-md-textOnly-root-height: 40px;
-  --eds-button-size-md-textOnly-root-paddingX: 12px;
-  --eds-button-size-md-textOnly-root-paddingY: 10px;
-  --eds-button-size-sm-iconBoth-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-sm-iconBoth-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-sm-iconBoth-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-sm-iconBoth-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-sm-iconBoth-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-sm-iconBoth-prefixIcon-size: 14px;
-  --eds-button-size-sm-iconBoth-root-cornerRadius: 6px;
-  --eds-button-size-sm-iconBoth-root-gap: 4px;
-  --eds-button-size-sm-iconBoth-root-height: 36px;
-  --eds-button-size-sm-iconBoth-root-paddingX: 12px;
-  --eds-button-size-sm-iconBoth-root-paddingY: 8px;
-  --eds-button-size-sm-iconBoth-suffixIcon-size: 14px;
-  --eds-button-size-sm-iconFirst-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-sm-iconFirst-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-sm-iconFirst-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-sm-iconFirst-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-sm-iconFirst-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-sm-iconFirst-prefixIcon-size: 14px;
-  --eds-button-size-sm-iconFirst-root-cornerRadius: 6px;
-  --eds-button-size-sm-iconFirst-root-gap: 4px;
-  --eds-button-size-sm-iconFirst-root-height: 36px;
-  --eds-button-size-sm-iconFirst-root-paddingX: 12px;
-  --eds-button-size-sm-iconFirst-root-paddingY: 8px;
-  --eds-button-size-sm-iconLast-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-sm-iconLast-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-sm-iconLast-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-sm-iconLast-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-sm-iconLast-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-sm-iconLast-root-cornerRadius: 6px;
-  --eds-button-size-sm-iconLast-root-gap: 4px;
-  --eds-button-size-sm-iconLast-root-height: 36px;
-  --eds-button-size-sm-iconLast-root-paddingX: 12px;
-  --eds-button-size-sm-iconLast-root-paddingY: 8px;
-  --eds-button-size-sm-iconLast-suffixIcon-size: 14px;
+  --eds-button-size-md-root-cornerRadius: 6px;
+  --eds-button-size-md-root-gap: 4px;
+  --eds-button-size-md-root-height: 40px;
+  --eds-button-size-md-root-paddingX: 12px;
+  --eds-button-size-md-root-paddingY: 10px;
+  --eds-button-size-md-suffixIcon-size: 16px;
   --eds-button-size-sm-iconOnly-icon-size: 16px;
-  --eds-button-size-sm-iconOnly-root-cornerRadius: 6px;
-  --eds-button-size-sm-iconOnly-root-height: 36px;
   --eds-button-size-sm-iconOnly-root-minWidth: 30px;
   --eds-button-size-sm-iconOnly-root-paddingX: 10px;
   --eds-button-size-sm-iconOnly-root-paddingY: 10px;
+  --eds-button-size-sm-label-fontFamily: var(--eds-typography-title3-fontFamily);
+  --eds-button-size-sm-label-fontSize: var(--eds-typography-title3-fontSize);
+  --eds-button-size-sm-label-fontWeight: var(--eds-typography-title3-fontWeight);
+  --eds-button-size-sm-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
+  --eds-button-size-sm-label-lineHeight: var(--eds-typography-title3-lineHeight);
+  --eds-button-size-sm-prefixIcon-size: 14px;
   --eds-button-size-sm-progressCircle-size: 14px;
   --eds-button-size-sm-progressCircle-thickness: 1.5px;
-  --eds-button-size-sm-textOnly-label-fontFamily: var(--eds-typography-title3-fontFamily);
-  --eds-button-size-sm-textOnly-label-fontSize: var(--eds-typography-title3-fontSize);
-  --eds-button-size-sm-textOnly-label-fontWeight: var(--eds-typography-title3-fontWeight);
-  --eds-button-size-sm-textOnly-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
-  --eds-button-size-sm-textOnly-label-lineHeight: var(--eds-typography-title3-lineHeight);
-  --eds-button-size-sm-textOnly-root-cornerRadius: 6px;
-  --eds-button-size-sm-textOnly-root-gap: 4px;
-  --eds-button-size-sm-textOnly-root-height: 36px;
-  --eds-button-size-sm-textOnly-root-paddingX: 12px;
-  --eds-button-size-sm-textOnly-root-paddingY: 8px;
-  --eds-button-size-xs-iconBoth-label-fontFamily: var(--eds-typography-body3-fontFamily);
-  --eds-button-size-xs-iconBoth-label-fontSize: var(--eds-typography-body3-fontSize);
-  --eds-button-size-xs-iconBoth-label-fontWeight: var(--eds-typography-body3-fontWeight);
-  --eds-button-size-xs-iconBoth-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
-  --eds-button-size-xs-iconBoth-label-lineHeight: var(--eds-typography-body3-lineHeight);
-  --eds-button-size-xs-iconBoth-prefixIcon-size: 14px;
-  --eds-button-size-xs-iconBoth-root-cornerRadius: 4px;
-  --eds-button-size-xs-iconBoth-root-gap: 4px;
-  --eds-button-size-xs-iconBoth-root-height: 30px;
-  --eds-button-size-xs-iconBoth-root-paddingX: 12px;
-  --eds-button-size-xs-iconBoth-root-paddingY: 0px;
-  --eds-button-size-xs-iconBoth-suffixIcon-size: 14px;
-  --eds-button-size-xs-iconFirst-label-fontFamily: var(--eds-typography-body3-fontFamily);
-  --eds-button-size-xs-iconFirst-label-fontSize: var(--eds-typography-body3-fontSize);
-  --eds-button-size-xs-iconFirst-label-fontWeight: var(--eds-typography-body3-fontWeight);
-  --eds-button-size-xs-iconFirst-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
-  --eds-button-size-xs-iconFirst-label-lineHeight: var(--eds-typography-body3-lineHeight);
-  --eds-button-size-xs-iconFirst-prefixIcon-size: 14px;
-  --eds-button-size-xs-iconFirst-root-cornerRadius: 4px;
-  --eds-button-size-xs-iconFirst-root-gap: 4px;
-  --eds-button-size-xs-iconFirst-root-height: 30px;
-  --eds-button-size-xs-iconFirst-root-paddingX: 12px;
-  --eds-button-size-xs-iconFirst-root-paddingY: 0px;
-  --eds-button-size-xs-iconLast-label-fontFamily: var(--eds-typography-body3-fontFamily);
-  --eds-button-size-xs-iconLast-label-fontSize: var(--eds-typography-body3-fontSize);
-  --eds-button-size-xs-iconLast-label-fontWeight: var(--eds-typography-body3-fontWeight);
-  --eds-button-size-xs-iconLast-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
-  --eds-button-size-xs-iconLast-label-lineHeight: var(--eds-typography-body3-lineHeight);
-  --eds-button-size-xs-iconLast-root-cornerRadius: 4px;
-  --eds-button-size-xs-iconLast-root-gap: 4px;
-  --eds-button-size-xs-iconLast-root-height: 30px;
-  --eds-button-size-xs-iconLast-root-paddingX: 12px;
-  --eds-button-size-xs-iconLast-root-paddingY: 0px;
-  --eds-button-size-xs-iconLast-suffixIcon-size: 14px;
+  --eds-button-size-sm-root-cornerRadius: 6px;
+  --eds-button-size-sm-root-gap: 4px;
+  --eds-button-size-sm-root-height: 36px;
+  --eds-button-size-sm-root-paddingX: 12px;
+  --eds-button-size-sm-root-paddingY: 8px;
+  --eds-button-size-sm-suffixIcon-size: 14px;
   --eds-button-size-xs-iconOnly-icon-size: 14px;
-  --eds-button-size-xs-iconOnly-root-cornerRadius: 4px;
-  --eds-button-size-xs-iconOnly-root-height: 30px;
   --eds-button-size-xs-iconOnly-root-minWidth: 30px;
   --eds-button-size-xs-iconOnly-root-paddingX: 8px;
   --eds-button-size-xs-iconOnly-root-paddingY: 8px;
+  --eds-button-size-xs-label-fontFamily: var(--eds-typography-body3-fontFamily);
+  --eds-button-size-xs-label-fontSize: var(--eds-typography-body3-fontSize);
+  --eds-button-size-xs-label-fontWeight: var(--eds-typography-body3-fontWeight);
+  --eds-button-size-xs-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
+  --eds-button-size-xs-label-lineHeight: var(--eds-typography-body3-lineHeight);
+  --eds-button-size-xs-prefixIcon-size: 14px;
   --eds-button-size-xs-progressCircle-size: 14px;
   --eds-button-size-xs-progressCircle-thickness: 1.3px;
-  --eds-button-size-xs-textOnly-label-fontFamily: var(--eds-typography-body3-fontFamily);
-  --eds-button-size-xs-textOnly-label-fontSize: var(--eds-typography-body3-fontSize);
-  --eds-button-size-xs-textOnly-label-fontWeight: var(--eds-typography-body3-fontWeight);
-  --eds-button-size-xs-textOnly-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
-  --eds-button-size-xs-textOnly-label-lineHeight: var(--eds-typography-body3-lineHeight);
-  --eds-button-size-xs-textOnly-root-cornerRadius: 4px;
-  --eds-button-size-xs-textOnly-root-gap: 4px;
-  --eds-button-size-xs-textOnly-root-height: 30px;
-  --eds-button-size-xs-textOnly-root-paddingX: 12px;
-  --eds-button-size-xs-textOnly-root-paddingY: 0px;
+  --eds-button-size-xs-root-cornerRadius: 4px;
+  --eds-button-size-xs-root-gap: 4px;
+  --eds-button-size-xs-root-height: 30px;
+  --eds-button-size-xs-root-paddingX: 12px;
+  --eds-button-size-xs-root-paddingY: 0px;
+  --eds-button-size-xs-suffixIcon-size: 14px;
   --eds-button-style-brand-outline-disabled-label-color: var(--eds-color-fg-disabled);
   --eds-button-style-brand-outline-disabled-root-backgroundColor: var(--eds-color-bg-transparent);
   --eds-button-style-brand-outline-disabled-root-borderColor: var(--eds-color-stroke-neutral-secondary);
@@ -245,9 +143,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
   appearance: none;
-  margin: 0;
   border: 0;
   font: inherit;
   white-space: nowrap;
@@ -377,93 +273,41 @@
   }
 }
 
-.eds-button__button[data-size="xs"][data-layout="textOnly"] {
-  height: var(--eds-button-size-xs-textOnly-root-height);
-  border-radius: var(--eds-button-size-xs-textOnly-root-cornerRadius);
-  gap: var(--eds-button-size-xs-textOnly-root-gap);
-  padding-inline: var(--eds-button-size-xs-textOnly-root-paddingX);
-  padding-block: var(--eds-button-size-xs-textOnly-root-paddingY);
-}
-
-.eds-button__button[data-size="xs"][data-layout="textOnly"] .eds-button__label {
-  font-family: var(--eds-button-size-xs-textOnly-label-fontFamily);
-  font-weight: var(--eds-button-size-xs-textOnly-label-fontWeight);
-  font-size: var(--eds-button-size-xs-textOnly-label-fontSize);
-  line-height: var(--eds-button-size-xs-textOnly-label-lineHeight);
-  letter-spacing: var(--eds-button-size-xs-textOnly-label-letterSpacing);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconFirst"] {
-  height: var(--eds-button-size-xs-iconFirst-root-height);
-  border-radius: var(--eds-button-size-xs-iconFirst-root-cornerRadius);
-  gap: var(--eds-button-size-xs-iconFirst-root-gap);
-  padding-inline: var(--eds-button-size-xs-iconFirst-root-paddingX);
-  padding-block: var(--eds-button-size-xs-iconFirst-root-paddingY);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconFirst"] .eds-button__label {
-  font-family: var(--eds-button-size-xs-iconFirst-label-fontFamily);
-  font-weight: var(--eds-button-size-xs-iconFirst-label-fontWeight);
-  font-size: var(--eds-button-size-xs-iconFirst-label-fontSize);
-  line-height: var(--eds-button-size-xs-iconFirst-label-lineHeight);
-  letter-spacing: var(--eds-button-size-xs-iconFirst-label-letterSpacing);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconFirst"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-xs-iconFirst-prefixIcon-size);
-  height: var(--eds-button-size-xs-iconFirst-prefixIcon-size);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconLast"] {
-  height: var(--eds-button-size-xs-iconLast-root-height);
-  border-radius: var(--eds-button-size-xs-iconLast-root-cornerRadius);
-  gap: var(--eds-button-size-xs-iconLast-root-gap);
-  padding-inline: var(--eds-button-size-xs-iconLast-root-paddingX);
-  padding-block: var(--eds-button-size-xs-iconLast-root-paddingY);
+/*
+ * Size and layout. Height and corner radius apply to every layout; gap, padding and the label text style
+ * apply to the layouts that render a label; iconOnly swaps in its own min-width and padding.
+ * [data-layout] and :not([data-layout="iconOnly"]) keep the specificity of one attribute selector per layout.
+ */
+.eds-button__button[data-size="xs"][data-layout] {
+  height: var(--eds-button-size-xs-root-height);
+  border-radius: var(--eds-button-size-xs-root-cornerRadius);
 }
 
-.eds-button__button[data-size="xs"][data-layout="iconLast"] .eds-button__label {
-  font-family: var(--eds-button-size-xs-iconLast-label-fontFamily);
-  font-weight: var(--eds-button-size-xs-iconLast-label-fontWeight);
-  font-size: var(--eds-button-size-xs-iconLast-label-fontSize);
-  line-height: var(--eds-button-size-xs-iconLast-label-lineHeight);
-  letter-spacing: var(--eds-button-size-xs-iconLast-label-letterSpacing);
+.eds-button__button[data-size="xs"]:not([data-layout="iconOnly"]) {
+  gap: var(--eds-button-size-xs-root-gap);
+  padding-inline: var(--eds-button-size-xs-root-paddingX);
+  padding-block: var(--eds-button-size-xs-root-paddingY);
 }
 
-.eds-button__button[data-size="xs"][data-layout="iconLast"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-xs-iconLast-suffixIcon-size);
-  height: var(--eds-button-size-xs-iconLast-suffixIcon-size);
+.eds-button__button[data-size="xs"][data-layout] .eds-button__label {
+  font-family: var(--eds-button-size-xs-label-fontFamily);
+  font-weight: var(--eds-button-size-xs-label-fontWeight);
+  font-size: var(--eds-button-size-xs-label-fontSize);
+  line-height: var(--eds-button-size-xs-label-lineHeight);
+  letter-spacing: var(--eds-button-size-xs-label-letterSpacing);
 }
 
-.eds-button__button[data-size="xs"][data-layout="iconBoth"] {
-  height: var(--eds-button-size-xs-iconBoth-root-height);
-  border-radius: var(--eds-button-size-xs-iconBoth-root-cornerRadius);
-  gap: var(--eds-button-size-xs-iconBoth-root-gap);
-  padding-inline: var(--eds-button-size-xs-iconBoth-root-paddingX);
-  padding-block: var(--eds-button-size-xs-iconBoth-root-paddingY);
+.eds-button__button[data-size="xs"][data-layout] .eds-button__prefixIcon {
+  width: var(--eds-button-size-xs-prefixIcon-size);
+  height: var(--eds-button-size-xs-prefixIcon-size);
 }
 
-.eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__label {
-  font-family: var(--eds-button-size-xs-iconBoth-label-fontFamily);
-  font-weight: var(--eds-button-size-xs-iconBoth-label-fontWeight);
-  font-size: var(--eds-button-size-xs-iconBoth-label-fontSize);
-  line-height: var(--eds-button-size-xs-iconBoth-label-lineHeight);
-  letter-spacing: var(--eds-button-size-xs-iconBoth-label-letterSpacing);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-xs-iconBoth-prefixIcon-size);
-  height: var(--eds-button-size-xs-iconBoth-prefixIcon-size);
-}
-
-.eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-xs-iconBoth-suffixIcon-size);
-  height: var(--eds-button-size-xs-iconBoth-suffixIcon-size);
+.eds-button__button[data-size="xs"][data-layout] .eds-button__suffixIcon {
+  width: var(--eds-button-size-xs-suffixIcon-size);
+  height: var(--eds-button-size-xs-suffixIcon-size);
 }
 
 .eds-button__button[data-size="xs"][data-layout="iconOnly"] {
-  height: var(--eds-button-size-xs-iconOnly-root-height);
-  border-radius: var(--eds-button-size-xs-iconOnly-root-cornerRadius);
   min-width: var(--eds-button-size-xs-iconOnly-root-minWidth);
   padding-inline: var(--eds-button-size-xs-iconOnly-root-paddingX);
   padding-block: var(--eds-button-size-xs-iconOnly-root-paddingY);
@@ -474,93 +318,36 @@
   height: var(--eds-button-size-xs-iconOnly-icon-size);
 }
 
-.eds-button__button[data-size="sm"][data-layout="textOnly"] {
-  height: var(--eds-button-size-sm-textOnly-root-height);
-  border-radius: var(--eds-button-size-sm-textOnly-root-cornerRadius);
-  gap: var(--eds-button-size-sm-textOnly-root-gap);
-  padding-inline: var(--eds-button-size-sm-textOnly-root-paddingX);
-  padding-block: var(--eds-button-size-sm-textOnly-root-paddingY);
-}
-
-.eds-button__button[data-size="sm"][data-layout="textOnly"] .eds-button__label {
-  font-family: var(--eds-button-size-sm-textOnly-label-fontFamily);
-  font-weight: var(--eds-button-size-sm-textOnly-label-fontWeight);
-  font-size: var(--eds-button-size-sm-textOnly-label-fontSize);
-  line-height: var(--eds-button-size-sm-textOnly-label-lineHeight);
-  letter-spacing: var(--eds-button-size-sm-textOnly-label-letterSpacing);
+.eds-button__button[data-size="sm"][data-layout] {
+  height: var(--eds-button-size-sm-root-height);
+  border-radius: var(--eds-button-size-sm-root-cornerRadius);
 }
 
-.eds-button__button[data-size="sm"][data-layout="iconFirst"] {
-  height: var(--eds-button-size-sm-iconFirst-root-height);
-  border-radius: var(--eds-button-size-sm-iconFirst-root-cornerRadius);
-  gap: var(--eds-button-size-sm-iconFirst-root-gap);
-  padding-inline: var(--eds-button-size-sm-iconFirst-root-paddingX);
-  padding-block: var(--eds-button-size-sm-iconFirst-root-paddingY);
+.eds-button__button[data-size="sm"]:not([data-layout="iconOnly"]) {
+  gap: var(--eds-button-size-sm-root-gap);
+  padding-inline: var(--eds-button-size-sm-root-paddingX);
+  padding-block: var(--eds-button-size-sm-root-paddingY);
 }
 
-.eds-button__button[data-size="sm"][data-layout="iconFirst"] .eds-button__label {
-  font-family: var(--eds-button-size-sm-iconFirst-label-fontFamily);
-  font-weight: var(--eds-button-size-sm-iconFirst-label-fontWeight);
-  font-size: var(--eds-button-size-sm-iconFirst-label-fontSize);
-  line-height: var(--eds-button-size-sm-iconFirst-label-lineHeight);
-  letter-spacing: var(--eds-button-size-sm-iconFirst-label-letterSpacing);
+.eds-button__button[data-size="sm"][data-layout] .eds-button__label {
+  font-family: var(--eds-button-size-sm-label-fontFamily);
+  font-weight: var(--eds-button-size-sm-label-fontWeight);
+  font-size: var(--eds-button-size-sm-label-fontSize);
+  line-height: var(--eds-button-size-sm-label-lineHeight);
+  letter-spacing: var(--eds-button-size-sm-label-letterSpacing);
 }
 
-.eds-button__button[data-size="sm"][data-layout="iconFirst"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-sm-iconFirst-prefixIcon-size);
-  height: var(--eds-button-size-sm-iconFirst-prefixIcon-size);
+.eds-button__button[data-size="sm"][data-layout] .eds-button__prefixIcon {
+  width: var(--eds-button-size-sm-prefixIcon-size);
+  height: var(--eds-button-size-sm-prefixIcon-size);
 }
 
-.eds-button__button[data-size="sm"][data-layout="iconLast"] {
-  height: var(--eds-button-size-sm-iconLast-root-height);
-  border-radius: var(--eds-button-size-sm-iconLast-root-cornerRadius);
-  gap: var(--eds-button-size-sm-iconLast-root-gap);
-  padding-inline: var(--eds-button-size-sm-iconLast-root-paddingX);
-  padding-block: var(--eds-button-size-sm-iconLast-root-paddingY);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconLast"] .eds-button__label {
-  font-family: var(--eds-button-size-sm-iconLast-label-fontFamily);
-  font-weight: var(--eds-button-size-sm-iconLast-label-fontWeight);
-  font-size: var(--eds-button-size-sm-iconLast-label-fontSize);
-  line-height: var(--eds-button-size-sm-iconLast-label-lineHeight);
-  letter-spacing: var(--eds-button-size-sm-iconLast-label-letterSpacing);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconLast"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-sm-iconLast-suffixIcon-size);
-  height: var(--eds-button-size-sm-iconLast-suffixIcon-size);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconBoth"] {
-  height: var(--eds-button-size-sm-iconBoth-root-height);
-  border-radius: var(--eds-button-size-sm-iconBoth-root-cornerRadius);
-  gap: var(--eds-button-size-sm-iconBoth-root-gap);
-  padding-inline: var(--eds-button-size-sm-iconBoth-root-paddingX);
-  padding-block: var(--eds-button-size-sm-iconBoth-root-paddingY);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__label {
-  font-family: var(--eds-button-size-sm-iconBoth-label-fontFamily);
-  font-weight: var(--eds-button-size-sm-iconBoth-label-fontWeight);
-  font-size: var(--eds-button-size-sm-iconBoth-label-fontSize);
-  line-height: var(--eds-button-size-sm-iconBoth-label-lineHeight);
-  letter-spacing: var(--eds-button-size-sm-iconBoth-label-letterSpacing);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-sm-iconBoth-prefixIcon-size);
-  height: var(--eds-button-size-sm-iconBoth-prefixIcon-size);
-}
-
-.eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-sm-iconBoth-suffixIcon-size);
-  height: var(--eds-button-size-sm-iconBoth-suffixIcon-size);
+.eds-button__button[data-size="sm"][data-layout] .eds-button__suffixIcon {
+  width: var(--eds-button-size-sm-suffixIcon-size);
+  height: var(--eds-button-size-sm-suffixIcon-size);
 }
 
 .eds-button__button[data-size="sm"][data-layout="iconOnly"] {
-  height: var(--eds-button-size-sm-iconOnly-root-height);
-  border-radius: var(--eds-button-size-sm-iconOnly-root-cornerRadius);
   min-width: var(--eds-button-size-sm-iconOnly-root-minWidth);
   padding-inline: var(--eds-button-size-sm-iconOnly-root-paddingX);
   padding-block: var(--eds-button-size-sm-iconOnly-root-paddingY);
@@ -571,93 +358,36 @@
   height: var(--eds-button-size-sm-iconOnly-icon-size);
 }
 
-.eds-button__button[data-size="md"][data-layout="textOnly"] {
-  height: var(--eds-button-size-md-textOnly-root-height);
-  border-radius: var(--eds-button-size-md-textOnly-root-cornerRadius);
-  gap: var(--eds-button-size-md-textOnly-root-gap);
-  padding-inline: var(--eds-button-size-md-textOnly-root-paddingX);
-  padding-block: var(--eds-button-size-md-textOnly-root-paddingY);
-}
-
-.eds-button__button[data-size="md"][data-layout="textOnly"] .eds-button__label {
-  font-family: var(--eds-button-size-md-textOnly-label-fontFamily);
-  font-weight: var(--eds-button-size-md-textOnly-label-fontWeight);
-  font-size: var(--eds-button-size-md-textOnly-label-fontSize);
-  line-height: var(--eds-button-size-md-textOnly-label-lineHeight);
-  letter-spacing: var(--eds-button-size-md-textOnly-label-letterSpacing);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconFirst"] {
-  height: var(--eds-button-size-md-iconFirst-root-height);
-  border-radius: var(--eds-button-size-md-iconFirst-root-cornerRadius);
-  gap: var(--eds-button-size-md-iconFirst-root-gap);
-  padding-inline: var(--eds-button-size-md-iconFirst-root-paddingX);
-  padding-block: var(--eds-button-size-md-iconFirst-root-paddingY);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconFirst"] .eds-button__label {
-  font-family: var(--eds-button-size-md-iconFirst-label-fontFamily);
-  font-weight: var(--eds-button-size-md-iconFirst-label-fontWeight);
-  font-size: var(--eds-button-size-md-iconFirst-label-fontSize);
-  line-height: var(--eds-button-size-md-iconFirst-label-lineHeight);
-  letter-spacing: var(--eds-button-size-md-iconFirst-label-letterSpacing);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconFirst"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-md-iconFirst-prefixIcon-size);
-  height: var(--eds-button-size-md-iconFirst-prefixIcon-size);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconLast"] {
-  height: var(--eds-button-size-md-iconLast-root-height);
-  border-radius: var(--eds-button-size-md-iconLast-root-cornerRadius);
-  gap: var(--eds-button-size-md-iconLast-root-gap);
-  padding-inline: var(--eds-button-size-md-iconLast-root-paddingX);
-  padding-block: var(--eds-button-size-md-iconLast-root-paddingY);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconLast"] .eds-button__label {
-  font-family: var(--eds-button-size-md-iconLast-label-fontFamily);
-  font-weight: var(--eds-button-size-md-iconLast-label-fontWeight);
-  font-size: var(--eds-button-size-md-iconLast-label-fontSize);
-  line-height: var(--eds-button-size-md-iconLast-label-lineHeight);
-  letter-spacing: var(--eds-button-size-md-iconLast-label-letterSpacing);
-}
-
-.eds-button__button[data-size="md"][data-layout="iconLast"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-md-iconLast-suffixIcon-size);
-  height: var(--eds-button-size-md-iconLast-suffixIcon-size);
+.eds-button__button[data-size="md"][data-layout] {
+  height: var(--eds-button-size-md-root-height);
+  border-radius: var(--eds-button-size-md-root-cornerRadius);
 }
 
-.eds-button__button[data-size="md"][data-layout="iconBoth"] {
-  height: var(--eds-button-size-md-iconBoth-root-height);
-  border-radius: var(--eds-button-size-md-iconBoth-root-cornerRadius);
-  gap: var(--eds-button-size-md-iconBoth-root-gap);
-  padding-inline: var(--eds-button-size-md-iconBoth-root-paddingX);
-  padding-block: var(--eds-button-size-md-iconBoth-root-paddingY);
+.eds-button__button[data-size="md"]:not([data-layout="iconOnly"]) {
+  gap: var(--eds-button-size-md-root-gap);
+  padding-inline: var(--eds-button-size-md-root-paddingX);
+  padding-block: var(--eds-button-size-md-root-paddingY);
 }
 
-.eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__label {
-  font-family: var(--eds-button-size-md-iconBoth-label-fontFamily);
-  font-weight: var(--eds-button-size-md-iconBoth-label-fontWeight);
-  font-size: var(--eds-button-size-md-iconBoth-label-fontSize);
-  line-height: var(--eds-button-size-md-iconBoth-label-lineHeight);
-  letter-spacing: var(--eds-button-size-md-iconBoth-label-letterSpacing);
+.eds-button__button[data-size="md"][data-layout] .eds-button__label {
+  font-family: var(--eds-button-size-md-label-fontFamily);
+  font-weight: var(--eds-button-size-md-label-fontWeight);
+  font-size: var(--eds-button-size-md-label-fontSize);
+  line-height: var(--eds-button-size-md-label-lineHeight);
+  letter-spacing: var(--eds-button-size-md-label-letterSpacing);
 }
 
-.eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__prefixIcon {
-  width: var(--eds-button-size-md-iconBoth-prefixIcon-size);
-  height: var(--eds-button-size-md-iconBoth-prefixIcon-size);
+.eds-button__button[data-size="md"][data-layout] .eds-button__prefixIcon {
+  width: var(--eds-button-size-md-prefixIcon-size);
+  height: var(--eds-button-size-md-prefixIcon-size);
 }
 
-.eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__suffixIcon {
-  width: var(--eds-button-size-md-iconBoth-suffixIcon-size);
-  height: var(--eds-button-size-md-iconBoth-suffixIcon-size);
+.eds-button__button[data-size="md"][data-layout] .eds-button__suffixIcon {
+  width: var(--eds-button-size-md-suffixIcon-size);
+  height: var(--eds-button-size-md-suffixIcon-size);
 }
 
 .eds-button__button[data-size="md"][data-layout="iconOnly"] {
-  height: var(--eds-button-size-md-iconOnly-root-height);
-  border-radius: var(--eds-button-size-md-iconOnly-root-cornerRadius);
   min-width: var(--eds-button-size-md-iconOnly-root-minWidth);
   padding-inline: var(--eds-button-size-md-iconOnly-root-paddingX);
   padding-block: var(--eds-button-size-md-iconOnly-root-paddingY);
@@ -668,6 +398,10 @@
   height: var(--eds-button-size-md-iconOnly-icon-size);
 }
 
+/*
+ * Role, variant and state. A loading button also carries data-disabled="true", so each loading rule
+ * follows the disabled rule of the same specificity and restores the enabled label color and border.
+ */
 .eds-button__button[data-role="brand"][data-variant="solid"] {
   background-color: var(--eds-button-style-brand-solid-enabled-root-backgroundColor);
   color: var(--eds-button-style-brand-solid-enabled-label-color);