From 18a42fa8423b26369484d0edb62e7a2951733c50 Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Thu, 12 Oct 2023 13:26:17 -0700 Subject: [PATCH 1/7] adding color token descriptions --- polaris-tokens/src/themes/base/color.ts | 213 +++++++++++++++++++++++- 1 file changed, 210 insertions(+), 3 deletions(-) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 173162a8cee..5e642e046a6 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -236,45 +236,71 @@ export const color: { } = { 'color-bg': { value: colors.gray[6], + description: 'The default background color of the admin.', }, 'color-bg-inverse': { value: colors.gray[16], + description: + 'Use for the background of components that appear on a dark background.', }, 'color-bg-surface': { value: colors.gray[1], - }, - 'color-bg-surface-active': { - value: colors.gray[5], + description: + 'The background color for elements with the highest level of prominence, like a card or a banner. .', }, 'color-bg-surface-hover': { value: colors.gray[4], + description: + 'The background color for elements with the highest level of prominence, like a card or a banner, when hovered.', + }, + 'color-bg-surface-active': { + value: colors.gray[5], + description: + 'The background color for elements with the highest level of prominence, like a card or a banner, when pressed.', }, 'color-bg-surface-selected': { value: colors.gray[6], + description: + 'The background color for elements with the highest level of prominence, like a card or a banner, when selected.', }, 'color-bg-surface-disabled': { value: colors.blackAlpha[5], + description: 'Use for backgrounds of elements in a disabled state.', }, 'color-bg-surface-secondary': { value: colors.gray[4], + description: + 'The background color for elements with a medium level of prominence.', }, 'color-bg-surface-secondary-hover': { value: colors.gray[6], + description: + 'The background color for elements with a medium level of prominence, when hovered.', }, 'color-bg-surface-secondary-active': { value: colors.gray[7], + description: + 'The background color for elements with a medium level of prominence, when pressed.', }, 'color-bg-surface-secondary-selected': { value: colors.gray[7], + description: + 'The background color for elements with a medium level of prominence, when selected.', }, 'color-bg-surface-tertiary': { value: colors.gray[5], + description: + 'The background color for elements with a low level of prominence.', }, 'color-bg-surface-tertiary-hover': { value: colors.gray[7], + description: + 'The background color for elements with a low level of prominence, when hovered.', }, 'color-bg-surface-tertiary-active': { value: colors.gray[8], + description: + 'The background color for elements with a low level of prominence, when pressed.', }, 'color-bg-surface-brand': { value: colors.gray[8], @@ -290,48 +316,69 @@ export const color: { }, 'color-bg-surface-info': { value: colors.azure[3], + description: + 'Use for backgrounds communicating important information, like banners.', }, 'color-bg-surface-info-hover': { value: colors.azure[4], + description: + 'Use for backgrounds communicating important information, when hovered.', }, 'color-bg-surface-info-active': { value: colors.azure[6], + description: + 'Use for backgrounds communicating important information, when pressed.', }, 'color-bg-surface-success': { value: colors.green[3], + description: 'Use for backgrounds communicating success, like banners.', }, 'color-bg-surface-success-hover': { value: colors.green[4], + description: 'Use for backgrounds communicating success, when hovered.', }, 'color-bg-surface-success-active': { value: colors.green[5], + description: 'Use for backgrounds communicating success, when pressed.', }, 'color-bg-surface-caution': { value: colors.yellow[2], + description: 'Use for backgrounds communicating caution, like banners.', }, 'color-bg-surface-caution-hover': { value: colors.yellow[3], + description: 'Use for backgrounds communicating caution, when hovered.', }, 'color-bg-surface-caution-active': { value: colors.yellow[4], + description: 'Use for backgrounds communicating caution, when pressed.', }, 'color-bg-surface-warning': { value: colors.orange[3], + description: 'Use for backgrounds communicating warning, like banners.', }, 'color-bg-surface-warning-hover': { value: colors.orange[4], + description: 'Use for backgrounds communicating warning, when hovered.', }, 'color-bg-surface-warning-active': { value: colors.orange[5], + description: 'Use for backgrounds communicating warning, when pressed.', }, 'color-bg-surface-critical': { value: colors.red[4], + description: + 'Use for backgrounds communicating critical information, like banners or input errors.', }, 'color-bg-surface-critical-hover': { value: colors.red[5], + description: + 'Use for backgrounds communicating critical information, when hovered.', }, 'color-bg-surface-critical-active': { value: colors.red[6], + description: + 'Use for backgrounds communicating critical information, when pressed.', }, 'color-bg-surface-emphasis': { value: colors.blue[3], @@ -359,312 +406,472 @@ export const color: { }, 'color-bg-fill': { value: colors.gray[1], + description: + 'Use for the background color of contained elements with a smaller surface area, like a button.', }, 'color-bg-fill-hover': { value: colors.gray[3], + description: + 'Use for the background color of contained elements with a smaller surface area, like a button, when hovered.', }, 'color-bg-fill-active': { value: colors.gray[4], + description: + 'Use for the background color of contained elements with a smaller surface area, like a button, when pressed.', }, 'color-bg-fill-selected': { value: colors.gray[10], + description: + 'Use for the background color of contained elements with a smaller surface area, like a button, when selected.', }, 'color-bg-fill-disabled': { value: colors.blackAlpha[5], + description: + 'Use for backgrounds of contained elements in a disabled state, like a button or tag.', }, 'color-bg-fill-secondary': { value: colors.gray[6], + description: + 'Use for the background color of elements with a smaller surface area and a medium level of prominence.', }, 'color-bg-fill-secondary-hover': { value: colors.gray[7], + description: + 'Use for the background color of elements with a smaller surface area and a medium level of prominence, when hovered.', }, 'color-bg-fill-secondary-active': { value: colors.gray[8], + description: + 'Use for the background color of elements with a smaller surface area and a medium level of prominence, when pressed.', }, 'color-bg-fill-tertiary': { value: colors.gray[8], + description: + 'Use for the background color of elements with a smaller surface area and a low level of prominence.', }, 'color-bg-fill-tertiary-hover': { value: colors.gray[9], + description: + 'Use for the background color of elements with a smaller surface area and a low level of prominence, when hovered.', }, 'color-bg-fill-tertiary-active': { value: colors.gray[10], + description: + 'Use for the background color of elements with a smaller surface area and a low level of prominence, when pressed.', }, 'color-bg-fill-brand': { value: colors.gray[15], + description: 'Use to pull focus to main actions, like primary buttons.', }, 'color-bg-fill-brand-hover': { value: colors.gray[16], + description: + 'Use to pull focus to main actions, like primary buttons, when hovered.', }, 'color-bg-fill-brand-active': { value: colors.gray[16], + description: + 'Use to pull focus to main actions, like primary buttons, when pressed.', }, 'color-bg-fill-brand-selected': { value: colors.gray[15], + description: + 'Use to pull focus to main actions, like primary buttons or checkboxes, when selected.', }, 'color-bg-fill-brand-disabled': { value: colors.blackAlpha[9], + description: + 'Use for backgrounds of main actions in a disabled state, like primary buttosn.', }, 'color-bg-fill-info': { value: colors.azure[9], + description: + 'Use for the background color of elements with a smaller surface area communicating important information, like a badge or button.', }, 'color-bg-fill-info-hover': { value: colors.azure[10], + description: + 'Use for the background color of elements with a smaller surface area communicating important information, when hovered.', }, 'color-bg-fill-info-active': { value: colors.azure[11], + description: + 'Use for the background color of elements with a smaller surface area communicating important information, when pressed.', }, 'color-bg-fill-info-secondary': { value: colors.azure[4], + description: + 'Use for the background color of elements with a smaller surface area communicating important information, with a medium level of prominence.', }, 'color-bg-fill-success': { value: colors.green[12], + description: `Use for the background color of elements with a smaller surface area communicating success, like a badge or a banner.`, }, 'color-bg-fill-success-hover': { value: colors.green[13], + description: + 'Use for the background color of elements with a smaller surface area communicating success, when hovered.', }, 'color-bg-fill-success-active': { value: colors.green[14], + description: + 'Use for the background color of elements with a smaller surface area communicating success, when pressed.', }, 'color-bg-fill-success-secondary': { value: colors.green[3], + description: + 'Use for the background color of elements with a smaller surface area communicating success, with a medium level of prominence.', }, 'color-bg-fill-warning': { value: colors.orange[9], + description: + 'Use for the background color of elements with a smaller surface area communicating warning, like a badge or a banner.', }, 'color-bg-fill-warning-hover': { value: colors.orange[10], + description: + 'Use for the background color of elements with a smaller surface area communicating warning, when hovered.', }, 'color-bg-fill-warning-active': { value: colors.orange[11], + description: + 'Use for the background color of elements with a smaller surface area communicating warning, when pressed.', }, 'color-bg-fill-warning-secondary': { value: colors.orange[7], + description: + 'Use for the background color of elements with a smaller surface area communicating warning, with a medium level of prominence.', }, 'color-bg-fill-caution': { value: colors.yellow[6], + description: + 'Use for the background color of elements with a smaller surface area communicating caution, like a badge or a banner.', }, 'color-bg-fill-caution-hover': { value: colors.yellow[8], + description: + 'Use for the background color of elements with a smaller surface area communicating caution, when hovered.', }, 'color-bg-fill-caution-active': { value: colors.yellow[9], + description: `Use for the background color of elements with a smaller surface area communicating caution, when pressed.`, }, 'color-bg-fill-caution-secondary': { value: colors.yellow[4], + description: + 'Use for the background color of elements with a smaller surface area communicating caution, with a medium level of prominence.', }, 'color-bg-fill-critical': { value: colors.red[12], + description: + 'Use for the background color of elements with a smaller surface area communicating critical information, like a button or a badge.', }, 'color-bg-fill-critical-hover': { value: colors.red[13], + description: + 'Use for the background color of elements with a smaller surface area communicating critical information, when hovered.', }, 'color-bg-fill-critical-active': { value: colors.red[14], + description: + 'Use for the background color of elements with a smaller surface area communicating critical information, when pressed.', }, 'color-bg-fill-critical-selected': { value: colors.red[14], + description: + 'Use for the background color of elements with a smaller surface area communicating critical information, when selected.', }, 'color-bg-fill-critical-secondary': { value: colors.red[6], + description: + 'Use for the background color of elements with a smaller surface area communicating critical information, with a medium level of prominence.', }, 'color-bg-fill-emphasis': { value: colors.blue[13], + description: + 'Use for the background color of elements with a smaller surface area with a high level of prominence, like a button or a badge.', }, 'color-bg-fill-emphasis-hover': { value: colors.blue[14], + description: + 'Use for the background color of elements with a smaller surface area with a high level of prominence, when hovered.', }, 'color-bg-fill-emphasis-active': { value: colors.blue[15], + description: + 'Use for the background color of elements with a smaller surface area with a high level of prominence, when pressed.', }, 'color-bg-fill-magic': { value: colors.purple[12], + description: + 'Use for the background color of elements suggested by magic AI, like a suggested product tag.', }, 'color-bg-fill-magic-secondary': { value: colors.purple[6], + description: + 'Use for the background color of elements suggested by magic AI, with a medium level of prominence.', }, 'color-bg-fill-magic-secondary-hover': { value: colors.purple[7], + description: + 'Use for the background color of elements suggested by magic AI, with a medium level of prominence, when hovered.', }, 'color-bg-fill-magic-secondary-active': { value: colors.purple[8], + description: + 'Use for the background color of elements suggested by magic AI, with a medium level of prominence, when pressed.', }, 'color-bg-fill-inverse': { value: colors.gray[15], + description: + 'Use for the background color of elements with a smaller surface area on a dark background.', }, 'color-bg-fill-inverse-hover': { value: colors.gray[14], + description: + 'Use for the background color of elements with a smaller surface area on a dark background, when hovered.', }, 'color-bg-fill-inverse-active': { value: colors.gray[13], + description: + 'Use for the background color of elements with a smaller surface area on a dark background, when pressed.', }, 'color-bg-fill-transparent': { value: colors.blackAlpha[3], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs.', }, 'color-bg-fill-transparent-hover': { value: colors.blackAlpha[5], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, when hovered.', }, 'color-bg-fill-transparent-active': { value: colors.blackAlpha[7], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, when pressed.', }, 'color-bg-fill-transparent-selected': { value: colors.blackAlpha[7], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, when selected.', }, 'color-bg-fill-transparent-secondary': { value: colors.blackAlpha[6], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence.', }, 'color-bg-fill-transparent-secondary-hover': { value: colors.blackAlpha[7], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence, when hovered.', }, 'color-bg-fill-transparent-secondary-active': { value: colors.blackAlpha[8], + description: + 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence, when pressed.', }, 'color-text': { value: colors.gray[15], + description: 'Use for the default text color.', }, 'color-text-secondary': { value: colors.gray[13], + description: 'Use for text with lower prominence.', }, 'color-text-disabled': { value: colors.gray[11], + description: 'Use for text in a disabled state.', }, 'color-text-link': { value: colors.blue[13], + description: 'Use for text links.', }, 'color-text-link-hover': { value: colors.blue[14], + description: 'Use for text links when hovered.', }, 'color-text-link-active': { value: colors.blue[15], + description: 'Use for text links when pressed.', }, 'color-text-brand': { value: colors.gray[14], + description: 'Use for text that needs to pull attention.', }, 'color-text-brand-hover': { value: colors.gray[15], + description: 'Use for text that needs to pull attention, when hovered.', }, 'color-text-brand-on-bg-fill': { value: colors.gray[1], + description: 'Use for text on bg-fill-brand, like primary buttons.', }, 'color-text-brand-on-bg-fill-hover': { value: colors.gray[8], + description: 'Use for text on bg-fill-brand-hover, when hovered.', }, 'color-text-brand-on-bg-fill-active': { value: colors.gray[10], + description: 'Use for text on bg-fill-brand-active, when pressed.', }, 'color-text-brand-on-bg-fill-disabled': { value: colors.gray[1], + description: 'Use for disabled text on bg-fill-brand-disabled.', }, 'color-text-info': { value: colors.azure[14], + description: 'Use for text communicating important information.', }, 'color-text-info-hover': { value: colors.azure[15], + description: + 'Use for text communicating important information, when hovered.', }, 'color-text-info-active': { value: colors.azure[16], + description: + 'Use for text communicating important information, when pressed.', }, 'color-text-info-on-bg-fill': { value: colors.azure[16], + description: 'Use for text and icons on bg-fill-info.', }, 'color-text-success': { value: colors.green[14], + description: 'Use for text communicating success.', }, 'color-text-success-hover': { value: colors.green[15], + description: 'Use for text communicating success, when hovered.', }, 'color-text-success-active': { value: colors.green[16], + description: 'Use for text communicating success, when pressed.', }, 'color-text-success-on-bg-fill': { value: colors.green[1], + description: 'Use for text and icons on bg-fill-success.', }, 'color-text-caution': { value: colors.yellow[14], + description: 'Use for text communicating caution.', }, 'color-text-caution-hover': { value: colors.yellow[15], + description: 'Use for text communicating caution, when hovered.', }, 'color-text-caution-active': { value: colors.yellow[16], + description: 'Use for text communicating caution, when pressed.', }, 'color-text-caution-on-bg-fill': { value: colors.yellow[15], + description: 'Use for text and icons on bg-fill-caution.', }, 'color-text-warning': { value: colors.orange[14], + description: 'Use for text communicating warning.', }, 'color-text-warning-hover': { value: colors.orange[15], + description: 'Use for text communicating warning, when hovered.', }, 'color-text-warning-active': { value: colors.orange[16], + description: 'Use for text communicating warning, when pressed.', }, 'color-text-warning-on-bg-fill': { value: colors.orange[16], + description: 'Use for text and icons on bg-fill-warning.', }, 'color-text-critical': { value: colors.red[14], + description: 'Use for text communicating critical information.', }, 'color-text-critical-hover': { value: colors.red[15], + description: + 'Use for text communicating critical information, when hovered.', }, 'color-text-critical-active': { value: colors.red[16], + description: + 'Use for text communicating critical information, when pressed.', }, 'color-text-critical-on-bg-fill': { value: colors.red[1], + description: 'Use for text and icons on bg-fill-critical.', }, 'color-text-emphasis': { value: colors.blue[13], + description: 'Use for text with the highest level of prominence.', }, 'color-text-emphasis-hover': { value: colors.blue[14], + description: + 'Use for text with the highest level of prominence, when hovered.', }, 'color-text-emphasis-active': { value: colors.blue[15], + description: + 'Use for text with the highest level of prominence, when pressed.', }, 'color-text-emphasis-on-bg-fill': { value: colors.blue[1], + description: 'Use for text and icons on bg-fill-emphasis.', }, 'color-text-emphasis-on-bg-fill-hover': { value: colors.blue[5], + description: 'Use for text and icons on bg-fill-emphasis-hover.', }, 'color-text-emphasis-on-bg-fill-active': { value: colors.blue[7], + description: 'Use for text and icons on bg-fill-emphasis-active.', }, 'color-text-magic': { value: colors.purple[14], + description: 'Use for text suggested by magic AI.', }, 'color-text-magic-on-bg-fill': { value: colors.purple[1], + description: 'Use for text and icons on bg-fill-magic.', }, 'color-text-inverse': { value: colors.gray[8], + description: 'Use for text on a dark background.', }, 'color-text-inverse-secondary': { value: colors.gray[11], + description: 'Use for secondary text on a dark background.', }, 'color-text-link-inverse': { value: colors.blue[8], + description: 'Use for text links on a dark background.', }, 'color-border': { value: colors.gray[8], + description: 'Use as the default color for borders on any element.', }, 'color-border-hover': { value: colors.gray[10], + description: 'Use as the hover color for borders on any element.', }, 'color-border-disabled': { value: colors.gray[7], + description: 'Use as the disabled color for borders on any element.', }, 'color-border-secondary': { value: colors.gray[7], + description: + 'Used as the default color for hr elements or any visual dividers.', }, 'color-border-tertiary': { value: colors.gray[10], }, 'color-border-focus': { value: colors.blue[13], + description: 'Use as the focus color for any interactive element.', }, 'color-border-brand': { value: colors.gray[8], From 1181a4ccac941a4478acb346900516ac45b586df Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Thu, 12 Oct 2023 15:36:20 -0700 Subject: [PATCH 2/7] Update color.ts --- polaris-tokens/src/themes/base/color.ts | 59 ++++++++++++++++++++----- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 5e642e046a6..93e93d5aced 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -241,7 +241,7 @@ export const color: { 'color-bg-inverse': { value: colors.gray[16], description: - 'Use for the background of components that appear on a dark background.', + 'Use for the background of components that appear on an inverse background.', }, 'color-bg-surface': { value: colors.gray[1], @@ -624,17 +624,17 @@ export const color: { 'color-bg-fill-inverse': { value: colors.gray[15], description: - 'Use for the background color of elements with a smaller surface area on a dark background.', + 'Use for the background color of elements with a smaller surface area on an inverse background.', }, 'color-bg-fill-inverse-hover': { value: colors.gray[14], description: - 'Use for the background color of elements with a smaller surface area on a dark background, when hovered.', + 'Use for the background color of elements with a smaller surface area on an inverse background, when hovered.', }, 'color-bg-fill-inverse-active': { value: colors.gray[13], description: - 'Use for the background color of elements with a smaller surface area on a dark background, when pressed.', + 'Use for the background color of elements with a smaller surface area on an inverse background, when pressed.', }, 'color-bg-fill-transparent': { value: colors.blackAlpha[3], @@ -839,15 +839,15 @@ export const color: { }, 'color-text-inverse': { value: colors.gray[8], - description: 'Use for text on a dark background.', + description: 'Use for text on an inverse background.', }, 'color-text-inverse-secondary': { value: colors.gray[11], - description: 'Use for secondary text on a dark background.', + description: 'Use for secondary text on an inverse background.', }, 'color-text-link-inverse': { value: colors.blue[8], - description: 'Use for text links on a dark background.', + description: 'Use for text links on an inverse background.', }, 'color-border': { value: colors.gray[8], @@ -863,114 +863,153 @@ export const color: { }, 'color-border-secondary': { value: colors.gray[7], - description: - 'Used as the default color for hr elements or any visual dividers.', + description: 'Use as the color for hr elements or any visual dividers.', }, 'color-border-tertiary': { value: colors.gray[10], + description: + 'Use as the border color on any element. Pair with bg-surface-tertiary or bg-fill-tertiary.', }, 'color-border-focus': { value: colors.blue[13], - description: 'Use as the focus color for any interactive element.', + description: + 'Use for the focus ring for any interactive element in a focused state.', }, 'color-border-brand': { value: colors.gray[8], }, 'color-border-info': { value: colors.azure[8], + description: 'Use for borders communicating information.', }, 'color-border-success': { value: colors.green[5], + description: 'Use for borders communicating success.', }, 'color-border-caution': { value: colors.yellow[5], + description: 'Use for borders communicating caution.', }, 'color-border-warning': { value: colors.orange[8], + description: 'Use for borders communicating warning.', }, 'color-border-critical': { value: colors.red[8], + description: 'Use for borders communicating critical information.', }, 'color-border-critical-secondary': { value: colors.red[14], + description: + 'Use for borders communicating critical information, such as borders on invalid text fields.', }, 'color-border-emphasis': { value: colors.blue[13], + description: 'Use for borders indicating areas of focus.', }, 'color-border-emphasis-hover': { value: colors.blue[14], + description: 'Use for borders indicating areas of focus, when hovered.', }, 'color-border-emphasis-active': { value: colors.blue[15], + description: 'Use for borders indicating areas of focus, when pressed.', }, 'color-border-magic': { value: colors.purple[10], + description: 'Use for borders suggested by magic AI.', }, 'color-border-magic-secondary': { value: colors.purple[12], + description: + 'Use for borders suggested by magic AI, such as borders on text fields.', }, 'color-border-inverse': { value: colors.gray[13], + description: + 'Use for borders on an inverse background, such as borders on the global search.', }, 'color-border-inverse-hover': { value: colors.gray[10], + description: 'Use for borders on an inverse background, when hovered.', }, 'color-border-inverse-active': { value: colors.gray[8], + description: 'Use for borders on an inverse background, when pressed.', }, 'color-icon': { value: colors.gray[14], + description: 'Use as the default color for icons.', }, 'color-icon-hover': { value: colors.gray[15], + description: 'Use as the hover state for icons.', }, 'color-icon-active': { value: colors.gray[16], + description: 'Use as the active state color for icons.', }, 'color-icon-disabled': { value: colors.gray[10], + description: 'Use as the disabled state color for icons.', }, 'color-icon-secondary': { value: colors.gray[12], + description: 'Use for secondary icons.', }, 'color-icon-secondary-hover': { value: colors.gray[13], + description: 'Use for secondary icons, when hovered.', }, 'color-icon-secondary-active': { value: colors.gray[14], + description: 'Use for secondary icons, when pressed.', }, 'color-icon-brand': { value: colors.gray[16], + description: 'Use for brand icons.', }, 'color-icon-info': { value: colors.azure[11], + description: 'Use for icons communicating information.', }, 'color-icon-success': { value: colors.green[12], + description: 'Use for icons communicating success.', }, 'color-icon-caution': { value: colors.yellow[11], + description: 'Use for icons communicating caution.', }, 'color-icon-warning': { value: colors.orange[11], + description: 'Use for icons communicating warning.', }, 'color-icon-critical': { value: colors.red[11], + description: 'Use for icons communicating critical information.', }, 'color-icon-emphasis': { value: colors.blue[13], + description: 'Use for icons with the highest level of prominence.', }, 'color-icon-emphasis-hover': { value: colors.blue[14], + description: + 'Use for icons with the highest level of prominence, when hovered.', }, 'color-icon-emphasis-active': { value: colors.blue[15], + description: + 'Use for icons with the highest level of prominence, when pressed.', }, 'color-icon-magic': { value: colors.purple[12], + description: 'Use for icons suggested by magic AI.', }, 'color-icon-inverse': { value: colors.gray[8], + description: 'Use for icons on an inverse background.', }, 'color-avatar-bg-fill': { value: colors.gray[11], From 3d333bafaa5aee097deb5a9508365eccc3667455 Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Thu, 12 Oct 2023 16:56:36 -0700 Subject: [PATCH 3/7] Update color.ts --- polaris-tokens/src/themes/base/color.ts | 263 +++++++++++++----------- 1 file changed, 142 insertions(+), 121 deletions(-) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 93e93d5aced..1f9aa430798 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -240,79 +240,82 @@ export const color: { }, 'color-bg-inverse': { value: colors.gray[16], - description: - 'Use for the background of components that appear on an inverse background.', + description: 'Use for high contrast page or component backgrounds.', }, 'color-bg-surface': { value: colors.gray[1], description: - 'The background color for elements with the highest level of prominence, like a card or a banner. .', + 'The background color for elements with the highest level of prominence, like a card.', }, 'color-bg-surface-hover': { value: colors.gray[4], description: - 'The background color for elements with the highest level of prominence, like a card or a banner, when hovered.', + 'The hover state color for elements with the highest level of prominence.', }, 'color-bg-surface-active': { value: colors.gray[5], description: - 'The background color for elements with the highest level of prominence, like a card or a banner, when pressed.', + 'The active state (on press) color for elements with the highest level of prominence.', }, 'color-bg-surface-selected': { value: colors.gray[6], description: - 'The background color for elements with the highest level of prominence, like a card or a banner, when selected.', + 'The selected state color for elements with the highest level of prominence.', }, 'color-bg-surface-disabled': { value: colors.blackAlpha[5], - description: 'Use for backgrounds of elements in a disabled state.', + description: 'The disabled state color for elements.', }, 'color-bg-surface-secondary': { value: colors.gray[4], description: - 'The background color for elements with a medium level of prominence.', + 'The background color for elements with a secondary level of prominence.', }, 'color-bg-surface-secondary-hover': { value: colors.gray[6], description: - 'The background color for elements with a medium level of prominence, when hovered.', + 'The hover state color for elements with a secondary level of prominence.', }, 'color-bg-surface-secondary-active': { value: colors.gray[7], description: - 'The background color for elements with a medium level of prominence, when pressed.', + 'The active state (on press) color for elements with a secondary level of prominence.', }, 'color-bg-surface-secondary-selected': { value: colors.gray[7], description: - 'The background color for elements with a medium level of prominence, when selected.', + 'The selected state color for elements with a secondary level of prominence.', }, 'color-bg-surface-tertiary': { value: colors.gray[5], description: - 'The background color for elements with a low level of prominence.', + 'The background color for elements with a third level of prominence.', }, 'color-bg-surface-tertiary-hover': { value: colors.gray[7], description: - 'The background color for elements with a low level of prominence, when hovered.', + 'The hover state color for elements with a third level of prominence.', }, 'color-bg-surface-tertiary-active': { value: colors.gray[8], description: - 'The background color for elements with a low level of prominence, when pressed.', + 'The active state (on press) color for elements with a third level of prominence.', }, 'color-bg-surface-brand': { value: colors.gray[8], + description: 'Use to apply the key color to elements.', }, 'color-bg-surface-brand-hover': { value: colors.gray[7], + description: 'The hover state color for key elements.', }, 'color-bg-surface-brand-active': { value: colors.gray[6], + description: 'The active state (on press) color for key elements.', }, 'color-bg-surface-brand-selected': { value: colors.gray[6], + description: 'The selected state color for key elements.', }, 'color-bg-surface-info': { value: colors.azure[3], @@ -322,12 +325,12 @@ export const color: { 'color-bg-surface-info-hover': { value: colors.azure[4], description: - 'Use for backgrounds communicating important information, when hovered.', + 'The hover state color for communicating important information.', }, 'color-bg-surface-info-active': { value: colors.azure[6], description: - 'Use for backgrounds communicating important information, when pressed.', + 'The active state (on press) color for communicating important information.', }, 'color-bg-surface-success': { value: colors.green[3], @@ -335,11 +338,11 @@ export const color: { }, 'color-bg-surface-success-hover': { value: colors.green[4], - description: 'Use for backgrounds communicating success, when hovered.', + description: 'The hover sate color for communicating success.', }, 'color-bg-surface-success-active': { value: colors.green[5], - description: 'Use for backgrounds communicating success, when pressed.', + description: 'The active state (on press) color for communicating success.', }, 'color-bg-surface-caution': { value: colors.yellow[2], @@ -347,11 +350,11 @@ export const color: { }, 'color-bg-surface-caution-hover': { value: colors.yellow[3], - description: 'Use for backgrounds communicating caution, when hovered.', + description: 'The hover sate for communicating caution.', }, 'color-bg-surface-caution-active': { value: colors.yellow[4], - description: 'Use for backgrounds communicating caution, when pressed.', + description: 'The active state (on press) color for communicating caution.', }, 'color-bg-surface-warning': { value: colors.orange[3], @@ -359,11 +362,11 @@ export const color: { }, 'color-bg-surface-warning-hover': { value: colors.orange[4], - description: 'Use for backgrounds communicating warning, when hovered.', + description: 'The hover state color for communicating warning.', }, 'color-bg-surface-warning-active': { value: colors.orange[5], - description: 'Use for backgrounds communicating warning, when pressed.', + description: 'The active state (on press) color for communicating warning.', }, 'color-bg-surface-critical': { value: colors.red[4], @@ -373,311 +376,323 @@ export const color: { 'color-bg-surface-critical-hover': { value: colors.red[5], description: - 'Use for backgrounds communicating critical information, when hovered.', + 'The hover state color for communicating critical information.', }, 'color-bg-surface-critical-active': { value: colors.red[6], description: - 'Use for backgrounds communicating critical information, when pressed.', + 'The active state (on press) color for communicating critical information.', }, 'color-bg-surface-emphasis': { value: colors.blue[3], + description: + 'Use for backgrounds indicating areas of focus in editors, such as the theme editor.', }, 'color-bg-surface-emphasis-hover': { value: colors.blue[4], + description: + 'The hover state color for elements indicating areas of focus in editors.', }, 'color-bg-surface-emphasis-active': { value: colors.blue[5], + description: + 'The active state (on press) color for elements indicating areas of focus in editors.', }, 'color-bg-surface-magic': { value: colors.purple[3], + description: 'Use for backgrounds of elements suggested by magic AI.', }, 'color-bg-surface-magic-hover': { value: colors.purple[4], + description: 'The hover state color for elements suggested by magic AI.', }, 'color-bg-surface-magic-active': { value: colors.purple[6], + description: + 'The active state (on press) color for elements suggested by magic AI.', }, 'color-bg-surface-inverse': { value: colors.gray[15], + description: 'Use for elements on bg-inverse.', }, 'color-bg-surface-transparent': { value: colors.blackAlpha[1], + description: 'Use for elements that need a fully transparent background.', }, 'color-bg-fill': { value: colors.gray[1], description: - 'Use for the background color of contained elements with a smaller surface area, like a button.', + 'The background color of contained elements with a smaller surface area, like a button.', }, 'color-bg-fill-hover': { value: colors.gray[3], description: - 'Use for the background color of contained elements with a smaller surface area, like a button, when hovered.', + 'The hover state color of contained elements with a smaller surface area, like a button.', }, 'color-bg-fill-active': { value: colors.gray[4], description: - 'Use for the background color of contained elements with a smaller surface area, like a button, when pressed.', + 'The active state (on press) color of contained elements with a smaller surface area, like a button.', }, 'color-bg-fill-selected': { value: colors.gray[10], description: - 'Use for the background color of contained elements with a smaller surface area, like a button, when selected.', + 'The selected state color of contained elements with a smaller surface area, like a button or checkbox.', }, 'color-bg-fill-disabled': { value: colors.blackAlpha[5], description: - 'Use for backgrounds of contained elements in a disabled state, like a button or tag.', + 'The disabled state color of contained elements with a smaller surface area, like a button.', }, 'color-bg-fill-secondary': { value: colors.gray[6], description: - 'Use for the background color of elements with a smaller surface area and a medium level of prominence.', + 'The background color of elements with a smaller surface area and a secondary level of prominence.', }, 'color-bg-fill-secondary-hover': { value: colors.gray[7], description: - 'Use for the background color of elements with a smaller surface area and a medium level of prominence, when hovered.', + 'The hover state color of elements with a smaller surface area and a secondary level of prominence.', }, 'color-bg-fill-secondary-active': { value: colors.gray[8], description: - 'Use for the background color of elements with a smaller surface area and a medium level of prominence, when pressed.', + 'The active state (on press) color of elements with a smaller surface area and a secondary level of prominence.', }, 'color-bg-fill-tertiary': { value: colors.gray[8], description: - 'Use for the background color of elements with a smaller surface area and a low level of prominence.', + 'The background color of elements with a smaller surface area and a third level of prominence.', }, 'color-bg-fill-tertiary-hover': { value: colors.gray[9], description: - 'Use for the background color of elements with a smaller surface area and a low level of prominence, when hovered.', + 'The hover state color of elements with a smaller surface area and a third level of prominence.', }, 'color-bg-fill-tertiary-active': { value: colors.gray[10], description: - 'Use for the background color of elements with a smaller surface area and a low level of prominence, when pressed.', + 'The active state (on press) color of elements with a smaller surface area and a third level of prominence.', }, 'color-bg-fill-brand': { value: colors.gray[15], - description: 'Use to pull focus to main actions, like primary buttons.', + description: 'The background color of main actions, like primary buttons.', }, 'color-bg-fill-brand-hover': { value: colors.gray[16], - description: - 'Use to pull focus to main actions, like primary buttons, when hovered.', + description: 'The hover state color of main actions, like primary buttons.', }, 'color-bg-fill-brand-active': { value: colors.gray[16], description: - 'Use to pull focus to main actions, like primary buttons, when pressed.', + 'The active state (on press) color of main actions, like primary buttons.', }, 'color-bg-fill-brand-selected': { value: colors.gray[15], description: - 'Use to pull focus to main actions, like primary buttons or checkboxes, when selected.', + 'The selected state color of main actions, like primary buttons.', }, 'color-bg-fill-brand-disabled': { value: colors.blackAlpha[9], description: - 'Use for backgrounds of main actions in a disabled state, like primary buttosn.', + 'The disabled state color of main actions, like primary buttons.', }, 'color-bg-fill-info': { value: colors.azure[9], description: - 'Use for the background color of elements with a smaller surface area communicating important information, like a badge or button.', + 'Use for backgrounds communicating important information on elements with a smaller surface area, like a badge or button.', }, 'color-bg-fill-info-hover': { value: colors.azure[10], description: - 'Use for the background color of elements with a smaller surface area communicating important information, when hovered.', + 'The hover state color for communicating important informtion on elements with a smaller surface area.', }, 'color-bg-fill-info-active': { value: colors.azure[11], description: - 'Use for the background color of elements with a smaller surface area communicating important information, when pressed.', + 'The active state (on press) color for communicating important informtion on elements with a smaller surface area.', }, 'color-bg-fill-info-secondary': { value: colors.azure[4], description: - 'Use for the background color of elements with a smaller surface area communicating important information, with a medium level of prominence.', + 'Use for backgrounds communicating important information on elements with a smaller surface area, with a secondary level of prominence.', }, 'color-bg-fill-success': { value: colors.green[12], - description: `Use for the background color of elements with a smaller surface area communicating success, like a badge or a banner.`, + description: `Use for backgrounds communicating success on elements with a smaller surface area, like a badge or a banner.`, }, 'color-bg-fill-success-hover': { value: colors.green[13], description: - 'Use for the background color of elements with a smaller surface area communicating success, when hovered.', + 'The hover state color for communicating success on elements with a smaller surface area.', }, 'color-bg-fill-success-active': { value: colors.green[14], description: - 'Use for the background color of elements with a smaller surface area communicating success, when pressed.', + 'The active state (on press) color for communicating success on elements with a smaller surface area.', }, 'color-bg-fill-success-secondary': { value: colors.green[3], description: - 'Use for the background color of elements with a smaller surface area communicating success, with a medium level of prominence.', + 'Use for backgrounds communicating success on elements with a smaller surface area, with a secondary level of prominence.', }, 'color-bg-fill-warning': { value: colors.orange[9], description: - 'Use for the background color of elements with a smaller surface area communicating warning, like a badge or a banner.', + 'Use for backgrounds communicating warning on elements with a smaller surface area, like a badge or a banner.', }, 'color-bg-fill-warning-hover': { value: colors.orange[10], description: - 'Use for the background color of elements with a smaller surface area communicating warning, when hovered.', + 'The hover state color for communicating warning on elements with a smaller surface area.', }, 'color-bg-fill-warning-active': { value: colors.orange[11], description: - 'Use for the background color of elements with a smaller surface area communicating warning, when pressed.', + 'The active state (on press) color for communicating warning on elements with a smaller surface area.', }, 'color-bg-fill-warning-secondary': { value: colors.orange[7], description: - 'Use for the background color of elements with a smaller surface area communicating warning, with a medium level of prominence.', + 'Use for backgrounds communicating warning on elements with a smaller surface area, with a secondary level of prominence.', }, 'color-bg-fill-caution': { value: colors.yellow[6], description: - 'Use for the background color of elements with a smaller surface area communicating caution, like a badge or a banner.', + 'Use for backgrounds communicating caution on elements with a smaller surface area, like a badge or a banner.', }, 'color-bg-fill-caution-hover': { value: colors.yellow[8], description: - 'Use for the background color of elements with a smaller surface area communicating caution, when hovered.', + 'The hover state color for communicating caution on elements with a smaller surface area.', }, 'color-bg-fill-caution-active': { value: colors.yellow[9], - description: `Use for the background color of elements with a smaller surface area communicating caution, when pressed.`, + description: + 'The active state (on press) color for communicating caution on elements with a smaller surface area.', }, 'color-bg-fill-caution-secondary': { value: colors.yellow[4], description: - 'Use for the background color of elements with a smaller surface area communicating caution, with a medium level of prominence.', + 'Use for backgrounds communicating caution on elements with a smaller surface area, with a secondary level of prominence.', }, 'color-bg-fill-critical': { value: colors.red[12], description: - 'Use for the background color of elements with a smaller surface area communicating critical information, like a button or a badge.', + 'Use for backgrounds communicating critical information on elements with a smaller surface area, like a badge or a banner.', }, 'color-bg-fill-critical-hover': { value: colors.red[13], description: - 'Use for the background color of elements with a smaller surface area communicating critical information, when hovered.', + 'The hover state color for communicating critical information on elements with a smaller surface area.', }, 'color-bg-fill-critical-active': { value: colors.red[14], description: - 'Use for the background color of elements with a smaller surface area communicating critical information, when pressed.', + 'The active state (on press) color for communicating critical information on elements with a smaller surface area.', }, 'color-bg-fill-critical-selected': { value: colors.red[14], description: - 'Use for the background color of elements with a smaller surface area communicating critical information, when selected.', + 'The selected state color for communicating critical information on elements with a smaller surface area.', }, 'color-bg-fill-critical-secondary': { value: colors.red[6], description: - 'Use for the background color of elements with a smaller surface area communicating critical information, with a medium level of prominence.', + 'Use for backgrounds communicating critical information on elements with a smaller surface area, with a secondary level of prominence.', }, 'color-bg-fill-emphasis': { value: colors.blue[13], description: - 'Use for the background color of elements with a smaller surface area with a high level of prominence, like a button or a badge.', + 'Use for backgrounds indicating areas of focus in editors on elements with a smaller surface area, like a button or a badge.', }, 'color-bg-fill-emphasis-hover': { value: colors.blue[14], description: - 'Use for the background color of elements with a smaller surface area with a high level of prominence, when hovered.', + 'The hover state color for indicating areas of focus in editors on elements with a smaller surface area.', }, 'color-bg-fill-emphasis-active': { value: colors.blue[15], description: - 'Use for the background color of elements with a smaller surface area with a high level of prominence, when pressed.', + 'The active state (on press) color for indicating areas of focus in editors on elements with a smaller surface area.', }, 'color-bg-fill-magic': { value: colors.purple[12], description: - 'Use for the background color of elements suggested by magic AI, like a suggested product tag.', + 'The background color of elements suggested by magic AI, like a badge or a banner.', }, 'color-bg-fill-magic-secondary': { value: colors.purple[6], description: - 'Use for the background color of elements suggested by magic AI, with a medium level of prominence.', + 'The background color of elements suggested by magic AI, with a secondary level of prominence.', }, 'color-bg-fill-magic-secondary-hover': { value: colors.purple[7], description: - 'Use for the background color of elements suggested by magic AI, with a medium level of prominence, when hovered.', + 'The hover state color of elements suggested by magic AI, with a secondary level of prominence.', }, 'color-bg-fill-magic-secondary-active': { value: colors.purple[8], description: - 'Use for the background color of elements suggested by magic AI, with a medium level of prominence, when pressed.', + 'The active state (on press) color of elements suggested by magic AI, with a secondary level of prominence.', }, 'color-bg-fill-inverse': { value: colors.gray[15], description: - 'Use for the background color of elements with a smaller surface area on an inverse background.', + 'The background color of elements with a smaller surface area on an inverse background.', }, 'color-bg-fill-inverse-hover': { value: colors.gray[14], description: - 'Use for the background color of elements with a smaller surface area on an inverse background, when hovered.', + 'The hover state color of elements with a smaller surface area on an inverse background.', }, 'color-bg-fill-inverse-active': { value: colors.gray[13], description: - 'Use for the background color of elements with a smaller surface area on an inverse background, when pressed.', + 'The active state (on press) color of elements with a smaller surface area on an inverse background.', }, 'color-bg-fill-transparent': { value: colors.blackAlpha[3], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs.', + 'The background color of elements that need to sit on different background colors, like tabs.', }, 'color-bg-fill-transparent-hover': { value: colors.blackAlpha[5], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, when hovered.', + 'The hover state color of elements that need to sit on different background colors, like tabs.', }, 'color-bg-fill-transparent-active': { value: colors.blackAlpha[7], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, when pressed.', + 'The active state (on press) color of elements that need to sit on different background colors, like tabs.', }, 'color-bg-fill-transparent-selected': { value: colors.blackAlpha[7], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, when selected.', + 'The selected state color of elements that need to sit on different background colors, like tabs.', }, 'color-bg-fill-transparent-secondary': { value: colors.blackAlpha[6], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence.', + 'The background color of elements that need to sit on different background colors, with a secondary level of prominence.', }, 'color-bg-fill-transparent-secondary-hover': { value: colors.blackAlpha[7], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence, when hovered.', + 'The hover state color of elements that need to sit on different background colors, with a secondary level of prominence.', }, 'color-bg-fill-transparent-secondary-active': { value: colors.blackAlpha[8], description: - 'Use for the background color of elements that need to sit on different background colors, like tabs, with a medium level of prominence, when pressed.', + 'The active state (on press) color of elements that need to sit on different background colors, with a secondary level of prominence.', }, 'color-text': { value: colors.gray[15], - description: 'Use for the default text color.', + description: 'The default text color.', }, 'color-text-secondary': { value: colors.gray[13], - description: 'Use for text with lower prominence.', + description: 'Use for text with a secondary level of prominence.', }, 'color-text-disabled': { value: colors.gray[11], @@ -689,11 +704,11 @@ export const color: { }, 'color-text-link-hover': { value: colors.blue[14], - description: 'Use for text links when hovered.', + description: 'The hover state color for text links.', }, 'color-text-link-active': { value: colors.blue[15], - description: 'Use for text links when pressed.', + description: 'The active state (on press) color for text links.', }, 'color-text-brand': { value: colors.gray[14], @@ -701,7 +716,7 @@ export const color: { }, 'color-text-brand-hover': { value: colors.gray[15], - description: 'Use for text that needs to pull attention, when hovered.', + description: 'The hover state color for text that needs to pull attention.', }, 'color-text-brand-on-bg-fill': { value: colors.gray[1], @@ -709,15 +724,15 @@ export const color: { }, 'color-text-brand-on-bg-fill-hover': { value: colors.gray[8], - description: 'Use for text on bg-fill-brand-hover, when hovered.', + description: 'The hover state color for text on bg-fill-brand-hover.', }, 'color-text-brand-on-bg-fill-active': { value: colors.gray[10], - description: 'Use for text on bg-fill-brand-active, when pressed.', + description: 'The active state (on press) color for text on bg-fill-brand.', }, 'color-text-brand-on-bg-fill-disabled': { value: colors.gray[1], - description: 'Use for disabled text on bg-fill-brand-disabled.', + description: 'The disabled state color for text on bg-fill-brand-disabled.', }, 'color-text-info': { value: colors.azure[14], @@ -726,12 +741,12 @@ export const color: { 'color-text-info-hover': { value: colors.azure[15], description: - 'Use for text communicating important information, when hovered.', + 'The hover state color for text communicating important information.', }, 'color-text-info-active': { value: colors.azure[16], description: - 'Use for text communicating important information, when pressed.', + 'The active state (on press) color for text communicating important information.', }, 'color-text-info-on-bg-fill': { value: colors.azure[16], @@ -743,11 +758,12 @@ export const color: { }, 'color-text-success-hover': { value: colors.green[15], - description: 'Use for text communicating success, when hovered.', + description: 'The hover sate color for text communicating success.', }, 'color-text-success-active': { value: colors.green[16], - description: 'Use for text communicating success, when pressed.', + description: + 'The active state (on press) color for text communicating success.', }, 'color-text-success-on-bg-fill': { value: colors.green[1], @@ -759,11 +775,12 @@ export const color: { }, 'color-text-caution-hover': { value: colors.yellow[15], - description: 'Use for text communicating caution, when hovered.', + description: 'The hover state color for text communicating caution.', }, 'color-text-caution-active': { value: colors.yellow[16], - description: 'Use for text communicating caution, when pressed.', + description: + 'The active state (on press) color for text communicating caution.', }, 'color-text-caution-on-bg-fill': { value: colors.yellow[15], @@ -775,11 +792,12 @@ export const color: { }, 'color-text-warning-hover': { value: colors.orange[15], - description: 'Use for text communicating warning, when hovered.', + description: 'The hover state color for text communicating warning.', }, 'color-text-warning-active': { value: colors.orange[16], - description: 'Use for text communicating warning, when pressed.', + description: + 'The active state (on press) color for text communicating warning.', }, 'color-text-warning-on-bg-fill': { value: colors.orange[16], @@ -792,12 +810,12 @@ export const color: { 'color-text-critical-hover': { value: colors.red[15], description: - 'Use for text communicating critical information, when hovered.', + 'The hover state color for text communicating critical information.', }, 'color-text-critical-active': { value: colors.red[16], description: - 'Use for text communicating critical information, when pressed.', + 'The active state (on press) color for text communicating critical information.', }, 'color-text-critical-on-bg-fill': { value: colors.red[1], @@ -805,17 +823,17 @@ export const color: { }, 'color-text-emphasis': { value: colors.blue[13], - description: 'Use for text with the highest level of prominence.', + description: + 'Use for text indicating areas of focus in editors, like the theme editor.', }, 'color-text-emphasis-hover': { value: colors.blue[14], - description: - 'Use for text with the highest level of prominence, when hovered.', + description: 'The hover state color for text indicating areas of focus.', }, 'color-text-emphasis-active': { value: colors.blue[15], description: - 'Use for text with the highest level of prominence, when pressed.', + 'The active state (on press) color for text indicating areas of focus.', }, 'color-text-emphasis-on-bg-fill': { value: colors.blue[1], @@ -851,29 +869,29 @@ export const color: { }, 'color-border': { value: colors.gray[8], - description: 'Use as the default color for borders on any element.', + description: 'The default color for borders on any element.', }, 'color-border-hover': { value: colors.gray[10], - description: 'Use as the hover color for borders on any element.', + description: 'The hover color for borders on any element.', }, 'color-border-disabled': { value: colors.gray[7], - description: 'Use as the disabled color for borders on any element.', + description: 'The disabled color for borders on any element.', }, 'color-border-secondary': { value: colors.gray[7], - description: 'Use as the color for hr elements or any visual dividers.', + description: 'The color for hr elements or any visual dividers.', }, 'color-border-tertiary': { value: colors.gray[10], description: - 'Use as the border color on any element. Pair with bg-surface-tertiary or bg-fill-tertiary.', + 'The border color on any element. Pair with bg-surface-tertiary or bg-fill-tertiary.', }, 'color-border-focus': { value: colors.blue[13], description: - 'Use for the focus ring for any interactive element in a focused state.', + 'The focus ring for any interactive element in a focused state.', }, 'color-border-brand': { value: colors.gray[8], @@ -909,11 +927,12 @@ export const color: { }, 'color-border-emphasis-hover': { value: colors.blue[14], - description: 'Use for borders indicating areas of focus, when hovered.', + description: 'The hover state color for borders indicating areas of focus.', }, 'color-border-emphasis-active': { value: colors.blue[15], - description: 'Use for borders indicating areas of focus, when pressed.', + description: + 'The active state (on press) color for borders indicating areas of focus.', }, 'color-border-magic': { value: colors.purple[10], @@ -931,27 +950,28 @@ export const color: { }, 'color-border-inverse-hover': { value: colors.gray[10], - description: 'Use for borders on an inverse background, when hovered.', + description: 'The hover state color for borders on an inverse background.', }, 'color-border-inverse-active': { value: colors.gray[8], - description: 'Use for borders on an inverse background, when pressed.', + description: + 'The active state (on press) color for borders on an inverse background.', }, 'color-icon': { value: colors.gray[14], - description: 'Use as the default color for icons.', + description: 'The default color for icons.', }, 'color-icon-hover': { value: colors.gray[15], - description: 'Use as the hover state for icons.', + description: 'The hover state color for icons.', }, 'color-icon-active': { value: colors.gray[16], - description: 'Use as the active state color for icons.', + description: 'The active state (on press) color for icons.', }, 'color-icon-disabled': { value: colors.gray[10], - description: 'Use as the disabled state color for icons.', + description: 'The disabled state color for icons.', }, 'color-icon-secondary': { value: colors.gray[12], @@ -959,15 +979,15 @@ export const color: { }, 'color-icon-secondary-hover': { value: colors.gray[13], - description: 'Use for secondary icons, when hovered.', + description: 'The hover state color for secondary icons.', }, 'color-icon-secondary-active': { value: colors.gray[14], - description: 'Use for secondary icons, when pressed.', + description: 'The active state (on press) color for secondary icons.', }, 'color-icon-brand': { value: colors.gray[16], - description: 'Use for brand icons.', + description: 'Use for icons that need to pull more focus.', }, 'color-icon-info': { value: colors.azure[11], @@ -991,17 +1011,18 @@ export const color: { }, 'color-icon-emphasis': { value: colors.blue[13], - description: 'Use for icons with the highest level of prominence.', + description: + 'Use for icons indicating areas of focus in editors, like the theme editor.', }, 'color-icon-emphasis-hover': { value: colors.blue[14], description: - 'Use for icons with the highest level of prominence, when hovered.', + 'The hover color for icons indicating areas of focus in editors.', }, 'color-icon-emphasis-active': { value: colors.blue[15], description: - 'Use for icons with the highest level of prominence, when pressed.', + 'The active state (on press) color for icons indicating areas of focus in editors.', }, 'color-icon-magic': { value: colors.purple[12], From 06ba8f676113253e25be85d5454505f412390e74 Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Thu, 12 Oct 2023 17:01:48 -0700 Subject: [PATCH 4/7] Update color.ts --- polaris-tokens/src/themes/base/color.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 1f9aa430798..780a3cc81ce 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -895,6 +895,7 @@ export const color: { }, 'color-border-brand': { value: colors.gray[8], + description: 'Use for borders paired with brand colors.', }, 'color-border-info': { value: colors.azure[8], From ab1b0357d380c24c8efe64e3a10834d8754170f5 Mon Sep 17 00:00:00 2001 From: Sara Hill Date: Thu, 12 Oct 2023 17:05:15 -0700 Subject: [PATCH 5/7] Add changeset --- .changeset/nine-gorillas-add.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nine-gorillas-add.md diff --git a/.changeset/nine-gorillas-add.md b/.changeset/nine-gorillas-add.md new file mode 100644 index 00000000000..86075c90e62 --- /dev/null +++ b/.changeset/nine-gorillas-add.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-tokens': patch +--- + +Added descriptions to color tokens From b69db50e46bacdf1f38611ba735e92d27452eae3 Mon Sep 17 00:00:00 2001 From: Jess Telford Date: Fri, 13 Oct 2023 11:43:21 +1100 Subject: [PATCH 6/7] Update polaris-tokens/src/themes/base/color.ts Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- polaris-tokens/src/themes/base/color.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 780a3cc81ce..9c93945181e 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -338,7 +338,7 @@ export const color: { }, 'color-bg-surface-success-hover': { value: colors.green[4], - description: 'The hover sate color for communicating success.', + description: 'The hover state color for communicating success.', }, 'color-bg-surface-success-active': { value: colors.green[5], From f247a21f687b876110211d70ed6ed80dcdd36e0a Mon Sep 17 00:00:00 2001 From: Jess Telford Date: Fri, 13 Oct 2023 11:43:56 +1100 Subject: [PATCH 7/7] Apply suggestions from code review Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- polaris-tokens/src/themes/base/color.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 9c93945181e..2b8453be563 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -350,7 +350,7 @@ export const color: { }, 'color-bg-surface-caution-hover': { value: colors.yellow[3], - description: 'The hover sate for communicating caution.', + description: 'The hover state for communicating caution.', }, 'color-bg-surface-caution-active': { value: colors.yellow[4], @@ -505,12 +505,12 @@ export const color: { 'color-bg-fill-info-hover': { value: colors.azure[10], description: - 'The hover state color for communicating important informtion on elements with a smaller surface area.', + 'The hover state color for communicating important information on elements with a smaller surface area.', }, 'color-bg-fill-info-active': { value: colors.azure[11], description: - 'The active state (on press) color for communicating important informtion on elements with a smaller surface area.', + 'The active state (on press) color for communicating important information on elements with a smaller surface area.', }, 'color-bg-fill-info-secondary': { value: colors.azure[4], @@ -758,7 +758,7 @@ export const color: { }, 'color-text-success-hover': { value: colors.green[15], - description: 'The hover sate color for text communicating success.', + description: 'The hover state color for text communicating success.', }, 'color-text-success-active': { value: colors.green[16],