feat(swatch)!: migrate swatch to core tokens #1501

yosevu · 2022-08-18T12:05:24Z

Description

Update windows high contrast mode
Update YAML examples
- Rename --spectrum-picked-color to --mod-swatch-fill-background-color
- Add is-image class to Image, Gradient, and Mixed Value swatches for transparent backgrounds

Note: There are currently two open questions about border colors and the XS workflow icon size in Slack, however, these may not be blockers for this work.

How and where has this been tested?

Tested locally referencing the Swatch XD file.
Tested WHCM with forced colors in Chrome Emulation
Medium and Large scales

Screenshots

To-do list

If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have tested these changes in Windows High Contrast mode.

This pull request is ready to merge.

github-actions · 2022-08-18T12:09:33Z

🚀 Deployed on https://pr-1501--spectrum-css.netlify.app

components/swatch/index.css

lunarfusion · 2022-08-23T15:54:02Z

components/swatch/index.css

+  --spectrum-swatch-border-color-regular: rgba(0, 0, 0, 0.5);
+  --spectrum-swatch-border-color-light: rgba(0, 0, 0, 0.2);
+
+  --spectrum-swatch-spacing-selected: 8px;


I don't think you need a static property for this. The 8 pixels can be achieved with:

calc(var(--spectrum-swatch-border-thickness-selected) * 4)

This way if the border thickness ever changes, the spacing will automatically adjust.

components/swatch/index.css

lunarfusion · 2022-08-23T16:57:01Z

components/swatch/index.css

@@ -335,6 +337,7 @@ governing permissions and limitations under the License.
  }
 }

+/* Variant: Rounding - Full */
 .spectrum-Swatch--roundingFull {
  &:not(.spectrum-Swatch--rectangle) {


If you like the clip-path option, it would need to be applied here after line 342 as

&.is-selected .spectrum-Swatch-fill { clip-path: circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%); }

bernhard-adobe

LGTM, minor requests.

components/swatch/index.css

bernhard-adobe · 2022-08-23T18:12:47Z

components/swatch/index.css

+  /* Static properties - no tokens */
+  --spectrum-swatch-focus-ring-border-radius: 8px;
+
+  --spectrum-swatch-border-color-regular: rgba(0, 0, 0, 0.5);


Can you please add those missing tokens to the Paperdoc? @pfulton is working together with our designers in the design-workshop to capture and address those missing tokens:
https://paper.dropbox.com/doc/Missing-tokens-from-Core-Tokens-CSS-Migration--BnxEwsd_PVslzsEIgDEXHRiYAg-y9o9A3tt2qKFBSzUjfhsY

I don't think the focus ring border radius is missing. I think it could be done either as

--spectrum-swatch-focus-ring-border-radius: calc(var(--spectrum-corner-radius-100) * 2);
or
--spectrum-swatch-focus-ring-border-radius: var(--spectrum-corner-radius-200);

Both would result in 8px;

bernhard-adobe · 2022-08-23T21:04:18Z

components/swatch/index.css

+  /* Static checkerboard properties */
+  --spectrum-swatch-checkerboard-size: 8px;
+  --spectrum-swatch-checkerboard-background-offset: 0px;
+  --spectrum-swatch-checkerboard-dark-color: rgb(217, 217, 217);


do we have a token for this?
I could understand that the checker-board doesn't get yet a token but it's used across a lot of products.
The place for wish-tokens is: https://paper.dropbox.com/doc/Missing-tokens-from-Core-Tokens-CSS-Migration--BnxEwsd_PVslzsEIgDEXHRiYAg-y9o9A3tt2qKFBSzUjfhsY

bernhard-adobe · 2022-08-23T21:28:24Z

VRT is: https://spectrum-visual-regression.ci.corp.adobe.com/view/Spectrum%20CSS/job/css-vrt-test/39
1501 - swatch.zip

yosevu · 2022-08-23T22:33:59Z

components/swatch/index.css

    z-index: 0;

-    background-color: var(--spectrum-picked-color, transparent);
+    background-color: var(--highcontrast-swatch-fill-background-color, var(--mod-swatch-fill-background-color, var(--spectrum-swatch-fill-background-color)));


Use mod override instead of --spectrum-picked-color.

lunarfusion · 2022-08-24T17:16:37Z

components/swatch/index.css

+    border-width: var(--mod-swatch-focus-ring-thickness, var(--spectrum-swatch-focus-ring-thickness));
+    border-style: solid;
+    border-color: var(--highcontrast-swatch-focus-ring-color, var(--mod-swatch-focus-ring-color, var(--spectrum-swatch-focus-ring-color)));
+    border-radius: var(--mod-swatch-focus-ring-border-radius, var(--mod-swatch-focus-ring-border-radius, var(--spectrum-swatch-focus-ring-border-radius)));


Looks like this has some redundancies, should be
border-radius: var(--mod-swatch-focus-ring-border-radius, var(--spectrum-swatch-focus-ring-border-radius));

lunarfusion · 2022-08-24T17:18:28Z

components/swatch/index.css

+  --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
+  --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
+  --spectrum-swatch-focus-ring-thickness: var(--spectrum-focus-ring-thickness);
+  --spectrum-swatch-spacing-selected: var(--spectrum-swatch-border-thickness-selected) * 4;


My yarn run dev is failing because of the unused custom property on line 29.

Sorry about that. I had to restart my build to catch this.

pfulton · 2022-08-30T15:13:56Z

Released beta:
@spectrum-css/swatch@2.0.0-beta.1

@yosevu can you open a PR in the Spectrum Web Components repo with this update? Note the version number here ☝🏻 - I had a bad publish at the 2.0.0-beta.0 release, so use the .1 one, please.

pfulton · 2022-08-30T15:14:13Z

Also, I've rebased this branch against the latest stuff in main.

refactor: add Rounding variant clip-path

- Remove unused var - Update redundant fallback vars

Rationale: web-components depends on --spectrum-picked-color in several places.

- No border variant background color - Adjust box-shadow outline styles - Adjust disabled icon styles

- Add theme placeholder tokens for swatch border color - Rename tokens to describe context they are used

* main: (53 commits) chore(release): release fix(checkbox): whcm focus states (#1527) chore(release): release feat(fieldlabel)!: migrate to core tokens (CSS-102) (#1476) chore(release): release feat(swatchgroup)!: migrate swatchgroup to core tokens (#1505) chore(release): release feat(swatch)!: migrate swatch to core tokens (#1501) chore(release): release fix(tabs): selection indicator scroll overflow border (#1513) chore(release): release feat(divider)!: migrate to core tokens chore(release): release refactor(checkbox): remove commented out code (#1524) chore(release): release feat(progresscircle)!: migrate to core tokens chore(release): release feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) (#1465) chore(release): release fix(card): increase content area height when necessary ...

* main: (65 commits) chore(release): release chore!: use latest CSS tokens dependency refactor(swatch)!: remap core token aliases & rename aliases refactor(helptext)!: remap core token aliases & rename aliases refactor(radio)!: remap core token aliases & rename aliases refactor(checkbox)!: remap core token aliases & rename aliases refactor(switch)!: remap core token aliases & rename aliases refactor(actionbutton)!: remap core token aliases & rename aliases refactor(closebutton)!: remap core token aliases & rename aliases feat(tokens)!: use latest beta release chore(release): release refactor(inlinealert)!: migrate to core tokens (#1519) chore(release): release fix(checkbox): whcm focus states (#1527) chore(release): release feat(fieldlabel)!: migrate to core tokens (CSS-102) (#1476) chore(release): release feat(swatchgroup)!: migrate swatchgroup to core tokens (#1505) chore(release): release feat(swatch)!: migrate swatch to core tokens (#1501) ...

github-actions bot temporarily deployed to pull request August 18, 2022 12:09 Inactive

yosevu force-pushed the yosevu/css-150-migrate-swatch-to-core-tokens branch 2 times, most recently from 150f608 to 9e3f45c Compare August 18, 2022 12:29

yosevu changed the title ~~Yosevu/css 150 migrate swatch to core tokens~~ feat(swatch)!: migrate to core tokens Aug 18, 2022

github-actions bot temporarily deployed to pull request August 18, 2022 12:33 Inactive

yosevu marked this pull request as ready for review August 18, 2022 12:54

yosevu force-pushed the yosevu/css-150-migrate-swatch-to-core-tokens branch from 9e3f45c to a692ad4 Compare August 18, 2022 13:04

github-actions bot temporarily deployed to pull request August 18, 2022 13:09 Inactive

yosevu requested review from lunarfusion and bernhard-adobe August 18, 2022 21:42

yosevu added the Component: Swatch label Aug 18, 2022

yosevu force-pushed the yosevu/css-150-migrate-swatch-to-core-tokens branch 3 times, most recently from a692ad4 to 16a49d9 Compare August 19, 2022 03:15

github-actions bot temporarily deployed to pull request August 19, 2022 03:19 Inactive

yosevu changed the title ~~feat(swatch)!: migrate to core tokens~~ feat(swatch)!: migrate swatch to core tokens Aug 19, 2022

lunarfusion suggested changes Aug 23, 2022

View reviewed changes

bernhard-adobe approved these changes Aug 23, 2022

View reviewed changes

yosevu commented Aug 23, 2022

View reviewed changes

yosevu requested a review from lunarfusion August 23, 2022 22:36

lunarfusion suggested changes Aug 24, 2022

View reviewed changes

yosevu requested review from lunarfusion and bernhard-adobe August 24, 2022 20:44

github-actions bot temporarily deployed to pull request August 24, 2022 20:47 Inactive

pfulton force-pushed the yosevu/css-150-migrate-swatch-to-core-tokens branch from 2f7a0d8 to 8a73a4c Compare August 30, 2022 15:07

pfulton added the released-beta label Aug 30, 2022

Yosevu Kilonzo and others added 22 commits October 6, 2022 17:10

fix: use red-900 for slash color

3ef2eb8

feat: add checkerboard fill styles

dc647c0

refactor: use modifier token for swatch fill background color

ee1c227

fix: update is-selected inner border color

1977e5a

chore: remove unnecessary comments

c24bd62

chore: add modifier properties

252b6b1

fix: define is-image for transparent swatch fill background-color

4e3d362

fix: update windows high contrast colors

b607231

refactor: calc selected swatch spacing based on border thickness

7d7a4b9

fix: use clip-path for is-selected state

3a9be3b

refactor: add Rounding variant clip-path

fix: tidy up

1c3cb5f

- Remove unused var - Update redundant fallback vars

chore(swatch): use latest tokens dependency

424fe15

chore(swatch): manual version bump for beta release

6f7c2cc

chore(swatch): manual version bump for second beta release

ff99d99

refactor: restore --spectrum-picked-color

0652f02

Rationale: web-components depends on --spectrum-picked-color in several places.

chore(swatch): manual version bump for updated beta release

9dfedb2

fix: no background-image for is-nothing variant

c554acf

fix: adjust variants and WHCM styles

ddcb3ea

- No border variant background color - Adjust box-shadow outline styles - Adjust disabled icon styles

chore(swatch): manual version bump for beta release

a479e8f

fix: separate icon-border-color and border-color-selected-color tokens

0f1bef8

- Add theme placeholder tokens for swatch border color - Rename tokens to describe context they are used

chore(swatch): manual version bump for new beta release

38d2996

chore(swatch): use latest tokens dependency

e8fc995

pfulton force-pushed the yosevu/css-150-migrate-swatch-to-core-tokens branch from a384ec8 to e8fc995 Compare October 6, 2022 21:17

github-actions bot temporarily deployed to pull request October 6, 2022 21:20 Inactive

pfulton merged commit 47b5ec9 into main Oct 6, 2022

pfulton deleted the yosevu/css-150-migrate-swatch-to-core-tokens branch October 6, 2022 21:24

marissahuysentruyt mentioned this pull request Jul 30, 2024

feat(swatch): add support for lightBorder #2954

Merged

15 tasks

rise-erpelding mentioned this pull request Feb 19, 2025

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

Merged

14 tasks

feat(swatch)!: migrate swatch to core tokens #1501

feat(swatch)!: migrate swatch to core tokens #1501

Uh oh!

Conversation

yosevu commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Screenshots

To-do list

Uh oh!

github-actions bot commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernhard-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernhard-adobe commented Aug 23, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pfulton commented Aug 30, 2022

Uh oh!

pfulton commented Aug 30, 2022

Uh oh!

Uh oh!

yosevu commented Aug 18, 2022 •

edited

Loading

github-actions bot commented Aug 18, 2022 •

edited

Loading