Demo
The search found three results in the notes, two of them starred.
addedchangedremovednotecontext
Underlined instead: a key term, and a risk.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/mark.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/mark.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/mark.qwe
view MarkDemo() = <div.demo-stack> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> The search found <Mark id="mark-demo-default">three results</Mark> in the notes, two of them{" "} <Mark tone="accent">starred</Mark>. </p> <div.demo-row> <Mark tone="success" id="mark-demo-success">added</Mark> <Mark tone="warning">changed</Mark> <Mark tone="danger">removed</Mark> <Mark tone="info">note</Mark> <Mark tone="neutral">context</Mark> </div> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> Underlined instead: <Mark variant="underline" id="mark-demo-underline">a key term</Mark>, and{" "} <Mark variant="underline" tone="danger">a risk</Mark>. </p> </div>Source
ui/mark.qwe
// Mark: text highlighted, as with a marker pen, in a tone: a match, a change, a term// to notice. A real <mark>, so screen readers can say so.//// <p>Search found <Mark>three</Mark> results.</p>// <Mark tone="success">added</Mark> <Mark tone="danger">removed</Mark>//// children: the text. tone: "default" (yellow), "accent", "success", "warning",// "danger", "info" or "neutral". variant: "fill" (default) or "underline" (a thick// line under the text instead of a background). id: the element's id.import ui/theme.qwe use ui_clslet mark_css = css`.ui-mark { padding: 0 .2em; border-radius: 3px; background: color-mix(in srgb, var(--m) 30%, transparent); color: inherit; --m: #f5c518; box-decoration-break: clone; -webkit-box-decoration-break: clone; }.ui-mark-accent { --m: var(--ui-accent); }.ui-mark-success { --m: var(--ui-success); }.ui-mark-warning { --m: var(--ui-warning); }.ui-mark-danger { --m: var(--ui-danger); }.ui-mark-info { --m: var(--ui-info); }.ui-mark-neutral { --m: var(--ui-strong); }.ui-mark-underline { padding: 0; border-radius: 0; background: none; text-decoration: underline; text-decoration-color: var(--m); text-decoration-thickness: .3em; text-underline-offset: -.1em; text-decoration-skip-ink: none; }@media (forced-colors: active) { .ui-mark { background: Mark; color: MarkText; } }`view Mark(tone: str = "default", variant: str = "fill", id: str? = null, class: str? = null, children) { style global mark_css <mark class={ui_cls(["ui-mark", tone != "default" && `ui-mark-${tone}`, variant != "fill" && `ui-mark-${variant}`, class])} id={id}>{children}</mark>}Related
AbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 7 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsEyebrowA small uppercase label above a heading, in a tone, with an optional dot.6 views · 8 downloads
Thread
Thread 0 posts
On Mark: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.