lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -188,17 +188,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
   /**
-     * 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.
-     *
-     */
+   * 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(--sds-g-spacing-2, 0.5rem);
+
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
@@ -208,6 +211,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --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(
@@ -239,28 +263,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       )
     );
 
-    --sds-c-button-spacing-inline: var(
-      --slds-c-button-neutral-spacing-inline,
-      var(--slds-s-button-spacing-inline, 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.
-     */
-
     /* Background color */
     --sds-c-button-color-background: var(
       --slds-c-button-neutral-color-background,
@@ -272,11 +274,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --sds-c-button-color-background-focus: var(
       --slds-c-button-neutral-color-background-focus,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
+      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-90, #e5e5e5)
+      var(--sds-g-color-neutral-base-95, #f3f3f3)
     );
 
     /* Border color */
@@ -290,22 +292,26 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --sds-c-button-color-border-focus: var(
       --slds-c-button-neutral-color-border-focus,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      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-40, #0b5cab));
+    --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(--sds-g-color-brand-base-30, #014486)
+      var(--slds-c-button-neutral-text-color-hover)
+
     );
     --sds-c-button-text-color-active: var(
       --slds-c-button-neutral-text-color-active,
@@ -331,459 +337,193 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
   }
 
-  /**
-   * Variant - Brand
-   */
   :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-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(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-brand-color-background-active,
-      var(--sds-g-color-brand-base-20, #032d60)
-    );
+
     --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-30, #014486)
+      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-neutral-color-border-hover)
+      var(--slds-c-button-brand-color-border-hover)
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-button-brand-color-border-active,
-      var(--sds-g-color-brand-base-20, #032d60)
+      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-text-color-hover: var(
-      --slds-c-button-brand-text-color-hover,
-      var(--slds-c-button-neutral-text-color)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-brand-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-brand-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-brand-color-background-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-brand-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(
-      --slds-c-button-brand-text-color-disabled,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-  }
 
-  /**
-   * Variant - Brand Outline
-   */
-  :host([data-render-mode="shadow"][variant='brand-outline']) [part~='button'] {
-    --slds-c-button-neutral-color-background: var(
-      --slds-c-button-brandoutline-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
     --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-brandoutline-color-background-hover,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-brandoutline-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-brandoutline-color-background-active,
-      var(--sds-g-color-neutral-base-90, #e5e5e5)
-    );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-brandoutline-color-border,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-brandoutline-color-border-hover,
-      var(--slds-c-button-neutral-color-border)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-brandoutline-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-brandoutline-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-brandoutline-text-color,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-brandoutline-text-color-hover,
+      --slds-c-button-brand-color-background-hover,
       var(--sds-g-color-brand-base-30, #014486)
     );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-brandoutline-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-brandoutline-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-brandoutline-color-background-disabled
-    );
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-brandoutline-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-brandoutline-text-color-disabled);
-  }
-
-  /**
-   * Variant - Inverse
-   */
-  :host([data-render-mode="shadow"][variant='inverse']) [part~='button'] {
-    --slds-c-button-neutral-color-background: var(--slds-c-button-inverse-color-background, transparent);
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-inverse-color-background-hover,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
     --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-inverse-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
+      --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-inverse-color-background-active,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
+      --slds-c-button-brand-color-background-active,
+      var(--sds-g-color-brand-base-30, #014486)
     );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-inverse-color-border,
+    --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-color-border-hover: var(
-      --slds-c-button-inverse-color-border-hover,
-      var(--slds-c-button-neutral-color-border)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-inverse-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-inverse-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-inverse-text-color,
+    --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-hover: var(
-      --slds-c-button-inverse-text-color-hover,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
     --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-inverse-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-inverse-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-inverse-color-background-disabled,
-      transparent
-    );
-    --slds-c-button-neutral-color-border-disabled: var(
-      --slds-c-button-inverse-color-border-disabled,
-      var(--sds-g-color-neutral-base-60, #939393)
+      --slds-c-button-brand-text-color-focus,
+      var(--sds-g-color-brand-base-100, #ffffff)
     );
-    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-inverse-text-color-disabled);
+    --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);
   }
 
-  /**
-   * Variant - Destructive
-   */
-  :host([data-render-mode="shadow"][variant='destructive']) [part~='button'] {
-    --slds-c-button-neutral-color-background: var(
-      --slds-c-button-destructive-color-background,
-      var(--sds-g-color-error-base-40, #ba0517)
-    );
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-destructive-color-background-hover,
-      var(--sds-g-color-error-base-30, #8e030f)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-destructive-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-destructive-color-background-active,
-      var(--sds-g-color-error-base-20, #640103)
-    );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-destructive-color-border,
-      var(--sds-g-color-error-base-40, #ba0517)
-    );
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-destructive-color-border-hover,
-      var(--sds-g-color-error-base-30, #8e030f)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-destructive-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-destructive-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-destructive-text-color,
-      var(--sds-g-color-error-base-100, #ffffff)
-    );
+  :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);
+  }
 
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-destructive-text-color-hover,
-      var(--slds-c-button-neutral-text-color)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-destructive-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-destructive-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
+  :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;
+  }
 
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-destructive-color-background-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-destructive-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(
-      --slds-c-button-destructive-text-color-disabled,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
+  :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);
   }
 
-  /**
-   * Variant - Success
-   */
   :host([data-render-mode="shadow"][variant='success']) [part~='button'] {
-    --slds-c-button-neutral-color-background: var(
-      --slds-c-button-success-color-background,
-      var(--sds-g-color-success-base-50, #2e844a)
-    );
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-success-color-background-hover,
-      var(--sds-g-color-success-base-40, #22683e)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-success-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-success-color-background-active,
-      var(--sds-g-color-success-base-30, #194e31)
-    );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-success-color-border,
-      var(--sds-g-color-success-base-50, #2e844a)
-    );
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-success-color-border-hover,
-      var(--sds-g-color-success-base-40, #22683e)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-success-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-success-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-success-text-color,
-      var(--sds-g-color-success-base-100, #ffffff)
-    );
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-success-text-color-hover,
-      var(--slds-c-button-neutral-text-color)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-success-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-success-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-success-color-background-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-success-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(
-      --slds-c-button-success-text-color-disabled,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
+    --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);
   }
 
-  /**
-   * Variant - Destructive Text
-   */
   :host([data-render-mode="shadow"][variant='destructive-text']) [part~='button'] {
-    --slds-c-button-neutral-color-background: var(
-      --slds-c-button-destructivetext-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-destructivetext-color-background-hover,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-destructivetext-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-destructivetext-color-background-active,
-      var(--sds-g-color-neutral-base-90, #e5e5e5)
-    );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-destructivetext-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-destructivetext-color-border-hover,
-      var(--slds-c-button-neutral-color-border)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-destructivetext-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-destructivetext-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-text-color: var(
-      --slds-c-button-destructivetext-text-color,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-destructivetext-text-color-hover,
-      var(--sds-g-color-error-base-40, #ba0517)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-destructivetext-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-destructivetext-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-destructivetext-color-background-disabled
-    );
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-destructivetext-color-border-disabled);
-    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-destructivetext-text-color-disabled);
+    --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);
   }
 
   /**
-     * 'base' variant is not the default in LBC. It is the default in the light
-     * DOM version of SLDS.
-     *
-     * So even though this is a non-default variant in this context, the hooks
-     * for this variant are written as the default for interoperability with
-     * SLDS light DOM.
-     *
-     * E.g. --slds-c-button-color-background
-     */
+   * 'base' variant is not the default in LBC. It is the default in the light
+   * DOM version of SLDS.
+   *
+   * So even though this is a non-default variant in this context, the hooks
+   * for this variant are written as the default for interoperability with
+   * SLDS light DOM.
+   *
+   * 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(--slds-c-button-spacing-inline, 0);
-    --slds-c-button-neutral-text-color: var(--slds-c-button-text-color, var(--sds-g-color-brand-base-40, #0b5cab));
-    --slds-c-button-neutral-text-color-hover: var(
-      --slds-c-button-text-color-hover,
-      var(--slds-c-button-neutral-text-color)
-    );
-    --slds-c-button-neutral-text-color-focus: var(
-      --slds-c-button-text-color-focus,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-button-text-color-active,
-      var(--slds-c-button-neutral-text-color-focus)
-    );
-    --slds-c-button-neutral-color-border: var(--slds-c-button-color-border, transparent);
-    --slds-c-button-neutral-color-border-hover: var(
-      --slds-c-button-color-border-hover,
-      var(--slds-c-button-neutral-color-border)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-color-border-focus,
-      var(--slds-c-button-neutral-color-border-hover)
-    );
-    --slds-c-button-neutral-color-border-active: var(
-      --slds-c-button-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
-    );
-    --slds-c-button-neutral-color-background: var(--slds-c-button-color-background, transparent);
-    --slds-c-button-neutral-color-background-hover: var(
-      --slds-c-button-color-background-hover,
-      var(--slds-c-button-neutral-color-background)
-    );
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-button-color-background-focus,
-      var(--slds-c-button-neutral-color-background-hover)
-    );
-    --slds-c-button-neutral-color-background-active: var(
-      --slds-c-button-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
-    );
-
-    /* Disabled */
-    --slds-c-button-neutral-color-border-disabled: var(--slds-c-button-color-border-disabled, transparent);
-    --slds-c-button-neutral-color-background-disabled: var(
-      --slds-c-button-color-background-disabled,
-      transparent
-    );
-    --slds-c-button-neutral-text-color-disabled: var(--slds-c-button-text-color-disabled);
+    --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;
   }
 
-  /**
-   * Stretch
-   */
   :host([data-render-mode="shadow"][stretch]) [part~='button'] {
-    --sds-c-button-width: 100%;
+    --sds-c-button-sizing-width: 100%;
 
     justify-content: center;
   }
 
   /**
-   * Start/End Parts
+   * Center button on all variants except 'base', and 'text'
+   *
+   * This addresses the issue of customers relying on preexisting x-axis centering
+   * when they arbitrarily change the width of the button without the stretch variant.
+   *
+   * Ref
+   * - 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"]) [part~='start'] {
     display: inline-flex;
     padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
@@ -796,18 +536,34 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 /**
- * Center button on all variants except 'base', and 'text'
- *
- * This addresses the issue of customers relying on preexisting x-axis centering
- * when they arbitrarily change the width of the button without the stretch variant.
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
- * Ref
- * - https://github.com/salesforce-ux/design-system-internal/pull/4344
- * - https://github.com/salesforce-ux/design-system-internal/pull/4949
+ * 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"][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"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+:host([data-render-mode="shadow"]) .slds-button_reset {
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  text-align: inherit;
 }
 
 /**
@@ -821,39 +577,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"][size~='xxx-small']) {
-    --slds-c-icon-sizing: 0.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='xx-small']) {
-    --slds-c-icon-sizing: 0.875rem;
+    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
   :host([data-render-mode="shadow"][size~='x-small']) {
-    --slds-c-icon-sizing: 1rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
   :host([data-render-mode="shadow"][size~='small']) {
-    --slds-c-icon-sizing: 1.5rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
   :host([data-render-mode="shadow"][size~='large']) {
-    --slds-c-icon-sizing: 3rem;
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
   :host([data-render-mode="shadow"][variant~='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-4);
+    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
   :host([data-render-mode="shadow"][variant~='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
   :host([data-render-mode="shadow"][variant~='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
   :host([data-render-mode="shadow"][variant~='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-contrast-1);
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
   :host([data-render-mode="shadow"]) [part~='boundary'] {
@@ -887,15 +643,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"]) [part~='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-1));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, 2rem));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, 2rem));
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
   }
 
   :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: 0.5rem;
-    --slds-c-icon-spacing-inline: 0.5rem;
-    --slds-c-icon-radius-border: 50%;
+    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
   }
 }
 
@@ -924,12 +680,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /*! @css-var-fallback fill */
   --slds-c-icon-color-foreground: var(
     --slds-c-icon-color-foreground-default,
-    var(--sds-c-icon-color-foreground-default, #706e6b)
+    var(--sds-c-icon-color-foreground-default, var(
+      --sds-g-color-neutral-base-50, #747474))
   );
 }
 
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: #dddbda;
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
 }
 
 /**
@@ -968,6 +725,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   background-color: currentColor;
 }
 
+:host([data-render-mode="shadow"]) .slds-input__icon {
+  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  
+  position: absolute;
+  top: 50%;
+  margin-block-start: -0.4375rem;
+  line-height: var(--sds-g-font-lineheight-1, 1);
+  border: 0;
+  z-index: 2;
+}
+
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */