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

package/src/lightning/colorPickerPanel/color-picker-panel.slds.css

@@ -1,774 +1,3 @@
-/* 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 */
-
-@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.
-     *
-     */
-
-  :host([data-render-mode="shadow"]) [part~='button'] {
-    /* slds-icon mapping */
-    --slds-c-icon-sizing-border: 0;
-    --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
-
-    --sds-c-button-line-height: var(
-      --slds-c-button-neutral-font-lineheight,
-      var(--slds-s-button-font-lineheight, 1.875rem)
-    );
-
-    /* Border radius - shared */
-    --sds-c-button-radius-border-startstart: var(
-      --slds-c-button-neutral-radius-border-startstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endstart: var(
-      --slds-c-button-radius-border-endstart,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-startend: var(
-      --slds-c-button-radius-border-startend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
-      )
-    );
-    --sds-c-button-radius-border-endend: var(
-      --slds-c-button-radius-border-endend,
-      var(
-        --slds-c-button-neutral-radius-border,
-        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
-      )
-    );
-
-    --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,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-button-color-background-hover: var(
-      --slds-c-button-neutral-color-background-hover,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --sds-c-button-color-background-focus: var(
-      --slds-c-button-neutral-color-background-focus,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --sds-c-button-color-background-active: var(
-      --slds-c-button-neutral-color-background-active,
-      var(--sds-g-color-neutral-base-90, #e5e5e5)
-    );
-
-    /* Border color */
-    --sds-c-button-color-border: var(
-      --slds-c-button-neutral-color-border,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-hover: var(
-      --slds-c-button-neutral-color-border-hover,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-color-border-focus: var(
-      --slds-c-button-neutral-color-border-focus,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --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-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)
-    );
-    --sds-c-button-text-color-active: var(
-      --slds-c-button-neutral-text-color-active,
-      var(--sds-g-color-brand-base-30, #014486)
-    );
-
-    /* Shadow */
-    --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
-    --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-    /* Disabled */
-    --sds-c-button-color-background-disabled: var(
-      --slds-c-button-neutral-color-background-disabled,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
-    --sds-c-button-color-border-disabled: var(
-      --slds-c-button-neutral-color-border-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-    --sds-c-button-text-color-disabled: var(
-      --slds-c-button-neutral-text-color-disabled,
-      var(--sds-g-color-neutral-base-80, #c9c9c9)
-    );
-  }
-
-  /**
-   * Variant - Brand
-   */
-  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
-    --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)
-    );
-    --slds-c-button-neutral-color-border-focus: var(
-      --slds-c-button-brand-color-border-focus,
-      var(--slds-c-button-neutral-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)
-    );
-    --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,
-      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-neutral-color-background-active: var(
-      --slds-c-button-inverse-color-background-active,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --slds-c-button-neutral-color-border: var(
-      --slds-c-button-inverse-color-border,
-      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,
-      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-neutral-text-color-disabled: var(--slds-c-button-inverse-text-color-disabled);
-  }
-
-  /**
-   * 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)
-    );
-
-    --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)
-    );
-
-    /* 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)
-    );
-  }
-
-  /**
-   * 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)
-    );
-  }
-
-  /**
-   * 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);
-  }
-
-  /**
-     * '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);
-  }
-
-  /**
-   * Stretch
-   */
-  :host([data-render-mode="shadow"][stretch]) [part~='button'] {
-    --sds-c-button-width: 100%;
-
-    justify-content: center;
-  }
-
-  /**
-   * Start/End Parts
-   */
-  :host([data-render-mode="shadow"]) [part~='start'] {
-    display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-  }
-
-  :host([data-render-mode="shadow"]) [part~='end'] {
-    display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
-  }
-}
-
-/**
- * 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;
-}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
@@ -789,11 +18,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 @supports (--styling-hooks: '') {
   /* ToDo: swap out for Utility classes */
   :host([data-render-mode="shadow"]) .slds-m-left_x-small {
-    margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    margin-inline-start: var(--slds-g-spacing-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-color-picker__selector {
-    margin-block-start: var(--sds-g-spacing-2, 0.5rem);
+    margin-block-start: var(--slds-g-spacing-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-color-picker__selector.slds-popover {