opui-css 5.4.3 → 6.0.0-rc.1

package/tokens.json

@@ -0,0 +1,3729 @@
+{
+  "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. `145` (green) by default, in both color schemes.",
+      "$extensions": {
+        "opui": {
+          "css": "145",
+          "cssVar": "--ui-palette-hue",
+          "tier": "knob"
+        }
+      },
+      "$type": "number",
+      "$value": 145
+    },
+    "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. The severity scopes use `1` for livelier tints, 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. Set it to replace `--ui-palette-hue` and `--ui-palette-chroma`. 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(var(--ui-color-9), 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 `ButtonGroup` with `.ui-primary` and no variant or `.ui-outlined`, and a selected `Select` option. 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-primary-tonal": {
+      "$description": "Background of `Button` and `ButtonGroup` with `.ui-primary` and `.ui-tonal`, and of a checked `Checkbox`, `Radio` or `Switch` card. When unset, buttons use `--ui-palette-tint` and cards `--ui-primary` at `--ui-state-active-alpha-accent`. 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": "hook"
+        }
+      },
+      "$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 and the selected tab of filled `Tabs`. 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`. 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. When unset, `--ui-text`.",
+      "$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 such as progress tracks and table stripes.",
+      "$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 and filled `TextField`, `Select` and `Textarea` fields. 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-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-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-round": {
+      "$description": "The pill radius for round buttons, avatars, badges, chips, 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 square `Avatar` image. `--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 `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) ), color-mix( in oklch, var(--ui-text-strong) var(--ui-border-strength-dark), var(--ui-surface) ) )"
+    },
+    "ui-border-color-raised": {
+      "$description": "The edge of every raised surface: tonal and elevated `Card`, `Accordion` and `Dialog`, `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`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-field-padding-inline",
+          "example": "var(--ui-space-2)",
+          "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) )"
+    }
+  },
+  "focus-ring": {
+    "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.",
+      "$extensions": {
+        "opui": {
+          "css": "2px",
+          "cssVar": "--ui-focus-ring-width",
+          "modes": {
+            "more-contrast": "3px"
+          },
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": {
+        "unit": "px",
+        "value": 2
+      }
+    },
+    "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": [
+              "--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 `ButtonGroup`, `List` items and `Select` options.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-focus-ring-inset",
+          "tier": "role"
+        }
+      },
+      "$type": "dimension",
+      "$value": "calc(-1 * var(--ui-focus-ring-width))"
+    }
+  },
+  "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, `Table` cells, `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 body copy: prose, captions and `List` text.",
+      "$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-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-underline-offset": {
+      "$description": "Gap between text and its underline: `Link` and rich text links, and in Firefox `abbr`, `dfn`, `ins` and `u`.",
+      "$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. Firefox uses `--ui-underline-offset`.",
+      "$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-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, dense `List` text and small buttons, chips, toggles and fields. 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`, the `Drawer` title and large `Avatar` initials. 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, tables and 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` and `Accordion` content, headers and actions. 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 `ButtonGroup` 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`, the edge and dividers of an outlined `ButtonGroup`, `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`, the edge and dividers of a `ButtonGroup` with one of them, 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 `ButtonGroup` 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 `ButtonGroup` 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 `ButtonGroup` with `.ui-filled` and no `.ui-primary` or `.ui-critical`, and of hovered outlined and tonal ones. 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`.",
+      "$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`, `ButtonGroup`, `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-hover": {
+      "$description": "How `Button` and `ButtonGroup` show hover and pressed states. `layer` draws a translucent state layer in `--ui-state-hover-alpha-accent` and `--ui-state-active-alpha-accent`: the text color over filled and tonal buttons, the accent over outlined ones, which keep their text and border. 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-shadow-control`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-button-hover-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.2s"
+    },
+    "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.3s"
+    },
+    "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 `Drawer` and `Menu`.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-ease-exit",
+          "tier": "role"
+        }
+      },
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0.7, 0, 1, 1)"
+    },
+    "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
+    }
+  },
+  "contrast": {
+    "ui-contrast": {
+      "$description": "`more` tightens the contrast knobs (`--ui-text-strength-*`, `--ui-border-strength-*`, `--ui-field-border-strength`, `--ui-code-bg-alpha-*`, the `*-max-lightness` and `*-min-lightness` limits 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 `ButtonGroup`. 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, `--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 `ButtonGroup` 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 `ButtonGroup` 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, and a selected or current `List` item and `Select` option. When unset, `--ui-primary` on toggles and `--ui-primary` at `--ui-state-active-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 `--ui-primary-text` on a selected `Select` option.",
+      "$extensions": {
+        "opui": {
+          "cssVar": "--ui-on-selected",
+          "example": "var(--ui-on-primary)",
+          "optional": true,
+          "tier": "hook"
+        }
+      },
+      "$type": "color"
+    },
+    "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-active-alpha-accent": {
+      "$description": "Alpha of the pressed state layer on primary and critical buttons.",
+      "$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-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-hover-alpha-accent": {
+      "$description": "Alpha of the hover state layer on primary and critical buttons.",
+      "$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%"
+    }
+  },
+  "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-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, 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": {
+          "cssVar": "--ui-shadow-overlay",
+          "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-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"
+        }
+      }
+    }
+  }
+}