opui-css 5.4.3 → 6.0.0-rc.2

package/tokens.json

@@ -0,0 +1,3970 @@
+{
+  "color-scheme": {
+    "ui-color-scheme": {
+      "$description": "The color scheme in force: `light`, or `dark` under `prefers-color-scheme: dark`. `html` reads it as its `color-scheme`, `.ui-light` and `.ui-dark` set it on a part of the page, and `Typography` reads it in a style query. Set the classes, not the token.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-scheme",
+          "modes": {
+            "dark": "dark"
+          },
+          "tier": "knob"
+        }
+      },
+      "$value": "light"
+    }
+  },
+  "palette": {
+    "ui-palette-chroma": {
+      "$description": "Chroma of the palette source color, as a multiplier of `0.21`.",
+      "$extensions": {
+        "opui": {
+          "css": "0.5",
+          "cssVar": "--ui-palette-chroma",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.5
+    },
+    "ui-palette-hue": {
+      "$description": "Hue of the palette source color in degrees. `222.8` (blue) by default, in both color schemes.",
+      "$extensions": {
+        "opui": {
+          "css": "222.8",
+          "cssVar": "--ui-palette-hue",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 222.8
+    },
+    "ui-palette-hue-rotate-by": {
+      "$description": "Hue drift per palette step in degrees: each step rotates one more time than the last, so `1` spreads 15° across the ramp. `.ui-critical`, `.ui-info`, `.ui-success` and `.ui-warning` use `1` for livelier tints; `.ui-neutral` and the brand palette `0`.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-palette-hue-rotate-by",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-palette-source": {
+      "$description": "The source color the palette is derived from. A theme leaves it unset, and `palette.css` builds it from `--ui-palette-hue` and `--ui-palette-chroma`: `oklch(58% 0.105 222.8)` by default. Set it to replace those two knobs. Any color works: the palette keeps its oklch hue, scales its chroma and sets the lightness per step. See [Palette](/guide/theming#palette).",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-source",
+          "example": "oklch(0.58 calc(0.21 * 0.5) 240)",
+          "optional": true,
+          "tier": "knob"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-gray-chroma": {
+      "$description": "Chroma of the gray ramp. Raise it for tinted grays.",
+      "$extensions": {
+        "opui": {
+          "css": "0.01",
+          "cssVar": "--ui-gray-chroma",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.01
+    },
+    "ui-gray-hue": {
+      "$description": "Hue of the gray ramp.",
+      "$extensions": {
+        "opui": {
+          "css": "255",
+          "cssVar": "--ui-gray-hue",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 255
+    }
+  },
+  "palette-steps": {
+    "ui-color-1": {
+      "$description": "Step 1 of the palette, at 98% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-1",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 98% calc(0.03 * (c / 0.21)) calc(h + (0 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-2": {
+      "$description": "Step 2 of the palette, at 97% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-2",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 97% calc(0.06 * (c / 0.21)) calc(h + (1 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-3": {
+      "$description": "Step 3 of the palette, at 93% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-3",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 93% calc(0.1 * (c / 0.21)) calc(h + (2 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-4": {
+      "$description": "Step 4 of the palette, at 84% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-4",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 84% calc(0.12 * (c / 0.21)) calc(h + (3 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-5": {
+      "$description": "Step 5 of the palette, at 80% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-5",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 80% calc(0.16 * (c / 0.21)) calc(h + (4 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-6": {
+      "$description": "Step 6 of the palette, at 71% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-6",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 71% calc(0.19 * (c / 0.21)) calc(h + (5 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-7": {
+      "$description": "Step 7 of the palette, at 66% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-7",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 66% calc(0.2 * (c / 0.21)) calc(h + (6 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-8": {
+      "$description": "Step 8 of the palette, at 58% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-8",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 58% calc(0.21 * (c / 0.21)) calc(h + (7 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-9": {
+      "$description": "Step 9 of the palette, at 53% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-9",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 53% calc(0.2 * (c / 0.21)) calc(h + (8 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-10": {
+      "$description": "Step 10 of the palette, at 49% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-10",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 49% calc(0.19 * (c / 0.21)) calc(h + (9 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-11": {
+      "$description": "Step 11 of the palette, at 42% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-11",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 42% calc(0.17 * (c / 0.21)) calc(h + (10 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-12": {
+      "$description": "Step 12 of the palette, at 35% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-12",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 35% calc(0.15 * (c / 0.21)) calc(h + (11 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-13": {
+      "$description": "Step 13 of the palette, at 27% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-13",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 27% calc(0.12 * (c / 0.21)) calc(h + (12 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-14": {
+      "$description": "Step 14 of the palette, at 20% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-14",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 20% calc(0.09 * (c / 0.21)) calc(h + (13 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-15": {
+      "$description": "Step 15 of the palette, at 16% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-15",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 16% calc(0.07 * (c / 0.21)) calc(h + (14 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-color-16": {
+      "$description": "Step 16 of the palette, at 10% lightness.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-color-16",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-palette-source) 10% calc(0.05 * (c / 0.21)) calc(h + (15 * var(--ui-palette-hue-rotate-by))) )"
+    },
+    "ui-gray-1": {
+      "$description": "Step 1 of the gray palette: the lightness of `--ui-color-1` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-1",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-1) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-2": {
+      "$description": "Step 2 of the gray palette: the lightness of `--ui-color-2` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-2",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-2) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-3": {
+      "$description": "Step 3 of the gray palette: the lightness of `--ui-color-3` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-3",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-3) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-4": {
+      "$description": "Step 4 of the gray palette: the lightness of `--ui-color-4` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-4",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-4) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-5": {
+      "$description": "Step 5 of the gray palette: the lightness of `--ui-color-5` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-5",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-5) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-6": {
+      "$description": "Step 6 of the gray palette: the lightness of `--ui-color-6` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-6",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-6) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-7": {
+      "$description": "Step 7 of the gray palette: the lightness of `--ui-color-7` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-7",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-7) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-8": {
+      "$description": "Step 8 of the gray palette: the lightness of `--ui-color-8` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-8",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-8) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-9": {
+      "$description": "Step 9 of the gray palette: the lightness of `--ui-color-9` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-9",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-9) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-10": {
+      "$description": "Step 10 of the gray palette: the lightness of `--ui-color-10` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-10",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-10) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-11": {
+      "$description": "Step 11 of the gray palette: the lightness of `--ui-color-11` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-11",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-11) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-12": {
+      "$description": "Step 12 of the gray palette: the lightness of `--ui-color-12` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-12",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-12) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-13": {
+      "$description": "Step 13 of the gray palette: the lightness of `--ui-color-13` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-13",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-13) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-14": {
+      "$description": "Step 14 of the gray palette: the lightness of `--ui-color-14` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-14",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-14) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-15": {
+      "$description": "Step 15 of the gray palette: the lightness of `--ui-color-15` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-15",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-15) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    },
+    "ui-gray-16": {
+      "$description": "Step 16 of the gray palette: the lightness of `--ui-color-16` at `--ui-gray-chroma` and `--ui-gray-hue`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-gray-16",
+          "tier": "primitive"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-color-16) l var(--ui-gray-chroma) var(--ui-gray-hue) )"
+    }
+  },
+  "palette-roles": {
+    "ui-palette-accent": {
+      "$description": "The accent shade of the current palette: `Callout` icons and outlined borders. Stronger with more contrast. The severity `Chip` dot reads it. Re-derived inside every severity scope, so `.ui-success` gets a green one.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-accent",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-color-9) min(l, var(--ui-accent-max-lightness)) c h), oklch( from var(--ui-color-7) max(l, var(--ui-palette-accent-min-lightness)) c h ) )"
+    },
+    "ui-palette-border": {
+      "$description": "The border shade of the current palette: tonal `Callout` borders. Stronger with more contrast. Severity `Chip` borders read it. Re-derived inside every severity scope.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-border",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( from var(--ui-color-5) min(l, var(--ui-palette-border-max-lightness)) c h ), oklch( from var(--ui-color-11) max(l, var(--ui-palette-border-min-lightness)) c h ) )"
+    },
+    "ui-palette-strong": {
+      "$description": "The strongest shade of the current palette, the darkest in light mode and the lightest in dark mode, with the most contrast against the page: `Callout` text, the default `Button` fill when `--ui-button-accent` is unset. Severity `Chip` text reads it. Re-derived inside every severity scope.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-strong",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-color-16), var(--ui-color-1))"
+    },
+    "ui-palette-on-strong": {
+      "$description": "Text color on `--ui-palette-strong`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-on-strong",
+          "promise": {
+            "against": [
+              "--ui-palette-strong"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-color-1), var(--ui-color-16))"
+    },
+    "ui-palette-text": {
+      "$description": "A readable text shade of the current palette, at least `--ui-palette-text-min-lightness` in dark mode. Darker in light mode and lighter in dark mode with more contrast. Re-derived inside every severity scope.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( from var(--ui-color-11) min(l, var(--ui-palette-text-max-lightness)) c h ), oklch( from var(--ui-color-6) max(l, var(--ui-palette-text-min-lightness)) min(c, var(--ui-accent-max-chroma)) h ) )"
+    },
+    "ui-palette-tint": {
+      "$description": "The tonal fill of the current palette: primary and critical tonal buttons when `--ui-primary-tonal` is unset. Stronger with more contrast. Re-derived inside every severity scope.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-tint",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( from var(--ui-color-6) max(l, var(--ui-palette-tint-min-lightness)) c h ), oklch( from var(--ui-color-11) min(l, var(--ui-palette-tint-max-lightness)) c h ) )"
+    },
+    "ui-palette-on-tint": {
+      "$description": "Text color on `--ui-palette-tint`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-text-strong)",
+          "cssVar": "--ui-palette-on-tint",
+          "promise": {
+            "against": [
+              "--ui-palette-tint"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{text.ui-text-strong}"
+    },
+    "ui-palette-tint-subtle": {
+      "$description": "A faint fill of the current palette: tonal severity `Callout`s. Tonal severity `Chip`s read it. Re-derived inside every severity scope.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-palette-tint-subtle",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-color-3) l c h / 60%), oklch(from var(--ui-color-6) l c h / 5%) )"
+    }
+  },
+  "named-colors-no-severity-meaning": {
+    "ui-blue": {
+      "$description": "A literal blue, hue 240 at `0.53`, the lightness of palette step 9 in every palette. No severity meaning.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-blue",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(min(0.53, var(--ui-accent-max-lightness)) 0.2 240), oklch(0.53 0.2 240) )"
+    },
+    "ui-green": {
+      "$description": "A literal green, hue 145 at `0.53`, the lightness of palette step 9 in every palette. No severity meaning.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-green",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(min(0.53, var(--ui-accent-max-lightness)) 0.2 145), oklch(0.53 0.2 145) )"
+    },
+    "ui-orange": {
+      "$description": "A literal orange, hue 75 at `0.66`, the lightness of palette step 7 in every palette. No severity meaning.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-orange",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch(0.66 0.2 75)"
+    },
+    "ui-red": {
+      "$description": "A literal red, hue 25 at `0.53`, the lightness of palette step 9 in every palette. No severity meaning.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-red",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(min(0.53, var(--ui-accent-max-lightness)) 0.2 25), oklch(0.53 0.2 25) )"
+    }
+  },
+  "intent-tokens": {
+    "ui-critical": {
+      "$description": "Severity color for errors and destructive actions.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-red)",
+          "cssVar": "--ui-critical",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{named-colors-no-severity-meaning.ui-red}"
+    },
+    "ui-critical-text": {
+      "$description": "Critical as a text color: the `.ui-critical` items of a `Menu`, a `.ui-critical` `Button` with no variant or `.ui-outlined`, and `del` and `.ui-del` text. `--ui-critical` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-critical-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-critical) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-critical) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-info": {
+      "$description": "Severity color for informational messages, and the dotted underline of `abbr`, `dfn`, `.ui-abbr` and `.ui-dfn`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-blue)",
+          "cssVar": "--ui-info",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{named-colors-no-severity-meaning.ui-blue}"
+    },
+    "ui-info-text": {
+      "$description": "Info as a text color, for informational text outside an `.ui-info` scope. `--ui-info` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-info-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-info) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-info) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-invalid": {
+      "$description": "Color for invalid field borders, fills and outlines. Lifted to `--ui-invalid-min-lightness` in dark mode, so invalid borders stand out from the page with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-invalid",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( var(--ui-critical), oklch( from var(--ui-critical) max(l, var(--ui-invalid-min-lightness)) min(c, var(--ui-accent-max-chroma)) h ) )"
+    },
+    "ui-invalid-text": {
+      "$description": "Color for validation messages and invalid labels. `--ui-invalid` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`, so it stays readable where `--ui-invalid` is lighter for borders.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-invalid-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-invalid) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-invalid) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-neutral": {
+      "$description": "Severity color for neutral messages. `--ui-gray-hue` and `--ui-gray-chroma` at `0.53`, the lightness of `--ui-gray-9`, capped at `--ui-accent-max-lightness` in light mode. The `.ui-neutral` scope derives its palette from its hue and chroma.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-neutral",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( min(0.53, var(--ui-accent-max-lightness)) var(--ui-gray-chroma) var(--ui-gray-hue) ), oklch(0.53 var(--ui-gray-chroma) var(--ui-gray-hue)) )"
+    },
+    "ui-neutral-text": {
+      "$description": "Neutral as a text color, for neutral text outside an `.ui-neutral` scope. `--ui-neutral` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-neutral-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-neutral) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-neutral) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-success": {
+      "$description": "Severity color for success messages.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-green)",
+          "cssVar": "--ui-success",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{named-colors-no-severity-meaning.ui-green}"
+    },
+    "ui-success-text": {
+      "$description": "Success as a text color, for success text outside an `.ui-success` scope, and `ins` and `.ui-ins` text. `--ui-success` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-success-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-success) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-success) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-warning": {
+      "$description": "Severity color for warnings. Unlike the other severities it keeps its lightness with more contrast: the fill is light and takes dark `--ui-on-warning` text, and `--ui-warning-text` gets the stricter lightness limits instead.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-orange)",
+          "cssVar": "--ui-warning",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{named-colors-no-severity-meaning.ui-orange}"
+    },
+    "ui-on-warning": {
+      "$description": "Text color on a `--ui-warning` fill: the warning `Badge`. White on a warning below 0.182 relative luminance and near-black above it, like `--ui-on-primary`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-warning",
+          "promise": {
+            "against": [
+              "--ui-warning"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color( from var(--ui-warning) xyz-d65 calc(0.9505 * (0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1))) calc(0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1)) calc(1.089 * (0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1))) )"
+    },
+    "ui-warning-text": {
+      "$description": "Warning as a text color, for warning text outside a `.ui-warning` scope. `--ui-warning` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-warning-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-warning) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-warning) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    }
+  },
+  "primary": {
+    "ui-primary-source": {
+      "$description": "The brand color `--ui-primary` is derived from, within `--ui-primary-max-lightness` and `--ui-primary-min-lightness`. Set it to a theme's brand color so more contrast can darken or lighten it while keeping its hue. Setting `--ui-primary` directly pins the color in every contrast mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-primary-source",
+          "tier": "knob"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( from var(--ui-palette-source) 0.499 min(0.191, calc(0.382 * (c / 0.21))) h ), var(--ui-color-6) )"
+    },
+    "ui-primary": {
+      "$description": "Brand color for primary actions and accents. Derived from `--ui-primary-source` within `--ui-primary-max-lightness` and `--ui-primary-min-lightness`. Set `--ui-primary-source` to keep more contrast working, or this token to pin the color.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-primary",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch( from var(--ui-primary-source) min(l, var(--ui-primary-max-lightness)) c h ), oklch( from var(--ui-primary-source) max(l, var(--ui-primary-min-lightness)) min(c, var(--ui-accent-max-chroma)) h ) )"
+    },
+    "ui-on-primary": {
+      "$description": "Text color on `--ui-primary`. Derived with relative color from the primary's relative luminance (the `y` of `xyz-d65`): white on a primary below 0.182, near-black above it, so either side keeps 4.5:1 and a custom `--ui-primary` gets readable text.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-primary",
+          "promise": {
+            "against": [
+              "--ui-primary"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color( from var(--ui-primary) xyz-d65 calc(0.9505 * (0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1))) calc(0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1)) calc(1.089 * (0.0012 + 0.9988 * clamp(0, (0.182 - y) * 1000, 1))) )"
+    },
+    "ui-primary-text": {
+      "$description": "Primary as a text color: links, rich text links, `Callout` link hover, `Button` and `ControlGroup` with `.ui-primary` and no variant or `.ui-outlined`. Defaults to `--ui-primary` with its lightness kept within `--ui-text-max-lightness` and `--ui-text-min-lightness`, and is derived again from the more-contrast primary. Set it when the primary needs another shade for text.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-primary-text",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-primary) min(l, var(--ui-text-max-lightness)) c h), oklch( from var(--ui-primary) max(l, var(--ui-text-min-lightness)) min(c, var(--ui-text-max-chroma)) h ) )"
+    },
+    "ui-link-visited-text-color": {
+      "$description": "Text and underline color of a visited `.ui-link` and of visited links in `.ui-rich-text`. Hover and focus keep their own color. When unset, visited links look like the others.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-link-visited-text-color",
+          "example": "var(--ui-primary-text)",
+          "optional": true,
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "fallback": "--ui-primary-text",
+            "ratio": 4.5
+          },
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-primary-tonal": {
+      "$description": "Background of `Button` and `ControlGroup` with `.ui-primary` and `.ui-tonal`, and of a tonal `Avatar`. When unset, they use `--ui-palette-tint`. Material's `primary-container` and shadcn's `secondary` go here.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-primary-tonal",
+          "example": "light-dark(var(--ui-color-6), var(--ui-color-11))",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-on-primary-tonal": {
+      "$description": "Text color on `--ui-primary-tonal`. Set it with `--ui-primary-tonal`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-primary-tonal",
+          "example": "light-dark(var(--ui-gray-15), var(--ui-gray-1))",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-selected-strong": {
+      "$description": "Mark of a selected item that has to stand out from the page on its own: the current `Carousel` marker, the bar on the start edge of a selected `List` row, the selected tab of filled `Tabs`, the current `Stepper` and `Timeline` markers, and the done part of a `Progress` bar, a `Stepper` and a tracked `Timeline`. Defaults to `--ui-primary`. `--ui-selected` is the fill behind a selected item and may be faint.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-primary)",
+          "cssVar": "--ui-selected-strong",
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "ratio": 3
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{primary.ui-primary}"
+    },
+    "ui-on-selected-strong": {
+      "$description": "Text color on `--ui-selected-strong`: the selected tab of filled `Tabs` and the number or icon of the current `Stepper` and `Timeline` markers. Defaults to `--ui-on-primary`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-on-primary)",
+          "cssVar": "--ui-on-selected-strong",
+          "promise": {
+            "against": [
+              "--ui-selected-strong"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{primary.ui-on-primary}"
+    }
+  },
+  "text": {
+    "ui-text-strong": {
+      "$description": "Strongest text color, for headings, labels and values. Body text is `--ui-text`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text-strong",
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-15), var(--ui-gray-1))"
+    },
+    "ui-text": {
+      "$description": "Body text color. `--ui-text-strong` mixed into `--ui-surface` at `--ui-text-strength-light` or `--ui-text-strength-dark`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text",
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( color-mix( in oklch, var(--ui-text-strong) var(--ui-text-strength-light), var(--ui-surface) ), color-mix( in oklch, var(--ui-text-strong) var(--ui-text-strength-dark), var(--ui-surface) ) )"
+    },
+    "ui-text-subtle": {
+      "$description": "Secondary text: placeholders, field helper text, overlines, descriptions in `List` and `Menu` items, unselected `Tabs` labels and `Table` captions. `--ui-text` unless a theme sets it.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-text)",
+          "cssVar": "--ui-text-subtle",
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{text.ui-text}"
+    },
+    "ui-text-disabled": {
+      "$description": "Text color of disabled buttons and chips. `--ui-text` mixed into `--ui-surface` at `--ui-text-disabled-strength`. Also the label and border of an unchecked disabled `ToggleButton`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text-disabled",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color-mix( in oklch, var(--ui-text) var(--ui-text-disabled-strength), var(--ui-surface) )"
+    },
+    "ui-on-inverse": {
+      "$description": "Text color on `--ui-surface-inverse`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-inverse",
+          "promise": {
+            "against": [
+              "--ui-surface-inverse"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-1), var(--ui-gray-15))"
+    },
+    "ui-on-fill": {
+      "$description": "Text on an intent fill: an intent color with its lightness capped so light text reads on it, within `--ui-accent-fill-max-lightness` for critical `Button`s and the critical, info, neutral and success `Badge`, and within `--ui-choice-fill-max-lightness` for the invalid choice mark and the checked one in dark mode. Near-white in both modes. The fill has no token of its own, since each intent is one. Not `--ui-palette-on-strong`, which turns dark in dark mode for the light `--ui-palette-strong`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-gray-1)",
+          "cssVar": "--ui-on-fill",
+          "promise": {
+            "against": [
+              "oklch(from var(--ui-critical) min(l, var(--ui-accent-fill-max-lightness)) c h)",
+              "oklch(from var(--ui-info) min(l, var(--ui-accent-fill-max-lightness)) c h)",
+              "oklch(from var(--ui-neutral) min(l, var(--ui-accent-fill-max-lightness)) c h)",
+              "oklch(from var(--ui-success) min(l, var(--ui-accent-fill-max-lightness)) c h)"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{palette-steps.ui-gray-1}"
+    }
+  },
+  "surfaces": {
+    "ui-surface": {
+      "$description": "Page and card background.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-1), var(--ui-gray-13))"
+    },
+    "ui-surface-elevated": {
+      "$description": "Background of elevated cards and accordions, dialogs, drawers, menus and native `Select` options.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface-elevated",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-1), var(--ui-gray-12))"
+    },
+    "ui-surface-filled": {
+      "$description": "Background of filled areas: lists, `.ui-filled` progress and range tracks, table headers and footers, and hovered table rows.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface-filled",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-4), var(--ui-gray-15))"
+    },
+    "ui-surface-inverse": {
+      "$description": "Background of `Tooltip`, the `Carousel` buttons and `kbd`, `var`, `.ui-kbd` and `.ui-var`, inverted against the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface-inverse",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-15), var(--ui-gray-2))"
+    },
+    "ui-surface-tonal": {
+      "$description": "Background of tonal variants.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface-tonal",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-3), var(--ui-gray-12))"
+    },
+    "ui-surface-tonal-hover": {
+      "$description": "Hover fill of a `--ui-surface-tonal` surface: clickable `Chip`s, filled `TextField`, `Select` and `Textarea` fields, and tonal `Button`s with `--ui-button-hover: shade-all`. Derived from `--ui-surface-tonal`, darker in light mode and lighter in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-surface-tonal-hover",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-surface-tonal) calc(l * 0.93) c h), oklch(from var(--ui-surface-tonal) calc(l * 1.1) c h) )"
+    }
+  },
+  "borders": {
+    "ui-border-width": {
+      "$description": "Default border width for components that draw a border.",
+      "$extensions": {
+        "opui": {
+          "css": "1px",
+          "cssVar": "--ui-border-width",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 1
+      }
+    },
+    "ui-border-width-thick": {
+      "$description": "Width of emphasized rules: the head and foot rules of rich text tables, the `AvatarGroup` ring, the `Badge` border, the neutral `Chip` dot, the dotted `DescriptionList` rule, the `Tabs` indicator, the bar on a selected `List` row, the `Spinner` ring, and at one and a half times, the blockquote bar.",
+      "$extensions": {
+        "opui": {
+          "css": "2px",
+          "cssVar": "--ui-border-width-thick",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 2
+      }
+    },
+    "ui-radius": {
+      "$description": "Corner radius for every component: cards, callouts, menus, buttons and fields follow it, and small parts like `kbd`, tooltips and checkboxes never get rounder than it. Set it to `0` for square corners. Takes a single length.",
+      "$extensions": {
+        "opui": {
+          "css": "0.5rem",
+          "cssVar": "--ui-radius",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 0.5
+      }
+    },
+    "ui-radius-round": {
+      "$description": "The pill radius for round buttons, avatars, badges, the chip dot, radios, switches, the range track and the carousel buttons and markers.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-radius-round",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "1e5px"
+    },
+    "ui-chip-radius": {
+      "$description": "Corner radius for `Chip`. When unset, chips follow `--ui-radius`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-chip-radius",
+          "example": "var(--ui-radius)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-dialog-radius": {
+      "$description": "Corner radius for `Dialog`. When unset, dialogs follow `--ui-radius`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-dialog-radius",
+          "example": "var(--ui-radius)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-menu-radius": {
+      "$description": "Corner radius for `Menu`. When unset, menus follow `--ui-radius`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-menu-radius",
+          "example": "var(--ui-radius)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-radius-large": {
+      "$description": "Corner radius for large surfaces, such as cards and dialogs that want more rounding than controls. `--ui-radius` times 1.5, so `0` still squares it. Not read by a component yet.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-radius-large",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(var(--ui-radius) * 1.5)"
+    },
+    "ui-radius-small": {
+      "$description": "Corner radius of small parts: `kbd`, inline `code`, `mark`, `var`, `Tooltip`, the file input and a `rounded` `Avatar`. `--ui-radius`, capped at 5px.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-radius-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "min(5px, var(--ui-radius))"
+    },
+    "ui-radius-x-small": {
+      "$description": "Corner radius of the `Checkbox` box. `--ui-radius`, capped at 2px.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-radius-x-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "min(2px, var(--ui-radius))"
+    },
+    "ui-border-color": {
+      "$description": "Default border color for cards, lists, tables and dividers. `--ui-text-strong` mixed into `--ui-surface` at `--ui-border-strength-light` or `--ui-border-strength-dark`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-color",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( color-mix( in oklch, var(--ui-text-strong) var(--ui-border-strength-light), var(--ui-surface) ), color-mix( in oklch, var(--ui-text-strong) var(--ui-border-strength-dark), var(--ui-surface) ) )"
+    },
+    "ui-border-color-on-filled": {
+      "$description": "Border color inside filled surfaces: lists without a variant and table headers. `List` and `Table` set `--ui-border-color` to it on those parts.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-color-on-filled",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( var(--ui-gray-6), var(--ui-gray-12) )"
+    },
+    "ui-border-color-on-raised": {
+      "$description": "Borders drawn inside a raised surface (tonal and elevated `Card` and `Accordion`, `Dialog`, `Drawer`, `Menu`, the `Select` picker and tonal `Callout` without a severity): dividers, separators, outlined controls. The same mix as `--ui-border-color` by default. Each raised component sets `--ui-border-color` to it on its root, so a theme that wants another border inside raised surfaces sets this one. The edge of the surface itself is `--ui-border-color-raised`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-color-on-raised",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( color-mix( in oklch, var(--ui-text-strong) var(--ui-border-strength-light), var(--ui-surface-elevated) ), color-mix( in oklch, var(--ui-text-strong) var(--ui-border-strength-dark), var(--ui-surface-elevated) ) )"
+    },
+    "ui-border-color-raised": {
+      "$description": "The edge of every raised surface: tonal and elevated `Card`, `Accordion` and `Dialog`, tonal `Callout` without a severity, `Drawer`, `Menu` and the `Select` picker. Set it to outline them all at once, or to `transparent` to drop their edges. When unset, each keeps its own edge: cards, accordions and dialogs the page background, so they stay visible on tonal surfaces, callouts their tonal background, and drawers, menus and the picker `--ui-border-color-on-raised`. The borders inside a raised surface are `--ui-border-color-on-raised`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-color-raised",
+          "example": "var(--ui-border-color)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    }
+  },
+  "field-input": {
+    "ui-field-radius": {
+      "$description": "Corner radius for fields. When unset, they follow `--ui-radius`, also where it's set on a part of the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-radius",
+          "example": "var(--ui-radius)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-field-bg-color": {
+      "$description": "Background of `TextField`, `Textarea` and `Select` fields. When unset, `--ui-surface`, the page color.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-bg-color",
+          "example": "var(--ui-surface)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-field-padding-inline": {
+      "$description": "Horizontal padding inside `TextField`, `Textarea` and `Select` fields. When unset, `--ui-space-2`. `.ui-large` reads `--ui-field-padding-inline-large`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-padding-inline",
+          "example": "var(--ui-space-2)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-field-padding-inline-large": {
+      "$description": "Horizontal padding inside `TextField`, `Textarea` and `Select` fields with `.ui-large`. When unset, `--ui-space-3`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-padding-inline-large",
+          "example": "var(--ui-space-3)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-field-placeholder-text-color": {
+      "$description": "Color of placeholder text in fields. When unset, `--ui-text-subtle`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-placeholder-text-color",
+          "example": "var(--ui-text-subtle)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-field-border-width": {
+      "$description": "Border width for fields, `Checkbox`, `Radio` and `Switch`.",
+      "$extensions": {
+        "opui": {
+          "css": "1px",
+          "cssVar": "--ui-field-border-width",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 1
+      }
+    },
+    "ui-field-helper-text-color": {
+      "$description": "Text color for helper and end text under a field.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-text-subtle)",
+          "cssVar": "--ui-field-helper-text-color",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{text.ui-text-subtle}"
+    },
+    "ui-field-helper-font-size": {
+      "$description": "Font size for helper and end text under a field.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-caption)",
+          "cssVar": "--ui-field-helper-font-size",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-caption}"
+    },
+    "ui-field-helper-line-height": {
+      "$description": "Line height for helper and end text under a field.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-line-height-control)",
+          "cssVar": "--ui-field-helper-line-height",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": "{typography.ui-line-height-control}"
+    },
+    "ui-field-label-text-color": {
+      "$description": "Text color for field labels.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-text-strong)",
+          "cssVar": "--ui-field-label-text-color",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{text.ui-text-strong}"
+    },
+    "ui-field-label-font-size": {
+      "$description": "Font size for field labels.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-small)",
+          "cssVar": "--ui-field-label-font-size",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-small}"
+    },
+    "ui-field-label-font-weight": {
+      "$description": "Font weight for emphasized field labels and legends.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-weight-semibold)",
+          "cssVar": "--ui-field-label-font-weight",
+          "tier": "role"
+        }
+      },
+      "$type": "fontWeight",
+      "$value": "{typography.ui-font-weight-semibold}"
+    },
+    "ui-field-required-text-color": {
+      "$description": "Color of the required asterisk.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-invalid-text)",
+          "cssVar": "--ui-field-required-text-color",
+          "promise": {
+            "against": [
+              "--ui-surface",
+              "--ui-surface-elevated",
+              "--ui-surface-filled",
+              "--ui-surface-tonal"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "{intent-tokens.ui-invalid-text}"
+    },
+    "ui-field-border-color": {
+      "$description": "Border color of every empty control: `TextField`, `Select`, `Textarea`, the unchecked `Checkbox`, `Radio` and `Switch` unless `--ui-choice-border-color` is set, the `Range` track and the `Progress` outline. `--ui-text-strong` mixed into `--ui-surface` at `--ui-field-border-strength`, so it reaches 3:1. Lighter than `--ui-border-color`, which is decorative, is a choice a theme can make.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-border-color",
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "ratio": 3
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color-mix( in oklch, var(--ui-text-strong) var(--ui-field-border-strength), var(--ui-surface) )"
+    },
+    "ui-field-border-color-on-filled": {
+      "$description": "Field border color inside filled surfaces: lists without a variant and table headers. `--ui-text-strong` mixed into `--ui-surface-filled` at `--ui-field-border-strength`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-border-color-on-filled",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color-mix( in oklch, var(--ui-text-strong) var(--ui-field-border-strength), var(--ui-surface-filled) )"
+    },
+    "ui-field-border-color-on-raised": {
+      "$description": "Field border color inside raised surfaces. The same mix as `--ui-field-border-color` by default. Each raised component sets `--ui-field-border-color` to it on its root.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-border-color-on-raised",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "color-mix( in oklch, var(--ui-text-strong) var(--ui-field-border-strength), var(--ui-surface-elevated) )"
+    }
+  },
+  "focus-ring": {
+    "ui-focus-border-width": {
+      "$description": "Border width of a focused `Checkbox` and `Radio` and of the field of a focused `NumberField`, `Select`, `Textarea` and `TextField`, so the focus edge thickens, like GOV.UK's 4px and Material 3's 2dp outlined fields. Never thinner than `--ui-choice-border-width` or `--ui-field-border-width`, and the extra width grows inward, so the check, the dot and the text keep their place. Forced colors keep the wider border. When wider than the ring, it is also the bar under a highlighted link, with `--ui-link-focus` set to `highlight`. When unset, the border keeps its width.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-border-width",
+          "example": "4px",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-focus-ring-offset": {
+      "$description": "Distance between a control and its focus ring.",
+      "$extensions": {
+        "opui": {
+          "css": "2px",
+          "cssVar": "--ui-focus-ring-offset",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 2
+      }
+    },
+    "ui-focus-ring-style": {
+      "$description": "Outline style of the focus ring.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-ring-style",
+          "tier": "role"
+        }
+      },
+      "$type": "strokeStyle",
+      "$value": "solid"
+    },
+    "ui-focus-ring-width": {
+      "$description": "Width of the focus ring. `3px` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "2px",
+          "cssVar": "--ui-focus-ring-width",
+          "modes": {
+            "more-contrast": "3px"
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 2
+      }
+    },
+    "ui-focus-border-color": {
+      "$description": "Border color of a focused `Button`, `Checkbox`, `Chip`, `Radio`, `Switch` and `ToggleButton`, of the field of a focused `NumberField`, `Select`, `Textarea` and `TextField`, and of a checkbox or radio card and a `Card` with a focused card link. It gives the focus ring a second color to sit on, like a dark edge under a bright ring, so pair it with `--ui-focus-ring-offset: 0px`. When set, the focus ring promises its contrast against this border instead of the page. Links and buttons that highlight, with `--ui-link-focus` or `--ui-button-focus` set to `highlight`, show neither the ring nor this border: `--ui-on-focus-highlight` carries their contrast. When unset, each keeps its own border. Forced colors ignore it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-border-color",
+          "example": "var(--ui-text-strong)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-focus-ring-color": {
+      "$description": "Color of the keyboard focus ring. Black on surfaces lighter than OKLCH 0.6 and white on darker ones, so it reaches 3:1 on any `--ui-surface`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-ring-color",
+          "promise": {
+            "against": [
+              "var(--ui-focus-border-color, var(--ui-surface))"
+            ],
+            "ratio": 3
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-surface) clamp(0, (0.6 - l) * 1000, 1) 0 0 )"
+    },
+    "ui-focus-ring-inset": {
+      "$description": "Negative offset for focus rings drawn inside a control, such as `List` items and `Select` options.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-ring-inset",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(-1 * var(--ui-focus-ring-width))"
+    },
+    "ui-focus-highlight": {
+      "$description": "Fill of a focused link or button that highlights instead of showing the ring, when `--ui-link-focus` or `--ui-button-focus` is `highlight`: `--ui-focus-ring-color` made opaque. A translucent ring, like Bootstrap's, fills at full strength, since text contrast on a see-through fill depends on what is behind it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-highlight",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch(from var(--ui-focus-ring-color) l c h / 1)"
+    },
+    "ui-on-focus-highlight": {
+      "$description": "Text color on `--ui-focus-highlight`, and the bar under a highlighted link: black or white, whichever reads on it. It switches at OKLCH lightness 0.57, where black and white both reach 4.5:1 on a gray, since it colors text; the focus ring switches at 0.6, which only needs 3:1. Set it to match a brand's focus text, and hand it back under more contrast with the ring color.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-focus-highlight",
+          "promise": {
+            "against": [
+              "--ui-focus-highlight"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch( from var(--ui-focus-highlight) clamp(0, (0.57 - l) * 1000, 1) 0 0 )"
+    }
+  },
+  "typography": {
+    "ui-font-body": {
+      "$description": "Font family for body text, fields and buttons. `system-ui, sans-serif` by default.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-body",
+          "tier": "role"
+        }
+      },
+      "$type": "fontFamily",
+      "$value": "system-ui, sans-serif"
+    },
+    "ui-font-code": {
+      "$description": "Font family for `code`, `kbd`, `samp` and `pre` in rich text, `.ui-kbd`, `.ui-samp`, `.ui-var`, code blocks and `kbd` in buttons and lists. A monospace stack by default.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-code",
+          "tier": "role"
+        }
+      },
+      "$type": "fontFamily",
+      "$value": "Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace"
+    },
+    "ui-font-heading": {
+      "$description": "Font family for `h1`–`h6` and the `.ui-h1`–`.ui-h6` classes. When unset, headings follow `--ui-font-body`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-heading",
+          "example": "var(--ui-font-body)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "fontFamily"
+    },
+    "ui-font-size-100": {
+      "$description": "The smallest step of the type scale, 12px. `--ui-font-size-caption` reads it. Set the steps to reshape every size at once, or a role to move one.",
+      "$extensions": {
+        "opui": {
+          "css": "0.75rem",
+          "cssVar": "--ui-font-size-100",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 0.75
+      }
+    },
+    "ui-font-size-200": {
+      "$description": "Type scale step, 14px. `--ui-font-size-small` reads it.",
+      "$extensions": {
+        "opui": {
+          "css": "0.875rem",
+          "cssVar": "--ui-font-size-200",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 0.875
+      }
+    },
+    "ui-font-size-300": {
+      "$description": "Type scale step, 16px. `--ui-font-size-body`, `--ui-font-size-control` and `--ui-font-size-h6` read it.",
+      "$extensions": {
+        "opui": {
+          "css": "1rem",
+          "cssVar": "--ui-font-size-300",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1
+      }
+    },
+    "ui-font-size-400": {
+      "$description": "Type scale step, 18px. `--ui-font-size-h5` reads it, and `--ui-font-size-h4` grows from it.",
+      "$extensions": {
+        "opui": {
+          "css": "1.125rem",
+          "cssVar": "--ui-font-size-400",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1.125
+      }
+    },
+    "ui-font-size-500": {
+      "$description": "Type scale step, 20px. `--ui-font-size-large` reads it, `--ui-font-size-h3` grows from it and `--ui-font-size-h4` grows to it.",
+      "$extensions": {
+        "opui": {
+          "css": "1.25rem",
+          "cssVar": "--ui-font-size-500",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1.25
+      }
+    },
+    "ui-font-size-600": {
+      "$description": "Type scale step, 24px. `--ui-font-size-h2` grows from it and `--ui-font-size-h3` grows to it.",
+      "$extensions": {
+        "opui": {
+          "css": "1.5rem",
+          "cssVar": "--ui-font-size-600",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1.5
+      }
+    },
+    "ui-font-size-700": {
+      "$description": "Type scale step, 32px. `--ui-font-size-h1` grows from it.",
+      "$extensions": {
+        "opui": {
+          "css": "2rem",
+          "cssVar": "--ui-font-size-700",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 2
+      }
+    },
+    "ui-font-size-800": {
+      "$description": "Type scale step, 40px. `--ui-font-size-h2` grows to it.",
+      "$extensions": {
+        "opui": {
+          "css": "2.5rem",
+          "cssVar": "--ui-font-size-800",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 2.5
+      }
+    },
+    "ui-font-size-900": {
+      "$description": "The largest step of the type scale, 56px. `--ui-font-size-h1` grows to it.",
+      "$extensions": {
+        "opui": {
+          "css": "3.5rem",
+          "cssVar": "--ui-font-size-900",
+          "tier": "primitive"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 3.5
+      }
+    },
+    "ui-fluid-min-inline-size": {
+      "$description": "Viewport inline size where `--ui-fluid-progress` starts at 0 and the fluid heading sizes at their minimum, 20rem.",
+      "$extensions": {
+        "opui": {
+          "css": "20rem",
+          "cssVar": "--ui-fluid-min-inline-size",
+          "tier": "knob"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 20
+      }
+    },
+    "ui-fluid-max-inline-size": {
+      "$description": "Viewport inline size where `--ui-fluid-progress` reaches 1 and the fluid heading sizes their maximum, 48rem.",
+      "$extensions": {
+        "opui": {
+          "css": "48rem",
+          "cssVar": "--ui-fluid-max-inline-size",
+          "tier": "knob"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 48
+      }
+    },
+    "ui-font-weight-normal": {
+      "$description": "Font weight for body text, `List` text and `Button` keyboard shortcuts.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-weight-normal",
+          "tier": "role"
+        }
+      },
+      "$type": "fontWeight",
+      "$value": "400"
+    },
+    "ui-font-weight-medium": {
+      "$description": "Font weight for badges, overlines and group labels.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-weight-medium",
+          "tier": "role"
+        }
+      },
+      "$type": "fontWeight",
+      "$value": "500"
+    },
+    "ui-font-weight-semibold": {
+      "$description": "Font weight for labels, table headers and titles.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-weight-semibold",
+          "tier": "role"
+        }
+      },
+      "$type": "fontWeight",
+      "$value": "600"
+    },
+    "ui-font-weight-bold": {
+      "$description": "Font weight for headings, buttons and terms.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-weight-bold",
+          "tier": "role"
+        }
+      },
+      "$type": "fontWeight",
+      "$value": "700"
+    },
+    "ui-letter-spacing-caps": {
+      "$description": "Letter spacing of uppercase text: overlines and the first paragraph of an `hgroup`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-letter-spacing-caps",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "0.06em"
+    },
+    "ui-letter-spacing-display": {
+      "$description": "Letter spacing of `h1` and `h2`, tighter than the body.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-letter-spacing-display",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "-0.02em"
+    },
+    "ui-letter-spacing-heading": {
+      "$description": "Letter spacing of `h3` and `h4`, slightly tighter than the body.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-letter-spacing-heading",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "-0.01em"
+    },
+    "ui-line-height-tight": {
+      "$description": "Line height of single-line controls and compact text: field inputs, dense `Table` cells, the `Stat` value, `Tooltip`, `Card` captions and keyboard hints in buttons.",
+      "$extensions": {
+        "opui": {
+          "css": "1.25",
+          "cssVar": "--ui-line-height-tight",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": 1.25
+    },
+    "ui-line-height-control": {
+      "$description": "Line height of interface text: labels, helpers, choice labels and field hints.",
+      "$extensions": {
+        "opui": {
+          "css": "1.5",
+          "cssVar": "--ui-line-height-control",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": 1.5
+    },
+    "ui-line-height": {
+      "$description": "Line height of captions, `List` text, the `Stat` label and description and the `Stepper` description. Body text and prose use `--ui-line-height-relaxed`.",
+      "$extensions": {
+        "opui": {
+          "css": "1.6",
+          "cssVar": "--ui-line-height",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": 1.6
+    },
+    "ui-line-height-relaxed": {
+      "$description": "Line height of the page text set on `html`, and of `Tabs` labels.",
+      "$extensions": {
+        "opui": {
+          "css": "1.75",
+          "cssVar": "--ui-line-height-relaxed",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": 1.75
+    },
+    "ui-line-height-prose": {
+      "$description": "Line height of `.ui-rich-text`, for themes whose prose is looser than their interface text. When unset, rich text keeps the line height around it, `--ui-line-height-relaxed` on the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-line-height-prose",
+          "example": "var(--ui-line-height-relaxed)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "number"
+    },
+    "ui-rhythm-step": {
+      "$description": "Vertical rhythm unit. Rich text margins and heading line heights round to it.",
+      "$extensions": {
+        "opui": {
+          "css": "0.25rem",
+          "cssVar": "--ui-rhythm-step",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 0.25
+      }
+    },
+    "ui-flow-gap": {
+      "$description": "Space between paragraphs, lists, blockquotes, tables, `details` and `address` in `.ui-rich-text`, rounded to `--ui-rhythm-step`. Headings, code blocks, figures and `hr` take multiples of it, with more room above headings than below. When unset, `1.25em` of the rich text font size.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-flow-gap",
+          "example": "1.25em",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-heading-margin-block-start": {
+      "$description": "Space above `h1` to `h6` in `.ui-rich-text`, rounded to `--ui-rhythm-step`. It overlaps the margin of the block before, so `0px` leaves the paragraph gap. Give a length: a unitless `0` drops both margins. `em` is the heading's own font size, so larger headings get more room, and `rem` gives every level the same space. When unset, each level takes a multiple of `--ui-flow-gap`: 3 above `h1` and `h2`, 2 above `h3` and 1.5 above `h4` to `h6`. A heading group keeps its own spacing.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-heading-margin-block-start",
+          "example": "1.5em",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-heading-margin-block-end": {
+      "$description": "Space below `h1` to `h6` in `.ui-rich-text`, rounded to `--ui-rhythm-step`. `em` is the heading's own font size, so larger headings get more room, and `rem` gives every level the same space. When unset, each level takes a multiple of `--ui-flow-gap`: 1 under `h1`, 0.75 under `h2` and 0.5 under `h3` to `h6`. A heading group keeps its own spacing.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-heading-margin-block-end",
+          "example": "0.5em",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-underline-offset": {
+      "$description": "Gap between text and its underline for `Link`, rich text links and `Stepper` links.",
+      "$extensions": {
+        "opui": {
+          "css": "2px",
+          "cssVar": "--ui-underline-offset",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 2
+      }
+    },
+    "ui-underline-offset-small": {
+      "$description": "Gap between text and the underline of `abbr`, `dfn`, `ins` and `u` and their classes.",
+      "$extensions": {
+        "opui": {
+          "css": "1px",
+          "cssVar": "--ui-underline-offset-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 1
+      }
+    },
+    "ui-underline-thickness-hover": {
+      "$description": "Underline thickness of `Link` and rich text links on hover and keyboard focus. At rest they keep the font's own thickness.",
+      "$extensions": {
+        "opui": {
+          "css": "3px",
+          "cssVar": "--ui-underline-thickness-hover",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 3
+      }
+    },
+    "ui-link-focus": {
+      "$description": "How a focused `.ui-link` and a focused link in `.ui-rich-text` show focus. `highlight` fills the link with `--ui-focus-highlight`, draws its text and a bar under it in `--ui-on-focus-highlight` and drops the underline, like GOV.UK. The bar is a block-end border as thick as the focus ring or `--ui-focus-border-width`, whichever is wider, so it follows the writing mode and sits under every line of a wrapped link. The outline stays, transparent, so forced colors still draw the ring. When unset (`ring`), the focus ring shows.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-link-focus",
+          "example": "ring",
+          "optional": true,
+          "tier": "component"
+        }
+      }
+    },
+    "ui-link-font-weight": {
+      "$description": "Font weight of `.ui-link` and of links in `.ui-rich-text`. When unset, links follow `--ui-font-weight-bold`, the weight of headings.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-link-font-weight",
+          "example": "var(--ui-font-weight-bold)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "fontWeight"
+    },
+    "ui-font-size-caption": {
+      "$description": "Font size of captions, `Badge`, `Chip`, `Divider` labels, `List` secondary text, `Menu` shortcuts, overlines, `small`, `figcaption` and x-small buttons, toggles and fields. Defaults to `--ui-font-size-100`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-100)",
+          "cssVar": "--ui-font-size-caption",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-100}"
+    },
+    "ui-font-size-small": {
+      "$description": "Font size of helper text, `Callout`, `Table`, `Tooltip`, code blocks, `List` text, small buttons, toggles and fields, and large chips. Defaults to `--ui-font-size-200`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-200)",
+          "cssVar": "--ui-font-size-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-200}"
+    },
+    "ui-font-size-body": {
+      "$description": "Font size of body copy, `Card` text and the `Callout` title. Defaults to `--ui-font-size-300`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-300)",
+          "cssVar": "--ui-font-size-body",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-300}"
+    },
+    "ui-font-size-control": {
+      "$description": "Font size of the default `Button`, `Select`, `Tabs`, `TextField`, `Textarea` and `ToggleButton`. Small and x-small sizes read `--ui-font-size-small` and `--ui-font-size-caption`. Defaults to `--ui-font-size-300`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-300)",
+          "cssVar": "--ui-font-size-control",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-300}"
+    },
+    "ui-font-size-large": {
+      "$description": "Font size of lead paragraphs, `.ui-p.ui-large`, large `Avatar` initials, the `DescriptionList` total row, the value of a small `Stat` and the `OneTimeCode` digits. Defaults to `--ui-font-size-500`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-500)",
+          "cssVar": "--ui-font-size-large",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-500}"
+    },
+    "ui-fluid-progress": {
+      "$description": "Position of the viewport inline size in the `--ui-fluid-min-inline-size` to `--ui-fluid-max-inline-size` window, 0 to 1, from `progress()`. `--ui-font-size-h1` to `--ui-font-size-h4` grow with it, and a theme can ramp other values on the same window.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-fluid-progress",
+          "tier": "primitive"
+        }
+      },
+      "$type": "number",
+      "$value": "progress( 100vi, var(--ui-fluid-min-inline-size), var(--ui-fluid-max-inline-size) )"
+    },
+    "ui-font-size-h1": {
+      "$description": "Font size for `h1` and `.ui-h1`. Grows from `--ui-font-size-700` to `--ui-font-size-900` with `--ui-fluid-progress`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-size-h1",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( var(--ui-font-size-700) + (var(--ui-font-size-900) - var(--ui-font-size-700)) * var(--ui-fluid-progress) )"
+    },
+    "ui-font-size-h2": {
+      "$description": "Font size for `h2` and `.ui-h2`. Grows from `--ui-font-size-600` to `--ui-font-size-800` with `--ui-fluid-progress`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-size-h2",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( var(--ui-font-size-600) + (var(--ui-font-size-800) - var(--ui-font-size-600)) * var(--ui-fluid-progress) )"
+    },
+    "ui-font-size-h3": {
+      "$description": "Font size for `h3` and `.ui-h3`. Grows from `--ui-font-size-500` to `--ui-font-size-600` with `--ui-fluid-progress`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-size-h3",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( var(--ui-font-size-500) + (var(--ui-font-size-600) - var(--ui-font-size-500)) * var(--ui-fluid-progress) )"
+    },
+    "ui-font-size-h4": {
+      "$description": "Font size for `h4` and `.ui-h4`. Grows from `--ui-font-size-400` to `--ui-font-size-500` with `--ui-fluid-progress`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-font-size-h4",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( var(--ui-font-size-400) + (var(--ui-font-size-500) - var(--ui-font-size-400)) * var(--ui-fluid-progress) )"
+    },
+    "ui-font-size-h5": {
+      "$description": "Font size for `h5` and `.ui-h5`. Defaults to `--ui-font-size-400`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-400)",
+          "cssVar": "--ui-font-size-h5",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-400}"
+    },
+    "ui-font-size-h6": {
+      "$description": "Font size for `h6` and `.ui-h6`. Defaults to `--ui-font-size-300`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-font-size-300)",
+          "cssVar": "--ui-font-size-h6",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{typography.ui-font-size-300}"
+    }
+  },
+  "code": {
+    "ui-code-bg-color": {
+      "$description": "Background of inline `code` in rich text and `Typography`. `--ui-text` at `--ui-code-bg-alpha-light` in light mode and `--ui-code-bg-alpha-dark` in dark mode, fainter with more contrast so the text stands out.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-code-bg-color",
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-text) l c h / var(--ui-code-bg-alpha-light)), oklch(from var(--ui-text) l c h / var(--ui-code-bg-alpha-dark)) )"
+    },
+    "ui-code-block-bg-color": {
+      "$description": "Background of `pre.ui-code-block` and `pre` in rich text. `--ui-surface-inverse` in light mode and `--ui-surface-filled` in dark mode, so the block is dark in both.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-code-block-bg-color",
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( var(--ui-surface-inverse), var(--ui-surface-filled) )"
+    },
+    "ui-code-block-text-color": {
+      "$description": "Text color of `pre.ui-code-block` and `pre` in rich text. `--ui-on-inverse` in light mode and `--ui-text-strong` in dark mode, on `--ui-code-block-bg-color`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-code-block-text-color",
+          "promise": {
+            "against": [
+              "--ui-code-block-bg-color"
+            ],
+            "ratio": 4.5
+          },
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( var(--ui-on-inverse), var(--ui-text-strong) )"
+    }
+  },
+  "spacing": {
+    "ui-space-scale": {
+      "$description": "Multiplier for the `--ui-space-*` scale, the gaps, padding and margins of containers such as cards, dialogs, forms and tables, and the padding and gaps of rich text. Controls follow `--ui-density` instead. See [Spacing](/guide/theming#spacing).",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-space-scale",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-card-padding": {
+      "$description": "Padding of `Card`, `Dialog`, `Drawer` and `Accordion` content, headers, footers and actions, and of `Checkbox`, `Radio` and `Switch` cards. When unset, `--ui-space-3`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-card-padding",
+          "example": "var(--ui-space-3)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-list-item-padding-inline": {
+      "$description": "Horizontal padding of `List` and `Menu` items, headings and `Select` options. When unset, `--ui-space-3`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-list-item-padding-inline",
+          "example": "var(--ui-space-3)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-space-1": {
+      "$description": "Spacing step 1: `0.25rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-1",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(0.25rem * var(--ui-space-scale))"
+    },
+    "ui-space-2": {
+      "$description": "Spacing step 2: `0.5rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-2",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(0.5rem * var(--ui-space-scale))"
+    },
+    "ui-space-3": {
+      "$description": "Spacing step 3: `1rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-3",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1rem * var(--ui-space-scale))"
+    },
+    "ui-space-4": {
+      "$description": "Spacing step 4: `1.25rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-4",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.25rem * var(--ui-space-scale))"
+    },
+    "ui-space-5": {
+      "$description": "Spacing step 5: `1.5rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-5",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.5rem * var(--ui-space-scale))"
+    },
+    "ui-space-6": {
+      "$description": "Spacing step 6: `1.75rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-6",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.75rem * var(--ui-space-scale))"
+    },
+    "ui-space-7": {
+      "$description": "Spacing step 7: `2rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-7",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(2rem * var(--ui-space-scale))"
+    },
+    "ui-space-8": {
+      "$description": "Spacing step 8: `3rem` times `--ui-space-scale`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-space-8",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(3rem * var(--ui-space-scale))"
+    }
+  },
+  "controls": {
+    "ui-control-accent": {
+      "$description": "The accent every control shares: `Button` and `ControlGroup` without `.ui-primary` or `.ui-critical`, a checked `Checkbox`, `Radio` and `Switch`, and the `Range` thumb and fill. Unset by default, so buttons keep `--ui-palette-strong` and choice controls `--ui-primary`. Set it to `--ui-primary` to give every control the brand color in one line, like Material and shadcn, and `--ui-button-accent` or `--ui-choice-accent` to override one of them.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-accent",
+          "example": "var(--ui-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-control-border-color": {
+      "$description": "Border color of controls without a fill: `Button` with `.ui-outlined`, also in an outlined `ControlGroup`, `ToggleButton`, `ToggleGroup`, `Chip` with `.ui-outlined`, the track of `Tabs` with `.ui-outlined`, and the selected `Tabs` pill. When unset, outlined buttons use their color, the selected `Tabs` pill `--ui-field-border-color` and the rest `--ui-border-color`. Themes that outline controls like fields set it to `--ui-field-border-color`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-border-color",
+          "example": "var(--ui-field-border-color)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-control-border-color-filled": {
+      "$description": "Border color of controls with a fill: `Button` with `.ui-filled` or `.ui-tonal`, also in a filled or tonal `ControlGroup`, the dividers between buttons in a `ControlGroup` that isn't outlined (unset, filled groups use `currentColor` dividers, or a shade of the accent in primary and critical ones), a checked `ToggleButton`, `Chip` without `.ui-outlined` and the `Carousel` buttons. When unset, buttons have no visible border, the carousel buttons use a shade of their fill and the rest use `--ui-border-color`. Set it with `--ui-control-border-color` to outline every control.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-border-color-filled",
+          "example": "oklch(0 0 0)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-on-control-accent": {
+      "$description": "Text and mark color on a `--ui-control-accent` fill. Set it with `--ui-control-accent`. `--ui-button-on-accent` and `--ui-choice-on-accent` override it per component.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-control-accent",
+          "example": "var(--ui-on-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-track-bg-color": {
+      "$description": "The empty part of a track: the unchecked `Switch`, `Progress` and the `Range` track. When unset, `Progress` and tonal ranges use `--ui-surface-tonal`, the default range its field border and the switch `--ui-switch-track-bg-color`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-track-bg-color",
+          "example": "var(--ui-surface-tonal)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    }
+  },
+  "control-sizes": {
+    "ui-density": {
+      "$description": "Multiplier for the control sizes: `--ui-control-size*`, `--ui-chip-size*`, `--ui-choice-size*` and the `Switch` thumb and track sizes. `0.875` is compact, `1.125` is comfortable. See [Density](/guide/theming#density).",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-density",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-control-size-x-small": {
+      "$description": "Shared x-small height for fields and buttons.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-size-x-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.75rem * var(--ui-density))"
+    },
+    "ui-control-size-small": {
+      "$description": "Shared small height for fields and buttons.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-size-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(2rem * var(--ui-density))"
+    },
+    "ui-control-size": {
+      "$description": "Shared default height for fields and buttons so they line up.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-size",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(2.5rem * var(--ui-density))"
+    },
+    "ui-control-size-large": {
+      "$description": "Shared large height for fields and buttons.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-control-size-large",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(3rem * var(--ui-density))"
+    },
+    "ui-field-size-x-small": {
+      "$description": "Field height with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-x-small)",
+          "cssVar": "--ui-field-size-x-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-x-small}"
+    },
+    "ui-field-size-small": {
+      "$description": "Field height with `.ui-small`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-small)",
+          "cssVar": "--ui-field-size-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-small}"
+    },
+    "ui-field-size": {
+      "$description": "Default field height.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size)",
+          "cssVar": "--ui-field-size",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size}"
+    },
+    "ui-field-size-large": {
+      "$description": "Field height with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-large)",
+          "cssVar": "--ui-field-size-large",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-large}"
+    },
+    "ui-button-size-x-small": {
+      "$description": "`Button` and `ControlGroup` height with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-x-small)",
+          "cssVar": "--ui-button-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-x-small}"
+    },
+    "ui-button-size-small": {
+      "$description": "`Button` height with `.ui-small`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-small)",
+          "cssVar": "--ui-button-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-small}"
+    },
+    "ui-button-size": {
+      "$description": "Default `Button` height.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size)",
+          "cssVar": "--ui-button-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size}"
+    },
+    "ui-button-size-large": {
+      "$description": "`Button` height with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-large)",
+          "cssVar": "--ui-button-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-large}"
+    },
+    "ui-chip-size-x-small": {
+      "$description": "`Chip` height with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-chip-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.5rem * var(--ui-density))"
+    },
+    "ui-chip-size-small": {
+      "$description": "`Chip` height with `.ui-small`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-x-small)",
+          "cssVar": "--ui-chip-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-x-small}"
+    },
+    "ui-chip-size": {
+      "$description": "Default `Chip` height.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size-small)",
+          "cssVar": "--ui-chip-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size-small}"
+    },
+    "ui-chip-size-large": {
+      "$description": "`Chip` height with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-control-size)",
+          "cssVar": "--ui-chip-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "{control-sizes.ui-control-size}"
+    }
+  },
+  "button": {
+    "ui-button-accent": {
+      "$description": "Color of `Button` and `ControlGroup` without `.ui-primary` or `.ui-critical`: the fill of filled buttons, the text and border of outlined and text buttons. When unset, `--ui-control-accent`, else the darkest palette color in light mode and the lightest in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-accent",
+          "example": "light-dark(var(--ui-color-16), var(--ui-color-1))",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-button-on-accent": {
+      "$description": "Text color on a filled `--ui-button-accent` button. Set it with `--ui-button-accent`. When unset, `--ui-on-control-accent`, else `--ui-palette-on-strong`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-on-accent",
+          "example": "light-dark(var(--ui-color-1), var(--ui-color-16))",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-button-accent-filled": {
+      "$description": "Fill of `Button` and `ControlGroup` with `.ui-filled` and no `.ui-primary` or `.ui-critical`, of hovered outlined ones unless `--ui-button-hover` is `layer`, and of hovered tonal ones when it is unset. When unset, `--ui-button-accent`, so text, outlined and filled buttons share one color.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-accent-filled",
+          "example": "var(--ui-button-accent)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-button-on-accent-filled": {
+      "$description": "Text color on a `--ui-button-accent-filled` fill. Set it with `--ui-button-accent-filled`. When unset, `--ui-button-on-accent`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-on-accent-filled",
+          "example": "var(--ui-button-on-accent)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-button-radius": {
+      "$description": "Corner radius for `Button`, `ControlGroup`, `ToggleButton` and `ToggleGroup`. When unset, they follow `--ui-radius`, also where it's set on a part of the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-radius",
+          "example": "var(--ui-radius)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-button-font-weight": {
+      "$description": "Font weight of `Button`. When unset, buttons follow `--ui-font-weight-bold`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-font-weight",
+          "example": "var(--ui-font-weight-bold)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "fontWeight"
+    },
+    "ui-button-focus": {
+      "$description": "How a focused `Button` and `ControlGroup` button show focus. `highlight` fills the button with `--ui-focus-highlight` and `--ui-on-focus-highlight` text instead of the ring, like GOV.UK. The outline stays, transparent, so forced colors still draw the ring, and a button with `aria-disabled=\"true\"` keeps the ring. When unset (`ring`), the focus ring shows.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-focus",
+          "example": "ring",
+          "optional": true,
+          "tier": "component"
+        }
+      }
+    },
+    "ui-button-hover": {
+      "$description": "How `Button` and `ControlGroup` show hover and pressed states. `layer` draws a translucent state layer: the text color over filled and tonal buttons, the accent over outlined ones, which keep their text and border. Filled, tonal, primary and critical buttons use `--ui-state-hover-alpha-accent` and `--ui-state-active-alpha-accent`, and neutral outlined buttons the light and dark alphas. `shade-all` shades the fill of every button that has one, filled and tonal: filled buttons as when unset, tonal ones with `--ui-surface-tonal-hover`, darker in light mode and lighter in dark mode, and a step further when pressed. Outlined buttons fill with the accent, as when unset. When unset (`shade`), filled buttons shade their fill and outlined and tonal buttons fill with the accent.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-hover",
+          "example": "shade",
+          "optional": true,
+          "tier": "component"
+        }
+      }
+    },
+    "ui-button-hover-shadow": {
+      "$description": "Shadow of `Button` with `.ui-filled`, `.ui-outlined` or `.ui-tonal` on hover. When unset, it keeps `--ui-button-shadow`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-hover-shadow",
+          "example": "var(--ui-shadow-control)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "shadow"
+    },
+    "ui-button-shadow": {
+      "$description": "Shadow of `Button` with `.ui-filled`, `.ui-outlined` or `.ui-tonal`, and of the `Copy` confirmation. Buttons in a `ControlGroup` have none. When unset, `--ui-shadow-control`, the shadow buttons share with toggle buttons, outlined chips and fields. Set it to give buttons alone a shadow, like a pressable edge.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-shadow",
+          "example": "var(--ui-shadow-control)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "shadow"
+    },
+    "ui-button-hover-translate": {
+      "$description": "Moves `Button` with `.ui-filled`, `.ui-outlined` or `.ui-tonal` on hover, as a `translate` value. Pair it with `--ui-button-hover-shadow` to press buttons into their shadow. `none` when unset.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-hover-translate",
+          "example": "none",
+          "optional": true,
+          "tier": "component"
+        }
+      }
+    },
+    "ui-button-padding-inline-x-small": {
+      "$description": "Horizontal padding of `Button` with `.ui-x-small`. When unset, `1ex`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-padding-inline-x-small",
+          "example": "1ex",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-button-padding-inline-small": {
+      "$description": "Horizontal padding of `Button` with `.ui-small`. When unset, `1.25ex`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-padding-inline-small",
+          "example": "1.25ex",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-button-padding-inline": {
+      "$description": "Horizontal padding of `Button`. When unset, `1.5ex`, which scales with the font.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-padding-inline",
+          "example": "1.5ex",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-button-padding-inline-large": {
+      "$description": "Horizontal padding of `Button` with `.ui-large`. When unset, `2.5ex`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-padding-inline-large",
+          "example": "2.5ex",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    }
+  },
+  "tabs": {
+    "ui-tabs-accent": {
+      "$description": "Color of the selected `Tabs` label, and of the indicator with `.ui-line`. When unset, `--ui-text-strong`. Filled tabs keep `--ui-on-selected-strong`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-tabs-accent",
+          "example": "var(--ui-text-strong)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    }
+  },
+  "divider": {
+    "ui-divider-gap": {
+      "$description": "Block margin around a `Divider`, times `--ui-space-scale`. Cards, callouts, dialogs and drawers set it to `--ui-space-3`. A divider that is a direct child of a card has no margin, since the card's gap already spaces it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-divider-gap",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(clamp(1.5rem, 3vi, 2rem) * var(--ui-space-scale))"
+    }
+  },
+  "motion": {
+    "ui-duration-fast": {
+      "$description": "Transition duration for hover and press feedback.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-duration-fast",
+          "tier": "role"
+        }
+      },
+      "$type": "duration",
+      "$value": "0.1s"
+    },
+    "ui-duration": {
+      "$description": "Default transition duration. Multiplied by `--ui-motion`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-duration",
+          "tier": "role"
+        }
+      },
+      "$type": "duration",
+      "$value": "0.15s"
+    },
+    "ui-duration-slow": {
+      "$description": "Transition duration for entering and leaving overlays: `Dialog`, `Drawer` and `Menu`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-duration-slow",
+          "tier": "role"
+        }
+      },
+      "$type": "duration",
+      "$value": "0.25s"
+    },
+    "ui-ease": {
+      "$description": "Default easing for transitions.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-ease",
+          "tier": "role"
+        }
+      },
+      "$type": "cubicBezier",
+      "$value": "ease"
+    },
+    "ui-ease-enter": {
+      "$description": "Easing for elements entering the screen: opening `Dialog`, `Drawer` and `Menu`, and the `Badge`, `Progress` and `Tooltip` transitions.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-ease-enter",
+          "tier": "role"
+        }
+      },
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0, 0, 0.3, 1)"
+    },
+    "ui-ease-exit": {
+      "$description": "Easing for elements leaving the screen: closing `Dialog`, `Drawer` and `Menu`, and a dismissed toast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-ease-exit",
+          "tier": "role"
+        }
+      },
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0.4, 0, 1, 1)"
+    },
+    "ui-ease-move": {
+      "$description": "Easing for movement a theme may make springy: the `Tabs` indicator, the press scale, and `Menu`, `Select`, `Tooltip` and toasts as they open. Never for anything closing. When unset, each reads its own easing; a `linear()` spring with a little overshoot gives the controls some bounce.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-ease-move",
+          "example": "linear(0, 0.066, 0.218, 0.4, 0.578, 0.731, 0.852, 0.94, 0.998, 1.031, 1.047, 1.05, 1.046, 1.038, 1.029, 1.02, 1.012, 1.007, 1.002, 1, 1)",
+          "optional": true,
+          "tier": "role"
+        }
+      }
+    },
+    "ui-motion": {
+      "$description": "Motion multiplier. `0` disables transitions, `1` is normal speed. Set to `0` automatically under `prefers-reduced-motion`. See [Motion](/guide/theming#motion).",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-motion",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-press-scale": {
+      "$description": "Scale of `Button`, `ToggleButton` and button and link `Chip`s while pressed, over `--ui-duration` with `--ui-ease-move`. Unset, so pressing doesn't scale; `0.97` gives a light press. Buttons in a `ControlGroup` and toggles in a `ToggleGroup` never scale.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-press-scale",
+          "example": "0.97",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "number"
+    }
+  },
+  "contrast": {
+    "ui-contrast": {
+      "$description": "`more` tightens the contrast knobs (`--ui-text-strength-*`, `--ui-text-disabled-strength`, `--ui-border-strength-*`, `--ui-field-border-strength`, `--ui-code-bg-alpha-*`, `--ui-accent-max-chroma`, the `*-max-lightness` and `*-min-lightness` limits, `--ui-state-active-alpha-dark`, `--ui-state-selected-alpha-accent` and `--ui-focus-ring-width`), and every role derived from them follows. Set to `more` under `prefers-contrast: more` or by `.ui-contrast-more`. Components read it in style queries for shape changes. See [Contrast](/guide/theming#contrast).",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-contrast",
+          "modes": {
+            "more-contrast": "more"
+          },
+          "tier": "knob"
+        }
+      },
+      "$value": "normal"
+    },
+    "ui-accent-fill-max-lightness": {
+      "$description": "The highest OKLCH lightness of an intent fill, an intent color filled under `--ui-on-fill` text: the critical, info, neutral and success `Badge`, and the fills of critical `Button`s, also in a critical `ControlGroup`. Borders keep the intent color. `0.48`, and `0.45` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0.48",
+          "cssVar": "--ui-accent-fill-max-lightness",
+          "modes": {
+            "more-contrast": "0.45"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.48
+    },
+    "ui-accent-max-chroma": {
+      "$description": "The highest OKLCH chroma of `--ui-primary`, `--ui-invalid` and `--ui-palette-text` in dark mode when more contrast lifts them. `1` (no cap), and `0.1` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-accent-max-chroma",
+          "modes": {
+            "more-contrast": "0.1"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-accent-max-lightness": {
+      "$description": "The highest OKLCH lightness of the named colors except `--ui-orange`, `--ui-neutral` and `--ui-palette-accent` in light mode. `1` (no cap), and `0.42` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-accent-max-lightness",
+          "modes": {
+            "more-contrast": "0.42"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-border-strength-dark": {
+      "$description": "How much of `--ui-text-strong` is mixed into `--ui-surface` for `--ui-border-color` in dark mode. `11%`, and `55%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-strength-dark",
+          "modes": {
+            "more-contrast": "55%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "11%"
+    },
+    "ui-border-strength-light": {
+      "$description": "How much of `--ui-text-strong` is mixed into `--ui-surface` for `--ui-border-color` in light mode. `17%`, and `55%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-border-strength-light",
+          "modes": {
+            "more-contrast": "55%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "17%"
+    },
+    "ui-code-bg-alpha-dark": {
+      "$description": "Opacity of `--ui-code-bg-color`, the inline `code` background, in dark mode. `10%`, and `6%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-code-bg-alpha-dark",
+          "modes": {
+            "more-contrast": "6%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "10%"
+    },
+    "ui-code-bg-alpha-light": {
+      "$description": "Opacity of `--ui-code-bg-color`, the inline `code` background, in light mode. `12%`, and `6%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-code-bg-alpha-light",
+          "modes": {
+            "more-contrast": "6%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "12%"
+    },
+    "ui-field-border-strength": {
+      "$description": "How much of `--ui-text-strong` is mixed into the surface for `--ui-field-border-color` and its filled and raised variants. `50%`, and `70%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-border-strength",
+          "modes": {
+            "more-contrast": "70%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "50%"
+    },
+    "ui-invalid-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-invalid` in dark mode. `0` (no floor), and `0.85` with more contrast, so invalid borders stand out from the page.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-invalid-min-lightness",
+          "modes": {
+            "more-contrast": "0.85"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-palette-accent-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-palette-accent` in dark mode. `0`, and `0.71` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-palette-accent-min-lightness",
+          "modes": {
+            "more-contrast": "0.71"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-palette-border-max-lightness": {
+      "$description": "The highest OKLCH lightness of `--ui-palette-border` in light mode. `1`, and `0.53` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-palette-border-max-lightness",
+          "modes": {
+            "more-contrast": "0.53"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-palette-border-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-palette-border` in dark mode. `0`, and `0.66` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-palette-border-min-lightness",
+          "modes": {
+            "more-contrast": "0.66"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-palette-text-max-lightness": {
+      "$description": "The highest OKLCH lightness of `--ui-palette-text` in light mode. `1`, and `0.35` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-palette-text-max-lightness",
+          "modes": {
+            "more-contrast": "0.35"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-palette-text-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-palette-text` in dark mode, so it keeps 4.5:1 on every surface. `0.8` like `--ui-text-min-lightness`, and `0.93` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0.8",
+          "cssVar": "--ui-palette-text-min-lightness",
+          "modes": {
+            "more-contrast": "0.93"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.8
+    },
+    "ui-palette-tint-max-lightness": {
+      "$description": "The highest OKLCH lightness of `--ui-palette-tint` in dark mode. `1`, and `0.35` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-palette-tint-max-lightness",
+          "modes": {
+            "more-contrast": "0.35"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-palette-tint-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-palette-tint` in light mode. `0`, and `0.84` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-palette-tint-min-lightness",
+          "modes": {
+            "more-contrast": "0.84"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-primary-max-lightness": {
+      "$description": "The highest OKLCH lightness of `--ui-primary` in light mode, applied to `--ui-primary-source`. `1` (no cap), and `0.35` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "1",
+          "cssVar": "--ui-primary-max-lightness",
+          "modes": {
+            "more-contrast": "0.35"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 1
+    },
+    "ui-primary-min-lightness": {
+      "$description": "The lowest OKLCH lightness of `--ui-primary` in dark mode, applied to `--ui-primary-source`. `0` (no floor), and `0.93` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0",
+          "cssVar": "--ui-primary-min-lightness",
+          "modes": {
+            "more-contrast": "0.93"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0
+    },
+    "ui-text-disabled-strength": {
+      "$description": "How much of `--ui-text` is mixed into `--ui-surface` for `--ui-text-disabled`. `50%`, and `60%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text-disabled-strength",
+          "modes": {
+            "more-contrast": "60%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "50%"
+    },
+    "ui-text-max-chroma": {
+      "$description": "The highest OKLCH chroma of the intent text roles in dark mode, which keeps a light color inside sRGB. `0.1`. Also caps the dark mode text of `Button` and `ControlGroup` without `.ui-primary` or `.ui-critical`.",
+      "$extensions": {
+        "opui": {
+          "css": "0.1",
+          "cssVar": "--ui-text-max-chroma",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.1
+    },
+    "ui-text-max-lightness": {
+      "$description": "The highest OKLCH lightness of the intent text roles (`--ui-primary-text`, `--ui-critical-text` and the other `-text` roles) in light mode, so they keep 4.5:1 on every surface. `0.41`, and `0.3` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "css": "0.41",
+          "cssVar": "--ui-text-max-lightness",
+          "modes": {
+            "more-contrast": "0.3"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.41
+    },
+    "ui-text-min-lightness": {
+      "$description": "The lowest OKLCH lightness of the intent text roles in dark mode, so they keep 4.5:1 on every surface. `0.8`, and `0.9` with more contrast. Their chroma is also capped at `--ui-text-max-chroma` in dark mode. Also the lowest lightness of `Button` and `ControlGroup` text without `.ui-primary` or `.ui-critical` in dark mode.",
+      "$extensions": {
+        "opui": {
+          "css": "0.8",
+          "cssVar": "--ui-text-min-lightness",
+          "modes": {
+            "more-contrast": "0.9"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.8
+    },
+    "ui-text-strength-dark": {
+      "$description": "How much of `--ui-text-strong` is mixed into `--ui-surface` for `--ui-text` in dark mode. `80%`, and `90%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text-strength-dark",
+          "modes": {
+            "more-contrast": "90%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "80%"
+    },
+    "ui-text-strength-light": {
+      "$description": "How much of `--ui-text-strong` is mixed into `--ui-surface` for `--ui-text` in light mode. `87%`, and `90%` with more contrast.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-text-strength-light",
+          "modes": {
+            "more-contrast": "90%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "87%"
+    }
+  },
+  "state": {
+    "ui-disabled-opacity": {
+      "$description": "Opacity applied to disabled controls.",
+      "$extensions": {
+        "opui": {
+          "css": "0.64",
+          "cssVar": "--ui-disabled-opacity",
+          "tier": "role"
+        }
+      },
+      "$type": "number",
+      "$value": 0.64
+    },
+    "ui-selected": {
+      "$description": "Background of a selected control: a checked `ToggleButton`, the selected `ToggleGroup` item, a pressed `Chip`, and a selected or current `List` item and `Select` option. When unset, `--ui-primary` on toggles and `--ui-primary` at `--ui-state-selected-alpha-accent` on list items and options. Pair it with `--ui-on-selected`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-selected",
+          "example": "var(--ui-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-on-selected": {
+      "$description": "Text color on `--ui-selected`. When unset, `--ui-on-primary` on toggles, the item's own text color on list items and selected `Select` options.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-selected",
+          "example": "var(--ui-on-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-state-active-alpha-accent": {
+      "$description": "Alpha of the pressed state layer on primary and critical buttons (on every filled and tonal button with `--ui-button-hover: layer`) and the ring of the current `Timeline` marker.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-active-alpha-accent",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "25%"
+    },
+    "ui-state-active-alpha-dark": {
+      "$description": "Alpha of the pressed state layer on neutral buttons in dark mode. `30%`, and `20%` with more contrast so the text keeps 7:1.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-active-alpha-dark",
+          "modes": {
+            "more-contrast": "20%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "30%"
+    },
+    "ui-state-active-alpha-light": {
+      "$description": "Alpha of the pressed state layer on neutral buttons in light mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-active-alpha-light",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "20%"
+    },
+    "ui-state-hover-alpha-accent": {
+      "$description": "Alpha of the hover state layer on primary and critical buttons (on every filled and tonal button with `--ui-button-hover: layer`), hovered `List` rows and critical `Menu` items.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-hover-alpha-accent",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "15%"
+    },
+    "ui-state-hover-alpha-dark": {
+      "$description": "Alpha of the hover state layer on neutral buttons in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-hover-alpha-dark",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "20%"
+    },
+    "ui-state-hover-alpha-light": {
+      "$description": "Alpha of the hover state layer on neutral buttons in light mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-hover-alpha-light",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "10%"
+    },
+    "ui-state-selected-alpha-accent": {
+      "$description": "Alpha of the tint behind selected `List` and `Menu` rows, `Select` options and checked `Message` reactions when `--ui-selected` is unset, behind checked `Checkbox`, `Radio` and `Switch` cards, which tint their accent, and behind the current page (`aria-current=\"page\"`) in text, outlined and tonal buttons. `15%` with more contrast, so light text keeps 7:1 in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-state-selected-alpha-accent",
+          "modes": {
+            "more-contrast": "15%"
+          },
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": "25%"
+    }
+  },
+  "icons": {
+    "ui-icon-size-x-small": {
+      "$description": "Smallest icon size, for icons in x-small controls. Not read by a component yet.",
+      "$extensions": {
+        "opui": {
+          "css": "0.75rem",
+          "cssVar": "--ui-icon-size-x-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 0.75
+      }
+    },
+    "ui-icon-size-small": {
+      "$description": "Icon size inside `Chip`, x-small `Avatar` and dense `List` rows, and the `Select` and autosuggest chevron.",
+      "$extensions": {
+        "opui": {
+          "css": "1rem",
+          "cssVar": "--ui-icon-size-small",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1
+      }
+    },
+    "ui-icon-size": {
+      "$description": "Default icon size inside components.",
+      "$extensions": {
+        "opui": {
+          "css": "1.25rem",
+          "cssVar": "--ui-icon-size",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1.25
+      }
+    },
+    "ui-icon-size-large": {
+      "$description": "Icon size inside `Avatar`, and of an `svg` without a `width` in `normalize.css`.",
+      "$extensions": {
+        "opui": {
+          "css": "1.5rem",
+          "cssVar": "--ui-icon-size-large",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "rem",
+        "value": 1.5
+      }
+    }
+  },
+  "choice-controls": {
+    "ui-choice-accent": {
+      "$description": "Fill of a checked `Checkbox`, `Radio` and `Switch`, and the thumb and fill of `Range`. When unset, `--ui-control-accent`, else `--ui-primary`, with its lightness capped in dark mode for the choice controls. Set it, or `--ui-control-accent`, to `--ui-primary` for the plain primary, like Material and shadcn.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-accent",
+          "example": "var(--ui-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-choice-on-accent": {
+      "$description": "Color of the mark on a checked `Checkbox`, `Radio` and `Switch`. Set it with `--ui-choice-accent`. When unset, `--ui-on-control-accent`, else `--ui-on-primary` in light mode and near-white in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-on-accent",
+          "example": "var(--ui-on-primary)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-choice-border-color": {
+      "$description": "Border of the unchecked `Checkbox`, `Radio` and `Switch` track. When unset, `--ui-field-border-color`. Set it for themes whose field border is fainter than 3:1, like shadcn, which outlines its choices with `--ui-primary` like shadcn/ui does.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-border-color",
+          "example": "var(--ui-field-border-color)",
+          "optional": true,
+          "promise": {
+            "against": [
+              "--ui-surface"
+            ],
+            "fallback": "--ui-field-border-color",
+            "ratio": 3
+          },
+          "tier": "component"
+        }
+      },
+      "$type": "color"
+    },
+    "ui-choice-border-width": {
+      "$description": "Border width of `Checkbox`, `Radio` and the `Switch` track. When unset, `--ui-field-border-width`. Set it when a design draws its choices with a different border than its fields, like Material 3's 2dp checkbox, radio and switch outlines next to its 1dp outlined fields. The check and the dot fit inside it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-border-width",
+          "example": "var(--ui-field-border-width)",
+          "optional": true,
+          "tier": "component"
+        }
+      },
+      "$type": "dimension"
+    },
+    "ui-choice-checked": {
+      "$description": "How a checked `Checkbox` and `Radio` look. `mark` keeps the surface and the border of the unchecked input and draws the check, dash or dot in the choice accent, lifted to text lightness in dark mode, like GOV.UK. When unset (`fill`), the input fills with the accent under a mark in its on-accent color. Forced colors always fill. `Switch` and checkbox and radio cards don't read it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-checked",
+          "example": "fill",
+          "optional": true,
+          "tier": "component"
+        }
+      }
+    },
+    "ui-choice-fill-max-lightness": {
+      "$description": "The highest OKLCH lightness of a checked `Checkbox`, `Radio` and `Switch` fill in dark mode, so the light mark keeps 3:1. `0.62`.",
+      "$extensions": {
+        "opui": {
+          "css": "0.62",
+          "cssVar": "--ui-choice-fill-max-lightness",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 0.62
+    },
+    "ui-choice-label-offset": {
+      "$description": "Moves `Checkbox`, `Radio` and `Switch` labels down (positive) or up (negative) against their control. Use `em` or `cap` to scale with the label font.",
+      "$extensions": {
+        "opui": {
+          "css": "0px",
+          "cssVar": "--ui-choice-label-offset",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 0
+      }
+    },
+    "ui-choice-ripple-bg-color": {
+      "$description": "Halo color for the `Checkbox` and `Radio` hover effect. `--ui-text` at 20%.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-ripple-bg-color",
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "oklch(from var(--ui-text) l c h / 20%)"
+    },
+    "ui-choice-size-x-small": {
+      "$description": "`Checkbox` and `Radio` input size with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(0.875rem * var(--ui-density))"
+    },
+    "ui-choice-size-small": {
+      "$description": "`Checkbox` and `Radio` input size with `.ui-small`, and in dense `List` rows unless the control has a size class.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1rem * var(--ui-density))"
+    },
+    "ui-choice-size": {
+      "$description": "Default `Checkbox` and `Radio` input size.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.25rem * var(--ui-density))"
+    },
+    "ui-choice-size-large": {
+      "$description": "`Checkbox` and `Radio` input size with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-choice-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.5rem * var(--ui-density))"
+    },
+    "ui-switch-thumb-size-x-small": {
+      "$description": "Diameter of the `Switch` thumb with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-thumb-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(0.625rem * var(--ui-density))"
+    },
+    "ui-switch-thumb-size-small": {
+      "$description": "Diameter of the `Switch` thumb with `.ui-small`, and in `List` rows unless the switch has a size class.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-thumb-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(0.75rem * var(--ui-density))"
+    },
+    "ui-switch-thumb-size": {
+      "$description": "Diameter of the `Switch` thumb.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-thumb-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1rem * var(--ui-density))"
+    },
+    "ui-switch-thumb-size-large": {
+      "$description": "Diameter of the `Switch` thumb with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-thumb-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.25rem * var(--ui-density))"
+    },
+    "ui-switch-track-block-size-x-small": {
+      "$description": "Height of the `Switch` track with `.ui-x-small`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-block-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1rem * var(--ui-density))"
+    },
+    "ui-switch-track-block-size-small": {
+      "$description": "Height of the `Switch` track with `.ui-small`, and in `List` rows unless the switch has a size class.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-block-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.25rem * var(--ui-density))"
+    },
+    "ui-switch-track-block-size": {
+      "$description": "Height of the `Switch` track.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-block-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.5rem * var(--ui-density))"
+    },
+    "ui-switch-track-block-size-large": {
+      "$description": "Height of the `Switch` track with `.ui-large`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-block-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(1.75rem * var(--ui-density))"
+    },
+    "ui-switch-track-inline-size-x-small": {
+      "$description": "Width of the `Switch` track with `.ui-x-small`. Twice `--ui-switch-track-block-size-x-small` until a theme sets it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-inline-size-x-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( 2 * var(--ui-switch-track-block-size-x-small) )"
+    },
+    "ui-switch-track-inline-size-small": {
+      "$description": "Width of the `Switch` track with `.ui-small`, and in `List` rows unless the switch has a size class. Twice `--ui-switch-track-block-size-small` until a theme sets it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-inline-size-small",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( 2 * var(--ui-switch-track-block-size-small) )"
+    },
+    "ui-switch-track-inline-size": {
+      "$description": "Width of the `Switch` track. Twice `--ui-switch-track-block-size` until a theme sets it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-inline-size",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(2 * var(--ui-switch-track-block-size))"
+    },
+    "ui-switch-track-inline-size-large": {
+      "$description": "Width of the `Switch` track with `.ui-large`. Twice `--ui-switch-track-block-size-large` until a theme sets it.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-inline-size-large",
+          "tier": "component"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc( 2 * var(--ui-switch-track-block-size-large) )"
+    },
+    "ui-switch-thumb-bg-color": {
+      "$description": "Color of the unchecked `Switch` thumb. The checked thumb uses `--ui-choice-on-accent`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-thumb-bg-color",
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( var(--ui-gray-11), var(--ui-gray-14) )"
+    },
+    "ui-switch-track-bg-color": {
+      "$description": "Background of the unchecked `Switch` track when `--ui-track-bg-color` is unset.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-switch-track-bg-color",
+          "tier": "component"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark(var(--ui-gray-3), var(--ui-gray-8))"
+    }
+  },
+  "elevation": {
+    "ui-shadow-control": {
+      "$description": "Shadow of buttons with a variant (unless `--ui-button-shadow` is set), standalone `ToggleButton`, outlined `Chip` and fields. `none` by default, for themes that lift controls off the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-control",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "none"
+    },
+    "ui-shadow-field": {
+      "$description": "Shadow of `TextField`, `Textarea` and `Select` fields. When unset, they follow `--ui-shadow-control`. Set it to `none` to lift buttons but keep fields flat.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-field",
+          "example": "var(--ui-shadow-control)",
+          "optional": true,
+          "tier": "role"
+        }
+      },
+      "$type": "shadow"
+    },
+    "ui-shadow-surface": {
+      "$description": "Shadow of tonal and outlined `Card` and `Accordion`, and of `Callout`. `none` by default, for themes that put every surface on the same plane.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-surface",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "none"
+    },
+    "ui-shadow-color": {
+      "$description": "Color of every shadow, with its base opacity. Each layer of `--ui-shadow-elevated`, `--ui-shadow-overlay`, `--ui-shadow-scroll` and `--ui-shadow-selected` adds its own opacity on top, with relative color. `oklch(0.268 0.003 265 / 1%)` in light mode and `oklch(0.11 0.01 259 / 20%)` in dark mode, also in `.ui-light` and `.ui-dark` parts of the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-color",
+          "tier": "knob"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(0.268 0.003 265 / 1%), oklch(0.11 0.01 259 / 20%) )"
+    },
+    "ui-shadow-elevated": {
+      "$description": "Shadow of elevated `Card` and `Accordion`. Five layers of `--ui-shadow-color`, which follows the color scheme, also in `.ui-light` and `.ui-dark` parts of the page.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-elevated",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "0 -1px 3px 0 oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.02)), 0 1px 2px -5px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.02)), 0 2px 5px -5px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.04)), 0 4px 12px -5px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.05)), 0 12px 15px -5px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.07))"
+    },
+    "ui-shadow-overlay": {
+      "$description": "Shadow of layers that float above the page: `Dialog`, `Drawer`, `Menu`, `Select` pickers and the `Carousel` buttons. Five layers of `--ui-shadow-color`.",
+      "$extensions": {
+        "opui": {
+          "css": "var(--ui-shadow-elevated)",
+          "cssVar": "--ui-shadow-overlay",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "{elevation.ui-shadow-elevated}"
+    },
+    "ui-shadow-scroll": {
+      "$description": "Shadow under the header and above the footer of a scrolled `Dialog` or `Drawer`, and under a sticky `Table` header. Six layers of `--ui-shadow-color`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-scroll",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "0 -2px 5px 0 oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.02)), 0 1px 1px -2px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.03)), 0 2px 2px -2px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.03)), 0 5px 5px -2px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.04)), 0 9px 9px -2px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.05)), 0 16px 16px -2px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.06))"
+    },
+    "ui-shadow-selected": {
+      "$description": "Shadow of the selected tab in default and `.ui-filled` `Tabs`. `.ui-line` and `.ui-outlined` have none. One layer of `--ui-shadow-color`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-shadow-selected",
+          "tier": "role"
+        }
+      },
+      "$type": "shadow",
+      "$value": "0 1px 2px -1px oklch(from var(--ui-shadow-color) l c h / calc(alpha + 0.09))"
+    }
+  },
+  "overlays": {
+    "ui-backdrop-blur": {
+      "$description": "Blur radius behind an open `Dialog` or `Drawer`.",
+      "$extensions": {
+        "opui": {
+          "css": "1px",
+          "cssVar": "--ui-backdrop-blur",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 1
+      }
+    },
+    "ui-backdrop-bg-color": {
+      "$description": "Overlay color behind an open `Dialog` or `Drawer`. `--ui-text` at 50% in light mode, and half the lightness of `--ui-surface` at 50% in dark mode.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-backdrop-bg-color",
+          "tier": "role"
+        }
+      },
+      "$type": "color",
+      "$value": "light-dark( oklch(from var(--ui-text) l c h / 50%), oklch(from var(--ui-surface) calc(l / 2) c h / 50%) )"
+    }
+  },
+  "instance-inputs": {
+    "ui-anchor-position-area": {
+      "$description": "The `position-area` of the floating content of an `Anchor`, a popover `Menu` or a `Tooltip`. The `positionArea` prop sets it on one instance, or set it on an element for everything inside it. When unset, each keeps its own: `self-start self-end` for `Anchor`, its `side` and `span` for `Menu` (`self-block-end span-self-inline-end`) and `self-block-start` for `Tooltip`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-anchor-position-area",
+          "example": "self-block-end",
+          "optional": true,
+          "tier": "input"
+        }
+      }
+    }
+  }
+}