diff --git a/LANGUAGE.md b/LANGUAGE.md index 5f0189bb..999d883d 100644 --- a/LANGUAGE.md +++ b/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. diff --git a/changes/defaults-views-templates.md b/changes/defaults-views-templates.md index 2212a94f..b8b856b2 100644 --- a/changes/defaults-views-templates.md +++ b/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). diff --git a/examples/library/ui_theme.ludic b/examples/library/ui_theme.ludic new file mode 100644 index 00000000..11600312 --- /dev/null +++ b/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)}`) + } +} diff --git a/examples/library/ui_theme_parts/Bare.ludic b/examples/library/ui_theme_parts/Bare.ludic new file mode 100644 index 00000000..32d721ca --- /dev/null +++ b/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 { +} diff --git a/examples/library/ui_theme_parts/Bare.xml b/examples/library/ui_theme_parts/Bare.xml new file mode 100644 index 00000000..e32a8280 --- /dev/null +++ b/examples/library/ui_theme_parts/Bare.xml @@ -0,0 +1,4 @@ +
+

hot

+

plain

+
diff --git a/examples/library/ui_theme_parts/Shell.lss b/examples/library/ui_theme_parts/Shell.lss new file mode 100644 index 00000000..b4680d6e --- /dev/null +++ b/examples/library/ui_theme_parts/Shell.lss @@ -0,0 +1,2 @@ +@import "theme.lss"; +.shell { width: 300px } diff --git a/examples/library/ui_theme_parts/Shell.ludic b/examples/library/ui_theme_parts/Shell.ludic new file mode 100644 index 00000000..dc9de5f5 --- /dev/null +++ b/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 { +} diff --git a/examples/library/ui_theme_parts/Shell.xml b/examples/library/ui_theme_parts/Shell.xml new file mode 100644 index 00000000..bfb25001 --- /dev/null +++ b/examples/library/ui_theme_parts/Shell.xml @@ -0,0 +1,3 @@ +
+ +
diff --git a/examples/library/ui_theme_parts/theme.lss b/examples/library/ui_theme_parts/theme.lss new file mode 100644 index 00000000..4930451d --- /dev/null +++ b/examples/library/ui_theme_parts/theme.lss @@ -0,0 +1 @@ +:root { --accent: #ff0000; --gap: 7px } diff --git a/tools/ludic-cli/test.ludic b/tools/ludic-cli/test.ludic index 47ebba23..d12ada09 100644 --- a/tools/ludic-cli/test.ludic +++ b/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)")