lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -6,242 +6,46 @@
 
   :host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
     display: inline-flex;
-    color: var(--slds-c-buttoniconstateful-color-foreground);
-
-    /* Default */
-    --slds-c-buttonicon-sizing: var(--slds-c-buttoniconstateful-sizing);
-
-    --slds-c-buttonicon-color-foreground: var(--slds-c-buttoniconstateful-color-foreground);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-buttoniconstateful-color-foreground-hover);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-buttoniconstateful-color-foreground-focus);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-c-buttoniconstateful-color-foreground-active);
-
-    --slds-c-buttonicon-color-background: var(--slds-c-buttoniconstateful-color-background);
-    --slds-c-buttonicon-color-background-hover: var(--slds-c-buttoniconstateful-color-background-hover);
-    --slds-c-buttonicon-color-background-focus: var(--slds-c-buttoniconstateful-color-background-focus);
-    --slds-c-buttonicon-color-background-active: var(--slds-c-buttoniconstateful-color-background-active);
-
-    --slds-c-buttonicon-color-border: var(--slds-c-buttoniconstateful-color-border);
-    --slds-c-buttonicon-color-border-hover: var(--slds-c-buttoniconstateful-color-border-hover);
-    --slds-c-buttonicon-color-border-focus: var(--slds-c-buttoniconstateful-color-border-focus);
-    --slds-c-buttonicon-color-border-active: var(--slds-c-buttoniconstateful-color-border-active);
-
-    /* Disabled
-      To Do: bkg and border should work once button's host selector is fixed */
-    --slds-c-buttonicon-color-background-disabled: var(--slds-c-buttoniconstateful-color-background-disabled);
-    --slds-c-buttonicon-color-border-disabled: var(--slds-c-buttoniconstateful-color-border-disabled);
-    --slds-c-buttonicon-color-foreground-disabled: var(
-      --slds-c-buttoniconstateful-color-foreground-disabled,
-      var(--slds-g-color-neutral-base-80)
-    );
-
-    --slds-c-buttonicon-spacing-inline: var(--slds-c-buttoniconstateful-spacing-inline);
-    --slds-c-buttonicon-spacing-block: var(--slds-c-buttoniconstateful-spacing-block);
-  }
-
-  /* :host([variant='border-filled'])::part(button-icon-stateful), */
-
-  :host([data-render-mode="shadow"][variant='border-filled']) [part='button-icon-stateful'] {
-    --slds-c-buttonicon-borderfilled-color-background: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background
-    );
-    --slds-c-buttonicon-borderfilled-color-background-hover: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-hover
-    );
-    --slds-c-buttonicon-borderfilled-color-background-focus: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-focus
-    );
-    --slds-c-buttonicon-borderfilled-color-background-active: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-active
-    );
-
-    --slds-c-buttonicon-borderfilled-color-border: var(--slds-c-buttoniconstateful-borderfilled-color-border);
-    --slds-c-buttonicon-borderfilled-color-border-hover: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-hover
-    );
-    --slds-c-buttonicon-borderfilled-color-border-focus: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-focus
-    );
-    --slds-c-buttonicon-borderfilled-color-border-active: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-active
-    );
   }
 
-  /* :host([variant='border-inverse'])::part(button-icon-stateful), */
-
-  :host([data-render-mode="shadow"][variant='border-inverse']) [part='button-icon-stateful'] {
-    --slds-c-buttonicon-borderinverse-color-border: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border
-    );
-    --slds-c-buttonicon-borderinverse-color-border-hover: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-hover
-    );
-    --slds-c-buttonicon-borderinverse-color-border-focus: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-focus
-    );
-    --slds-c-buttonicon-borderinverse-color-border-active: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-active
-    );
+  /* Override default button-icon styles */
 
-    --slds-c-buttonicon-borderinverse-color-foreground: var(
-      --slds-c-buttoniconstateful-borderinverse-color-foreground
-    );
-    --slds-c-buttonicon-borderinverse-color-foreground-hover: var(
-      --slds-c-buttoniconstateful-borderinverse-color-foreground-hover
-    );
-    --slds-c-buttonicon-borderinverse-color-foreground-focus: var(
-      --slds-c-buttoniconstateful-borderinverse-color-foreground-focus
-    );
-    --slds-c-buttonicon-borderinverse-color-foreground-active: var(
-      --slds-c-buttoniconstateful-borderinverse-color-foreground-active
-    );
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
+    --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+    --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+    --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+    --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
   }
 
   /* Selected + Variants */
 
