-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
2659966
commit 37478ea
Showing
1 changed file
with
124 additions
and
113 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 |
---|---|---|
@@ -1,124 +1,135 @@ | ||
**Color tokens** | ||
## 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. | ||
**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. | ||
**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 | | ||
| Copy of disabled-01 | layer-disabled-01field-disabled-01border-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 | | ||
| **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 | |