From d595cade2173e4e4f51f2c3ec3abb2c8af3e2a3a Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Mon, 13 Dec 2021 14:21:53 -0800 Subject: [PATCH] fix: unbreak the build --- components/button/index.css | 245 ++++++++++++------------------ components/clearbutton/index.css | 36 ++--- components/commons/basebutton.css | 2 +- components/logicbutton/index.css | 4 +- components/splitbutton/index.css | 46 +++--- 5 files changed, 138 insertions(+), 195 deletions(-) diff --git a/components/button/index.css b/components/button/index.css index 675c95e9f45..75c79e65b7c 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -24,7 +24,7 @@ governing permissions and limitations under the License. replace: --spectrum-button$1-; } /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-textonly-text-padding-top: calc(var(--spectrum-button-s-primary-textonly-text-padding-top) -1px); + --spectrum-button-primary-fill-textonly-text-padding-top: calc(var(--spectrum-button-s-primary-fill-textonly-text-padding-top) -1px); } .spectrum-Button--sizeM { @@ -34,7 +34,7 @@ governing permissions and limitations under the License. replace: --spectrum-button$1-; } /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-m-primary-textonly-text-padding-bottom) -1px); + --spectrum-button-primary-fill-textonly-text-padding-bottom: calc(var(--spectrum-button-m-primary-fill-textonly-text-padding-bottom) -1px); } .spectrum-Button--sizeL { @@ -52,37 +52,37 @@ governing permissions and limitations under the License. replace: --spectrum-button$1-; } /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-xl-primary-textonly-text-padding-bottom) -1px); + --spectrum-button-primary-fill-textonly-text-padding-bottom: calc(var(--spectrum-button-xl-primary-fill-textonly-text-padding-bottom) -1px); } .spectrum-Button { /* Adjustments for inset/outset padding in DNA */ - --spectrum-button-primary-padding-left-adjusted: calc(var(--spectrum-button-primary-texticon-padding-left) - var(--spectrum-button-primary-texticon-border-size)); - --spectrum-button-primary-padding-right-adjusted: calc(var(--spectrum-button-primary-texticon-padding-right) - var(--spectrum-button-primary-texticon-border-size)); - --spectrum-button-primary-textonly-padding-left-adjusted: calc(var(--spectrum-button-primary-textonly-padding-left) - var(--spectrum-button-primary-texticon-border-size)); - --spectrum-button-primary-textonly-padding-right-adjusted: calc(var(--spectrum-button-primary-textonly-padding-right) - var(--spectrum-button-primary-texticon-border-size)); + --spectrum-button-primary-fill-padding-left-adjusted: calc(var(--spectrum-button-primary-fill-texticon-padding-left) - var(--spectrum-button-primary-fill-texticon-border-size)); + --spectrum-button-primary-fill-padding-right-adjusted: calc(var(--spectrum-button-primary-fill-texticon-padding-right) - var(--spectrum-button-primary-fill-texticon-border-size)); + --spectrum-button-primary-fill-textonly-padding-left-adjusted: calc(var(--spectrum-button-primary-fill-textonly-padding-left) - var(--spectrum-button-primary-fill-texticon-border-size)); + --spectrum-button-primary-fill-textonly-padding-right-adjusted: calc(var(--spectrum-button-primary-fill-textonly-padding-right) - var(--spectrum-button-primary-fill-texticon-border-size)); } .spectrum-Button { @inherit: %spectrum-BaseButton; @inherit: %spectrum-ButtonWithFocusRing; - border-width: var(--spectrum-button-primary-texticon-border-size); + border-width: var(--spectrum-button-primary-fill-texticon-border-size); border-style: solid; - border-radius: var(--spectrum-button-primary-texticon-border-radius); + border-radius: var(--spectrum-button-primary-fill-texticon-border-radius); - min-block-size: var(--spectrum-button-primary-textonly-height); + min-block-size: var(--spectrum-button-primary-fill-textonly-height); block-size: auto; - min-inline-size: var(--spectrum-button-primary-textonly-min-width); + min-inline-size: var(--spectrum-button-primary-fill-textonly-min-width); padding-block-start: 0; padding-block-end: 0; /* Start with text-only padding */ - padding-inline: var(--spectrum-button-primary-textonly-padding-left-adjusted) var(--spectrum-button-primary-textonly-padding-right-adjusted); + padding-inline: var(--spectrum-button-primary-fill-textonly-padding-left-adjusted) var(--spectrum-button-primary-fill-textonly-padding-right-adjusted); - font-size: var(--spectrum-button-primary-texticon-text-size); - font-weight: var(--spectrum-button-primary-texticon-text-font-weight); + font-size: var(--spectrum-button-primary-fill-texticon-text-size); + font-weight: var(--spectrum-button-primary-fill-texticon-text-font-weight); &:hover, &:active { @@ -96,21 +96,21 @@ governing permissions and limitations under the License. @inherit: %spectrum-ButtonIcon; /* Scoot over, assuming we have both icon and text */ - margin-inline-start: calc(-1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - var(--spectrum-button-primary-padding-left-adjusted))); + margin-inline-start: calc(-1 * (var(--spectrum-button-primary-fill-textonly-padding-left-adjusted) - var(--spectrum-button-primary-fill-padding-left-adjusted))); } .spectrum-Icon + .spectrum-Button-label { /* Have gap on on the left */ - padding-inline-start: var(--spectrum-button-primary-texticon-icon-gap); + padding-inline-start: var(--spectrum-button-primary-fill-texticon-icon-gap); /* Have no padding on the right (it's built into the element) - This will fail if --spectrum-button-primary-textonly-padding-right !== --spectrum-button-padding-right + This will fail if --spectrum-button-primary-fill-textonly-padding-right !== --spectrum-button-padding-right */ padding-inline-end: 0; } - --spectrum-button-focus-ring-color: var(--spectrum-button-m-primary-texticon-focus-ring-color-key-focus); + --spectrum-button-focus-ring-color: var(--spectrum-button-m-primary-fill-texticon-focus-ring-color-key-focus); } a.spectrum-Button { @@ -120,16 +120,16 @@ a.spectrum-Button { .spectrum-Button-label { @inherit: %spectrum-ButtonLabel; - line-height: var(--spectrum-button-primary-texticon-text-line-height); - padding-block-start: calc(var(--spectrum-button-primary-textonly-text-padding-top) - var(--spectrum-button-primary-textonly-border-size)); - padding-block-end: calc(var(--spectrum-button-primary-textonly-text-padding-bottom) - var(--spectrum-button-primary-textonly-border-size)); + line-height: var(--spectrum-button-primary-fill-texticon-text-line-height); + padding-block-start: calc(var(--spectrum-button-primary-fill-textonly-text-padding-top) - var(--spectrum-button-primary-fill-textonly-border-size)); + padding-block-end: calc(var(--spectrum-button-primary-fill-textonly-text-padding-bottom) - var(--spectrum-button-primary-fill-textonly-border-size)); } .spectrum-Button { &:focus-ring, &.is-focused { &:after { - box-shadow: 0 0 0 var(--spectrum-button-primary-texticon-focus-ring-size) var(--spectrum-button-focus-ring-color); + box-shadow: 0 0 0 var(--spectrum-button-primary-fill-texticon-focus-ring-size) var(--spectrum-button-focus-ring-color); } } } @@ -145,141 +145,84 @@ a.spectrum-Button { /* todo all of this will have to change */ @media (forced-colors: active) { .spectrum-Button { - --spectrum-button-m-cta-texticon-background-color: ButtonText; - --spectrum-button-m-cta-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-cta-texticon-background-color-down: Highlight; - --spectrum-button-m-cta-texticon-background-color-hover: Highlight; - --spectrum-button-m-cta-texticon-background-color-key-focus: Highlight; - --spectrum-button-m-cta-texticon-border-color: ButtonFace; - --spectrum-button-m-cta-texticon-border-color-disabled: GrayText; - --spectrum-button-m-cta-texticon-border-color-down: Highlight; - --spectrum-button-m-cta-texticon-border-color-hover: Highlight; - --spectrum-button-m-cta-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-cta-texticon-text-color: ButtonFace; - --spectrum-button-m-cta-texticon-text-color-disabled: GrayText; - --spectrum-button-m-cta-texticon-text-color-down: Buttonface; - --spectrum-button-m-cta-texticon-text-color-hover: Buttonface; - --spectrum-button-m-cta-texticon-text-color-key-focus: Buttonface; - --spectrum-button-m-negative-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-negative-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-negative-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-negative-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-negative-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-negative-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-negative-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-negative-texticon-background-color: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-down: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-negative-texticon-border-color: ButtonText; - --spectrum-button-m-negative-texticon-border-color-disabled: GrayText; - --spectrum-button-m-negative-texticon-border-color-down: Highlight; - --spectrum-button-m-negative-texticon-border-color-hover: Highlight; - --spectrum-button-m-negative-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-negative-texticon-text-color: ButtonText; - --spectrum-button-m-negative-texticon-text-color-disabled: GrayText; - --spectrum-button-m-negative-texticon-text-color-down: ButtonText; - --spectrum-button-m-negative-texticon-text-color-hover: ButtonText; - --spectrum-button-m-negative-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-border-color: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-overbackground-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-overbackground-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-overbackground-texticon-text-color: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-primary-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-primary-texticon-border-color: ButtonText; - --spectrum-button-m-primary-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-texticon-text-color: ButtonText; - --spectrum-button-m-primary-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-secondary-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-secondary-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-secondary-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-secondary-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-secondary-texticon-background-color: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-down: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-secondary-texticon-border-color: ButtonText; - --spectrum-button-m-secondary-texticon-border-color-disabled: GrayText; - --spectrum-button-m-secondary-texticon-border-color-down: Highlight; - --spectrum-button-m-secondary-texticon-border-color-hover: Highlight; - --spectrum-button-m-secondary-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-secondary-texticon-text-color: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-texticon-text-color-down: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-hover: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-key-focus: ButtonText; + --spectrum-button-m-accent-fill-texticon-background-color: ButtonText; + --spectrum-button-m-accent-fill-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-accent-fill-texticon-background-color-down: Highlight; + --spectrum-button-m-accent-fill-texticon-background-color-hover: Highlight; + --spectrum-button-m-accent-fill-texticon-background-color-key-focus: Highlight; + --spectrum-button-m-accent-fill-texticon-border-color: ButtonFace; + --spectrum-button-m-accent-fill-texticon-border-color-disabled: GrayText; + --spectrum-button-m-accent-fill-texticon-border-color-down: Highlight; + --spectrum-button-m-accent-fill-texticon-border-color-hover: Highlight; + --spectrum-button-m-accent-fill-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-accent-fill-texticon-text-color: ButtonFace; + --spectrum-button-m-accent-fill-texticon-text-color-disabled: GrayText; + --spectrum-button-m-accent-fill-texticon-text-color-down: Buttonface; + --spectrum-button-m-accent-fill-texticon-text-color-hover: Buttonface; + --spectrum-button-m-accent-fill-texticon-text-color-key-focus: Buttonface; + --spectrum-button-m-negative-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-negative-outline-texticon-border-color: ButtonText; + --spectrum-button-m-negative-outline-texticon-border-color-disabled: GrayText; + --spectrum-button-m-negative-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-negative-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-negative-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-negative-outline-texticon-text-color: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-disabled: GrayText; + --spectrum-button-m-negative-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-key-focus: ButtonText; + --spectrum-button-m-primary-outline-overbackground-texticon-background-color: ButtonFace; + --spectrum-button-m-primary-outline-overbackground-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-primary-outline-overbackground-texticon-background-color-down: ButtonFace; + --spectrum-button-m-primary-outline-overbackground-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-primary-outline-overbackground-texticon-border-color: ButtonText; + --spectrum-button-m-primary-outline-overbackground-texticon-border-color-disabled: GrayText; + --spectrum-button-m-primary-outline-overbackground-texticon-border-color-down: Highlight; + --spectrum-button-m-primary-outline-overbackground-texticon-border-color-hover: Highlight; + --spectrum-button-m-primary-outline-overbackground-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-primary-outline-overbackground-texticon-text-color: ButtonText; + --spectrum-button-m-primary-outline-overbackground-texticon-text-color-disabled: GrayText; + --spectrum-button-m-primary-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-primary-outline-texticon-border-color: ButtonText; + --spectrum-button-m-primary-outline-texticon-border-color-disabled: GrayText; + --spectrum-button-m-primary-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-primary-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-primary-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-primary-outline-texticon-text-color: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-disabled: GrayText; + --spectrum-button-m-primary-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-key-focus: ButtonText; + --spectrum-button-m-secondary-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-border-color: ButtonText; + --spectrum-button-m-secondary-outline-texticon-border-color-disabled: GrayText; + --spectrum-button-m-secondary-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-secondary-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-secondary-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-secondary-outline-texticon-text-color: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-disabled: GrayText; + --spectrum-button-m-secondary-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-key-focus: ButtonText; } .spectrum-Button { &:focus-ring, &.is-focused { &:after { - box-shadow: 0 0 0 var(--spectrum-button-primary-texticon-focus-ring-size) Highlight; + box-shadow: 0 0 0 var(--spectrum-button-primary-fill-texticon-focus-ring-size) Highlight; } } } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index e767e599945..b9dbd6a50bf 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -64,8 +64,8 @@ governing permissions and limitations under the License. .spectrum-ClearButton-fill { background-color: var(--spectrum-clearbutton-fill-background-color); - inline-size: var(--spectrum-clearbutton-fill-width); - block-size: var(--spectrum-clearbutton-fill-height); + inline-size: var(--spectrum-clearbutton-fill-size); + block-size: var(--spectrum-clearbutton-fill-size); border-radius: 100%; display: flex; @@ -135,38 +135,38 @@ governing permissions and limitations under the License. } .spectrum-ClearButton--overBackground { - background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color); - border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color); - color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color); + background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color); + border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color); + color: var(--spectrum-button-m-primary-outline-white-texticon-text-color); &:hover { - background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover); - border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover); - color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover); + background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-hover); + border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color-hover); + color: var(--spectrum-button-m-primary-outline-white-texticon-text-color-hover); } &:focus-ring { - background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover); - border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover); - color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover); + background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-hover); + border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color-hover); + color: var(--spectrum-button-m-primary-outline-white-texticon-text-color-hover); box-shadow: none; &:after { - box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size) var(--spectrum-button-m-primary-overbackground-texticon-border-color-key-focus); + box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size) var(--spectrum-button-m-primary-outline-white-texticon-border-color-key-focus); } } &:active { - background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down); - border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down); - color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down); + background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-down); + border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color-down); + color: var(--spectrum-button-m-primary-outline-white-texticon-text-color-down); } &:disabled, &.is-disabled { - background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled); - border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled); - color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled); + background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-disabled); + border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color-disabled); + color: var(--spectrum-button-m-primary-outline-white-texticon-text-color-disabled); } } diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index 82de4814b61..7dd061a9776 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -87,7 +87,7 @@ governing permissions and limitations under the License. %spectrum-ButtonWithFocusRing { &:after { border-radius: calc( - var(--spectrum-button-primary-texticon-border-radius) + + var(--spectrum-button-m-primary-fill-texticon-border-radius) + var(--spectrum-alias-focus-ring-gap) ); content: ""; diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 2b1c66c0e1c..9ec1e510fcc 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -41,7 +41,7 @@ governing permissions and limitations under the License. &:focus-ring, &.is-focused { &:after { - box-shadow: 0 0 0 var(--spectrum-button-m-primary-texticon-focus-ring-size) var(--spectrum-button-m-primary-texticon-focus-ring-color-key-focus); + box-shadow: 0 0 0 var(--spectrum-button-m-primary-outline-texticon-focus-ring-size) var(--spectrum-button-m-primary-outline-texticon-focus-ring-color-key-focus); } } } @@ -87,7 +87,7 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .spectrum-LogicButton::after { - --spectrum-button-m-primary-texticon-focus-ring-color-key-focus: Highlight; + --spectrum-button-m-primary-outline-texticon-focus-ring-color-key-focus: Highlight; forced-color-adjust: none; } diff --git a/components/splitbutton/index.css b/components/splitbutton/index.css index bf355554001..0937458ba02 100644 --- a/components/splitbutton/index.css +++ b/components/splitbutton/index.css @@ -27,20 +27,20 @@ governing permissions and limitations under the License. --spectrum-splitbutton-trigger-round-edge-padding: var(--spectrum-global-dimension-size-125); --spectrum-splitbutton-trigger-flat-edge-padding: var(--spectrum-global-dimension-size-100); - --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc(var(--spectrum-splitbutton-trigger-flat-edge-padding) - var(--spectrum-button-m-primary-texticon-border-size)); + --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc(var(--spectrum-splitbutton-trigger-flat-edge-padding) - var(--spectrum-button-m-primary-outline-texticon-border-size)); } .spectrum-SplitButton-action { --spectrum-splitbutton-flat-edge-padding: calc( - var(--spectrum-button-m-primary-texticon-padding-left) - - var(--spectrum-button-m-primary-texticon-border-size) * 2 + var(--spectrum-button-m-primary-outline-texticon-padding-left) - + var(--spectrum-button-m-primary-outline-texticon-border-size) * 2 ); - --spectrum-splitbutton-round-edge-padding: var(--spectrum-button-m-primary-texticon-padding-right); + --spectrum-splitbutton-round-edge-padding: var(--spectrum-button-m-primary-outline-texticon-padding-right); --spectrum-splitbutton-cta-flat-edge-padding: calc( - var(--spectrum-button-m-primary-texticon-padding-left) - - var(--spectrum-button-m-primary-texticon-border-size) * 3 + var(--spectrum-button-m-primary-outline-texticon-padding-left) - + var(--spectrum-button-m-primary-outline-texticon-border-size) * 3 ); } @@ -54,10 +54,10 @@ governing permissions and limitations under the License. .spectrum-SplitButton-action { margin-inline-start: 0; - border-start-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-start-end-radius: 0; border-end-end-radius: 0; - border-end-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-end-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); padding-inline-end: var(--spectrum-splitbutton-flat-edge-padding); padding-inline-start: var(--spectrum-splitbutton-round-edge-padding); @@ -65,7 +65,7 @@ governing permissions and limitations under the License. /* CTA is special and doesn't have a border between the buttons */ &.spectrum-Button--accent { padding-inline-end: var(--spectrum-splitbutton-cta-flat-edge-padding); - margin-inline-end: var(--spectrum-button-m-primary-texticon-border-size); + margin-inline-end: var(--spectrum-button-m-primary-outline-texticon-border-size); } &:after { @@ -78,8 +78,8 @@ governing permissions and limitations under the License. margin-inline-start: 0; border-start-start-radius: 0; - border-start-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); - border-end-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); + border-end-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-end-start-radius: 0; border-inline-start-width: var(--spectrum-splitbutton-trigger-border-left); @@ -91,7 +91,7 @@ governing permissions and limitations under the License. /* Fix CTA button focus ring alignment */ &.spectrum-Button--accent { padding-inline-start: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); - border-inline-start-width: var(--spectrum-button-m-primary-texticon-border-size); + border-inline-start-width: var(--spectrum-button-m-primary-outline-texticon-border-size); } &:focus-ring { @@ -128,8 +128,8 @@ governing permissions and limitations under the License. .spectrum-SplitButton--left { .spectrum-SplitButton-action { border-start-start-radius: 0; - border-start-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); - border-end-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); + border-end-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-end-start-radius: 0; margin-inline-end: 0; margin-inline-start: var(--spectrum-spltibutton-margin-left); @@ -140,13 +140,13 @@ governing permissions and limitations under the License. /* CTA is special and doesn't have a border between the buttons */ &.spectrum-Button--accent { padding-inline-start: var(--spectrum-splitbutton-cta-flat-edge-padding); - margin-inline-start: var(--spectrum-button-m-primary-texticon-border-size); + margin-inline-start: var(--spectrum-button-m-primary-outline-texticon-border-size); } &:after { border-start-start-radius: var(--spectrum-splitbutton-border-radius-edge); - border-start-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); - border-end-end-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); + border-end-end-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-end-start-radius: var(--spectrum-splitbutton-border-radius-edge); } } @@ -154,12 +154,12 @@ governing permissions and limitations under the License. .spectrum-SplitButton-trigger { margin-inline-end: 0; - border-start-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-start-end-radius: 0; border-end-end-radius: 0; - border-end-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-end-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); - border-inline-start-width: var(--spectrum-button-m-primary-texticon-border-size); + border-inline-start-width: var(--spectrum-button-m-primary-outline-texticon-border-size); border-inline-end-width: var(--spectrum-splitbutton-trigger-border-left); padding-inline-end: var(--spectrum-splitbutton-trigger-flat-edge-padding); @@ -168,14 +168,14 @@ governing permissions and limitations under the License. /* Fix CTA button focus ring alignment */ &.spectrum-Button--accent { padding-inline-end: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding); - border-inline-end-width: var(--spectrum-button-m-primary-texticon-border-size); + border-inline-end-width: var(--spectrum-button-m-primary-outline-texticon-border-size); } &:after { - border-start-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-start-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); border-start-end-radius: var(--spectrum-splitbutton-border-radius-edge); border-end-end-radius: var(--spectrum-splitbutton-border-radius-edge); - border-end-start-radius: var(--spectrum-button-m-primary-texticon-border-radius); + border-end-start-radius: var(--spectrum-button-m-primary-outline-texticon-border-radius); } } }