@devexpress/design-tokens-internal 262.2.1 → 262.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devexpress/design-tokens-internal",
-  "version": "262.2.1",
+  "version": "262.4.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/blazor/size/fluent_large.json

@@ -408,7 +408,7 @@
             "$value": "{spacing.30}"
           }
         },
-        "outter-box": {
+        "outer-box": {
           "gap": {
             "vertical": {
               "$extensions": {
@@ -885,7 +885,7 @@
   "menu": {
     "button": {
       "layout": {
-        "outter-box": {
+        "outer-box": {
           "horizontal": {
             "$extensions": {
               "com.figma.scopes": [

package/tokens/components/blazor/size/fluent_medium.json

@@ -408,7 +408,7 @@
             "$value": "{spacing.20}"
           }
         },
-        "outter-box": {
+        "outer-box": {
           "gap": {
             "vertical": {
               "$extensions": {
@@ -885,7 +885,7 @@
   "menu": {
     "button": {
       "layout": {
-        "outter-box": {
+        "outer-box": {
           "horizontal": {
             "$extensions": {
               "com.figma.scopes": [

package/tokens/components/blazor/size/fluent_small.json

@@ -408,7 +408,7 @@
             "$value": "{spacing.20}"
           }
         },
-        "outter-box": {
+        "outer-box": {
           "gap": {
             "vertical": {
               "$extensions": {
@@ -885,7 +885,7 @@
   "menu": {
     "button": {
       "layout": {
-        "outter-box": {
+        "outer-box": {
           "horizontal": {
             "$extensions": {
               "com.figma.scopes": [