From f65978461117632cc1519f83f569fea84a23d3d2 Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Thu, 22 Aug 2024 18:25:12 +0530 Subject: [PATCH 1/7] fix: Enhancement in color page token --- .../ColorTokenTable/ColorTokenTable.js | 741 +++++++++--------- src/data/guidelines/color-tokens.js | 204 +++++ src/pages/elements/color/tokens.mdx | 74 +- 3 files changed, 665 insertions(+), 354 deletions(-) diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js index e41b51385e8..518501056bd 100644 --- a/src/components/ColorTokenTable/ColorTokenTable.js +++ b/src/components/ColorTokenTable/ColorTokenTable.js @@ -9,12 +9,15 @@ import { import { CopyToClipboard } from 'react-copy-to-clipboard/lib/Component'; import StickyContainer from '../TypesetStyle/StickyContainer'; import colorTokens from '../../data/guidelines/color-tokens'; +import H3 from 'gatsby-theme-carbon/src/components/markdown/H3'; + export default class ColorTokenTable extends React.Component { state = { theme: 'white', sticky: false, mobile: false, + type: 'core', }; componentDidMount() { @@ -23,6 +26,7 @@ export default class ColorTokenTable extends React.Component { mobile: true, }); } + this.setState({ type: this.props.type }); this.addResizeListener(); this.addScrollListener(); } @@ -37,10 +41,10 @@ export default class ColorTokenTable extends React.Component { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - } + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } : null; }; @@ -82,9 +86,8 @@ export default class ColorTokenTable extends React.Component { if (bgColor.includes('@')) { const hex = bgColor.split('@')[0].trim(); const alpha = bgColor.split('@')[1].trim(); - bgColor = `rgba(${this.hexToRgb(hex).r}, ${this.hexToRgb(hex).g}, ${ - this.hexToRgb(hex).b - }, ${alpha})`; + bgColor = `rgba(${this.hexToRgb(hex).r}, ${this.hexToRgb(hex).g}, ${this.hexToRgb(hex).b + }, ${alpha})`; } return (
@@ -159,351 +162,385 @@ export default class ColorTokenTable extends React.Component {
-
-

Background

-
-
- - - - - - - - - - {Object.keys(colorTokens['background-tokens']).map((token, i) => - this.renderToken( - token, - colorTokens['background-tokens'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Layer

-
-
- - - - - - - - - - {Object.keys(colorTokens['layer-tokens']).map((token, i) => - this.renderToken(token, colorTokens['layer-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Layer accent

-
-
- - - - - - - - - - {Object.keys(colorTokens['layer-accent-tokens']).map( - (token, i) => - this.renderToken( - token, - colorTokens['layer-accent-tokens'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Field

-
-
- - - - - - - - - - {Object.keys(colorTokens['field-tokens']).map((token, i) => - this.renderToken(token, colorTokens['field-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Border

-
-
- - - - - - - - - - {Object.keys(colorTokens['border-tokens']).map((token, i) => - this.renderToken( - token, - colorTokens['border-tokens'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Text

-
-
- - - - - - - - - - {Object.keys(colorTokens['text-tokens']).map((token, i) => - this.renderToken(token, colorTokens['text-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Link

-
-
- - - - - - - - - - {Object.keys(colorTokens['link-tokens']).map((token, i) => - this.renderToken(token, colorTokens['link-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Icon

-
-
- - - - - - - - - - {Object.keys(colorTokens['icon-tokens']).map((token, i) => - this.renderToken(token, colorTokens['icon-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Button

-
-
- - - - - - - - - - {Object.keys(colorTokens['button-tokens']).map((token, i) => - this.renderToken( - token, - colorTokens['button-tokens'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Support

-
-
- - - - - - - - - - {Object.keys(colorTokens['support-tokens']).map((token, i) => - this.renderToken( - token, - colorTokens['support-tokens'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Focus

-
-
- - - - - - - - - - {Object.keys(colorTokens['focus-tokens']).map((token, i) => - this.renderToken(token, colorTokens['focus-tokens'][token], i) - )} - -
TokenRoleValue
-
-
-

Miscellaneous

-
-
- - - - - - - - - - {Object.keys(colorTokens['miscellaneous']).map((token, i) => - this.renderToken( - token, - colorTokens['miscellaneous'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Tag

-
-
- - - - - - - - - - {Object.keys(colorTokens['tag']).map((token, i) => - this.renderToken( - token, - colorTokens['tag'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

AI

-
-
- - - - - - - - - - {Object.keys(colorTokens['ai']).map((token, i) => - this.renderToken( - token, - colorTokens['ai'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Chat

-
-
- - - - - - - - - - {Object.keys(colorTokens['chat']).map((token, i) => - this.renderToken( - token, - colorTokens['chat'][token], - i - ) - )} - -
TokenRoleValue
-
-
-

Chat button

-
-
- - - - - - - - - - {Object.keys(colorTokens['chat-button']).map((token, i) => - this.renderToken( - token, - colorTokens['chat-button'][token], - i - ) - )} - -
TokenRoleValue
-
+ {this.state.type === 'core' && ( + <> +
+

Background

+
+
+ + + + + + + + + + {Object.keys(colorTokens['background-tokens']).map((token, i) => + this.renderToken( + token, + colorTokens['background-tokens'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Layer

+
+
+ + + + + + + + + + {Object.keys(colorTokens['layer-tokens']).map((token, i) => + this.renderToken(token, colorTokens['layer-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Layer accent

+
+
+ + + + + + + + + + {Object.keys(colorTokens['layer-accent-tokens']).map( + (token, i) => + this.renderToken( + token, + colorTokens['layer-accent-tokens'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Field

+
+
+ + + + + + + + + + {Object.keys(colorTokens['field-tokens']).map((token, i) => + this.renderToken(token, colorTokens['field-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Border

+
+
+ + + + + + + + + + {Object.keys(colorTokens['border-tokens']).map((token, i) => + this.renderToken( + token, + colorTokens['border-tokens'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Text

+
+
+ + + + + + + + + + {Object.keys(colorTokens['text-tokens']).map((token, i) => + this.renderToken(token, colorTokens['text-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Link

+
+
+ + + + + + + + + + {Object.keys(colorTokens['link-tokens']).map((token, i) => + this.renderToken(token, colorTokens['link-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Icon

+
+
+ + + + + + + + + + {Object.keys(colorTokens['icon-tokens']).map((token, i) => + this.renderToken(token, colorTokens['icon-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Support

+
+
+ + + + + + + + + + {Object.keys(colorTokens['support-tokens']).map((token, i) => + this.renderToken( + token, + colorTokens['support-tokens'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Focus

+
+
+ + + + + + + + + + {Object.keys(colorTokens['focus-tokens']).map((token, i) => + this.renderToken(token, colorTokens['focus-tokens'][token], i) + )} + +
TokenRoleValue
+
+
+

Miscellaneous

+
+
+ + + + + + + + + + {Object.keys(colorTokens['miscellaneous']).map((token, i) => + this.renderToken( + token, + colorTokens['miscellaneous'][token], + i + ) + )} + +
TokenRoleValue
+
+ )} + {this.state.type === 'component' && ( + <> +
+

Button

+
+
+ + + + + + + + + + {Object.keys(colorTokens['button-tokens']).map((token, i) => + this.renderToken( + token, + colorTokens['button-tokens'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Tag

+
+
+ + + + + + + + + + {Object.keys(colorTokens['tag']).map((token, i) => + this.renderToken( + token, + colorTokens['tag'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Notification

+
+
+ + + + + + + + + + {Object.keys(colorTokens['notification']).map((token, i) => + this.renderToken( + token, + colorTokens['notification'][token], + i + ) + )} + +
TokenRoleValue
+
+ + )} + {this.state.type === 'ai' && ( + <> +
+

General AI

+
+
+ + + + + + + + + + {Object.keys(colorTokens['ai']).map((token, i) => + this.renderToken( + token, + colorTokens['ai'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Chat

+
+
+ + + + + + + + + + {Object.keys(colorTokens['chat']).map((token, i) => + this.renderToken( + token, + colorTokens['chat'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Chat button

+
+
+ + + + + + + + + + {Object.keys(colorTokens['chat-button']).map((token, i) => + this.renderToken( + token, + colorTokens['chat-button'][token], + i + ) + )} + +
TokenRoleValue
+
+ + )}
); diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js index 5afd47b7450..57b1c9f0d95 100644 --- a/src/data/guidelines/color-tokens.js +++ b/src/data/guidelines/color-tokens.js @@ -4040,6 +4040,210 @@ const colorTokens = { }, }, }, + notification: { + '$notification-background-error': { + role: ['Error low contrast notification background'], + value: { + white: { + name: 'Red 10', + hex: '#fff1f1', + }, + g10: { + name: 'Red 10', + hex: '#fff1f1', + }, + g90: { + name: 'Gray 80', + hex: '#8d8d8d', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$notification-background-success': { + role: ['Success low contrast notification background'], + value: { + white: { + name: 'Green 10', + hex: '#defbe6', + }, + g10: { + name: 'Green 10', + hex: '#defbe6', + }, + g90: { + name: 'Gray 80', + hex: '#8d8d8d', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$notification-background-info': { + role: ['Informational low contrast notification background'], + value: { + white: { + name: 'Blue 10', + hex: '#edf5ff', + }, + g10: { + name: 'Blue 10', + hex: '#edf5ff', + }, + g90: { + name: 'Gray 80', + hex: '#8d8d8d', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$notification-background-warning': { + role: ['Warning low contrast notification background'], + value: { + white: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g10: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g90: { + name: 'Gray 80', + hex: '#8d8d8d', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$notification-action-hover': { + role: ['Hover for notification ghost button'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + }, + }, + '$notification-action-tertiary-inverse': { + role: ['Tertiary button color for notification'], + value: { + white: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g10: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g90: { + name: 'Gray 70', + hex: '#525252', + }, + g100: { + name: 'Gray 70', + hex: '#525252', + }, + }, + }, + '$notification-action-tertiary-inverse-active': { + role: ['Active color for tertiary button in notification'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 100', + hex: '#161616', + }, + g100: { + name: 'Gray 100', + hex: '#161616', + }, + }, + }, + '$notification-action-tertiary-inverse-hover': { + role: ['Hover color for tertiary button in notification'], + value: { + white: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g10: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$notification-action-tertiary-inverse-text': { + role: ['Text color for tertiary button in notification'], + value: { + white: { + name: 'Gray 10, 0%', + hex: '#f4f4f4 @ 0%', + }, + g10: { + name: 'Gray 10, 0%', + hex: '#f4f4f4 @ 0%', + }, + g90: { + name: 'Gray 90, 0%', + hex: '#262626 @ 0%', + }, + g100: { + name: 'Gray 90, 0%', + hex: '#262626 @ 0%', + }, + }, + }, + '$notification-action-tertiary-inverse-text-on-color-disabled': { + role: ['Disabled color for tertiary button in notification'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + }, }; export default colorTokens; diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index a5eedec9c89..d6847497704 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -8,6 +8,76 @@ tabs: ['Overview', 'Usage', 'Tokens', 'Code'] import ColorTokenTable from 'components/ColorTokenTable'; -## Tokens by theme + - +Tokens are a method of applying color in a consistent, reusable, and scalable +way. They are used in place of hard coded values, like hex codes. + + + + + +Core Tokens +Component Tokens +AI Tokens + + + +## Core Tokens + +Core tokens are global colors that are used across components. They are named +and grouped by the common UI element that they are applied to. + + + +Background +Layer +Layer accent +Field +Border +Text +Link +Icon +Support +Focus +Miscellaneous + + + + + +## Component Tokens + +Some components have their own specific color tokens, known as component tokens. +They represent the properties associated with a particular component. They are +not global tokens like the core tokens and should never be used for anything +other than their own component. See the developer documentation for more +information. + + + +Button +Tag +Notification + + + + + +## AI Tokens + +To accommodate for the new AI styles, we have introduced a new suite of color +tokens that can be found within the main Carbon themes. These tokens should only +be used when building custom AI components, variants, or instances in your UI. +For more information on how to use the AI token, see the Carbon for AI +documentation. + + + +General AI +Chat +Chat button + + + + From e254841bbecb5739375c4a965ec48c544b8af7d0 Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Tue, 27 Aug 2024 14:51:00 +0530 Subject: [PATCH 2/7] fix: notification table --- src/data/guidelines/color-tokens.js | 64 ++++++++++++++--------------- src/pages/elements/color/tokens.mdx | 10 +++-- 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js index 57b1c9f0d95..aa6a35fb909 100644 --- a/src/data/guidelines/color-tokens.js +++ b/src/data/guidelines/color-tokens.js @@ -4108,12 +4108,12 @@ const colorTokens = { role: ['Warning low contrast notification background'], value: { white: { - name: 'Gray 20', - hex: '#e0e0e0', + name: 'Yellow 30, White', + hex: '#f1c21b, #ffffff', }, g10: { - name: 'Gray 20', - hex: '#e0e0e0', + name: 'Yellow 30, White', + hex: '#f1c21b, #ffffff', }, g90: { name: 'Gray 80', @@ -4142,20 +4142,20 @@ const colorTokens = { role: ['Tertiary button color for notification'], value: { white: { - name: 'Gray 20', - hex: '#e0e0e0', + name: 'White', + hex: '#ffffff', }, g10: { - name: 'Gray 20', - hex: '#e0e0e0', + name: 'White', + hex: '#ffffff', }, g90: { - name: 'Gray 70', - hex: '#525252', + name: 'Blue 60', + hex: '#0f62fe', }, g100: { - name: 'Gray 70', - hex: '#525252', + name: 'Blue 60', + hex: '#0f62fe', }, }, }, @@ -4184,20 +4184,20 @@ const colorTokens = { role: ['Hover color for tertiary button in notification'], value: { white: { - name: 'Gray 10', - hex: '#f4f4f4', + name: 'Gray 30', + hex: '#c6c6c6', }, g10: { - name: 'Gray 10', - hex: '#f4f4f4', + name: 'Gray 30', + hex: '#c6c6c6', }, g90: { - name: 'Gray 90', - hex: '#262626', + name: 'Blue 80', + hex: '#002d9c', }, g100: { - name: 'Gray 90', - hex: '#262626', + name: 'Blue 80', + hex: '#002d9c', }, }, }, @@ -4205,20 +4205,20 @@ const colorTokens = { role: ['Text color for tertiary button in notification'], value: { white: { - name: 'Gray 10, 0%', - hex: '#f4f4f4 @ 0%', + name: 'Gray 100', + hex: '#161616', }, g10: { - name: 'Gray 10, 0%', - hex: '#f4f4f4 @ 0%', + name: 'Gray 100', + hex: '#161616', }, g90: { - name: 'Gray 90, 0%', - hex: '#262626 @ 0%', + name: 'White', + hex: '#ffffff', }, g100: { - name: 'Gray 90, 0%', - hex: '#262626 @ 0%', + name: 'White', + hex: '#ffffff', }, }, }, @@ -4234,12 +4234,12 @@ const colorTokens = { hex: '#ffffff', }, g90: { - name: 'Gray 90', - hex: '#262626', + name: 'White', + hex: '#ffffff', }, g100: { - name: 'Gray 90', - hex: '#262626', + name: 'White', + hex: '#ffffff', }, }, }, diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index d6847497704..081b07f8e75 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -51,8 +51,9 @@ and grouped by the common UI element that they are applied to. Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything -other than their own component. See the developer documentation for more -information. +other than their own component. See the + +developer documentation for more information. @@ -69,8 +70,9 @@ information. To accommodate for the new AI styles, we have introduced a new suite of color tokens that can be found within the main Carbon themes. These tokens should only be used when building custom AI components, variants, or instances in your UI. -For more information on how to use the AI token, see the Carbon for AI -documentation. +For more information on how to use the AI token, see the + Carbon for +AI documentation. From 9365f855ad3c3b15d8208e83347718490f2ede7f Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Tue, 27 Aug 2024 14:54:45 +0530 Subject: [PATCH 3/7] fix: format --- src/pages/elements/color/tokens.mdx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index 081b07f8e75..16c945e4b7e 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -52,8 +52,10 @@ Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything other than their own component. See the + -developer documentation for more information. + developer documentation{' '} + for more information. @@ -71,8 +73,11 @@ To accommodate for the new AI styles, we have introduced a new suite of color tokens that can be found within the main Carbon themes. These tokens should only be used when building custom AI components, variants, or instances in your UI. For more information on how to use the AI token, see the - Carbon for -AI documentation. + + + {' '} + Carbon for AI{' '} + documentation. From 2049e0201dabc1c850df48cf3a0e81485ea364b5 Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Wed, 28 Aug 2024 14:54:58 +0530 Subject: [PATCH 4/7] fix: line break in links --- src/pages/elements/color/tokens.mdx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index 16c945e4b7e..fc48e6fff16 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -28,7 +28,7 @@ way. They are used in place of hard coded values, like hex codes. Core tokens are global colors that are used across components. They are named and grouped by the common UI element that they are applied to. - + Background Layer @@ -52,12 +52,9 @@ Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything other than their own component. See the +[developer documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens) - - developer documentation{' '} - for more information. - - + Button Tag @@ -73,13 +70,10 @@ To accommodate for the new AI styles, we have introduced a new suite of color tokens that can be found within the main Carbon themes. These tokens should only be used when building custom AI components, variants, or instances in your UI. For more information on how to use the AI token, see the +[Carbon for AI](https://carbondesignsystem.com/guidelines/carbon-for-ai/) +documentation. - - {' '} - Carbon for AI{' '} - documentation. - - + General AI Chat From 4b6b6ebaf2df957bd97205738800f3b0f271bfb1 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 29 Aug 2024 20:21:15 +0530 Subject: [PATCH 5/7] Update src/pages/elements/color/tokens.mdx Co-authored-by: Alison Joseph --- src/pages/elements/color/tokens.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index fc48e6fff16..c95bf8d9f23 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -69,7 +69,7 @@ other than their own component. See the To accommodate for the new AI styles, we have introduced a new suite of color tokens that can be found within the main Carbon themes. These tokens should only be used when building custom AI components, variants, or instances in your UI. -For more information on how to use the AI token, see the +For more information on how to use the AI tokens, see the [Carbon for AI](https://carbondesignsystem.com/guidelines/carbon-for-ai/) documentation. From 64ef9ca6e508f8f90153a623fb9fa0499999e886 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 29 Aug 2024 20:21:37 +0530 Subject: [PATCH 6/7] Update src/pages/elements/color/tokens.mdx Co-authored-by: Alison Joseph --- src/pages/elements/color/tokens.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index c95bf8d9f23..f9bc95c2d07 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -51,8 +51,8 @@ and grouped by the common UI element that they are applied to. Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything -other than their own component. See the -[developer documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens) +other than their own component. For more information on how to use component tokens, see the +[developer documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens). From 29773fbfe8fea382a1f515c24a2cb88c6c3fb08e Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 4 Sep 2024 14:30:47 -0500 Subject: [PATCH 7/7] chore: yarn format --- src/pages/elements/color/tokens.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index f9bc95c2d07..dae321ea900 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -51,7 +51,8 @@ and grouped by the common UI element that they are applied to. Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything -other than their own component. For more information on how to use component tokens, see the +other than their own component. For more information on how to use component +tokens, see the [developer documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens).