lightning-base-components 1.16.3-alpha → 1.16.5-alpha

package/src/lightning/buttonGroup/button-group.slds.css

@@ -2,68 +2,44 @@
 /* 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"]) [part~='button-group'] {
-  display: inline-flex;
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='button-group'] {
+    display: inline-flex;
 
-  /**
-   * Kill border radius, rebuild it below depending on position.
-   *
-   * @TODO: These hooks can be refactored to shared button hooks instead of
-   *        needing to define hooks for each button type. But for now, we
-   *        target each type to make button-group support them all. Applies
-   *        to all the hooks below. I.e, --sds-s-button-radius-border
-   *
-   * Right now, button-group supports:
-   *  - button
-   *  - button-icon
-   *
-   * It will also need to support (in-progress or not started):
-   *  - button-stateful
-   *  - button-icon-stateful
-   *  - radio-button-group
-   *  - checkbox-button
-   *
-   * This can all be avoided by adding shared button hooks (see above rationale).
-   */
-  --slds-c-button-neutral-radius-border: 0;
-  --sds-c-button-radius-border: 0;
-}
-
-/* Nudge buttons over to remove double border effect */
+    /**
+     * Kill border radius, rebuild it below depending on position.
+     */
+    --slds-s-button-radius-border: 0;
+  }
 
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:not(:first-child)) {
-  margin-inline-start: calc(-1 * var(--sds-g-sizing-border-1, 1px));
-}
+  /* Nudge buttons over to remove double border effect */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:not(:first-child)) {
+    margin-inline-start: calc(-1 * var(--sds-g-sizing-border-1, 1px));
+  }
 
-/**
- * First child in group
- *
- * @TODO: update button radius to logical props & shared hooks
- */
-
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:first-child) {
-  --slds-c-button-neutral-radius-border: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
-  --sds-c-button-radius-border: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
-}
-
-/**
- * Last child in group
- *
- * @TODO: update button radius to logical props & shared hooks
- */
-
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:last-child) {
-  --slds-c-button-neutral-radius-border: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
-  --sds-c-button-radius-border: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
-}
+  /**
+   * First child in group
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:first-child) {
+    --slds-s-button-radius-border-startstart: var(--sds-g-radius-border-2, 0.25rem);
+    --slds-s-button-radius-border-endstart: var(--sds-g-radius-border-2, 0.25rem);
+  }
 
-/**
- * Focused child in group
- *
- * Adds stacking context so the focus shadow is visible
- */
+  /**
+   * Last child in group
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:last-child) {
+    --slds-s-button-radius-border-startend: var(--sds-g-radius-border-2, 0.25rem);
+    --slds-s-button-radius-border-endend: var(--sds-g-radius-border-2, 0.25rem);
+  }
 
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:focus) {
-  position: relative;
-  z-index: 1;
+  /**
+   * Focused child in group
+   *
+   * Adds stacking context so the focus shadow is visible
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:focus) {
+    position: relative;
+    z-index: 1;
+  }
 }

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

@@ -1,3 +1,148 @@
+/* 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;
+}
+
+: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))
+  );
+  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-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))
+      )
+    )
+  );
+  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))
+      )
+    )
+  );
+  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))
+      )
+    )
+  );
+  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))
+      )
+    )
+  );
+  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);
+  white-space: normal;
+  user-select: none;
+  align-items: center;
+  text-decoration: var(--sds-c-button-font-decoration, none);
+  appearance: none;
+}
+
+: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-color-background: var(
+    --sds-c-button-color-background-hover,
+    var(--sds-s-button-color-background-hover)
+  );
+  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
+
+  cursor: pointer;
+}
+
+: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)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-focus,
+    var(--sds-s-button-color-border-focus, #0176d3)
+  );
+  --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));
+
+  outline: 0;
+}
+
+: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-color-background: var(
+    --sds-c-button-color-background-active,
+    var(--sds-s-button-color-background-active)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-active,
+    var(--sds-s-button-color-border-active, #0176d3)
+  );
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
+  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
+  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
+
+  pointer-events: none;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled * {
+  pointer-events: none;
+}
+
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
@@ -629,17 +774,15 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) {
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
     display: inline-flex;
   }
 
   /**
-   * part - button-icon
-   *
-   * Default styling is "border" variant
-   */
-
-  /* :host::part('button-icon'), */
+      * 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;
@@ -649,43 +792,60 @@
       var(--sds-g-color-neutral-base-50, #747474)
     );
 
