fix(sheet): define variant-only colors, pick color schemes by name and check token names

.changepacks/changepack_log_theme_output.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/plugin-utils/package.json": "Patch"
+  },
+  "note": "Theme CSS: a color only one variant defines is defined in that variant; a variant renders dark only when it is named dark or listed as dark in the new theme.colorScheme, others light, and light-dark() only encodes a light default with one dark variant; theme names that are not CSS identifiers are quoted in [data-theme]; typography emits fontStyle and textTransform; color variables come out in a fixed order. $tokens with dashes (text-primary) resolve instead of breaking into var(--text)-primary, and dotted length and shadow names are declared with dashes like their references. registerTheme reports, with the theme path, a token name the $token syntax cannot reach and two tokens of a variant that become the same CSS variable (a-b and a.b)",
+  "date": "2026-09-30T00:00:00.000Z"
+}

apps/landing/src/app/(detail)/docs/devup/colors/page.mdx

@@ -100,7 +100,23 @@ You can define multiple theme variants beyond `default` and `dark`:
 }
 ```
 
-The first key (e.g., `default`) is the default theme. Other themes can be activated using the theme API.
+The default theme is `default` (or `light`, or else the first variant). Other themes can be activated using the theme API. A variant only lists the colors it changes: the others keep the default's, and a color only one variant defines is defined in that variant.
+
+Each variant also sets the page's native color scheme — form controls, scrollbars and the default text color. `dark` renders dark and every other variant light; name the others in `colorScheme`:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": { "primary": "#0070f3" },
+      "midnight": { "primary": "#3291ff" }
+    },
+    "colorScheme": { "midnight": "dark" }
+  }
+}
+```
+
+Token names start with a letter, a digit or `_` and continue with letters, digits, `-`, `_` and `.` (`primary`, `text-primary`, `gray.100`); a dot becomes a dash in the CSS variable, so `gray.100` is `var(--gray-100)`. The build reports a name outside these characters, and two tokens of a variant that become the same variable (`a-b` and `a.b`), instead of emitting CSS the browser would drop.
 
 ## Semantic Color Naming
 

bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme-2.snap

@@ -23,6 +23,7 @@ Theme {
             },
         },
     },
+    color_scheme: {},
     breakpoints: [
         0,
         480,
@@ -51,6 +52,8 @@ Theme {
                         letter_spacing: Some(
                             "0.5em",
                         ),
+                        font_style: None,
+                        text_transform: None,
                     },
                 ),
             ],