@devexpress/design-tokens-internal 262.3.0 → 262.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devexpress/design-tokens-internal",
-  "version": "262.3.0",
+  "version": "262.5.0",
   "description": "",
   "license": "ISC",
   "author": "",

package/tokens/components/README.md

@@ -7,17 +7,19 @@ Design tokens for individual UI components, exported from Figma and stored in W3
 ```
 tokens/components/
 ├── core/          ← platform-agnostic tokens (direct export from Figma)
-│   └── <component>/
-│       └── fluent.json
-├── blazor/        ← web-specific overrides and extensions
-│   └── <component>/
-│       └── fluent.json
-└── wpf/           ← desktop-specific overrides and extensions
+│   ├── size/      ← size-mode-dependent tokens, one file per theme × size
+│   │   └── fluent_small.json, fluent_medium.json, fluent_large.json, material_medium.json
+│   └── theme/     ← size-independent tokens, one file per theme
+│       └── fluent.json, material.json
+├── blazor/        ← web-specific overrides and extensions (same size/ + theme/ structure)
+│   ├── size/
+│   └── theme/
+└── wpf/           ← desktop-specific overrides (legacy per-component structure)
     └── <component>/
         └── fluent.json
 ```
 
-Each component folder contains one file per theme. Currently the only theme is **`fluent`**.
+`core/` and `blazor/` use the **`size/` + `theme/`** structure: `size/` holds tokens whose values depend on the size mode (`small` / `medium` / `large`), `theme/` holds everything else. Available themes are **`fluent`** and **`material`**. `wpf/` still uses the legacy per-component structure with one `fluent.json` per component, until the WPF team switches (see [stability zones](../../docs/stability.md)).
 
 ---
 
@@ -25,7 +27,7 @@ Each component folder contains one file per theme. Currently the only theme is *
 
 ### `core/` — Source of truth
 
-Tokens exported directly from the Figma design file. Each subfolder corresponds 1:1 to a Figma variable collection. These tokens are **platform-agnostic** — they define the visual anatomy of a component (spacing, colors, border-radius, typography) using semantic token aliases. They do **not** contain raw values.
+Tokens exported directly from the Figma design file. The `size/` and `theme/` subfolders correspond 1:1 to the shared Figma variable collections (Sizing and Theme). These tokens are **platform-agnostic** — they define the visual anatomy of a component (spacing, colors, border-radius, typography) using semantic token aliases. They do **not** contain raw values.
 
 ### `blazor/` — Blazor overrides
 
