Skip to content

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

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 17 commits into from
Jan 16, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2a3577c
fix(*): define missing custom properties from theme directory
cdransf Jan 3, 2025
0567e8a
fix(*): restore missing mods and tokens
cdransf Jan 6, 2025
0416bde
fix(*): restore missing mod and update metadata
cdransf Jan 6, 2025
d50d58d
fix(*): restore missing mods and update metadata
cdransf Jan 7, 2025
3d35cbf
fix(*): restore basebutton import
cdransf Jan 7, 2025
87e5b5f
chore(*): update metadata
cdransf Jan 7, 2025
bb7c353
fix(*): restore actionbutton staticwhite background color
cdransf Jan 8, 2025
cc1e53a
chore(*): update metadata
cdransf Jan 13, 2025
30ae168
fix(*): restore missing custom property for actionbutton
cdransf Jan 14, 2025
cfc2bc3
fix(*): actionbutton emphasized + static conflict
cdransf Jan 15, 2025
ceeb373
fix(*): actionbutton restore missing mods
cdransf Jan 15, 2025
fef056c
fix(*): actionbutton clean up mods; fix missing states
cdransf Jan 15, 2025
6978b1d
fix(*): actionbutton restore focus indicator mods
cdransf Jan 16, 2025
d180e0d
fix(*): update metadata
cdransf Jan 16, 2025
1f58f65
fix(*): quiet button background
cdransf Jan 16, 2025
2f601ef
chore(*): update metadata
cdransf Jan 16, 2025
557d0f5
chore(*): restore missing file
cdransf Jan 16, 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.
186 changes: 115 additions & 71 deletions components/actionbutton/index.css
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@rise-erpelding rise-erpelding Jan 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's this selector in s2 foundations that sets the border color to transparent that looks like its missing here, after --spectrum-logical-rotation. You have this selector here but I think would maybe need to add the border-color?

&.spectrum-ActionButton--quiet {
		--spectrum-actionbutton-border-color: transparent;
	}

Except that I don't think that works because now we're not setting --spectrum-actionbutton-border-color anywhere, so maybe try something like

                 --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;

We're also missing setting the static-black-focus-indicator-color:

--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);

And static white:

--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);

Copy link
Copy Markdown
Member Author

@cdransf cdransf Jan 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the spectrum-action-border-color change(s) should be handled in this commit: fef056. I stepped through the states on this branch/PR and matched them to a recent deploy with the previous, working state of the button(s).

image
image

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);
Comment thread
marissahuysentruyt marked this conversation as resolved.
--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);
Comment thread
cdransf marked this conversation as resolved.

&: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);
Comment thread
cdransf marked this conversation as resolved.

&: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));
Comment thread
cdransf marked this conversation as resolved.
--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));
Comment thread
cdransf marked this conversation as resolved.

&.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 @@ -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,
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) {
Comment thread
marissahuysentruyt marked this conversation as resolved.
.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;
}
}
}
}
39 changes: 19 additions & 20 deletions components/actionbutton/metadata/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
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
5 changes: 1 addition & 4 deletions components/avatar/metadata/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"]
}
Loading