Theme-aware intensity ramp

<div class="tair-panel">
	<div class="tair-grid" id="tair-grid" aria-label="Sample weekly activity grid"></div>
	<div class="tair-legend">
		<span>Less</span>
		<span class="tair-cell tair-level-0"></span>
		<span class="tair-cell tair-level-1"></span>
		<span class="tair-cell tair-level-2"></span>
		<span class="tair-cell tair-level-3"></span>
		<span class="tair-cell tair-level-4"></span>
		<span>More</span>
	</div>
</div>

Colors come from shared theme tokens — --surface, --ink, --border, --accent and friends — so this CSS carries no palette of its own. Use Runnable file to copy the tokens along with it.

.tair-panel { display: flex; flex-direction: column; gap: 0.25rem; }

.tair-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(7, 15px);
	/* Implicit column tracks size to auto and would stretch to fill the
	   container, spreading the weeks apart. Pin them to the cell width and
	   pack the whole grid to the start instead. */
	grid-auto-columns: 15px;
	justify-content: start;
	gap: 3px;
}

.tair-cell {
	width: 15px;
	height: 15px;
	border-radius: 3px;
}

/* Level 0 mixes a neutral into the ground, never the palest step of the
   accent hue, so "nothing happened" cannot be mistaken for "a little
   happened". Levels 1-4 mix the accent at increasing strength; level 4 is
   the accent at full strength with no mix at all. */
.tair-level-0 { background: color-mix(in srgb, var(--dim) 10%, var(--ground)); }
.tair-level-1 { background: color-mix(in srgb, var(--accent) 34%, var(--ground)); }
.tair-level-2 { background: color-mix(in srgb, var(--accent) 56%, var(--ground)); }
.tair-level-3 { background: color-mix(in srgb, var(--accent) 78%, var(--ground)); }
.tair-level-4 { background: var(--accent); }

.tair-legend {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--dim);
}

(function () {
	var WEEK_COUNT = 19;
	var DAY_COUNT = 7;
	var SEED = 20260810;

	// mulberry32 — deterministic and dependency-free, so the sample grid is
	// identical on every reload instead of reshuffling like Math.random would.
	function createSeededRandom(seed) {
		var state = seed >>> 0;
		return function () {
			state = (state + 0x6d2b79f5) >>> 0;
			var mixed = state;
			mixed = Math.imul(mixed ^ (mixed >>> 15), mixed | 1);
			mixed ^= mixed + Math.imul(mixed ^ (mixed >>> 7), mixed | 61);
			return ((mixed ^ (mixed >>> 14)) >>> 0) / 4294967296;
		};
	}

	function levelForCount(count) {
		if (count === 0) return 0;
		if (count <= 2) return 1;
		if (count <= 4) return 2;
		if (count <= 6) return 3;
		return 4;
	}

	var randomValue = createSeededRandom(SEED);
	var grid = document.getElementById('tair-grid');
	var fragment = document.createDocumentFragment();

	for (var week = 0; week < WEEK_COUNT; week += 1) {
		for (var day = 0; day < DAY_COUNT; day += 1) {
			var isWeekend = day === 5 || day === 6;
			var weight = isWeekend ? 0.35 : 1;
			var count = randomValue() < 0.22 ? 0 : Math.max(0, Math.round(randomValue() * 9 * weight));
			var level = levelForCount(count);
			var cell = document.createElement('span');
			cell.className = 'tair-cell tair-level-' + level;
			var entryWord = count === 1 ? 'minute' : 'minutes';
			cell.title = count + ' ' + entryWord;
			cell.setAttribute('aria-label', count + ' ' + entryWord);
			fragment.appendChild(cell);
		}
	}

	grid.appendChild(fragment);
})();