@@ -33,7 +35,7 @@ Additions or overrides specific to the web platform (React, Angular, Vue, Blazor
 
 ### `wpf/` — WPF overrides
 
-Additions or overrides specific to desktop platforms (WinForms, WPF, Blazor Desktop). Same pattern as `blazor/`.
+Additions or overrides specific to desktop platforms (WinForms, WPF, Blazor Desktop). Same role as `blazor/`, but still organized per component (`<component>/fluent.json`) — this structure is consumed by the WPF XAML generator.
 
 ---
 

package/tokens/components/core/size/fluent_large.json

@@ -1726,7 +1726,7 @@
             "size": {
               "$extensions": {
                 "com.figma.scopes": [
-                  "WIDTH_HEIGHT"
+                  "ALL_SCOPES"
                 ],
                 "com.figma.hiddenFromPublishing": false
               },
@@ -2097,7 +2097,7 @@
               "inline": {
                 "$extensions": {
                   "com.figma.scopes": [
-                    "WIDTH_HEIGHT"
+                    "ALL_SCOPES"
                   ],
                   "com.figma.hiddenFromPublishing": false
                 },
@@ -2107,7 +2107,7 @@
               "stacked": {
                 "$extensions": {
                   "com.figma.scopes": [
-                    "WIDTH_HEIGHT"
+                    "ALL_SCOPES"
                   ],
                   "com.figma.hiddenFromPublishing": false
                 },
@@ -2120,7 +2120,7 @@
             "size": {
               "$extensions": {
                 "com.figma.scopes": [
-                  "WIDTH_HEIGHT"
+                  "ALL_SCOPES"
                 ],
                 "com.figma.hiddenFromPublishing": false
               },
@@ -2307,7 +2307,7 @@
       "size": {
         "$extensions": {
           "com.figma.scopes": [
-            "WIDTH_HEIGHT"
+            "ALL_SCOPES"
           ],
           "com.figma.hiddenFromPublishing": false
         },
@@ -2337,7 +2337,7 @@
             "com.figma.hiddenFromPublishing": false
           },
           "$type": "number",
-          "$value": "{font-size.title.lg}"
+          "$value": "{font-size.title.md}"
         },
         "font-weight": {
           "$extensions": {
@@ -2357,7 +2357,7 @@
             "com.figma.hiddenFromPublishing": false
           },
           "$type": "number",
-          "$value": "{line-height.title.lg}"
+          "$value": "{line-height.title.md}"
         },
         "letter-spacing": {
           "$extensions": {
@@ -2367,7 +2367,7 @@
             "com.figma.hiddenFromPublishing": false
           },
           "$type": "number",
-          "$value": "{letter-spacing.title.lg}"
+          "$value": "{letter-spacing.title.md}"
         }
       },
       "caption": {
@@ -2404,7 +2404,7 @@
         "letter-spacing": {
           "$extensions": {
             "com.figma.scopes": [
-              "LINE_HEIGHT"
+              "LETTER_SPACING"
             ],
             "com.figma.hiddenFromPublishing": false
           },
@@ -2424,9 +2424,31 @@
           },
           "$type": "number",
           "$value": "{spacing.80}"
+        },
+        "horizontal": {
+          "$extensions": {
+            "com.figma.scopes": [
+              "GAP"
+            ],
+            "com.figma.hiddenFromPublishing": false
+          },
+          "$type": "number",
+          "$value": "{spacing.240}"
         }
       },
       "content-box": {
+        "gap": {
+          "$extensions": {
+            "com.figma.scopes": [
+              "GAP"
+            ],
+            "com.figma.hiddenFromPublishing": false
+          },
+          "$type": "number",
+          "$value": "{spacing.160}"
+        }
+      },
+      "text-box": {
         "gap": {
           "$extensions": {
             "com.figma.scopes": [
@@ -2443,7 +2465,7 @@
       "size": {
         "$extensions": {
           "com.figma.scopes": [
-            "WIDTH_HEIGHT"
+            "ALL_SCOPES"
           ],
           "com.figma.hiddenFromPublishing": false
         },
@@ -2585,7 +2607,7 @@
       "size": {
         "$extensions": {
           "com.figma.scopes": [
-            "WIDTH_HEIGHT"
+            "ALL_SCOPES"
           ],
           "com.figma.hiddenFromPublishing": false
         },
@@ -4096,7 +4118,7 @@
         "size": {
           "$extensions": {
             "com.figma.scopes": [
-              "WIDTH_HEIGHT"
+              "ALL_SCOPES"
             ],
             "com.figma.hiddenFromPublishing": false
           },
@@ -4955,7 +4977,7 @@
       "size": {
         "$extensions": {
           "com.figma.scopes": [
-            "WIDTH_HEIGHT"
+            "ALL_SCOPES"
           ],
           "com.figma.hiddenFromPublishing": false
         },
@@ -8997,6 +9019,52 @@
           }
         }
       },
+      "header-content": {
+        "layout": {
+          "min-height": {
+            "$extensions": {
+              "com.figma.scopes": [
+                "WIDTH_HEIGHT"
+              ],
+              "com.figma.hiddenFromPublishing": false
+            },
+            "$type": "number",
+            "$value": "{spacing.360}"
+          },
+          "horizontal": {
+            "$extensions": {
+              "com.figma.scopes": [
+                "GAP"
+              ],
+              "com.figma.hiddenFromPublishing": false
+            },
+            "$type": "number",
+            "$value": "{spacing.140}"
+          },
+          "gap": {
+            "$extensions": {
+              "com.figma.scopes": [
+                "GAP"
+              ],
+              "com.figma.hiddenFromPublishing": false
+            },
+            "$type": "number",
+            "$value": "{spacing.120}"
+          },
+          "text-content": {
+            "vertical": {
+              "$extensions": {
+                "com.figma.scopes": [
+                  "GAP"
+                ],
+                "com.figma.hiddenFromPublishing": false
+              },
+              "$type": "number",
+              "$value": "{spacing.50}"
+            }
+          }
+        }
+      },
       "tag-list": {
         "layout": {
           "item-gap": {
@@ -9227,6 +9295,42 @@
             }
           }
         }
+      },
+      "header-checkbox": {
+        "layout": {
+          "min-height": {
+            "$extensions": {
+              "com.figma.scopes": [
+                "WIDTH_HEIGHT"
+              ],
+              "com.figma.hiddenFromPublishing": false
+            },
+            "$type": "number",
+            "$value": "{spacing.360}"
+          },
+          "horizontal": {
+            "$extensions": {
+              "com.figma.scopes": [
+                "GAP"
+              ],
+              "com.figma.hiddenFromPublishing": false
+            },
+            "$type": "number",
+            "$value": "{spacing.120}"
+          },
+          "check-item": {
+            "vertical": {
+              "$extensions": {
+                "com.figma.scopes": [
+                  "GAP"
+                ],
+                "com.figma.hiddenFromPublishing": false
+              },
+              "$type": "number",
+              "$value": "{spacing.80}"
+            }
+          }
+        }
       }
     },
     "cell": {
@@ -9355,90 +9459,6 @@
         }
       }
     },
-    "cell-header": {
-      "checkbox": {
-        "layout": {
-          "min-height": {
-            "$extensions": {
-              "com.figma.scopes": [
-                "WIDTH_HEIGHT"
-              ],
-              "com.figma.hiddenFromPublishing": false
-            },
-            "$type": "number",
-            "$value": "{spacing.360}"
-          },
-          "horizontal": {
-            "$extensions": {
-              "com.figma.scopes": [
-                "GAP"
-              ],
-              "com.figma.hiddenFromPublishing": false
-            },
-            "$type": "number",
-            "$value": "{spacing.120}"
-          },
-          "check-item": {
-            "vertical": {
-              "$extensions": {
-                "com.figma.scopes": [
-                  "GAP"
-                ],
-                "com.figma.hiddenFromPublishing": false
-              },
-              "$type": "number",
-              "$value": "{spacing.80}"
-            }
-          }
-        }
-      },
-      "content": {
-        "layout": {
-          "min-height": {
-            "$extensions": {
-              "com.figma.scopes": [
-                "WIDTH_HEIGHT"
-              ],
-              "com.figma.hiddenFromPublishing": false
-            },
-            "$type": "number",
-            "$value": "{spacing.360}"
-          },
-          "horizontal": {
-            "$extensions": {
-              "com.figma.scopes": [
-                "GAP"
-              ],
-              "com.figma.hiddenFromPublishing": false
-            },
-            "$type": "number",
-            "$value": "{spacing.140}"
-          },
-          "gap": {
-            "$extensions": {
-              "com.figma.scopes": [
-                "GAP"
-              ],
-              "com.figma.hiddenFromPublishing": false
-            },
-            "$type": "number",
-            "$value": "{spacing.120}"
-          },
-          "text-content": {
-            "vertical": {
-              "$extensions": {
-                "com.figma.scopes": [
-                  "GAP"
-                ],
-                "com.figma.hiddenFromPublishing": false
-              },
-              "$type": "number",
-              "$value": "{spacing.50}"
-            }
-          }
-        }
-      }
-    },
     "detail-row": {
       "layout": {
         "content-box": {