Merge pull request #4480 from grommet/update-token-descriptions

Update token descriptions to align with writing guidelines
grommet · Nov 26, 2024 · 6e9fd14 · 6e9fd14
2 parents 359574b + 16a06e7
commit 6e9fd14
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 236 deletions.
diff --git a/.changeset/rare-mangos-perform.md b/.changeset/rare-mangos-perform.md
@@ -1,5 +1,5 @@
 ---
-"hpe-design-tokens": patch
+"hpe-design-tokens": minor
 ---
 
 Updated dark and light mode of `color.background.primary.hover`

diff --git a/design-tokens/tokens/primitive/primitives.base.json b/design-tokens/tokens/primitive/primitives.base.json
@@ -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,

diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,