Merge branch 'main' into fix-sizing-test-webkit

ni · Mar 21, 2024 · 49cd8e8 · 49cd8e8
2 parents 648fd40 + 9c16eb3
commit 49cd8e8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Thu, 21 Mar 2024 00:31:13 GMT",
+      "version": "22.1.1",
+      "tag": "@ni/nimble-components_v22.1.1",
+      "comments": {
+        "none": [
+          {
+            "author": "7282195+m-akinc@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "755823b11215aa2a2c48f296546d0cb8acf6f64c",
+            "comment": "Small change to design token naming scheme"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 20 Mar 2024 16:45:59 GMT",
       "version": "22.1.1",

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
@@ -490,12 +490,13 @@ To modify the generated tokens, complete these steps:
 
 Public names for theme-aware tokens are specified in `src/theme-provider/design-token-names.ts`. Use the following structure when creating new tokens.
 
-`[element]-[part]-[state]-[token_type]`
+`[element]-[part]-[interaction_states]-[remaining_states]-[token_type]`
 
 1. Where **element** is the type to which the token applies (e.g. 'application', 'body', or 'title-plus-1').
 2. Where **part** is the specific part of the element to which the token applies (e.g. 'border', 'background', or shadow).
-3. Where **state** is the more specific state descriptor (e.g. 'selected' or 'disabled'). Multiple states should be sorted alphabetically.
-4. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size').
+3. Where **interaction_states** is one or more interaction states (e.g. 'active', 'disabled', 'hover', or 'selected'). Multiple values should be sorted alphabetically.
+4. Where **remaining_states** the remaining, non-interaction states (e.g. 'accent', 'primary, or 'large'). Multiple values should be sorted alphabetically.
+5. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size').
 
 ### Size ramp