Skip to content

fix(swatch): adjust disabled icon color across themes #3547

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
merged 1 commit into from
Feb 25, 2025
Merged

fix(swatch): adjust disabled icon color across themes #3547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .changeset/fast-hats-worry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@spectrum-css/swatch": patch
---

Reverts all themes' disabled icon color back to original spectrum-white and border color to black with opacity token `swatch-disabled-icon-border-opacity`.
4 changes: 3 additions & 1 deletion components/swatch/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"--spectrum-swatch-border-thickness",
"--spectrum-swatch-border-thickness-selected",
"--spectrum-swatch-dash-icon-color",
"--spectrum-swatch-disabled-icon-border-opacity",
"--spectrum-swatch-disabled-icon-color",
"--spectrum-swatch-disabled-icon-size",
"--spectrum-swatch-focus-indicator-border-radius",
Expand All @@ -101,6 +102,7 @@
],
"global": [
"--spectrum-animation-duration-100",
"--spectrum-black-rgb",
"--spectrum-border-width-100",
"--spectrum-border-width-200",
"--spectrum-corner-radius-75",
Expand All @@ -113,6 +115,7 @@
"--spectrum-gray-900",
"--spectrum-picked-color",
"--spectrum-red-900",
"--spectrum-white",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-50",
Expand All @@ -121,7 +124,6 @@
"system-theme": [
"--system-swatch-border-color",
"--system-swatch-border-radius",
"--system-swatch-disabled-icon-color",
"--system-swatch-inner-border-color-selected"
],
"passthroughs": [],
Expand Down
3 changes: 2 additions & 1 deletion components/swatch/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@

.spectrum-Swatch {
--spectrum-swatch-focus-indicator-border-radius: 8px;
--spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%);
--spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity));
--spectrum-swatch-disabled-icon-color: var(--spectrum-white);
Copy link
Collaborator Author

@rise-erpelding rise-erpelding Feb 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Taking this --spectrum-swatch-disabled-icon-color custom prop out of the themes and moving it back here, S1 spec and S2 spec use the same tokens so there should not be theme differences here.

--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
Expand Down
28 changes: 21 additions & 7 deletions components/swatch/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { html, svg } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
Expand Down Expand Up @@ -86,12 +86,26 @@ export const Template = ({
${OpacityCheckerboard({
customClasses: [`${rootClass}-fill`],
content: [
...(isDisabled ? [Icon({
customClasses: [`${rootClass}-disabledIcon`],
setName: "workflow",
iconName: "Cancel",
useRef: false,
}, context)] : []),
// disabled icon requires custom markup to render separate paths for border and fill
// the custom prop fills in the paths are a fallback, styling should be handled by css
...(isDisabled ? [svg`
<svg
xmlns="http://www.w3.org/2000/svg"
class="${rootClass}-disabledIcon"
viewBox="0 0 20 20"
>
<path
d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
stroke="none"
fill="var(--spectrum-swatch-disabled-icon-color)"
/>
<path
d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
stroke="none"
fill="var(--spectrum-swatch-disabled-icon-border-color)"
/>
</svg>
`] : []),
...(isMixedValue ? [Icon({
customClasses: [`${rootClass}-mixedValueIcon`],
setName: "ui",
Expand Down
1 change: 0 additions & 1 deletion components/swatch/themes/spectrum-two.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
.spectrum-Swatch {
--spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
--spectrum-swatch-border-radius: var(--spectrum-corner-radius-75);
}
}
1 change: 0 additions & 1 deletion components/swatch/themes/spectrum.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
.spectrum-Swatch {
--spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));
--spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
--spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);
--spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
}
}
Loading