Properties1

Status Tags

On this page

This is part of my Tenebrous theme.

A status tag colours the whole line it sits on, with a tint and a stripe down the left edge. I use them in lists and in daily notes to see at a glance what is moving. They work on a paragraph, a list item or a heading. For the note-level property, see Note Statuses.

The tags

  • todo Book the train to Chicago
  • doing Pack the CabinZero
  • waiting Hear back from the consulate
  • blocked Visa pickup, until the consulate calls
  • completed Hand in the application
  • canceled The Matchbox for drinks
  • important Bring the passport card
  • question Is the museum open on Monday

Completed gets a lighter tint and a strikethrough, and canceled gets a strikethrough with no tint or stripe, so it fades into the page.

The CSS

The tags and colours live in one SCSS map, and a mixin paints the line from it. The values are the tag, the colour, the tint percentage, whether there is a stripe, and whether the line is struck through.

$statuses: (
	todo:      (var(--blue0),   12%, true,  false),
	doing:     (var(--amber),   12%, true,  false),
	waiting:   (var(--magenta), 12%, true,  false),
	blocked:   (var(--red),     12%, true,  false),
	completed: (var(--green),   8%,  true,  true),
	canceled:  (var(--fg_dark), 0%,  false, true),
	important: (var(--pink),    12%, true,  false),
	question:  (var(--yellow),  12%, true,  false),
);
 
@mixin tag-line-paint($color, $tint, $rule, $strike) {
	--status-color: #{$color};
	@if $tint > 0% {
		background: color-mix(in oklch, var(--status-color) #{$tint}, transparent);
	}
	@if $rule {
		box-shadow: inset 3px 0 0 var(--status-color);
	}
	@if $strike {
		text-decoration: line-through;
		text-decoration-color: tint(var(--status-color), 70%);
	}
}

A line is painted when the tag is a direct child of it, for example li:has(> a.tag[href="#todo"]). The tag itself gets a matching colour, so it still reads on its own.

This uses :has()

Obsidian recommends not using :has() unless you have to, because it can slow the app down, especially in Canvas.1 Here I do have to, because there is no other way yet to colour a whole line from a tag inside it. If it ever feels slow, this is the first thing to turn off.

Footnotes

  1. Obsidian, Theme guidelines, in the performance section. ↩