lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/toast/button-icon.slds.css

@@ -1,448 +1,423 @@
+/*******************************************
+* Imported dependency from @salesforce-ux/sds-primitives/src/sds/button/button.css
+*******************************************/
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]:focus) {
-  outline: 0;
+/**
+ * Normalize box-sizing
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
-
+/**
+ * Base button styles
+ */
 :host([data-render-mode="shadow"]) [part~='button'] {
   display: inline-flex;
-  position: relative;
-  background: none;
-  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
-  background-clip: border-box;
-  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
-  padding-left: var(
-    --sds-c-button-spacing-inline-start,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-right: var(
-    --sds-c-button-spacing-inline-end,
-    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
-  );
-  padding-top: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
-  );
-  padding-bottom: var(
-    --sds-c-button-spacing-block-start,
-    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
+  gap: var(--sds-c-button-spacing-gap, var(--sds-s-button-spacing-gap));
+  background: var(--sds-c-button-color-background, var(--sds-s-button-color-background));
+  color: var(--sds-c-button-text-color, var(--sds-s-button-color));
+  font-weight: var(--sds-c-button-font-weight, var(--sds-s-button-font-weight));
+  font-size: var(--sds-c-button-font-size, var(--sds-s-button-font-size, inherit));
+  line-height: var(--sds-c-button-font-lineheight);
+  height: var(--sds-c-button-sizing-height);
+  width: var(--sds-c-button-sizing-width);
+  padding-inline-start: var(
+    --sds-c-button-spacing-inlinestart,
+    var(
+      --sds-c-button-spacing-inline,
+      var(--sds-c-button-spacing, var(--sds-s-button-spacing-inline, var(--sds-s-button-spacing)))
+    )
+  );
+  padding-inline-end: var(
+    --sds-c-button-spacing-inlineend,
+    var(
+      --sds-c-button-spacing-inline,
+      var(--sds-c-button-spacing, var(--sds-s-button-spacing-inline, var(--sds-s-button-spacing)))
+    )
+  );
+  padding-block-start: var(
+    --sds-c-button-spacing-blockstart,
+    var(
+      --sds-c-button-spacing-block,
+      var(--sds-c-button-spacing, var(--sds-s-button-spacing-block, var(--sds-s-button-spacing)))
+    )
+  );
+  padding-block-end: var(
+    --sds-c-button-spacing-blockend,
+    var(
+      --sds-c-button-spacing-block,
+      var(--sds-c-button-spacing, var(--sds-s-button-spacing-block, var(--sds-s-button-spacing)))
+    )
   );
   border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
   border-style: solid;
-  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
+  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, currentColor));
   border-start-start-radius: var(
     --sds-c-button-radius-border-startstart,
     var(
       --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-startstart,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
+      var(--sds-s-button-radius-border-startstart, var(--sds-s-button-radius-border))
     )
   );
   border-start-end-radius: var(
     --sds-c-button-radius-border-startend,
     var(
       --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-startend,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
+      var(--sds-s-button-radius-border-startend, var(--sds-s-button-radius-border))
     )
   );
   border-end-start-radius: var(
     --sds-c-button-radius-border-endstart,
     var(
       --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-endstart,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
+      var(--sds-s-button-radius-border-endstart, var(--sds-s-button-radius-border))
     )
   );
   border-end-end-radius: var(
     --sds-c-button-radius-border-endend,
     var(
       --sds-c-button-radius-border,
-      var(
-        --sds-s-button-radius-border-endend,
-        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-      )
+      var(--sds-s-button-radius-border-endend, var(--sds-s-button-radius-border))
     )
   );
   box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
-  width: var(--sds-c-button-sizing-width);
-
-  /* this line height hook is incorrect but is used in core - need to get teams to change */
-  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
-  line-height: var(--sds-c-button-line-height);
+  text-decoration: var(--sds-c-button-font-decoration);
   white-space: normal;
   user-select: none;
   align-items: center;
-  text-decoration: var(--sds-c-button-font-decoration, none);
+  justify-content: center;
   appearance: none;
 }
-
+/**
+ * Hover button styles
+ *
+ * Fallback order: Hover > Base
+ */
 :host([data-render-mode="shadow"]) [part~='button']:hover {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-hover,
-    var(--sds-s-button-text-color-hover, #0176d3)
-  );
+  --sds-c-button-text-color: var(--sds-c-button-text-color-hover, var(--sds-s-button-color-hover, revert));
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-hover,
-    var(--sds-s-button-color-background-hover)
+    var(--sds-s-button-color-background-hover, revert)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-hover,
+    var(--sds-s-button-color-border-hover, revert)
   );
-  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
+  --sds-c-button-shadow: var(--sds-c-button-shadow-hover, var(--sds-s-button-shadow-hover, revert));
 
   cursor: pointer;
 }
