-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add v11 color token tables (#9245)
* Create 11.x-color.md * reformat * cleanup * Update 11.x-color.md * Update docs/migration/11.x-color.md Co-authored-by: Andrea N. Cardona <[email protected]> * REDO * yarn format Co-authored-by: Andrea N. Cardona <[email protected]>
- Loading branch information
1 parent
32e41d9
commit bff2147
Showing
1 changed file
with
135 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| ## Color tokens | ||
|
|
||
| <InlineNotification> | ||
|
|
||
| **Note:** The Carbon v11 release is currently in beta release. Be on the lookout | ||
| for the public preview release available in the coming months. | ||
|
|
||
| </InlineNotification> | ||
|
|
||
| **Status key:** | ||
|
|
||
| **New:** a net new color token to the system in v11. It has no v10 counterpart. | ||
|
|
||
| **Updated name:** the v10 name has been updated to in v11 to replace the number | ||
| ending with a usage adjective. It just a name change the role stays the same | ||
| between v10 and v11. | ||
|
|
||
| **Split:** V10 token has been split into multiple v11 tokens for more specific | ||
| usage. | ||
|
|
||
| **No change:** token name has no change between versions. | ||
|
|
||
| **Depreciated:** v10 token was removed in v11 | ||
|
|
||
| | **V10 token name** | **V11 token name** | **Status** | | ||
| | ------------------ | ------------------------- | ------------------- | | ||
| | visited-link | link-visited | Updated name | | ||
| | ui-background | background | Updated name | | ||
| | ui-05 | layer-selected-inverse | Updated name | | ||
| | ui-05 | border-inverse | Updated name | | ||
| | ui-04 | border-strong-01 | Split, Updated name | | ||
| | ui-04 | toggle-off | Split, Updated name | | ||
| | ui-03 | layer-accent-01 | Split, Updated name | | ||
| | ui-03 | border-subtle-01 | Split, Updated name | | ||
| | ui-02 | layer-02 | Updated name | | ||
| | ui-01 | layer-01 | Updated name | | ||
| | text-error | text-error | Updated name | | ||
| | text-05 | text-helper | Updated name | | ||
| | text-04 | text-on-color | Updated name | | ||
| | text-03 | text-placeholder | Updated name | | ||
| | text-02 | text-secondary | Updated name | | ||
| | text-01 | text-primary | Updated name | | ||
| | support-04 | support-info | Updated name | | ||
| | support-03 | support-warning | Updated name | | ||
| | support-02 | support-success | Updated name | | ||
| | support-01 | support-error | Updated name | | ||
| | skeleton-02 | skeleton-element | Updated name | | ||
| | skeleton-01 | skeleton-background | Updated name | | ||
| | selected-ui | background-selected | Split, Updated name | | ||
| | selected-ui | layer-selected-01 | Split, Updated name | | ||
| | selected-light-ui | layer-selected-02 | Updated name | | ||
| | overlay-01 | overlay | Updated name | | ||
| | link-02 | link-secondary | Updated name | | ||
| | link-01 | link-primary | Updated name | | ||
| | inverse-support-04 | support-info-inverse | Updated name | | ||
| | inverse-support-03 | support-warning-inverse | Updated name | | ||
| | inverse-support-02 | support-success-inverse | Updated name | | ||
| | inverse-support-01 | support-error-inverse | Updated name | | ||
| | inverse-link | link-inverse | Updated name | | ||
| | inverse-hover-ui | background-inverse-hover | Updated name | | ||
| | inverse-focus-ui | focus-inverse | Updated name | | ||
| | inverse-02 | background-inverse | Updated name | | ||
| | inverse-01 | text-inverse | Split, Updated name | | ||
| | inverse-01 | icon-inverse | Split, Updated name | | ||
| | inverse-01 | focus-inset | Split, Updated name | | ||
| | interactive-04 | interactive | Updated name | | ||
| | interactive-04 | border-interactive | Updated name | | ||
| | interactive-03 | button-tertiary | Updated name | | ||
| | interactive-02 | button-secondary | Updated name | | ||
| | interactive-01 | background-brand | Updated name | | ||
| | interactive-01 | button-primary | Updated name | | ||
| | icon-03 | icon-on-color | Updated name | | ||
| | icon-02 | icon-secondary | Updated name | | ||
| | icon-01 | icon-primary | Updated name | | ||
| | hover-ui | background-hover | Updated name | | ||
| | hover-ui | layer-hover-01 | Split, Updated name | | ||
| | hover-ui | field-hover-01 | Split, Updated name | | ||
| | hover-ui | field-hover-02 | Split, Updated name | | ||
| | hover-tertiary | button-tertiary-hover | Updated name | | ||
| | hover-selected-ui | background-selected-hover | Split, Updated name | | ||
| | hover-selected-ui | layer-selected-hover-01 | Split, Updated name | | ||
| | hover-selected-ui | layer-accent-hover-01 | Split, Updated name | | ||
| | hover-secondary | button-secondary-hover | Updated name | | ||
| | hover-primary-text | link-primary-hover | Updated name | | ||
| | hover-primary | button-primary-hover | Updated name | | ||
| | hover-light-ui | layer-hover-02 | Updated name | | ||
| | hover-danger | button-danger-hover | Updated name | | ||
| | highlight | highlight | No change | | ||
| | focus | focus | No change | | ||
| | field-02 | field-02 | No change | | ||
| | field-01 | field-01 | No change | | ||
| | disabled-03 | layer-selected-disabled | Split, Updated name | | ||
| | disabled-03 | text-on-color-disabled | Split, Updated name | | ||
| | disabled-03 | icon-on-color-disabled | Split, Updated name | | ||
| | disabled-02 | text-disabled | Split, Updated name | | ||
| | disabled-02 | icon-disabled | Split, Updated name | | ||
| | disabled-02 | button-disabled | Split, Updated name | | ||
| | disabled-01 | layer-disabled-01 | Split | | ||
| | disabled-01 | field-disabled-01 | Split | | ||
| | disabled-01 | border-disabled-01 | Split | | ||
| | disabled-01 | field-disabled-02 | Split | | ||
| | disabled-01 | border-disabled-03 | Split | | ||
| | decorative-01 | border-subtle-02 | Updated name | | ||
| | danger-02 | button-danger-secondary | Updated name | | ||
| | danger / danger-01 | button-danger-primary | Updated name | | ||
| | button-separator | button-separator | No change | | ||
| | active-ui | background-active | Split, Updated name | | ||
| | active-ui | layer-active-01 | Split, Updated name | | ||
| | active-ui | layer-accent-active-01 | Split, Updated name | | ||
| | active-ui | border-subtle-selected-01 | Split, Updated name | | ||
| | active-tertiary | button-tertiary-active | Updated name | | ||
| | active-secondary | button-secondary-active | Updated name | | ||
| | active-primary | button-primary-active | Updated name | | ||
| | active-light-ui | layer-active-02 | Updated name | | ||
| | active-danger | button-danger-active | Updated name | | ||
| | - | border-subtle-00 | New | | ||
| | - | layer-selected-hover-02 | New | | ||
| | - | layer-accent-02 | New | | ||
| | - | layer-accent-hover-02 | New | | ||
| | - | layer-accent-active-02 | New | | ||
| | - | border-strong-02 | New | | ||
| | - | border-subtle-selected-02 | New | | ||
| | - | layer-03 | New | | ||
| | - | layer-hover-03 | New | | ||
| | - | layer-active-03 | New | | ||
| | - | layer-selected-03 | New | | ||
| | - | layer-selected-hover-03 | New | | ||
| | - | layer-accent-03 | New | | ||
| | - | layer-accent-hover-03 | New | | ||
| | - | layer-accent-active-03 | New | | ||
| | - | field-03 | New | | ||
| | - | field-hover-03 | New | | ||
| | - | border-strong-03 | New | | ||
| | - | border-subtle-03 | New | | ||
| | - | border-subtle-selected-03 | New | |