Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update token descriptions to align with writing guidelines #4480

Merged
merged 1 commit into from
Nov 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .changeset/rare-mangos-perform.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
"hpe-design-tokens": patch
"hpe-design-tokens": minor
---

Updated dark and light mode of `color.background.primary.hover`
Expand Down
2 changes: 1 addition & 1 deletion design-tokens/tokens/primitive/primitives.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -2302,7 +2302,7 @@
"TBD": {
"$type": "color",
"$value": "#00ff0a00",
"$description": "Placeholder for colours that still need finalising.",
"$description": "Placeholder for colors that still need finalising.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": true,
Expand Down
42 changes: 21 additions & 21 deletions design-tokens/tokens/semantic/color.dark.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"disabled": {
"$type": "color",
"$value": "{base.color.white.opacity7}",
"$description": "Disabled background color. Using disabled colours ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colours at the token level, rather than the component build level.",
"$description": "Disabled background color. Using disabled colors ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colors at the token level, rather than the component build level.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -52,7 +52,7 @@
"back": {
"$type": "color",
"$value": "{base.color.grey.1300}",
"$description": "Elevation level 0. Typically used for the page colour. color.background.back creates a contrasted page backdrop for components to sit on. It’s useful to make components stand out on pages that use it. The nature of back is that it forms a contrast with any foreground component.",
"$description": "Elevation level 0. Typically used for the page color. color.background.back creates a contrasted page backdrop for components to sit on. It’s useful to make components stand out on pages that use it. The nature of back is that it forms a contrast with any foreground component.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -162,7 +162,7 @@
"enabled": {
"$type": "color",
"$value": "{base.color.brand}",
"$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -174,7 +174,7 @@
"hover": {
"$type": "color",
"$value": "{base.color.brand}",
"$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -188,7 +188,7 @@
"enabled": {
"$type": "color",
"$value": "{base.color.green.1000}",
"$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.",
"$description": "Lower emphasis variant of selected color. Use if selection color needs to be less prominent.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -200,7 +200,7 @@
"hover": {
"$type": "color",
"$value": "{base.color.green.900}",
"$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.",
"$description": "Lower emphasis variant of selected color. Use if selection color needs to be less prominent.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -280,7 +280,7 @@
"default": {
"$type": "color",
"$value": "{base.color.white.opacity36}",
"$description": "Default border colour",
"$description": "Default border color",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -304,7 +304,7 @@
"disabled": {
"$type": "color",
"$value": "{base.color.white.opacity12}",
"$description": "Disabled colour for borders. Using disabled colours ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colours at the token level, rather than the component build level.",
"$description": "Disabled color for borders. Using disabled colors ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colors at the token level, rather than the component build level.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -316,7 +316,7 @@
"selected": {
"$type": "color",
"$value": "{base.color.green.600}",
"$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggles, active tabs.",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggles, active tabs.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -450,7 +450,7 @@
"disabled": {
"$type": "color",
"$value": "{base.color.white.opacity24}",
"$description": "Disabled color for text. Using disabled colours ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colours at the token level, rather than the component build level.",
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colors at the token level, rather than the component build level.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -462,7 +462,7 @@
"onPrimary": {
"$type": "color",
"$value": "{base.color.white.100}",
"$description": "Text color to be used for text sitting on a primary colour (for example a background styled with the primary color). This text and background pairing helps ensure accessibility. Furthermore, it enables precise theming updates and allows easier maintenance of colours, where if the primary colour changes, we can update color.text.onPrimary to be accessible on the new primary colour.",
"$description": "Text color to be used for text sitting on a primary color (for example a background styled with the primary color). This text and background pairing helps ensure accessibility. Furthermore, it enables precise theming updates and allows easier maintenance of colors, where if the primary color changes, we can update color.text.onPrimary to be accessible on the new primary color.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -742,7 +742,7 @@
"default": {
"$type": "color",
"$value": "{base.color.white.100}",
"$description": "Default icon colour that is accessible on standard background colours",
"$description": "Default icon color that is accessible on standard background colors",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -790,7 +790,7 @@
"disabled": {
"$type": "color",
"$value": "{base.color.white.opacity24}",
"$description": "Disabled colour for icons. Using disabled colours ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colours at the token level, rather than the component build level.",
"$description": "Disabled color for icons. Using disabled colors ensures that disabled components are similarly styled and consistent. Furthermore, it allows us to control disabled colors at the token level, rather than the component build level.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -862,7 +862,7 @@
"onPrimary": {
"$type": "color",
"$value": "{base.color.white.100}",
"$description": "Icon colour to be used when text sits on primary colour (for example a background styled with the primary color). This text and background pairing ensures text used on primary is accessible. Furthermore, it enables precise theming updates and allows for easier maintenance of colours, where if the primary colour changes, we can update color.text.onPrimary to be accessible on the new primary colour.",
"$description": "Icon color to be used when text sits on primary color (for example a background styled with the primary color). This text and background pairing ensures text used on primary is accessible. Furthermore, it enables precise theming updates and allows for easier maintenance of colors, where if the primary color changes, we can update color.text.onPrimary to be accessible on the new primary color.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -924,7 +924,7 @@
"green": {
"$type": "color",
"$value": "{base.color.green.700}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -936,7 +936,7 @@
"purple": {
"$type": "color",
"$value": "{base.color.purple.900}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -948,7 +948,7 @@
"teal": {
"$type": "color",
"$value": "{base.color.teal.700}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -960,7 +960,7 @@
"blue": {
"$type": "color",
"$value": "{base.color.blue.700}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -972,7 +972,7 @@
"red": {
"$type": "color",
"$value": "{base.color.red.850}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -984,7 +984,7 @@
"orange": {
"$type": "color",
"$value": "{base.color.orange.700}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -996,7 +996,7 @@
"yellow": {
"$type": "color",
"$value": "{base.color.yellow.700}",
"$description": "Use for decorative purposes when colour has no specific meaning.",
"$description": "Use for decorative purposes when color has no specific meaning.",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down
Loading
Loading