-
+/**
+ * Focus button styles
+ *
+ * Fallback order: Focus > Hover > Base
+ */
 :host([data-render-mode="shadow"]) [part~='button']:focus {
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-focus,
-    var(--sds-s-button-color-background-focus)
+    var(--sds-s-button-color-background-focus, revert)
   );
   --sds-c-button-color-border: var(
     --sds-c-button-color-border-focus,
-    var(--sds-s-button-color-border-focus, #0176d3)
+    var(--sds-s-button-color-border-focus, revert)
   );
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-focus,
-    var(--sds-s-button-text-color-focus, #0176d3)
-  );
-  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));
+  --sds-c-button-text-color: var(--sds-c-button-text-color-focus, var(--sds-s-button-color-focus, revert));
+  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, revert));
 
   outline: 0;
 }
-
+/**
+ * Active button styles
+ *
+ * Fallback order: Active > Focus > Base
+ *
+ * @TODO: keep this order (no hover) so active has feedback or go all out?
+ */
 :host([data-render-mode="shadow"]) [part~='button']:active {
-  --sds-c-button-text-color: var(
-    --sds-c-button-text-color-active,
-    var(--sds-s-button-text-color-active, currentColor)
-  );
+  --sds-c-button-text-color: var(--sds-c-button-text-color-active, var(--sds-s-button-color-active, revert));
   --sds-c-button-color-background: var(
     --sds-c-button-color-background-active,
-    var(--sds-s-button-color-background-active)
+    var(--sds-s-button-color-background-active, revert)
   );
   --sds-c-button-color-border: var(
     --sds-c-button-color-border-active,
-    var(--sds-s-button-color-border-active, #0176d3)
+    var(--sds-s-button-color-border-active, revert)
   );
+  --sds-c-button-shadow: var(--sds-c-button-shadow-active, var(--sds-s-button-shadow-active, revert));
 }
-
+/**
+ * Disabled button styles
+ */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
+  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled);
   --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
   --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
+  --sds-c-button-shadow: var(--sds-c-button-shadow-disabled);
 
   pointer-events: none;
 }
-
 :host([data-render-mode="shadow"]) [part~='button']:disabled * {
   pointer-events: none;
 }
