Skip to content

fix(*): define missing custom properties from theme directory #3517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdransf merged 14 commits into from
Jan 21, 2025
Merged

fix(*): define missing custom properties from theme directory #3517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2cd43c3
fix(*): define missing custom properties from theme directory
cdransf Jan 3, 2025
46c142a
fix(*): restore missing mods and tokens
cdransf Jan 6, 2025
4a4f669
fix(*): restore missing mod and update metadata
cdransf Jan 6, 2025
2023186
fix(*): restore missing mods and update metadata
cdransf Jan 7, 2025
ad7c5f9
fix(*): restore basebutton import
cdransf Jan 7, 2025
4251099
chore(*): update metadata
cdransf Jan 7, 2025
3ef47b5
fix(*): restore actionbutton staticwhite background color
cdransf Jan 8, 2025
375490d
chore(*): update metadata
cdransf Jan 13, 2025
c816b1a
chore: resolve conflict
cdransf Jan 14, 2025
10f3579
fix(*): actionbutton emphasized + static conflict
cdransf Jan 15, 2025
87a289b
fix(*): actionbutton restore missing mods
cdransf Jan 15, 2025
46faf77
fix(*): actionbutton clean up mods; fix missing states
cdransf Jan 15, 2025
29a01a9
fix(*): actionbutton restore focus indicator mods
cdransf Jan 16, 2025
50c7217
chore(*): remove unused theme files
cdransf Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/sixty-crabs-thank.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
39 changes: 19 additions & 20 deletions components/actionbutton/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -188,19 +186,20 @@
"--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",
"--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-100",
"--spectrum-transparent-white-200",
"--spectrum-transparent-white-400",
"--spectrum-transparent-white-500",
"--spectrum-transparent-white-600",
"--spectrum-transparent-white-700",
Expand Down
186 changes: 115 additions & 71 deletions components/actionbutton/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Expand All @@ -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));
Expand Down Expand Up @@ -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);
}
}
}
}
Expand Down Expand Up @@ -267,6 +269,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,
border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out,
Expand Down Expand Up @@ -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;
}
}
}
}
5 changes: 1 addition & 4 deletions components/avatar/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
}
2 changes: 1 addition & 1 deletion components/avatar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
Loading