-  :host([data-render-mode="shadow"][selected]) [part='button-icon-stateful'] {
-    --slds-c-buttoniconstateful-color-foreground: var(
-      --slds-c-buttoniconstateful-color-foreground-selected,
-      var(--slds-g-color-on-accent-1)
-    );
-    --slds-c-buttoniconstateful-color-foreground-hover: var(
-      --slds-c-buttoniconstateful-color-foreground-selected-hover,
-      var(--slds-g-color-on-accent-1)
-    );
-    --slds-c-buttoniconstateful-color-foreground-focus: var(
-      --slds-c-buttoniconstateful-color-foreground-selected-focus,
-      var(--slds-c-buttoniconstateful-color-foreground-hover)
-    );
-    --slds-c-buttoniconstateful-color-foreground-active: var(
-      --slds-c-buttoniconstateful-color-foreground-selected-active,
-      var(--slds-g-color-on-accent-1)
-    );
-
-    --slds-c-buttoniconstateful-color-background: var(
-      --slds-c-buttoniconstateful-color-background-selected,
-      var(--slds-g-color-accent-container-2)
-    );
-    --slds-c-buttoniconstateful-color-background-hover: var(
-      --slds-c-buttoniconstateful-color-background-selected-hover,
-      var(--slds-g-color-accent-container-3)
-    );
-    --slds-c-buttoniconstateful-color-background-focus: var(
-      --slds-c-buttoniconstateful-color-background-selected-focus,
-      var(--slds-c-buttoniconstateful-color-background-hover)
-    );
-    --slds-c-buttoniconstateful-color-background-active: var(
-      --slds-c-buttoniconstateful-color-background-selected-active,
-      var(--slds-g-color-accent-container-3)
-    );
-
-    --slds-c-buttoniconstateful-color-border: var(
-      --slds-c-buttoniconstateful-color-border-selected,
-      var(--slds-g-color-border-accent-2)
-    );
-    --slds-c-buttoniconstateful-color-border-hover: var(
-      --slds-c-buttoniconstateful-color-border-selected-hover,
-      var(--slds-g-color-border-accent-3)
-    );
-    --slds-c-buttoniconstateful-color-border-focus: var(
-      --slds-c-buttoniconstateful-color-border-selected-focus,
-      var(--slds-c-buttoniconstateful-color-border-hover)
-    );
-    --slds-c-buttoniconstateful-color-border-active: var(
-      --slds-c-buttoniconstateful-color-border-selected-active,
-      var(--slds-g-color-border-accent-3)
-    );
+  :host([data-render-mode="shadow"][selected]) [part~='button-icon'] {
+    --slds-c-buttonicon-color-foreground: var(--slds-g-color-on-accent-1);
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-on-accent-1);
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-on-accent-1);
+    --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-on-accent-1);
+
+    --slds-c-button-neutral-color-background: var(--slds-g-color-accent-container-1);
+    --slds-c-button-neutral-color-background-hover: 
+      var(--slds-g-color-accent-container-3);
+    --slds-c-button-neutral-color-background-focus: var(--slds-g-color-accent-container-3);
+    --slds-c-button-neutral-color-background-active:
+      var(--slds-g-color-accent-container-3);
+
+    --slds-c-button-neutral-color-border: 
+      var(--slds-g-color-border-accent-1);
+    --slds-c-button-neutral-color-border-hover: 
+      var(--slds-g-color-border-accent-3);
+    --slds-c-button-neutral-color-border-focus:
+      var(--slds-g-color-border-accent-3);
+    --slds-c-button-neutral-color-border-active:
+      var(--slds-g-color-border-accent-3);
   }
 
-  :host([data-render-mode="shadow"][selected][variant='border-filled']) [part='button-icon-stateful'] {
-    --slds-c-buttoniconstateful-borderfilled-color-background: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-selected,
-      var(--slds-g-color-accent-container-2)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-background-hover: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-selected-hover,
-      var(--slds-g-color-accent-container-3)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-background-focus: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-selected-focus,
-      var(--slds-c-buttoniconstateful-borderfilled-color-background-hover)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-background-active: var(
-      --slds-c-buttoniconstateful-borderfilled-color-background-selected-active,
-      var(--slds-g-color-accent-container-3)
-    );
-
-    --slds-c-buttoniconstateful-borderfilled-color-border: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-selected,
-      var(--slds-g-color-border-accent-3)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-border-hover: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-selected-hover,
-      var(--slds-g-color-border-accent-3)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-border-focus: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-selected-focus,
-      var(--slds-c-buttoniconstateful-borderfilled-color-border-hover)
-    );
-    --slds-c-buttoniconstateful-borderfilled-color-border-active: var(
-      --slds-c-buttoniconstateful-borderfilled-color-border-selected-active,
-      var(--slds-g-color-border-accent-3)
-    );
+  /* Selected + Disabled + Variants */
 
