diff --git a/.changeset/sixty-crabs-thank.md b/.changeset/sixty-crabs-thank.md new file mode 100644 index 00000000000..dffe6dc8735 --- /dev/null +++ b/.changeset/sixty-crabs-thank.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/infieldbutton": patch +"@spectrum-css/actionbutton": patch +"@spectrum-css/clearbutton": patch +"@spectrum-css/avatar": patch +"@spectrum-css/button": patch +"@spectrum-css/dialog": patch +--- + +Define undefined properties from theme directory. diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 5e1a376e7c9..1559628a572 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,46 +11,6 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ActionButton { - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } - - &.is-selected { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - } -} - .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50))); --spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100))); @@ -69,7 +29,9 @@ --spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500))); --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); + --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25); + --spectrum-actionbutton-content-color-disabled: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); + --spectrum-actionbutton-background-color-disabled: var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)); --spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium)); @@ -101,69 +63,109 @@ } &.spectrum-ActionButton--quiet { + --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-background-color-default: transparent; --mod-actionbutton-background-color-hover: var(--spectrum-gray-100); --mod-actionbutton-background-color-down: var(--spectrum-gray-200); --mod-actionbutton-background-color-focus: var(--spectrum-gray-100); + + &:disabled:not(.is-selected), + &.is-disabled:not(.is-selected) { + --mod-actionbutton-border-color-disabled: transparent; + --mod-actionbutton-background-color-disabled: transparent; + } } &.spectrum-ActionButton--staticBlack { + --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); --mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700); --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + + --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); + + &:disabled, + .is-disabled { + --mod-disabled-content-color: var(--spectrum-transparent-black-500); + --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-black-500); + } - &, &.spectrum-ActionButton--quiet { - --mod-actionbutton-background-color-default: transparent; - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); + --mod-actionbutton-border-color-default: transparent; } } &.spectrum-ActionButton--staticWhite { + --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); --mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700); --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); + + --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); + + &:disabled, + .is-disabled { + --mod-disabled-content-color: var(--spectrum-transparent-white-500); + --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-white-500); + } - &, &.spectrum-ActionButton--quiet { - --mod-actionbutton-background-color-default: transparent; - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); + --mod-actionbutton-border-color-default: transparent; } } &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); - - &.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected); + --mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-selected-hover); + --mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-selected-down); + --mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-selected-focus); + --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); + + --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-border-color-hover: transparent; + --mod-actionbutton-border-color-down: transparent; + --mod-actionbutton-border-color-focus: transparent; + --mod-actionbutton-border-color-disabled: transparent; + + --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-selected); + + &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + --mod-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --mod-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --mod-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --mod-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + --mod-actionbutton-content-color-default: var(--spectrum-white); + --mod-actionbutton-content-color-hover: var(--spectrum-white); + --mod-actionbutton-content-color-down: var(--spectrum-white); + --mod-actionbutton-content-color-focus: var(--spectrum-white); + } + + &:disabled, + .is-disabled { + &.spectrum-ActionButton--staticBlack { + --mod-disabled-content-color: var(--spectrum-transparent-black-500); + --mod-disabled-background-color: var(--spectrum-transparent-black-100); + } + + &.spectrum-ActionButton--staticWhite { + --mod-disabled-content-color: var(--spectrum-transparent-white-500); + --mod-disabled-background-color: var(--spectrum-transparent-white-100); + } } } } @@ -266,6 +268,8 @@ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; + + border-style: solid; transition: background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, @@ -410,3 +414,43 @@ a.spectrum-ActionButton { /* Augment the margin correction for the icon only scenario */ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); } + +@media (forced-colors: active) { + .spectrum-ActionButton { + /* force a more visible focus indicator color */ + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + + &::after { + /* make sure focus indicator renders */ + forced-color-adjust: none; + } + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } +} diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json index 5aea48545a1..49f57b47301 100644 --- a/components/actionbutton/metadata/metadata.json +++ b/components/actionbutton/metadata/metadata.json @@ -14,15 +14,25 @@ ".spectrum-ActionButton-label:empty", ".spectrum-ActionButton.is-disabled", ".spectrum-ActionButton.is-selected", + ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)", + ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", + ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton::-moz-focus-inner", ".spectrum-ActionButton:active", ".spectrum-ActionButton:after", @@ -38,18 +48,10 @@ "modifiers": [ "--mod-actionbutton-animation-duration", "--mod-actionbutton-background-color-default", - "--mod-actionbutton-background-color-default-selected", - "--mod-actionbutton-background-color-default-selected-emphasized", "--mod-actionbutton-background-color-disabled", "--mod-actionbutton-background-color-down", - "--mod-actionbutton-background-color-down-selected", - "--mod-actionbutton-background-color-down-selected-emphasized", "--mod-actionbutton-background-color-focus", - "--mod-actionbutton-background-color-focus-selected", - "--mod-actionbutton-background-color-focus-selected-emphasized", "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-background-color-hover-selected", - "--mod-actionbutton-background-color-hover-selected-emphasized", "--mod-actionbutton-border-color-default", "--mod-actionbutton-border-color-disabled", "--mod-actionbutton-border-color-down", @@ -58,18 +60,10 @@ "--mod-actionbutton-border-radius", "--mod-actionbutton-border-width", "--mod-actionbutton-content-color-default", - "--mod-actionbutton-content-color-default-selected", - "--mod-actionbutton-content-color-default-selected-emphasized", "--mod-actionbutton-content-color-disabled", "--mod-actionbutton-content-color-down", - "--mod-actionbutton-content-color-down-selected", - "--mod-actionbutton-content-color-down-selected-emphasized", "--mod-actionbutton-content-color-focus", - "--mod-actionbutton-content-color-focus-selected", - "--mod-actionbutton-content-color-focus-selected-emphasized", "--mod-actionbutton-content-color-hover", - "--mod-actionbutton-content-color-hover-selected", - "--mod-actionbutton-content-color-hover-selected-emphasized", "--mod-actionbutton-edge-to-hold-icon", "--mod-actionbutton-edge-to-text", "--mod-actionbutton-edge-to-visual", @@ -83,7 +77,9 @@ "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", - "--mod-actionbutton-text-to-visual" + "--mod-actionbutton-text-to-visual", + "--mod-disabled-background-color", + "--mod-disabled-content-color" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -161,7 +157,9 @@ "--spectrum-corner-radius-medium-size-large", "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", + "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", + "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -188,6 +186,8 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack", + "--spectrum-static-black-focus-indicator-color", + "--spectrum-static-white-focus-indicator-color", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", @@ -195,12 +195,11 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-400", "--spectrum-transparent-black-500", "--spectrum-transparent-black-600", "--spectrum-transparent-black-700", + "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", "--spectrum-transparent-white-700", diff --git a/components/avatar/index.css b/components/avatar/index.css index ceea0e03702..e6203f003d8 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -140,7 +140,7 @@ opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); &.is-disabled { - opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); + opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)); } } diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/metadata.json index 8c6f9792c1d..6b5fb54aac2 100644 --- a/components/avatar/metadata/metadata.json +++ b/components/avatar/metadata/metadata.json @@ -73,8 +73,5 @@ "--spectrum-focus-indicator-thickness" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-avatar-color-opacity-disabled", - "--highcontrast-avatar-focus-indicator-color" - ] + "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] } diff --git a/components/button/index.css b/components/button/index.css index ac3b7dd08dd..5b1c7c3e812 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -495,6 +495,10 @@ a.spectrum-Button { /* Forced colors / high contrast mode */ @media (forced-colors: active) { .spectrum-Button { + --highcontrast-button-border-color-default: ButtonBorder; + --highcontrast-button-border-color-hover: ButtonBorder; + --highcontrast-button-border-color-focus: ButtonBorder; + --highcontrast-button-border-color-down: ButtonBorder; --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; --highcontrast-button-background-color-disabled: ButtonFace; diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 0608dbe90b9..8e8e2ee0e19 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -1,4 +1,3 @@ - /*! * Copyright 2024 Adobe. All rights reserved. * @@ -22,6 +21,11 @@ --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); border-radius: 100%; @@ -33,6 +37,12 @@ border: none; color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + } + &.spectrum-ClearButton--sizeS { --spectrum-clear-button-height: var(--spectrum-component-height-75); --spectrum-clear-button-width: var(--spectrum-component-height-75); diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index ccb5e703eed..491cb6bbd32 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -68,6 +68,8 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-transparent-white-400", + "--spectrum-transparent-white-500", "--spectrum-white" ], "passthroughs": [], diff --git a/components/dialog/index.css b/components/dialog/index.css index d83c7920258..cd89fe5956a 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -414,6 +414,6 @@ @media (forced-colors: active) { .spectrum-Dialog { - border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } } diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json index 7a0c521ff2b..33753fbe8ed 100644 --- a/components/dialog/metadata/metadata.json +++ b/components/dialog/metadata/metadata.json @@ -120,5 +120,5 @@ "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content" ], - "high-contrast": ["--highcontrast-standard-dialog-border-color"] + "high-contrast": [] } diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index d194755a259..2de448b6b0a 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -31,6 +31,20 @@ --spectrum-infield-button-fill-justify-content: center; + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + + --spectrum-infield-button-background-color: var(--spectrum-gray-50); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); + &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json index c3f8cb94877..9b4476f0a4a 100644 --- a/components/infieldbutton/metadata/metadata.json +++ b/components/infieldbutton/metadata/metadata.json @@ -122,12 +122,17 @@ ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-corner-radius-100", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-gray-100", + "--spectrum-gray-200", + "--spectrum-gray-50", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover",