Color slider border rounding value update

[nabuhasan]

Description

Updated color-slider-border-rounding token to use 7px instead of 4px in desktop only.
This token value update is the same value used by alias token: corner-radius-medium-size-small.

Motivation and context

S2 color slider design updates.

Related issue

This update is a part of this Jira ticket body of work. And relates to this PR.

Types of changes

Patch (bug fixes, typos, mistakes; non-breaking change which fixes an issue)

Minor (add a new token, changing a value; non-breaking change which adds functionality)

Major (deleting a token, changing token value type; fix or feature that would cause existing functionality to change)

Checklist:

I have signed the [Adobe Open Source CLA](https://opensource.adobe.com/cla.html).

I updated the token in all applicable sets. This applies if updating, adding, or deleting a token that has data across different sets (for example, if the value differs across color themes.)

[mrcjhicks]

TESTING spectrum2-non-colors

READING spectrum-tokens: /spectrum-tokens/packages/tokens/src/
READING tokens studio: /spectrum-tokens-studio-data/src/tokens-studio/spectrum2-non-colors/
TOKENS STUDIO DATA IS NON-COLOR ONLY

STUDIO SYNC SUMMARY

UPDATED METADATA - SPECTRUM UUID: spectrum2/layout.component/mobile.color-slider-border-rounding

SPECTRUM SYNC SUMMARY

NEW TOKENS: (1) color-slider-border-rounding/mobile
MODIFIED TOKENS: (1) color-slider-border-rounding/desktop
CHANGED VALUES: (1) color-slider-border-rounding

TEST COMPLETE

[mrcjhicks]

TESTING spectrum2-non-colors

READING spectrum-tokens: /spectrum-tokens/packages/tokens/src/
READING tokens studio: /spectrum-tokens-studio-data/src/tokens-studio/spectrum2-non-colors/
TOKENS STUDIO DATA IS NON-COLOR ONLY

STUDIO SYNC SUMMARY

UPDATED METADATA - SPECTRUM UUID: spectrum2/layout.component/mobile.color-slider-border-rounding

SPECTRUM SYNC SUMMARY

NEW TOKENS: (1) color-slider-border-rounding/mobile
MODIFIED TOKENS: (1) color-slider-border-rounding/desktop
CHANGED VALUES: (1) color-slider-border-rounding

TEST COMPLETE

[lynnhao]

I think @nabuhasan, we had discussed that the value should just be corner-radius-medium-size-small so that if that token is updated in the future, this component would also update. Wanted to check in case something changed since we last discussed in the Figma spec!

[nabuhasan]

@lynnhao I tried linking that alias and it did not work for me. It may have been because the alias is in a different set layout vs layout.component. I was only able to see corner-radius-1000.

[karstens]

@nabuhasan @lynnhao @GarthDB @mrcjhicks

Another token name / token type issue: There are a small amount of tokens with the name border-rounding, that are currently spacing tokens, but they should be of type "border-radius". That is why @nabuhasan was not able to find it in the alias list when setting the token value in TS. Really sorry about that.

My recommendation: Lets change the token type of these tokens (with 'border-rounding' in the token name) from "spacing" to "border-radius":

src/tokens-studio/spectrum2-non-colors/spectrum2/layout.component/mobile.json
1072:  "color-area-border-rounding": {
1078:        "name": "color-area-border-rounding"
1282:  "color-slider-border-rounding": {
1288:        "name": "color-slider-border-rounding"
1882:  "in-field-button-fill-stacked-inner-border-rounding": {
1888:        "name": "in-field-button-fill-stacked-inner-border-rounding"

src/tokens-studio/spectrum2-non-colors/spectrum2/layout.component/desktop.json
1072:  "color-area-border-rounding": {
1078:        "name": "color-area-border-rounding"
1282:  "color-slider-border-rounding": {
1288:        "name": "color-slider-border-rounding"
1882:  "in-field-button-fill-stacked-inner-border-rounding": {
1888:        "name": "in-field-button-fill-stacked-inner-border-rounding"  

Question: Is there a reason why the tokens are using the word "border-rounding" instead of "corner-radius" like the other border-radius tokens?

[lynnhao]

Thanks @karstens!

@nabuhasan – You can modify the "type" in the JSON to borderRadius, which will allow the corner radius tokens to show up. Here's some screenshots on what to update in your branch in case that helps.

[lynnhao]

Thank you, looks great!

[mrcjhicks]

TESTING spectrum2-non-colors

READING spectrum-tokens: /spectrum-tokens/packages/tokens/src/
READING tokens studio: /spectrum-tokens-studio-data/src/tokens-studio/spectrum2-non-colors/
TOKENS STUDIO DATA IS NON-COLOR ONLY

WARNING - studio token uuid collision: (991541a2-df44-4f32-90a5-de698adf5db3)
spectrum2/layout.component/desktop,color-slider-border-rounding
spectrum2/layout.component/mobile,color-slider-border-rounding

TEST COMPLETE

[mrcjhicks]

SYNCING spectrum2-non-colors

READING spectrum-tokens: /spectrum-tokens/packages/tokens/src/
READING tokens studio: /spectrum-tokens-studio-data/src/tokens-studio/spectrum2-non-colors/
TOKENS STUDIO DATA IS NON-COLOR ONLY

WARNING - studio token uuid collision: (991541a2-df44-4f32-90a5-de698adf5db3)
spectrum2/layout.component/desktop,color-slider-border-rounding
spectrum2/layout.component/mobile,color-slider-border-rounding

SYNC COMPLETE