-    /* sds-button mapping - note: should be slds-button, requires refactoring */
-    --sds-c-button-color-background: var(--slds-c-buttonicon-color-background);
-    --sds-c-button-color-background-hover: var(--slds-c-buttonicon-color-background-hover);
-    --sds-c-button-color-background-focus: var(--slds-c-buttonicon-color-background-focus);
-    --sds-c-button-color-background-active: var(--slds-c-buttonicon-color-background-active);
-    --sds-c-button-spacing-inline: var(
+    /* 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,
+      var(--slds-c-button-neutral-color-background-focus)
+    );
+
+    /* 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))
     );
-    --sds-c-button-spacing-block: var(
+    --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))
     );
 
-    /* @TODO: Investigate hooks that open up interaction states and the specificity issues it creates. */
-    --sds-c-button-color-border: var(--slds-c-buttonicon-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    --sds-c-button-color-border-hover: var(
+    /* 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)
     );
-    --sds-c-button-color-border-focus: var(
+    --slds-c-button-neutral-color-border-focus: var(
       --slds-c-buttonicon-color-border-focus,
       var(--sds-g-color-neutral-base-80, #c9c9c9)
     );
-    --sds-c-button-color-border-active: var(
+    --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
+      var(--slds-c-button-neutral-color-border-focus)
     );
 
-    /* Disabled:
-    To Do: This should work once button's host selector is fixed, add this to doc */
+    /* 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);
   }
 
-  /* :host(:hover)::part(button-icon), */
+  /* 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,
@@ -713,32 +873,38 @@
   }
 
   /**
-   * 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']) {
+      * 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
+    );
   }
 
   /**
-   * Variant - Container
-   */
-  :host([data-render-mode="shadow"][variant='container']) {
+      * 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,
@@ -748,48 +914,27 @@
       --slds-c-buttonicon-container-color-border-focus,
       transparent
     );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-container-color-border-active,
+    --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']) {
-    --slds-c-buttonicon-color-background: var(
-      --slds-c-buttonicon-brand-color-background,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-buttonicon-color-background-hover: var(
-      --slds-c-buttonicon-brand-color-background-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-background-focus: var(
-      --slds-c-buttonicon-brand-color-background-focus,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-background-active: var(
-      --slds-c-buttonicon-brand-color-background-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
-    --slds-c-buttonicon-color-border: var(
-      --slds-c-buttonicon-brand-color-border,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-buttonicon-color-border-hover: var(
-      --slds-c-buttonicon-brand-color-border-hover,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-border-focus: var(
-      --slds-c-buttonicon-brand-color-border-focus,
-      var(--sds-g-color-brand-base-40, #0b5cab)
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-brand-color-border-active,
-      var(--sds-g-color-brand-base-10, #001639)
-    );
+      * 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,
@@ -810,9 +955,13 @@
   }
 
   /**
-   * Variant - Bare Inverse
-   */
-  :host([data-render-mode="shadow"][variant='bare-inverse']) {
+      * 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,
@@ -820,36 +969,47 @@
     );
     --slds-c-buttonicon-color-border-focus: var(
       --slds-c-buttonicon-bareinverse-color-border-focus,
-      transparent
-    );
-    --slds-c-buttonicon-color-border-active: var(
-      --slds-c-buttonicon-bareinverse-color-border-active,
-      transparent
+      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-100, #ffffff)
+      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-100, #ffffff)
+      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-100, #ffffff)
+      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']) {
+      * 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)
@@ -867,28 +1027,32 @@
       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-100, #ffffff)
+      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-100, #ffffff)
+      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-100, #ffffff)
+      var(--sds-g-color-brand-base-90, #d8e6fe)
     );
   }
 
   /**
-   * Variant - Border Filled
-   */
-  :host([data-render-mode="shadow"][variant='border-filled']) {
+      * 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)
@@ -912,58 +1076,59 @@
   }
 
   /**
-   * Sizes
-   *
-   * Sizes are restricted to specific variants.
-   */
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+      * 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']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+  :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']) {
-    --slds-c-buttonicon-spacing-block: 0.25rem;
-    --slds-c-buttonicon-spacing-inline: 0.25rem;
+  :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']) {
+  :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']) {
+  :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']) {
+  :host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'] {
     --slds-c-buttonicon-sizing: 1.5rem;
   }
 
-  /* :host::part(end), */
+  /**
+      * End part
+      */
   :host([data-render-mode="shadow"]) [part~='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-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 {
+      * 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"]) [part~='button-icon'] .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;