+:host([data-render-mode="shadow"]) [part='button'][aria-pressed='true'] {
+  --sds-c-button-color-background: var(--sds-c-button-color-background-pressed, revert);
+  --sds-c-button-color-border: var(--sds-c-button-color-border-pressed, revert);
+  --sds-c-button-text-color: var(--sds-c-button-text-color-pressed, revert);
+  --sds-c-button-shadow: var(--sds-c-button-shadow-pressed, revert);
+}
+/*******************************************
+* Imported dependency from @salesforce-ux/slds-button/button.css
+*******************************************/
+/**
+  * LBC default is the 'neutral' variant.
+  *
+  * We retain the 'neutral' variant in the hook names for interoperability
+  * with SLDS light DOM blueprints which do explicitly define a 'neutral'
+  * variant which is not the default.
+  *
+  * See 'base' variant below.
+  *
+  */
+:host([data-render-mode="shadow"]) [part~='button'] {
+  /* Element spacing, display flex set by SDS button */
+  gap: var(--slds-g-spacing-2);
+
+  /* slds-icon mapping */
+  --slds-c-icon-sizing-border: 0;
+  --slds-c-icon-sizing: 0.875rem;
+  --slds-c-icon-color-foreground: currentcolor;
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
+  --sds-c-button-font-lineheight: var(
+    --slds-c-button-neutral-font-lineheight,
+    var(--slds-s-button-font-lineheight, 1.875rem)
+  );
+  --sds-c-button-spacing-inline: var(
+    --slds-c-button-neutral-spacing-inline,
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+  );
+  --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
+
   /**
-   * LBC default is the 'neutral' variant.
-   *
-   * We retain the 'neutral' variant in the hook names for interoperability
-   * with SLDS light DOM blueprints which do explicitly define a 'neutral'
-   * variant which is not the default.
-   *
-   * See 'base' variant below.
-   *
-   */
+    * A note about fallbacks on the default variant:
+    *
+    * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
+    * hooks are tied to a selector with higher specificity. In the default variant,
+    * attempting to use the previous state's hook as a fallback will fail because
+    * it picks up on sds-button's state hooks instead and creates an infinite loop
+    * which ultimately breaks styling.
+    *
+    * This is another use-case for removing the opinion of state selectors in SDS.
+    *
+    * So in the default variant below, you'll see many repeated fallback values.
+    *
+    * In all other variants, it is ok to use the previous state as a fallback value.
+    */
+
+
+  /* Border radius - shared */
+  --sds-c-button-radius-border-startstart: var(
+    --slds-c-button-neutral-radius-border-startstart,
+    var(
+      --slds-c-button-radius-border,
+      var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
+    )
+  );
 
-  :host([data-render-mode="shadow"]) [part~='button'] {
-    /* Element spacing, display flex set by SDS button */
-    gap: var(--sds-g-spacing-2, 0.5rem);
-
-    /* slds-icon mapping */
-    --slds-c-icon-sizing-border: 0;
-    --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
-
-    --sds-c-button-line-height: var(
-      --slds-c-button-neutral-font-lineheight,
-      var(--slds-s-button-font-lineheight, 1.875rem)
-    );
-    --sds-c-button-spacing-inline: var(
-      --slds-c-button-neutral-spacing-inline,
-      var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem))
-    );
-    --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
-
-    /**
-     * A note about fallbacks on the default variant:
-     *
-     * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
-     * hooks are tied to a selector with higher specificity. In the default variant,
-     * attempting to use the previous state's hook as a fallback will fail because
-     * it picks up on sds-button's state hooks instead and creates an infinite loop
-     * which ultimately breaks styling.
-     *
-     * This is another use-case for removing the opinion of state selectors in SDS.
-     *
-     * So in the default variant below, you'll see many repeated fallback values.
-     *
-     * In all other variants, it is ok to use the previous state as a fallback value.
-     */
-
-    /* Border radius - shared */
-    --sds-c-button-radius-border-startstart: var(
-      --slds-c-button-neutral-radius-border-startstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endstart: var(
-      --slds-c-button-radius-border-endstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-startend: var(
-      --slds-c-button-radius-border-startend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endend: var(
-      --slds-c-button-radius-border-endend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
-      )
-    );
-
-    /* Background color */
-    --sds-c-button-color-background: var(
-      --slds-c-button-neutral-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-button-color-background-hover: var(
-      --slds-c-button-neutral-color-background-hover,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --sds-c-button-color-background-focus: var(
-      --slds-c-button-neutral-color-background-focus,
-      var(--sds-c-button-color-background-hover)
-    );
-    --sds-c-button-color-background-active: var(
-      --slds-c-button-neutral-color-background-active,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-
-    /* Border color */
-    --sds-c-button-color-border: var(
-      --slds-c-button-neutral-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-hover: var(
-      --slds-c-button-neutral-color-border-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-focus: var(
-      --slds-c-button-neutral-color-border-focus,
-      var(--sds-c-button-color-border-hover)
-    );
-    --sds-c-button-color-border-active: var(
-      --slds-c-button-neutral-color-border-active,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-      );
-
-    /* Text color */
-    --sds-c-button-text-color: var(
-      --slds-c-button-neutral-text-color,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --sds-c-button-text-color-hover: var(
-      --slds-c-button-neutral-text-color-hover,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-    --sds-c-button-text-color-focus: var(
-      --slds-c-button-neutral-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-
-    );
-    --sds-c-button-text-color-active: var(
-      --slds-c-button-neutral-text-color-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-
-    /* Shadow */
-    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
-    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-    /* Disabled */
-    --sds-c-button-color-background-disabled: var(
-      --slds-c-button-neutral-color-background-disabled,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-button-color-border-disabled: var(
-      --slds-c-button-neutral-color-border-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-text-color-disabled: var(
-      --slds-c-button-neutral-text-color-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-  }
+  --sds-c-button-radius-border-endstart: var(
+    --slds-c-button-radius-border-endstart,
+    var(
+      --slds-c-button-radius-border,
+      var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
+    )
+  );
 
-  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: var(
-      --slds-c-button-brand-color-background,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-brand-color-border,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-brand-color-border-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-brand-color-border-focus,
-      var(--slds-c-button-brand-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-brand-color-border-active,
-      var(--slds-c-button-brand-color-background-active)
-    );
-
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-brand-text-color,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-brand-color-background-hover,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-brand-color-background-focus,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-brand-color-background-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-brand-text-color-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-brand-text-color-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-brand-text-color-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
+  --sds-c-button-radius-border-startend: var(
+    --slds-c-button-radius-border-startend,
+    var(
+      --slds-c-button-radius-border,
+      var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
+    )
+  );
 
-  :host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-50, #0176d3);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
-    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-50, #0176d3);
-    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-30, #014486);
-    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-brand-base-30, #014486);
-    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-30, #014486);
-    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-  }
+  --sds-c-button-radius-border-endend: var(
+    --slds-c-button-radius-border-endend,
+    var(
+      --slds-c-button-radius-border,
+      var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
+    )
+  );
 
-  :host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: transparent;
-    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-border: var(--sds-g-color-brand-base-100, #ffffff);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-100, #ffffff);
-    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-brand-base-50, #0176d3);
-    --slds-c-button-neutral-text-color-active: var(--sds-g-color-brand-base-50, #0176d3);
-    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-brand-base-100, #ffffff);
-    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
-    --slds-c-button-neutral-color-background-disabled: transparent;
-  }
+  /* Background color */
+  --sds-c-button-color-background: var(
+    --slds-c-button-neutral-color-background,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-button-color-background-hover: var(
+    --slds-c-button-neutral-color-background-hover,
+    var(--slds-g-color-surface-container-1)
+  );
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-active: var(
+    --slds-c-button-neutral-color-background-active,
+    var(--slds-g-color-surface-container-1)
+  );
 
-  :host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-color-border: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-100, #ffffff);
-    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-error-base-30, #8e030f);
-    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-error-base-30, #8e030f);
-    --slds-c-button-neutral-color-background-active: var(--sds-g-color-error-base-30, #8e030f);
-    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-100, #ffffff);
-    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-100, #ffffff);
-    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-100, #ffffff);
-    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
+  /* Border color */
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border-hover: var(
+    --slds-c-button-neutral-color-border-hover,
+    var(--slds-g-color-border-accent-1)
+  );
+  --sds-c-button-color-border-focus: var(
+    --slds-c-button-neutral-color-border-focus,
+    var(--slds-g-color-border-accent-1)
+  );
+  --sds-c-button-color-border-active: var(
+    --slds-c-button-neutral-color-border-active,
+    var(--slds-g-color-border-accent-1)
+  );
 
-  :host([data-render-mode="shadow"][variant='success']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: var(--sds-g-color-success-base-70, #45c65a);
-    --slds-c-button-neutral-color-border: var(--sds-g-color-success-base-80, #91db8b);
-    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-success-base-50, #2e844a);
-    --slds-c-button-neutral-color-border-active: var(--sds-g-color-success-base-50, #2e844a);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-neutral-base-10, #181818);
-    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-success-base-50, #2e844a);
-    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-success-base-50, #2e844a);
-    --slds-c-button-neutral-color-background-active: var(--sds-g-color-success-base-50, #2e844a);
-    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-success-base-100, #ffffff);
-    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-success-base-100, #ffffff);
-    --slds-c-button-neutral-text-color-active: var(--sds-g-color-success-base-100, #ffffff);
-    --slds-c-button-neutral-color-background-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-neutral-color-background-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
-  }
+  /* Text color */
+  --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-active: var(
+    --slds-c-button-neutral-text-color-active,
+    var(--slds-g-color-accent-3)
+  );
 
-  :host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
-    --slds-c-button-neutral-font-lineheight: var(--slds-s-button-font-lineheight, 1.875rem);
-    --slds-c-button-neutral-spacing-inline: var(--slds-s-button-spacing-inline, var(--sds-g-spacing-4, 1rem));
-    --slds-c-button-neutral-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
-    --slds-c-button-neutral-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-error-base-50, #ea001e);
-    --slds-c-button-neutral-color-border-hover: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-button-neutral-color-background-hover: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-focus: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-color-background-active: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    --slds-c-button-neutral-text-color-hover: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-text-color-focus: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-text-color-active: var(--sds-g-color-error-base-40, #ba0517);
-    --slds-c-button-neutral-color-border-disabled: var(--sds-g-color-neutral-base-80, #c9c9c9);
-  }
+  /* Shadow */
+  --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
+  --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
 
-  /**
+  /* Disabled */
+  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/**
+  * A note about fallbacks on the default variant:
+  *
+  * We cannot use --sds-c-button-* as fallbacks because the sds-button's state
+  * hooks are tied to a selector with higher specificity. In the default variant,
+  * attempting to use the previous state's hook as a fallback will fail because
+  * it picks up on sds-button's state hooks instead and creates an infinite loop
+  * which ultimately breaks styling.
+  *
+  * This is another use-case for removing the opinion of state selectors in SDS.
+  *
+  * So in the default variant below, you'll see many repeated fallback values.
+  *
+  * In all other variants, it is ok to use the previous state as a fallback value.
+*/
+:host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
+  --slds-c-button-neutral-color-background: var(
+    --slds-c-button-brand-color-background,
+    var(--slds-g-color-accent-container-2)
+  );
+  --slds-c-button-neutral-color-background-hover: var(
+    --slds-c-button-brand-color-background-hover,
+    var(--slds-g-color-accent-container-3)
+  );
+  --slds-c-button-neutral-color-background-focus: var(
+    --slds-c-button-brand-color-background-focus,
+    var(--slds-g-color-accent-container-3)
+  );
+  --slds-c-button-neutral-color-background-active: var(
+    --slds-c-button-brand-color-background-active,
+    var(--slds-g-color-accent-container-3)
+  );
+
+  --slds-c-button-neutral-color-border: var(
+    --slds-c-button-brand-color-border,
+    var(--slds-g-color-border-accent-2)
+  );
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-brand-color-border-hover,
+    var(--slds-g-color-border-accent-3)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-brand-color-border-focus,
+    var(--slds-g-color-border-accent-3)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-brand-color-border-active,
+    var(--slds-g-color-border-accent-3)
+  );
+
+  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
+  --sds-c-button-text-color: var(--slds-c-button-brand-text-color, var(--slds-g-color-on-accent-1));
+}
+:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-2);
+}
+:host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
+  --slds-c-button-neutral-color-background: transparent;
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-surface-container-2);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-surface-container-2);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-surface-container-2);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-accent-1);
+  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-accent-2);
+  --slds-c-button-neutral-text-color-active: var(--slds-g-color-accent-2);
+}
+:host([data-render-mode="shadow"][variant='inverse']) [part~='button']:disabled {
+  --sds-c-button-color-background: transparent;
+  --sds-c-button-color-border: var(--slds-g-color-border-disabled-2);
+  --sds-c-button-text-color: var(--slds-g-color-disabled-2);
+}
+:host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
+  --slds-c-button-neutral-color-background: var(--slds-g-color-error-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-error-container-2);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-error-container-2);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-error-container-2);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-error-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-error-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-error-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-error-2);
+
+  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
+  --sds-c-button-text-color: var(--slds-g-color-on-error-1);
+}
+:host([data-render-mode="shadow"][variant='success']) [part~='button'] {
+  --slds-c-button-neutral-color-background: var(--slds-g-color-success-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-success-container-2);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-success-container-2);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-success-container-2);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-success-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
+  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
+  --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
+}
+:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+  --slds-c-button-neutral-text-color: var(--slds-g-color-error-1);
+  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
+  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
+  --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+}
+:host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+}
+/**
    * 'base' variant is not the default in LBC. It is the default in the light
    * DOM version of SLDS.
    *
@@ -452,25 +427,28 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *
    * E.g. --slds-c-button-color-background
    */
-  :host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
-    --slds-c-button-neutral-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-button-neutral-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
-    --slds-c-button-neutral-color-border: transparent;
-    --slds-c-button-neutral-color-border-hover: transparent;
-    --slds-c-button-neutral-color-border-focus: transparent;
-    --slds-c-button-neutral-color-border-active: var(--sds-g-color-neutral-base-30, #444444);
-    --slds-c-button-neutral-color-border-disabled: transparent;
-    --slds-c-button-neutral-color-background-hover: transparent;
-    --slds-c-button-neutral-color-background-active: transparent;
-  }
-
-  :host([data-render-mode="shadow"][stretch]) [part~='button'] {
-    --sds-c-button-sizing-width: 100%;
-
-    justify-content: center;
-  }
+:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+  --sds-c-button-spacing-inline: 0;
+  --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
+  --slds-c-button-neutral-color-border: transparent;
+  --slds-c-button-neutral-color-border-hover: transparent;
+  --slds-c-button-neutral-color-border-focus: transparent;
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-2);
+  --slds-c-button-neutral-color-background: transparent;
+  --slds-c-button-neutral-color-background-hover: transparent;
+  --slds-c-button-neutral-color-background-focus: transparent;
+  --slds-c-button-neutral-color-background-active: transparent;
+}
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+  --sds-c-button-color-background: transparent;
+  --sds-c-button-color-border: transparent;
+}
+:host([data-render-mode="shadow"][stretch]) [part~='button'] {
+  --sds-c-button-sizing-width: 100%;
 
-  /**
+  justify-content: center;
+}
+/**
    * Center button on all variants except 'base', and 'text'
    *
    * This addresses the issue of customers relying on preexisting x-axis centering
@@ -480,27 +458,24 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * - https://github.com/salesforce-ux/design-system-internal/pull/4344
    * - https://github.com/salesforce-ux/design-system-internal/pull/4949
    */
-  :host([data-render-mode="shadow"][variant='brand']) [part~='button'],:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'],:host([data-render-mode="shadow"][variant='inverse']) [part~='button'],:host([data-render-mode="shadow"][variant='success']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
-    justify-content: center;
-  }
-
-  /**
+:host([data-render-mode="shadow"][variant='brand']) [part~='button'],:host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'],:host([data-render-mode="shadow"][variant='inverse']) [part~='button'],:host([data-render-mode="shadow"][variant='success']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive']) [part~='button'],:host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
+  justify-content: center;
+}
+/**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part='start'] {
-    display: inline-flex;
-    padding-inline-end: 0;
-  }
-
-  /**
+:host([data-render-mode="shadow"]) [part~='start'] {
+  display: inline-flex;
+  padding-inline-end: 0;
+}
+/**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part='end'] {
-    display: inline-flex;
-    padding-inline-start: 0;
-  }
-}
+:host([data-render-mode="shadow"]) [part~='end'] {
+  display: inline-flex;
+  padding-inline-start: 0;
 
+}
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -508,7 +483,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  * outcome is the removal of this class and replacing the class with the SLDS
  * utility package solution.
  */
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -521,7 +495,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   text-transform: none !important;
   white-space: nowrap !important;
 }
-
 :host([data-render-mode="shadow"]) .slds-button_reset {
   font-size: inherit;
   color: inherit;
@@ -531,376 +504,213 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   border: 0;
   text-align: inherit;
 }
-
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+/**
+  * part - button-icon
+  *
+  * Default styling is "border" variant
+  */
+:host([data-render-mode="shadow"]) [part~='button-icon'] {
+  display: inline-flex;
 
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
-    display: inline-flex;
-  }
-
-  /**
-      * part - button-icon
-      *
-      * Default styling is "border" variant
-      */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
-    /* slds-icon mapping */
-    --slds-c-icon-sizing-border: 0;
-    --slds-c-icon-sizing: var(--slds-c-buttonicon-sizing, 0.875rem);
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground,
-      var(--sds-g-color-neutral-base-50, #747474)
-    );
-
-    /* Text */
-    --slds-c-button-neutral-font-lineheight: var(
-      --slds-c-buttonicon-neutral-font-lineheight,
-      var(--sds-g-font-lineheight-1, 1)
-    );
-
-    /* Background */
-    --slds-c-button-neutral-color-background: var(--slds-c-buttonicon-color-background, transparent);
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-buttonicon-color-background-hover,
-      transparent
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-buttonicon-color-background-focus,
-      transparent
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-buttonicon-color-background-active,
-      transparent
-    );
-
-    /* Spacing */
-    --slds-c-button-neutral-spacing-inline: var(
-      --slds-c-buttonicon-spacing-inline,
-      var(--sds-s-button-spacing-inline, var(--sds-g-spacing-2, 0.5rem))
-    );
-    --slds-c-button-neutral-spacing-block: var(
-      --slds-c-buttonicon-spacing-block,
-      var(--sds-s-button-spacing-block, var(--sds-g-spacing-2, 0.5rem))
-    );
-
-    /* Border */
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-buttonicon-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-buttonicon-color-border-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-buttonicon-color-border-focus,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-buttonicon-color-border-active,
-      var(--slds-c-buttonicon-color-border-focus)
-    );
-
-    /* Shadow */
-    --slds-c-button-neutral-shadow: var(--slds-c-buttonicon-shadow);
-    --slds-c-button-neutral-shadow-focus: var(--slds-c-buttonicon-shadow-focus);
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(--slds-c-buttonicon-color-background-disabled);
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-buttonicon-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--slds-c-buttonicon-text-color-disabled);
-  }
-
-  /* slds-icon interaction states */
-  :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground-hover,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground-focus,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  :host([data-render-mode="shadow"]) [part~='button-icon']:active {
-    --slds-c-icon-color-foreground: var(
-      --slds-c-buttonicon-color-foreground-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-  }
-
-  /* Create disabled state for the 1st time since icon doesn't have disabled state. */
-  :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
-    --slds-c-icon-color-foreground: var(--slds-c-buttonicon-color-foreground-disabled);
-  }
-
-  /**
-   * Variant - Bare
-   *
-   * Note: `_bare` variant is deprecated in SLDS and SLDS (light DOM version) assumes the `bare` variant
-   * will be the default styling.
-   *
-   * We include it here as an explicit variant for two reasons:
-   *
-   * 1. LBC parity; LBC uses `border` variant as default, not `bare`.
-   * 2. `bare` is the only variant that excludes padding; it is an outlier. All
-   *    variants share common styling except `bare`. Separating out `bare` into
-   *    its own variant saves us having to expose additional styling APIs on all
-   *    the other variants just to reassign what `bare` is doing if it is default.
-   */
-  :host([data-render-mode="shadow"][variant='bare']) [part~='button-icon'] {
-    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bare-color-border, transparent);
-    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-bare-color-border-hover, transparent);
-    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-bare-color-border-focus, transparent);
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-bare-color-border-active, transparent);
-    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bare-spacing-inline, 0);
-    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bare-spacing-block, 0);
-
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: var(
-      --slds-c-buttonicon-bare-color-border-disabled,
-      transparent
-    );
-    --slds-c-buttonicon-color-background-disabled: var(
-      --slds-c-buttonicon-bare-color-background-disabled,
-      transparent
-    );
-  }
-
-  /**
-      * Variant - Container
-      */
-  :host([data-render-mode="shadow"][variant='container']) [part~='button-icon'] {
-    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-container-color-border, transparent);
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-container-color-border-hover,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-container-color-border-focus,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-container-color-border-active);
-
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: var(
-      --slds-c-buttonicon-container-color-border-disabled,
-      transparent
-    );
-  }
-
-  /**
-      * Variant - Brand
-      */
-  :host([data-render-mode="shadow"][variant='brand']) [part~='button-icon'] {
-    --slds-c-button-brand-color-background: var(--slds-c-buttonicon-brand-color-background);
-    --slds-c-button-brand-color-background-hover: var(--slds-c-buttonicon-brand-color-background-hover);
-    --slds-c-button-brand-color-background-focus: var(--slds-c-buttonicon-brand-color-background-focus);
-    --slds-c-button-brand-color-background-active: var(--slds-c-buttonicon-brand-color-background-active);
-    --slds-c-button-brand-color-border: var(--slds-c-buttonicon-brand-color-border);
-    --slds-c-button-brand-color-border-hover: var(--slds-c-buttonicon-brand-color-border-hover);
-    --slds-c-button-brand-color-border-focus: var(--slds-c-buttonicon-brand-color-border-focus);
-    --slds-c-button-brand-color-border-active: var(--slds-c-buttonicon-brand-color-border-active);
-
-    --slds-c-buttonicon-color-foreground: var(
-      --slds-c-buttonicon-brand-color-foreground,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-hover: var(
-      --slds-c-buttonicon-brand-color-foreground-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-brand-color-foreground-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-active: var(
-      --slds-c-buttonicon-brand-color-foreground-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-  }
-
-  /**
-      * Variant - Bare Inverse
-      */
-  :host([data-render-mode="shadow"][variant='bare-inverse']) [part~='button-icon'] {
-    /* Background */
-    --slds-c-buttonicon-color-background-active: transparent;
-
-    /* Border */
-    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-bareinverse-color-border, transparent);
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-bareinverse-color-border-hover,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-bareinverse-color-border-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-color-border-focus);
-
-    /* Spacing */
-    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttonicon-bareinverse-spacing-inline, 0);
-    --slds-c-buttonicon-spacing-block: var(--slds-c-buttonicon-bareinverse-spacing-block, 0);
-
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
-
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(
-      --slds-c-buttonicon-bareinverse-color-foreground,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-hover: var(
-      --slds-c-buttonicon-bareinverse-color-foreground-hover,
-      var(--sds-g-color-brand-base-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-bareinverse-color-foreground-focus,
-      var(--sds-g-color-brand-base-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-active: var(
-      --slds-c-buttonicon-bareinverse-color-foreground-active,
-      var(--sds-g-color-brand-base-95, #eef4ff)
-    );
-
-    /* Disabled */
-    --slds-c-buttonicon-color-border-disabled: var(
-      --slds-c-buttonicon-bareinverse-color-border-disabled,
-      transparent
-    );
-  }
-
-  /**
-      * Variant - Border Inverse
-      */
-  :host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon'] {
-    /* Border */
-    --slds-c-buttonicon-color-border: var(
-      --slds-c-buttonicon-borderinverse-color-border,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-borderinverse-color-border-hover,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-borderinverse-color-border-focus,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-borderinverse-color-border-active,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-
-    /* Shadow */
-    --slds-c-buttonicon-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-100, #ffffff);
-
-    /* Icon */
-    --slds-c-buttonicon-color-foreground: var(
-      --slds-c-buttonicon-borderinverse-color-foreground,
-      var(--sds-g-color-brand-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-foreground-hover: var(
-      --slds-c-buttonicon-borderinverse-color-foreground-hover,
-      var(--sds-g-color-brand-base-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-focus: var(
-      --slds-c-buttonicon-borderinverse-color-foreground-focus,
-      var(--sds-g-color-brand-base-95, #eef4ff)
-    );
-    --slds-c-buttonicon-color-foreground-active: var(
-      --slds-c-buttonicon-borderinverse-color-foreground-active,
-      var(--sds-g-color-brand-base-90, #d8e6fe)
-    );
-  }
-
-  /**
-      * Variant - Border Filled
-      */
-  :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
-    --slds-c-buttonicon-color-background: var(
-      --slds-c-buttonicon-borderfilled-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-background-hover: var(
-      --slds-c-buttonicon-borderfilled-color-background-hover,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-background-focus: var(
-      --slds-c-buttonicon-borderfilled-color-background-focus,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-background-active: var(
-      --slds-c-buttonicon-borderfilled-color-background-active,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-buttonicon-color-border: var(--slds-c-buttonicon-borderfilled-color-border);
-    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttonicon-borderfilled-color-border-hover);
-    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttonicon-borderfilled-color-border-focus);
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttonicon-borderfilled-color-border-active);
-  }
-
-  /**
-      * Sizes
-      *
-      * Sizes are restricted to specific variants.
-      */
-  :host([data-render-mode="shadow"][size='xx-small']) [part~='button-icon'] {
-    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-sizing: 0.5rem;
-  }
-
-  :host([data-render-mode="shadow"][size='x-small']) [part~='button-icon'] {
-    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-sizing: 0.75rem;
-  }
-
-  :host([data-render-mode="shadow"][size='small']) [part~='button-icon'] {
-    --slds-c-buttonicon-spacing-block: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-buttonicon-sizing: 0.875rem;
-  }
-
-  :host([data-render-mode="shadow"][size='x-small'][variant='bare']) [part~='button-icon'] {
-    --slds-c-buttonicon-spacing-block: 0;
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-sizing: 0.5rem;
-  }
-
-  :host([data-render-mode="shadow"][size='small'][variant='bare']) [part~='button-icon'] {
-    --slds-c-buttonicon-spacing-block: 0;
-    --slds-c-buttonicon-spacing-inline: 0;
-    --slds-c-buttonicon-sizing: 0.75rem;
-  }
-
-  :host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'] {
-    --slds-c-buttonicon-sizing: 1.5rem;
-  }
-
-  /**
-      * End part
-      */
-  :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
-  }
-
-  /**
-      * A temporarily baked-in utility class until SLDS gets a proper utility package.
-      *
-      * This is a hybrid patch between synthetic and native shadow. The ideal final
-      * outcome is the removal of this class and replacing the class with the SLDS
-      * utility package solution.
-      */
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
+  /* slds-icon mapping */
+  --slds-c-icon-sizing-border: 0;
+  --slds-c-icon-sizing: 0.875rem;
+  --slds-c-icon-color-foreground: var(--slds-c-buttonicon-color-foreground, var(--slds-g-color-on-surface-1));
+
+  /* Dimensions */
+  --sds-c-button-spacing-inline: 0;
+  --sds-c-button-sizing-height: var(--slds-g-sizing-9);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-9);
+
+  /* Background */
+  --slds-c-button-neutral-color-background: transparent;
+  --slds-c-button-neutral-color-background-hover: transparent;
+  --slds-c-button-neutral-color-background-focus: transparent;
+  --slds-c-button-neutral-color-background-active: transparent;
+
+  /* Border */
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-1);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-1);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-1);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-1);
+
+  /* Disabled */
+  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+}
+/* slds-icon interaction states */
+:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
+  --slds-c-icon-color-foreground: var(
+    --slds-c-buttonicon-color-foreground-hover,
+    var(--slds-g-color-accent-4)
+  );
+}
+:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+  --slds-c-icon-color-foreground: var(
+    --slds-c-buttonicon-color-foreground-focus,
+    var(--slds-g-color-accent-4)
+  );
+}
+:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+  --slds-c-icon-color-foreground: var(
+    --slds-c-buttonicon-color-foreground-active,
+    var(--slds-g-color-accent-4)
+  );
+}
+/* Create disabled state for the 1st time since icon doesn't have disabled state. */
+:host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
+  --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
+}
+/**
+  * Variant - Bare
+  *
+  * Note: `_bare` variant is deprecated in SLDS and SLDS (light DOM version) assumes the `bare` variant
+  * will be the default styling.
+  *
+  * We include it here as an explicit variant for two reasons:
+  *
+  * 1. LBC parity; LBC uses `border` variant as default, not `bare`.
+  * 2. `bare` is the only variant that excludes padding; it is an outlier. All
+  *    variants share common styling except `bare`. Separating out `bare` into
+  *    its own variant saves us having to expose additional styling APIs on all
+  *    the other variants just to reassign what `bare` is doing if it is default.
+  */
+:host([data-render-mode="shadow"][variant='bare']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+  --slds-c-button-neutral-color-border: transparent;
+  --slds-c-button-neutral-color-border-hover: transparent;
+  --slds-c-button-neutral-color-border-focus: transparent;
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-3);
+
+  /* Disabled */
+  --sds-c-button-color-background-disabled: transparent;
+  --sds-c-button-color-border-disabled: transparent;
+}
+/**
+  * Variant - Container
+  */
+:host([data-render-mode="shadow"][variant='container']) [part~='button-icon'] {
+  --slds-c-button-neutral-color-border: transparent;
+  --slds-c-button-neutral-color-border-hover: transparent;
+  --slds-c-button-neutral-color-border-focus: transparent;
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-accent-3);
+
+  /* Disabled */
+  --sds-c-button-color-background-disabled: transparent;
+  --sds-c-button-color-border-disabled: transparent;
+}
+/**
+  * Variant - Brand
+  */
+:host([data-render-mode="shadow"][variant='brand']) [part~='button-icon'] {
+  --slds-c-icon-color-foreground: var(--slds-g-color-on-accent-1);
+}
+/**
+  * Variant - Bare Inverse
+  */
+:host([data-render-mode="shadow"][variant='bare-inverse']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+
+  /* Border */
+  --slds-c-button-neutral-color-border: transparent;
+  --slds-c-button-neutral-color-border-hover: transparent;
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-neutral-base-100);
+
+  /* Shadow */
+  --sds-c-button-shadow-focus: 0 0 3px var(--slds-g-color-neutral-base-100);
+
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
+
+  /* Disabled */
+  --sds-c-button-color-background-disabled: transparent;
+  --sds-c-button-color-border-disabled: transparent;
+}
+/**
+  * Variant - Border Inverse
+  */
+:host([data-render-mode="shadow"][variant='border-inverse']) [part~='button-icon'] {
+  /* Border */
+  --slds-c-button-neutral-color-border: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-neutral-base-100);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-neutral-base-100);
+
+  /* Shadow */
+  --sds-c-button-shadow-focus: 0 0 3px var(--slds-g-color-neutral-base-100);
+
+  /* Icon */
+  --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
+  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
+
+  /* Disabled */
+  --sds-c-button-color-background-disabled: transparent;
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-2);
+}
+/**
+  * Variant - Border Filled
+  */
+:host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
+  --slds-c-button-neutral-color-background: var(--slds-g-color-surface-container-1);
+}
+/**
+  * Sizes
+  *
+  * Sizes are restricted to specific variants.
+  */
+:host([data-render-mode="shadow"][size='xx-small']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-5);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-5);
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+:host([data-render-mode="shadow"][size='x-small']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-6);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-6);
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+}
+:host([data-render-mode="shadow"][size='small']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-7);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-7);
+}
+:host([data-render-mode="shadow"][size='large']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: var(--slds-g-sizing-10);
+  --sds-c-button-sizing-width: var(--slds-g-sizing-10);
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+:host([data-render-mode="shadow"][size='x-small'][variant='bare']) [part~='button-icon'] {
+  --slds-c-buttonicon-spacing-block: 0;
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+:host([data-render-mode="shadow"][size='small'][variant='bare']) [part~='button-icon'] {
+  --slds-c-buttonicon-spacing-block: 0;
+  --slds-c-buttonicon-spacing-inline: 0;
+  --slds-c-icon-sizing: var(--slds-g-sizing-4);
+}
+/**
+  * End part
+  */
+:host([data-render-mode="shadow"]) [part='end'] {
+  padding-inline-start: 0;
+}
+/**
+  * A temporarily baked-in utility class until SLDS gets a proper utility package.
+  *
+  * This is a hybrid patch between synthetic and native shadow. The ideal final
+  * outcome is the removal of this class and replacing the class with the SLDS
+  * utility package solution.
+  */
+:host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;
@@ -912,4 +722,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}