test(ui): a component with no stylesheet reads the theme's :root variables

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

LANGUAGE.md

@@ -423,7 +423,8 @@ applies to both:
     A library's components keep the styles of the file they were written in.
 - **More CSS.**
   - Custom properties: `--accent: #fc0` on any element or `:root`, read with `var(--accent)` or
-    `var(--accent, gold)`, and inherited by what is inside.
+    `var(--accent, gold)`, and inherited by what is inside - a component with no stylesheet of its
+    own included, which reads a theme's `:root` variables from the screen it is used in.
   - `position: relative|absolute|fixed` with `top`, `right`, `bottom`, `left` and `inset`, and
     `z-index`. An absolute element sits in its parent's box, a fixed one in the screen's, and
     neither takes room in the flow.

changes/defaults-views-templates.md

@@ -106,6 +106,8 @@ What a game's screens found missing, now in `ludic.ui`:
   `:capturing` while it listens;
 - a `title` shows for the keyboard's focus too, after the same half second; a focus ring drawn
   through a renderer with no `rect` no longer crashes;
+- a component with no stylesheet of its own reads a theme's `:root` variables from around it (it
+  did; now a test says so);
 - a transition lands exactly on its end value (it had stopped a rounding error short of it, at every
   frame rate).
 

examples/library/ui_theme.ludic

@@ -0,0 +1,15 @@
+# ui_theme.ludic — a component with no stylesheet of its own still reads the theme's :root variables,
+# inherited from the screen that uses it, in its style="..." declarations.
+import "ludic.ui"
+import "ui_theme_parts/Bare.ludic"
+import "ui_theme_parts/Shell.ludic"
+program UiTheme {
+  numbers float
+  entry {
+    ui_backend(new UiBackend)
+    let root: UiNode = ui_nodes("Shell", null)
+    ui_place(root, 0.0, 0.0, 400.0, 400.0)
+    let bare = root.children[0].children[0]
+    print(`accent {ui_hex(bare.children[0].fg)} gap {int(bare.gap)}`)
+  }
+}

examples/library/ui_theme_parts/Bare.ludic

@@ -0,0 +1,3 @@
+# Bare.ludic - a component with no stylesheet: it reads the theme's variables from where it is used
+component Bare {
+}

examples/library/ui_theme_parts/Bare.xml

@@ -0,0 +1,4 @@
+<div style="gap: var(--gap)">
+  <p style="color: var(--accent)">hot</p>
+  <p>plain</p>
+</div>

examples/library/ui_theme_parts/Shell.lss

@@ -0,0 +1,2 @@
+@import "theme.lss";
+.shell { width: 300px }

examples/library/ui_theme_parts/Shell.ludic

@@ -0,0 +1,3 @@
+# Shell.ludic - a screen whose sheet imports the theme, around a component with no sheet of its own
+component Shell {
+}

examples/library/ui_theme_parts/Shell.xml

@@ -0,0 +1,3 @@
+<div class="shell">
+  <Bare/>
+</div>

examples/library/ui_theme_parts/theme.lss

@@ -0,0 +1 @@
+:root { --accent: #ff0000; --gap: 7px }

tools/ludic-cli/test.ludic

@@ -774,6 +774,7 @@ function cmd_dev_test() -> int {
   controller_case("library/ui_translate", "", "Merhaba Hello Hello Merhaba | c/Kaydet ve cik | Satir bir/Satir iki | Line one/Line two", "ui_translate.ludic (L11: translate=no and yes, a title of several lines translated whole or line by line)")
   controller_case("library/ui_keycap", "", "listening 16711680 | 257 Right click -2 | 258 Middle click -2 | 256 Left click -2 | pressed 0", "ui_keycap.ludic (L11: a key field takes the left, right and middle mouse buttons, and is :capturing while it listens)")
   controller_case("library/ui_focus_tip", "", "b 14,38 | Drop it 27,45 | Give it away 27,77 | b 14,38", "ui_focus_tip.ludic (L11: a title shows for the keyboard's focus after half a second, and goes back to the pointer when it moves)")
+  controller_case("library/ui_theme", "", "accent #ff0000 gap 7", "ui_theme.ludic (L11: a component with no stylesheet reads the theme's :root variables from the screen around it)")
   controller_case("library/ui_inputs", "", "count 12 12 32 0.5 0 | 20 32 0.5 0 | 19 32 0.5 0 | How many to carry | Space bar listening 1 19 9 0.5 0 | 19 9 0.5 0 | 19 0 0.5 0 | 60% 0.50 s | 19 0 0.6 9 | 7!", "ui_inputs.ludic (L11: number fields, key capture with Esc and Backspace, notes, range formats, an event named set, a string prop given a number)")
   controller_case("library/ui_boxes", "", "list 120 of 200 | text at 32 152 wide, 3 lines, row 60 | zero 0x0 | half 140x36 pad 4 2 | order abc at 16 | fill 98x8 of 200x12", "ui_boxes.ludic (L11: flex-shrink to the leftover room, text wrapping beside its siblings, zero sizes, calc(), order, the range track as a row)")
   controller_case("library/ui_look", "", "root div.in.i.m pad 5 margin 9 color #ff0000 text Hi 2,53 #102030 | text Hi 0,50 #eeeeee | opacity 0.25 | nine 40 #ffffff nine 40 #ff0000 of 2 image photo.png #ffffff | image icon:tent #00ff00 | text first line 29,205 #eeeeee | text second line 29,223 #eeeeee by id at 84,50 | flipped at 246,268 100x32", "ui_look.ludic (L11: nested components styled by specificity, text-shadow, ui_opacity, border-image tints, pictures, tooltip lines, anchored popovers)")