QHTML WASM Styles and Themes Visual Test 03
Each section mirrors one feature item from doc/04-styles-and-themes/index.html. A human reviewer should see a styled PASSED result in every section.
1. q-style with q-style-class
q-style panel-style-03a {
q-style-class { utility-panel utility-rounded }
backgroundColor: #e0f2fe
color: #0c4a6e
}
panel-style-03a,div {
text { PASSED }
}
2. Basic reusable style
q-style panel-03b {
backgroundColor: #eff6ff
color: #1e293b
border: 1px solid #93c5fd
borderRadius: 8px
padding: 0.55rem 0.75rem
fontWeight: 800
display: inline-flex
}
panel-03b,div {
text { PASSED }
}
3. Apply a style directly in a selector chain
q-style panel-03c {
backgroundColor: #dbeafe
color: #1e3a8a
border: 1px solid #93c5fd
borderRadius: 8px
padding: 0.55rem 0.75rem
fontWeight: 800
display: inline-flex
}
panel-03c,div {
text { PASSED }
}
4. Theme maps selectors to styles
q-style title-accent-03d {
color: #1d4ed8
}
q-style body-panel-03d {
backgroundColor: #e2e8f0
color: #0f172a
padding: 0.55rem 0.75rem
borderRadius: 8px
fontWeight: 800
}
q-theme article-theme-03d {
h3 { title-accent-03d }
.summary { body-panel-03d }
}
article-theme-03d {
div {
h3 { text { Themed heading } }
p.summary { text { PASSED } }
}
}
5. Anonymous q-style inside q-theme
q-style body-panel-03e {
backgroundColor: #e2e8f0
borderRadius: 8px
padding: 0.55rem 0.75rem
fontWeight: 800
}
q-theme article-theme-03e {
h3 { q-style { color: #1d4ed8 } }
.summary { q-style { color: #334155 } body-panel-03e }
}
article-theme-03e {
div {
h3 { text { Anonymous style heading } }
p.summary { text { PASSED } }
}
}
6. q-default-theme fallback layer
q-style panel-base-03f {
backgroundColor: #f8fafc
border: 1px solid #cbd5e1
color: #0f172a
borderRadius: 8px
padding: 0.55rem 0.75rem
fontWeight: 800
}
q-default-theme card-theme-03f {
.card { panel-base-03f }
}
card-theme-03f {
div.card { text { PASSED } }
}
7. Scoped theme application
q-style title-accent-03g {
color: #1d4ed8
}
q-style body-muted-03g {
color: #334155
backgroundColor: #f1f5f9
borderRadius: 8px
padding: 0.55rem 0.75rem
fontWeight: 800
}
q-theme article-theme-03g {
h3 { title-accent-03g }
p { body-muted-03g }
}
article-theme-03g {
div {
h3 { text { Scoped title } }
p { text { PASSED } }
}
}
8. Compose themes
q-style button-base-03h {
backgroundColor: #0f766e
color: #ffffff
border: 0
borderRadius: 8px
padding: 0.45rem 0.7rem
fontWeight: 800
}
q-style button-danger-03h {
backgroundColor: #b91c1c
color: #ffffff
}
q-theme base-theme-03h {
button { button-base-03h }
}
q-theme admin-theme-03h {
base-theme-03h { }
.danger { button-danger-03h }
}
admin-theme-03h {
div {
button { text { PASSED Save } }
button.danger { text { PASSED Delete } }
}
}
9. Override class CSS with inline declarations
q-style button-base-03i {
q-style-class { utility-panel utility-rounded }
backgroundColor: #0f766e
color: #ffffff
border: 0
}
button-base-03i,button {
text { PASSED }
}
10. q-transition direct applications and q-style-transition
q-transition transition-03j {
duration { 800 }
timing { ease-in-out }
delay { 0 }
}
q-transition legacy-transition-03j {
property { opacity }
duration { 800 }
timing { ease-in-out }
delay { 0 }
}
q-style transition-style-03j {
q-style-transition { legacy-transition-03j }
transition-03j { opacity }
}
q-style transition-surface-03j {
opacity: 1
background: #ecfeff
color: #155e75
border: 1px solid #67e8f9
borderRadius: 8px
display: inline-flex
padding: 0.55rem 0.75rem
fontWeight: 800
}
q-component transition-component-03j {
transition-03j { opacity color paddingTop }
opacity: 1
color: #155e75
paddingTop: 8px
div#transition-component-inner-03j {
text { PASSED component transition target }
}
}
q-theme transition-theme-03j {
.target { transition-style-03j transition-surface-03j }
}
transition-theme-03j {
div#transition-box-03j.target {
text { PASSED style transition target }
}
}
transition-component-03j comp03j { }
button {
text { Toggle transitions }
onclick {
var box = document.querySelector("#transition-box-03j");
var comp = document.querySelector("transition-component-03j");
box.style.opacity = box.style.opacity === "0.25" ? "1" : "0.25";
comp.opacity = comp.opacity === "0.25" ? "1" : "0.25";
comp.color = comp.color === "#0f766e" ? "#155e75" : "#0f766e";
comp.paddingTop = comp.paddingTop === "24px" ? "8px" : "24px";
}
}
11. q-painter and q-style-painter
q-component paintedcomp {
q-property color: "black"
q-property width: 700px
q-property height: 240px
q-property paintvars: [this.color, this.width, this.height]
onPaintBackground(paintvars) {
this.clearRect(white);
this.setFill(color);
this.drawRect(0, 0, parseFloat(width), parseFloat(height));
}
slot { main }
}
paintedcomp paintBox#paintBox {
div.sample {
text { This component receives a CSS paint background when paint worklets are available. }
}
}
button paintButton#paintButton {
text { Change paint color }
onclick {
var box = document.querySelector("#paintBox");
box.color = box.color === "black" ? "green" : "black";
alert("paintBox.color is now: " + box.color);
}
}