-    /*
-        Note:
-        Border-filled variant does not inherit foreground colors from button-icon (as it doesn't exist).
-        It needs to inherit from default selected hooks.
-      */
-    --slds-c-buttoniconstateful-color-foreground-selected: var(
-      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected
-    );
-    --slds-c-buttoniconstateful-color-foreground-selected-hover: var(
-      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-hover
-    );
-    --slds-c-buttoniconstateful-color-foreground-selected-focus: var(
-      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-focus,
-      var(--slds-c-buttoniconstateful-color-foreground-selected-hover)
-    );
-    --slds-c-buttoniconstateful-color-foreground-selected-active: var(
-      --slds-c-buttoniconstateful-borderfilled-color-foreground-selected-active
-    );
-  }
-
-  :host([data-render-mode="shadow"][selected][variant='border-inverse']) [part='button-icon-stateful'] {
-    --slds-c-buttoniconstateful-borderinverse-color-border: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-selected,
-      var(--slds-g-color-brand-base-50)
-    );
-    --slds-c-buttoniconstateful-borderinverse-color-border-hover: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-selected-hover,
-      var(--slds-g-color-brand-base-40)
-    );
-    --slds-c-buttoniconstateful-borderinverse-color-border-focus: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-selected-focus,
-      var(--slds-c-buttoniconstateful-borderinverse-color-border-hover)
-    );
-    --slds-c-buttoniconstateful-borderinverse-color-border-active: var(
-      --slds-c-buttoniconstateful-borderinverse-color-border-selected-active,
-      var(--slds-g-color-brand-base-40)
-    );
-
-    /*
-        Note:
-        Border-inverse variant does not inherit background colors from button-icon (as it doesn't exist).
-        It needs to inherit from default selected hooks.
-      */
-    --slds-c-buttoniconstateful-color-background-selected: var(
-      --slds-c-buttoniconstateful-borderinverse-color-background-selected
-    );
-    --slds-c-buttoniconstateful-color-background-selected-hover: var(
-      --slds-c-buttoniconstateful-borderinverse-color-background-selected-hover
-    );
-    --slds-c-buttoniconstateful-color-background-selected-focus: var(
-      --slds-c-buttoniconstateful-borderinverse-color-background-selected-focus,
-      var(--slds-c-buttoniconstateful-color-background-selected-hover)
-    );
-    --slds-c-buttoniconstateful-color-background-selected-active: var(
-      --slds-c-buttoniconstateful-borderinverse-color-background-selected-active,
-      var(--slds-c-buttoniconstateful-color-background-selected-focus)
-    );
-  }
+  :host([data-render-mode="shadow"][selected][disabled]) [part~='button-icon'] {
+    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
+    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+    --slds-c-icon-color-foreground: var(--slds-g-color-on-disabled-2);
+  }

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

@@ -197,7 +197,7 @@ 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, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -258,27 +258,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --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-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* 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: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -293,11 +293,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* 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);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -413,9 +414,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --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-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light
@@ -531,37 +532,42 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --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);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
 
   /* 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 {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-hover,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
+
+  /* Shadow
+  * Added to override active shadow * inherited from button */
+  --sds-c-button-shadow-active: none;
 }
 /* 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);
+  --sds-c-button-color-background-disabled: transparent;
 }
 /**
   * Variant - Bare
@@ -662,6 +668,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   */
 :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
   --slds-c-button-neutral-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-surface-container-1);
+}
+:host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon']:disabled {
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * Sizes
@@ -697,6 +709,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-buttonicon-spacing-inline: 0;
   --slds-c-icon-sizing: var(--slds-g-sizing-4);
 }
+:host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'],:host([data-render-mode="shadow"][size='large'][variant='bare-inverse']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}
 /**
   * End part
   */

package/src/lightning/buttonIconStateful/button.slds.css

@@ -194,7 +194,7 @@ 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, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -255,27 +255,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --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-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* 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: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -290,11 +290,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* 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);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -410,9 +411,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --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-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light

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

@@ -197,7 +197,7 @@ 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, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -258,27 +258,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --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-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* 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: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -293,11 +293,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* 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);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -413,9 +414,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --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-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light
@@ -531,37 +532,42 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --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);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
 
   /* 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 {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-hover,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
+
+  /* Shadow
+  * Added to override active shadow * inherited from button */
+  --sds-c-button-shadow-active: none;
 }
 /* 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);
+  --sds-c-button-color-background-disabled: transparent;
 }
 /**
   * Variant - Bare
@@ -662,6 +668,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   */
 :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
   --slds-c-button-neutral-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-surface-container-1);
+}
+:host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon']:disabled {
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * Sizes
@@ -697,6 +709,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-buttonicon-spacing-inline: 0;
   --slds-c-icon-sizing: var(--slds-g-sizing-4);
 }
+:host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'],:host([data-render-mode="shadow"][size='large'][variant='bare-inverse']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}
 /**
   * End part
   */