Skip to content

Commit

Permalink
Update color-tokens.js (#3118)
Browse files Browse the repository at this point in the history 
* Update color-tokens.js

* run yarn format

* update-text-on-color-disabled

* add token name to values

* Update color-tokens.js

* remove token name in value

* update opacity formating

* reverting to previous format test

* reset formating again

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aagonzales @kodiakhq
aagonzales and kodiakhq[bot] authored Sep 2, 2022
1 parent 78d1faa commit e4c2fd7
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 88 deletions.
160 changes: 80 additions & 80 deletions src/data/guidelines/color-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,19 @@ const colorTokens = {
],
value: {
white: {
name: 'Gray 50, 12% opacity',
name: 'Gray 50, 12%',
hex: '#8d8d8d @ 12%',
},
g10: {
name: 'Gray 50, 12% opacity',
name: 'Gray 50, 12%',
hex: '#8d8d8d @ 12%',
},
g90: {
name: 'Gray 50, 16% opacity',
name: 'Gray 50, 16%',
hex: '#8d8d8d @ 16%',
},
g100: {
name: 'Gray 50. 16% opacity',
name: 'Gray 50, 16%',
hex: '#8d8d8d @ 16%',
},
},
Expand All @@ -50,19 +50,19 @@ const colorTokens = {
role: ['Active color for $background'],
value: {
white: {
name: 'Gray 50, 32% opacity',
hex: '#8d8d8d @ 32%',
name: 'Gray 50, 50%',
hex: '#8d8d8d @ 50%',
},
g10: {
name: 'Gray 50. 32% opacity',
hex: '#8d8d8d @ 32%',
name: 'Gray 50, 50%',
hex: '#8d8d8d @ 50%',
},
g90: {
name: 'Gray 50, 40% opacity',
name: 'Gray 50, 40%',
hex: '#8d8d8d @ 40%',
},
g100: {
name: 'Gray 50. 40% opacity',
name: 'Gray 50, 40%',
hex: '#8d8d8d @ 40%',
},
},
Expand All @@ -71,19 +71,19 @@ const colorTokens = {
role: ['Selected color for $background'],
value: {
white: {
name: 'Gray 50, 20% opacity',
name: 'Gray 50, 20%',
hex: '#8d8d8d @ 20%',
},
g10: {
name: 'Gray 50, 20% opacity',
name: 'Gray 50, 20%',
hex: '#8d8d8d @ 20%',
},
g90: {
name: 'Gray 50, 24% opacity',
name: 'Gray 50, 24%',
hex: '#8d8d8d @ 24%',
},
g100: {
name: 'Gray 50, 24% opacity',
name: 'Gray 50, 24%',
hex: '#8d8d8d @ 24%',
},
},
Expand All @@ -92,19 +92,19 @@ const colorTokens = {
role: ['Hover color for $background-selected'],
value: {
white: {
name: 'Gray 50, 32% opacity',
name: 'Gray 50, 32%',
hex: '#8d8d8d @ 32%',
},
g10: {
name: 'Gray 50, 32% opacity',
name: 'Gray 50, 32%',
hex: '#8d8d8d @ 32%',
},
g90: {
name: 'Gray 50, 32% opacity',
name: 'Gray 50, 32%',
hex: '#8d8d8d @ 32%',
},
g100: {
name: 'Gray 50, 32% opacity',
name: 'Gray 50, 32%',
hex: '#8d8d8d @ 32%',
},
},
Expand Down Expand Up @@ -663,12 +663,12 @@ const colorTokens = {
role: ['Active color for $layer-accent-01'],
value: {
white: {
name: 'Gray 30',
hex: '#c6c6c6',
name: 'Gray 40',
hex: '#a8a8a8',
},
g10: {
name: 'Gray 30',
hex: '#c6c6c6',
name: 'Gray 40',
hex: '#a8a8a8',
},
g90: {
name: 'Gray 60',
Expand Down Expand Up @@ -820,12 +820,12 @@ const colorTokens = {
hex: '#e5e5e5',
},
g90: {
name: 'Gray 80 hover',
hex: '#4c4c4c',
name: 'Gray 70 hover',
hex: '#636363',
},
g100: {
name: 'Gray 90 hover',
hex: '#353535',
name: 'Gray 80 hover',
hex: '#474747',
},
},
},
Expand Down Expand Up @@ -1128,11 +1128,11 @@ const colorTokens = {
hex: '#c6c6c6',
},
g90: {
name: 'Gray 50, 50% opacity',
name: 'Gray 50, 50%',
hex: '#8d8d8d @ 50%',
},
g100: {
name: 'Gray 50, 50% opacity',
name: 'Gray 50, 50%',
hex: '#8d8d8d @ 50%',
},
},
Expand Down Expand Up @@ -1240,12 +1240,12 @@ const colorTokens = {
hex: '#8d8d8d',
},
g90: {
name: 'Gray 50',
hex: '#8d8d8d',
name: 'White – 25%',
hex: '#ffffff – 25%',
},
g100: {
name: 'Gray 60',
hex: '#6f6f6f',
name: 'White – 25%',
hex: '#ffffff – 25%',
},
},
},
Expand Down Expand Up @@ -1316,20 +1316,20 @@ const colorTokens = {
role: ['Disabled text color'],
value: {
white: {
name: 'Gray 100, 25% opacity',
hex: '#161616 @ 25%',
name: 'Gray 100 – 25%',
hex: '#161616 – 25%',
},
g10: {
name: 'Gray 100, 25% opacity',
hex: '#161616 @ 25%',
name: 'Gray 100 – 25%',
hex: '#161616 – 25%',
},
g90: {
name: 'Gray 10, 25% opacity',
hex: '#f4f4f4 @ 25%',
name: 'Gray 10 – 25%',
hex: '#f4f4f4 – 25%',
},
g100: {
name: 'Gray 10, 25% opacity',
hex: '#f4f4f4 @ 25%',
name: 'Gray 10 – 25%',
hex: '#f4f4f4 – 25%',
},
},
},
Expand Down Expand Up @@ -1517,12 +1517,12 @@ const colorTokens = {
hex: '#8d8d8d',
},
g90: {
name: 'Gray 50',
hex: '#8d8d8d',
name: 'White – 25%',
hex: '#ffffff – 25%',
},
g100: {
name: 'Gray 60',
hex: '#6f6f6f',
name: 'White – 25%',
hex: '#ffffff – 25%',
},
},
},
Expand Down Expand Up @@ -1551,20 +1551,20 @@ const colorTokens = {
role: ['Disabled icon color'],
value: {
white: {
name: 'Gray 100, 25% opacity',
hex: '#161616 @ 25%',
name: 'Gray 100 – 25%',
hex: '#161616 – 25%',
},
g10: {
name: 'Gray 100, 25% opacity',
hex: '#161616 @ 25%',
name: 'Gray 100 – 25%',
hex: '#161616 – 25%',
},
g90: {
name: 'Gray 10, 25% opacity',
hex: '#f4f4f4 @ 25%',
name: 'Gray 10 – 25%',
hex: '#f4f4f4 – 25%',
},
g100: {
name: 'Gray 10, 25% opacity',
hex: '#f4f4f4 @ 25%',
name: 'Gray 10 – 25%',
hex: '#f4f4f4 – 25%',
},
},
},
Expand Down Expand Up @@ -1981,6 +1981,27 @@ const colorTokens = {
},
},
},
'$support-error-inverse': {
role: ['Error in high contrast moments'],
value: {
white: {
name: 'Red 50',
hex: '#fa4d56',
},
g10: {
name: 'Red 50',
hex: '#fa4d56',
},
g90: {
name: 'Red 60',
hex: '#da1e28',
},
g100: {
name: 'Red 60',
hex: '#da1e28',
},
},
},
'$support-success-inverse': {
role: ['Success in high contrast moments'],
value: {
Expand Down Expand Up @@ -2023,27 +2044,6 @@ const colorTokens = {
},
},
},
'$support-error-inverse': {
role: ['Error in high contrast moments'],
value: {
white: {
name: 'Red 50',
hex: '#fa4d56',
},
g10: {
name: 'Red 50',
hex: '#fa4d56',
},
g90: {
name: 'Red 60',
hex: '#da1e28',
},
g100: {
name: 'Red 60',
hex: '#da1e28',
},
},
},
'$support-info-inverse': {
role: ['Information in high contrast moments'],
value: {
Expand Down Expand Up @@ -2166,8 +2166,8 @@ const colorTokens = {
hex: '#d0e2ff',
},
g10: {
name: 'Blue 10',
hex: '#edf5ff',
name: 'Blue 20',
hex: '#d0e2ff',
},
g90: {
name: 'Blue 80',
Expand Down Expand Up @@ -2204,19 +2204,19 @@ const colorTokens = {
role: ['Background overlay'],
value: {
white: {
name: 'Gray 100',
name: 'Gray 100, 50%',
hex: '#161616 @ 50%',
},
g10: {
name: 'Gray 100',
name: 'Gray 100, 50%',
hex: '#161616 @ 50%',
},
g90: {
name: 'Gray 100',
hex: '#161616 @ 70%',
name: 'Gray 100, 70%',
hex: '#161616 @70%',
},
g100: {
name: 'Gray 100',
name: 'Gray 100, 70%',
hex: '#161616 @ 70%',
},
},
Expand Down
16 changes: 8 additions & 8 deletions src/pages/designing/get-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ as ensuring consistency between design assets and code.
Head on over to the [Design kits](/designing/kits/sketch) section and follow the
install instructions to get set up.

| Design tool | Carbon version | Status | Maintainer |
| ------------ | ----------------------------------------------------------------- | ------------------------------- | ------------------- |
| **Figma** | [v11](https://carbondesignsystem.com/designing/kits/figma) | Beta available – \_IBMers only) | Carbon Figma Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/figma) | Available – _limited supportt_ | Carbon Figma Guild |
| **Sketch** | [v11](https://carbondesignsystem.com/designing/kits/sketch) | Available | Carbon Sketch Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch) | Available – _limited support_ | Carbon core team |
| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd) | Available | Carbon core team |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_ | Carbon core team |
| Design tool | Carbon version | Status | Maintainer |
| ------------ | ----------------------------------------------------------------- | ------------------------------ | ------------------- |
| **Figma** | [v11](https://carbondesignsystem.com/designing/kits/figma) | Beta available – _IBMers only_ | Carbon Figma Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/figma) | Available – _limited supportt_ | Carbon Figma Guild |
| **Sketch** | [v11](https://carbondesignsystem.com/designing/kits/sketch) | Available | Carbon Sketch Guild |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/sketch) | Available – _limited support_ | Carbon core team |
| **Adobe XD** | [v11](https://carbondesignsystem.com/designing/kits/adobe-xd) | Available | Carbon core team |
| | [v10](https://v10.carbondesignsystem.com/designing/kits/adobe-xd) | Available – _limited support_ | Carbon core team |

### Additional design assets

Expand Down

1 comment on commit e4c2fd7

@vercel
Copy link

@vercel vercel bot commented on e4c2fd7 Sep 2, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem.vercel.app

Please sign in to comment.