Skip to content

Conversation

@sophschneider
Copy link
Contributor

@sophschneider sophschneider commented May 27, 2023

WHY are these changes introduced?

prefixing the experimental keyword on the color Aliases allows us to use the experimental tokens where the Alias types are used. For example, on the Box component you could now use the experimental tokens as a background without type errors.

<Box background={'experimental-bg-input-hover'} />

@sophschneider sophschneider force-pushed the sophie/tokens-experimental branch from 67bdac9 to 5137586 Compare May 27, 2023 17:11
@sophschneider sophschneider changed the title Removed Experimental alias from color tokens Remove Experimental alias from color tokens May 27, 2023
| 'bg-transparent-active'
| 'bg-inverse-transparent-hover'
| 'bg-inverse-transparent-active';
| 'experimental-subdued-link'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn't extract this in the ColorTextAlias because i'm not sure if its a text token

Copy link
Member

Choose a reason for hiding this comment

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

I think this was added as more of a test to make sure the new tokens were being generated properly. If it's not used we can remove it for now, rename ColorExperimentalAlias to ColorExperimentalBackgroundAlias and remove the extract above which I think would be cleaner. We'll add another group for experimental text colors when they're ready in figma

@sophschneider sophschneider marked this pull request as ready for review May 29, 2023 14:14
@sophschneider sophschneider changed the title Remove Experimental alias from color tokens Add experimental to colour aliases May 29, 2023
Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

Looks good but I think we can remove subdued-link for now and clean up ColorBackgroundAlias

| 'bg-transparent-active'
| 'bg-inverse-transparent-hover'
| 'bg-inverse-transparent-active';
| 'experimental-subdued-link'
Copy link
Member

Choose a reason for hiding this comment

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

I think this was added as more of a test to make sure the new tokens were being generated properly. If it's not used we can remove it for now, rename ColorExperimentalAlias to ColorExperimentalBackgroundAlias and remove the extract above which I think would be cleaner. We'll add another group for experimental text colors when they're ready in figma

@sophschneider sophschneider force-pushed the sophie/tokens-experimental branch from c8024f3 to def7e5e Compare May 29, 2023 14:57
@sophschneider sophschneider merged commit b109f06 into v11.x.x May 29, 2023
@sophschneider sophschneider deleted the sophie/tokens-experimental branch May 29, 2023 15:18
sophschneider added a commit that referenced this pull request Jun 1, 2023
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

prefixing the `experimental` keyword on the color Aliases allows us to
use the experimental tokens where the Alias types are used. For example,
on the [Box
component](https://polaris.shopify.com/components/layout-and-structure/box)
you could now use the experimental tokens as a background without type
errors.

```
<Box background={'experimental-bg-input-hover'} />
```
sophschneider added a commit that referenced this pull request Jun 1, 2023
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

prefixing the `experimental` keyword on the color Aliases allows us to
use the experimental tokens where the Alias types are used. For example,
on the [Box
component](https://polaris.shopify.com/components/layout-and-structure/box)
you could now use the experimental tokens as a background without type
errors.

```
<Box background={'experimental-bg-input-hover'} />
```
@sophschneider sophschneider self-assigned this Jun 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants