diff --git a/.changeset/sixty-crabs-thank.md b/.changeset/sixty-crabs-thank.md new file mode 100644 index 0000000000..dffe6dc873 --- /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 5e1a376e7c..dd829b0cb1 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,65 +11,18 @@ * 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))); --spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200))); --spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100))); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); --spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400))); --spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500))); --spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600))); --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-disabled: var(--spectrum-disabled-content-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)); @@ -114,7 +67,6 @@ --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); &, &.spectrum-ActionButton--quiet { @@ -132,7 +84,6 @@ --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); &, &.spectrum-ActionButton--quiet { @@ -410,3 +361,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 5aea48545a..94ac87db17 100644 --- a/components/actionbutton/metadata/metadata.json +++ b/components/actionbutton/metadata/metadata.json @@ -97,11 +97,6 @@ "--spectrum-actionbutton-background-color-down", "--spectrum-actionbutton-background-color-focus", "--spectrum-actionbutton-background-color-hover", - "--spectrum-actionbutton-background-color-selected", - "--spectrum-actionbutton-background-color-selected-disabled", - "--spectrum-actionbutton-background-color-selected-down", - "--spectrum-actionbutton-background-color-selected-focus", - "--spectrum-actionbutton-background-color-selected-hover", "--spectrum-actionbutton-border-color-default", "--spectrum-actionbutton-border-color-disabled", "--spectrum-actionbutton-border-color-down", @@ -114,7 +109,6 @@ "--spectrum-actionbutton-content-color-down", "--spectrum-actionbutton-content-color-focus", "--spectrum-actionbutton-content-color-hover", - "--spectrum-actionbutton-content-color-selected", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", "--spectrum-actionbutton-edge-to-visual", @@ -162,6 +156,7 @@ "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", "--spectrum-disabled-border-color", + "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -193,13 +188,10 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50", "--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-200", "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", diff --git a/components/avatar/index.css b/components/avatar/index.css index ceea0e0370..e6203f003d 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 8c6f9792c1..6b5fb54aac 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 ac3b7dd08d..5b1c7c3e81 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 0608dbe90b..ba1285fc37 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%; diff --git a/components/dialog/index.css b/components/dialog/index.css index d83c792025..cd89fe5956 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 7a0c521ff2..33753fbe8e 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 d194755a25..2de448b6b0 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 c3f8cb9487..9b4476f0a4 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",