@dorsk/tsumikit 0.81.0 → 0.82.1

package/lint/breakpoints.mjs

@@ -0,0 +1,33 @@
+/**
+ * The kit's breakpoint contract. Media queries in consumer apps should only use
+ * these widths (min-width form) or their max-width complements (one unit below,
+ * e.g. 39.999rem / 639px / 639.98px).
+ */
+export const BREAKPOINTS = [
+	{ name: 'sm', rem: 40, px: 640 },
+	{ name: 'md', rem: 48, px: 768 },
+	{ name: 'lg', rem: 64, px: 1024 }
+];
+
+const LENGTH = /^(-?\d*\.?\d+)(px|rem|em)$/;
+
+/**
+ * True when a media-query width token (e.g. "640px", "47.999rem") is one of the
+ * kit's breakpoints or a max-width complement of one. `em` in a media query
+ * resolves against the root font size, so it is treated like `rem`.
+ * @param {string} token
+ */
+export function isAllowedBreakpointWidth(token) {
+	const m = LENGTH.exec(token.trim());
+	if (!m) return false;
+	const value = Number(m[1]);
+	const key = m[2] === 'px' ? 'px' : 'rem';
+	return BREAKPOINTS.some((bp) => {
+		const target = bp[key];
+		return value === target || (value >= target - 1 && value < target);
+	});
+}
+
+export function describeBreakpoints() {
+	return BREAKPOINTS.map((bp) => `${bp.rem}rem/${bp.px}px`).join(', ');
+}

package/lint/cli.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import { existsSync } from 'node:fs';
+import { RULES, lintPaths, selectRules } from './index.mjs';
+
+const HELP = `tsumikit-lint [options] [paths...]
+
+Flags drift from the kit's design rules in .svelte and .css files.
+Defaults to ./src when no path is given.
+
+Options:
+  --json             machine-readable output
+  --rule <id>        run only this rule (repeatable, comma-separated)
+  --disable <id>     skip this rule (repeatable, comma-separated)
+  --list-rules       print the rule ids and exit
+  -h, --help         show this help
+
+Suppress a line with a comment on the line above:
+  /* tsumikit-lint-ignore spacing-scale */   (css)
+  <!-- tsumikit-lint-ignore no-raw-control -->   (markup)
+
+Rules:
+${RULES.map((r) => `  ${r.id.padEnd(16)} ${r.description}`).join('\n')}
+`;
+
+function parseArgs(argv) {
+	const opts = { json: false, only: [], disable: [], paths: [] };
+	for (let i = 0; i < argv.length; i++) {
+		const arg = argv[i];
+		const next = () => {
+			if (i + 1 >= argv.length) throw new Error(`${arg} needs a value`);
+			return argv[++i].split(',').map((s) => s.trim()).filter(Boolean);
+		};
+		if (arg === '--json') opts.json = true;
+		else if (arg === '--rule') opts.only.push(...next());
+		else if (arg.startsWith('--rule=')) opts.only.push(...arg.slice(7).split(','));
+		else if (arg === '--disable') opts.disable.push(...next());
+		else if (arg.startsWith('--disable=')) opts.disable.push(...arg.slice(10).split(','));
+		else if (arg === '--list-rules') opts.list = true;
+		else if (arg === '-h' || arg === '--help') opts.help = true;
+		else if (arg.startsWith('-')) throw new Error(`unknown option ${arg}`);
+		else opts.paths.push(arg);
+	}
+	return opts;
+}
+
+function formatText({ files, findings }) {
+	const lines = findings.map(
+		(f) => `${f.file}:${f.line}:${f.column}  ${f.rule.padEnd(16)} ${f.message}`
+	);
+	const byRule = new Map();
+	for (const f of findings) byRule.set(f.rule, (byRule.get(f.rule) ?? 0) + 1);
+	const summary = findings.length
+		? `${findings.length} problem${findings.length === 1 ? '' : 's'} in ${files} file${files === 1 ? '' : 's'} (${[...byRule].map(([r, n]) => `${r}: ${n}`).join(', ')})`
+		: `no problems in ${files} file${files === 1 ? '' : 's'}`;
+	return [...lines, '', summary].join('\n');
+}
+
+async function main() {
+	let opts;
+	try {
+		opts = parseArgs(process.argv.slice(2));
+	} catch (e) {
+		process.stderr.write(`tsumikit-lint: ${e.message}\n\n${HELP}`);
+		return 2;
+	}
+	if (opts.help) {
+		process.stdout.write(HELP);
+		return 0;
+	}
+	if (opts.list) {
+		process.stdout.write(`${RULES.map((r) => r.id).join('\n')}\n`);
+		return 0;
+	}
+	let rules;
+	try {
+		rules = selectRules({ only: opts.only, disable: opts.disable });
+	} catch (e) {
+		process.stderr.write(`tsumikit-lint: ${e.message}\n`);
+		return 2;
+	}
+	const paths = opts.paths.length ? opts.paths : existsSync('src') ? ['src'] : ['.'];
+	for (const p of paths) {
+		if (!existsSync(p)) {
+			process.stderr.write(`tsumikit-lint: no such path ${p}\n`);
+			return 2;
+		}
+	}
+	const result = await lintPaths(paths, { rules });
+	if (opts.json) {
+		process.stdout.write(
+			`${JSON.stringify({ files: result.files, errorCount: result.findings.length, findings: result.findings }, null, 2)}\n`
+		);
+	} else {
+		process.stdout.write(`${formatText(result)}\n`);
+	}
+	return result.findings.length ? 1 : 0;
+}
+
+process.exitCode = await main();

package/lint/context.mjs

@@ -0,0 +1,242 @@
+import { parse } from 'svelte/compiler';
+
+/**
+ * @typedef {import('svelte/compiler').AST.Fragment} Fragment
+ * @typedef {import('svelte/compiler').AST.ElementLike} ElementLike
+ * @typedef {import('svelte/compiler').AST.Attribute} Attribute
+ * @typedef {import('svelte/compiler').AST.StyleDirective} StyleDirective
+ * @typedef {Fragment['nodes'][number]} MarkupNode
+ * @typedef {import('svelte/compiler').AST.CSS.Declaration} Declaration
+ * @typedef {import('svelte/compiler').AST.CSS.Atrule} Atrule
+ * @typedef {import('svelte/compiler').AST.CSS.Rule} CssRule
+ * @typedef {{ property: string, value: string, start: number }} DeclarationLike
+ * @typedef {{ file: string, line: number, column: number, rule: string, message: string }} Finding
+ * @typedef {ReturnType<typeof createContext>} Context
+ * @typedef {{ id: string, description: string, check: (ctx: Context) => void }} LintRule
+ */
+
+const IGNORE_RE = /tsumikit-lint-ignore(?:\s+([\w-]+(?:[\s,]+[\w-]+)*))?/g;
+
+/** @param {string} source */
+function lineStarts(source) {
+	const starts = [0];
+	for (let i = 0; i < source.length; i++) {
+		if (source.charCodeAt(i) === 10) starts.push(i + 1);
+	}
+	return starts;
+}
+
+/** @param {number[]} starts @param {number} offset */
+function positionOf(starts, offset) {
+	let lo = 0;
+	let hi = starts.length - 1;
+	while (lo < hi) {
+		const mid = (lo + hi + 1) >> 1;
+		if (starts[mid] <= offset) lo = mid;
+		else hi = mid - 1;
+	}
+	return { line: lo + 1, column: offset - starts[lo] + 1 };
+}
+
+/**
+ * Collects `tsumikit-lint-ignore [rule ...]` comments. A comment suppresses the
+ * named rules (all rules when none is given) on the following line, and on its
+ * own line when code precedes it.
+ * @param {string} source
+ * @param {number[]} starts
+ */
+function collectIgnores(source, starts) {
+	/** @type {Map<number, 'all' | Set<string>>} */
+	const ignores = new Map();
+	/** @param {number} line @param {'all' | string[]} rules */
+	const add = (line, rules) => {
+		const existing = ignores.get(line);
+		if (existing === 'all') return;
+		if (rules === 'all') ignores.set(line, 'all');
+		else ignores.set(line, new Set([...(existing ?? []), ...rules]));
+	};
+	for (const m of source.matchAll(IGNORE_RE)) {
+		const { line } = positionOf(starts, m.index);
+		const rules = m[1] ? m[1].split(/[\s,]+/).filter(Boolean) : 'all';
+		const lineText = source.slice(starts[line - 1], m.index);
+		if (/\S/.test(lineText.replace(/(\/\*|<!--|\/\/)\s*$/, ''))) add(line, rules);
+		add(line + 1, rules);
+	}
+	return ignores;
+}
+
+/**
+ * Parses a .svelte or .css source into a lint context. CSS is wrapped in a
+ * <style> element so the Svelte CSS parser can be reused; offsets are shifted
+ * back when reporting.
+ * @param {string} file
+ * @param {string} source
+ */
+export function createContext(file, source) {
+	const isCss = /\.css$/i.test(file);
+	const shift = isCss ? '<style>'.length : 0;
+	const parsed = parse(isCss ? `<style>${source}</style>` : source, { modern: true });
+	const starts = lineStarts(source);
+	const ignores = collectIgnores(source, starts);
+	/** @type {Finding[]} */
+	const findings = [];
+	const parseSource = isCss ? `<style>${source}</style>` : source;
+
+	return {
+		file,
+		source,
+		isCss,
+		css: parsed.css,
+		fragment: isCss ? null : parsed.fragment,
+		/** @param {{ start: number, end: number }} node */
+		text(node) {
+			return parseSource.slice(node.start, node.end);
+		},
+		/** @param {number} offset */
+		loc(offset) {
+			return positionOf(starts, Math.max(0, offset - shift));
+		},
+		/** @param {string} rule @param {number} offset @param {string} message */
+		report(rule, offset, message) {
+			const { line, column } = this.loc(offset);
+			const ignored = ignores.get(line);
+			if (ignored === 'all' || ignored?.has(rule)) return;
+			findings.push({ file, line, column, rule, message });
+		},
+		findings
+	};
+}
+
+/**
+ * Visits every CSS declaration with its enclosing selectors and at-rules.
+ * `cb(declaration, { selectors, atrules })` where `selectors` are the selector
+ * texts of enclosing rules (outermost first) and `atrules` the enclosing
+ * at-rule nodes.
+ * @param {Context} ctx
+ * @param {(declaration: Declaration, scope: { selectors: string[], atrules: Atrule[] }) => void} cb
+ */
+export function walkDeclarations(ctx, cb) {
+	if (!ctx.css) return;
+	/**
+	 * @param {Array<Declaration | CssRule | Atrule>} nodes
+	 * @param {string[]} selectors
+	 * @param {Atrule[]} atrules
+	 */
+	const visit = (nodes, selectors, atrules) => {
+		for (const node of nodes) {
+			if (node.type === 'Declaration') cb(node, { selectors, atrules });
+			else if (node.type === 'Rule') {
+				visit(node.block.children, [...selectors, ctx.text(node.prelude)], atrules);
+			} else if (node.type === 'Atrule' && node.block) {
+				visit(node.block.children, selectors, [...atrules, node]);
+			}
+		}
+	};
+	visit(ctx.css.children, [], []);
+}
+
+/** @param {Context} ctx @param {(node: Atrule) => void} cb */
+export function walkAtrules(ctx, cb) {
+	if (!ctx.css) return;
+	/** @param {Array<Declaration | CssRule | Atrule>} nodes */
+	const visit = (nodes) => {
+		for (const node of nodes) {
+			if (node.type === 'Atrule') {
+				cb(node);
+				if (node.block) visit(node.block.children);
+			} else if (node.type === 'Rule') visit(node.block.children);
+		}
+	};
+	visit(ctx.css.children);
+}
+
+const CHILD_KEYS = ['fragment', 'consequent', 'alternate', 'body', 'fallback', 'pending', 'then', 'catch'];
+
+/**
+ * Visits every markup node (elements, components, blocks) depth-first.
+ * @param {Context} ctx
+ * @param {(node: MarkupNode) => void} cb
+ */
+export function walkMarkup(ctx, cb) {
+	if (!ctx.fragment) return;
+	/** @param {MarkupNode | Fragment | null | undefined} node */
+	const visit = (node) => {
+		if (!node || typeof node !== 'object') return;
+		if (node.type === 'Fragment') {
+			for (const child of node.nodes) visit(child);
+			return;
+		}
+		cb(node);
+		const children = /** @type {Partial<Record<string, Fragment | null>>} */ (/** @type {unknown} */ (node));
+		for (const key of CHILD_KEYS) {
+			if (children[key]) visit(children[key]);
+		}
+	};
+	visit(ctx.fragment);
+}
+
+/**
+ * Joined text of a static attribute value, or null when any part is dynamic.
+ * @param {Attribute['value'] | StyleDirective['value']} value
+ */
+function staticText(value) {
+	if (value === true) return '';
+	let out = '';
+	for (const v of Array.isArray(value) ? value : [value]) {
+		if (v.type !== 'Text') return null;
+		out += v.data;
+	}
+	return out;
+}
+
+/**
+ * Static text of an attribute, or null when it is dynamic or absent.
+ * @param {ElementLike} node
+ * @param {string} name
+ */
+export function staticAttribute(node, name) {
+	const attr = node.attributes.find((a) => a.type === 'Attribute' && a.name === name);
+	if (!attr || attr.type !== 'Attribute') return null;
+	return staticText(attr.value);
+}
+
+/** @param {ElementLike} node @param {string} name */
+export function hasAttribute(node, name) {
+	return node.attributes.some((a) => a.type === 'Attribute' && a.name === name);
+}
+
+/** @param {ElementLike} node */
+export function hasSpread(node) {
+	return node.attributes.some((a) => a.type === 'SpreadAttribute');
+}
+
+/**
+ * Declarations written inline on an element (`style="…"` and `style:prop`
+ * directives) with static values.
+ * @param {ElementLike} node
+ * @returns {DeclarationLike[]}
+ */
+export function inlineDeclarations(node) {
+	/** @type {DeclarationLike[]} */
+	const out = [];
+	for (const attr of node.attributes) {
+		if (attr.type === 'Attribute' && attr.name === 'style') {
+			const text = staticText(attr.value);
+			if (text == null) continue;
+			for (const chunk of text.split(';')) {
+				const i = chunk.indexOf(':');
+				if (i < 0) continue;
+				out.push({
+					property: chunk.slice(0, i).trim(),
+					value: chunk.slice(i + 1).trim(),
+					start: attr.start
+				});
+			}
+		} else if (attr.type === 'StyleDirective' && attr.value !== true) {
+			const value = staticText(attr.value);
+			if (value == null) continue;
+			out.push({ property: attr.name, value, start: attr.start });
+		}
+	}
+	return out;
+}

package/lint/index.mjs

@@ -0,0 +1,97 @@
+import { readdir, readFile, stat } from 'node:fs/promises';
+import { join, relative } from 'node:path';
+import { createContext } from './context.mjs';
+import breakpoints from './rules/breakpoints.mjs';
+import imgAlt from './rules/img-alt.mjs';
+import motion from './rules/motion.mjs';
+import noRawColor from './rules/no-raw-color.mjs';
+import noRawControl from './rules/no-raw-control.mjs';
+import noRawFont from './rules/no-raw-font.mjs';
+import onePrimary from './rules/one-primary.mjs';
+import spacingScale from './rules/spacing-scale.mjs';
+
+/**
+ * @typedef {import('./context.mjs').Finding} Finding
+ * @typedef {import('./context.mjs').LintRule} LintRule
+ */
+
+export { BREAKPOINTS, isAllowedBreakpointWidth } from './breakpoints.mjs';
+
+/** @type {LintRule[]} */
+export const RULES = [
+	noRawColor,
+	spacingScale,
+	noRawControl,
+	onePrimary,
+	noRawFont,
+	breakpoints,
+	motion,
+	imgAlt
+];
+
+export const RULE_IDS = RULES.map((r) => r.id);
+
+const SKIP_DIRS = new Set(['node_modules', '.svelte-kit', 'dist', 'build', '.git', 'coverage']);
+
+/** @param {{ only?: string[], disable?: string[] }} [options] */
+export function selectRules({ only = [], disable = [] } = {}) {
+	const unknown = [...only, ...disable].filter((id) => !RULE_IDS.includes(id));
+	if (unknown.length) throw new Error(`unknown rule(s): ${unknown.join(', ')}`);
+	return RULES.filter((r) => (only.length ? only.includes(r.id) : true) && !disable.includes(r.id));
+}
+
+/**
+ * Lints one source string; returns `{ findings, error }`.
+ * @param {string} file
+ * @param {string} source
+ * @param {LintRule[]} [rules]
+ */
+export function lintSource(file, source, rules = RULES) {
+	let ctx;
+	try {
+		ctx = createContext(file, source);
+	} catch (err) {
+		const e = /** @type {import('svelte/compiler').CompileError} */ (err);
+		return {
+			findings: [{ file, line: e.start?.line ?? 1, column: e.start?.column ?? 1, rule: 'parse-error', message: e.message }],
+			error: e
+		};
+	}
+	for (const rule of rules) rule.check(ctx);
+	ctx.findings.sort((a, b) => a.line - b.line || a.column - b.column);
+	return { findings: ctx.findings, error: null };
+}
+
+/** @param {string[]} paths */
+export async function collectFiles(paths) {
+	/** @type {string[]} */
+	const files = [];
+	/** @param {string} path */
+	const visit = async (path) => {
+		const info = await stat(path);
+		if (info.isDirectory()) {
+			for (const entry of await readdir(path, { withFileTypes: true })) {
+				if (entry.isDirectory() && SKIP_DIRS.has(entry.name)) continue;
+				await visit(join(path, entry.name));
+			}
+		} else if (/\.(svelte|css)$/i.test(path)) files.push(path);
+	};
+	for (const p of paths) await visit(p);
+	return files.sort();
+}
+
+/**
+ * @param {string[]} paths
+ * @param {{ rules?: LintRule[], cwd?: string }} [options]
+ */
+export async function lintPaths(paths, { rules = RULES, cwd = process.cwd() } = {}) {
+	const files = await collectFiles(paths);
+	/** @type {Finding[]} */
+	const findings = [];
+	for (const file of files) {
+		const source = await readFile(file, 'utf8');
+		const result = lintSource(relative(cwd, file) || file, source, rules);
+		findings.push(...result.findings);
+	}
+	return { files: files.length, findings };
+}

package/lint/rules/breakpoints.mjs

@@ -0,0 +1,25 @@
+import { describeBreakpoints, isAllowedBreakpointWidth } from '../breakpoints.mjs';
+import { walkAtrules } from '../context.mjs';
+
+const FEATURE = /\(([^()]*width[^()]*)\)/gi;
+const LENGTH = /-?\d*\.?\d+(?:px|rem|em)\b/g;
+
+export default /** @type {import('../context.mjs').LintRule} */ ({
+	id: 'breakpoints',
+	description: `media-query widths outside the kit's breakpoints (${describeBreakpoints()})`,
+	check(ctx) {
+		walkAtrules(ctx, (node) => {
+			if (node.name !== 'media' || !node.prelude) return;
+			for (const feature of node.prelude.matchAll(FEATURE)) {
+				for (const width of feature[1].match(LENGTH) ?? []) {
+					if (isAllowedBreakpointWidth(width)) continue;
+					ctx.report(
+						'breakpoints',
+						node.start,
+						`media width ${width} is not a kit breakpoint; use ${describeBreakpoints()} (or the max-width form one unit below)`
+					);
+				}
+			}
+		});
+	}
+});

package/lint/rules/img-alt.mjs

@@ -0,0 +1,13 @@
+import { hasAttribute, hasSpread, walkMarkup } from '../context.mjs';
+
+export default /** @type {import('../context.mjs').LintRule} */ ({
+	id: 'img-alt',
+	description: '<img> without alt',
+	check(ctx) {
+		walkMarkup(ctx, (node) => {
+			if (node.type !== 'RegularElement' || node.name !== 'img') return;
+			if (hasAttribute(node, 'alt') || hasSpread(node)) return;
+			ctx.report('img-alt', node.start, '<img> without alt; add alt text, or alt="" when decorative');
+		});
+	}
+});

package/lint/rules/motion.mjs

@@ -0,0 +1,85 @@
+import { walkDeclarations } from '../context.mjs';
+
+export const ANIMATABLE = new Set([
+	'transform',
+	'translate',
+	'scale',
+	'rotate',
+	'opacity',
+	'color',
+	'background-color',
+	'background',
+	'border-color',
+	'outline-color',
+	'text-decoration-color',
+	'fill',
+	'stroke',
+	'box-shadow',
+	'filter',
+	'backdrop-filter',
+	'visibility',
+	'display',
+	'overlay',
+	'none'
+]);
+
+const TIMING = /^(ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier|var|allow-discrete|normal)$|^-?\d*\.?\d+m?s$|^-?\d*\.?\d+$/;
+
+/** @param {string} value */
+function splitTopLevel(value) {
+	const parts = [];
+	let depth = 0;
+	let current = '';
+	for (const ch of value) {
+		if (ch === '(') depth++;
+		if (ch === ')') depth--;
+		if (ch === ',' && depth === 0) {
+			parts.push(current);
+			current = '';
+		} else current += ch;
+	}
+	parts.push(current);
+	return parts.map((p) => p.trim()).filter(Boolean);
+}
+
+/** @param {string} value */
+export function transitionedProperties(value) {
+	const out = [];
+	for (const item of splitTopLevel(value)) {
+		for (const word of item.split(/\s+/)) {
+			const name = word.replace(/\(.*$/, '');
+			if (TIMING.test(name) || word.startsWith('var(')) continue;
+			out.push(word.toLowerCase());
+			break;
+		}
+	}
+	return out;
+}
+
+export default /** @type {import('../context.mjs').LintRule} */ ({
+	id: 'motion',
+	description: 'transition/animation on properties other than transform/opacity/color/background-color/box-shadow/filter',
+	check(ctx) {
+		walkDeclarations(ctx, (d, { atrules }) => {
+			if (d.property === 'transition' || d.property === 'transition-property') {
+				for (const prop of transitionedProperties(d.value)) {
+					if (ANIMATABLE.has(prop) || prop.startsWith('--')) continue;
+					ctx.report(
+						'motion',
+						d.start,
+						prop === 'all'
+							? 'transition: all animates layout; list transform/opacity/color/background-color/box-shadow/filter explicitly'
+							: `transition on "${prop}" animates layout; animate only transform/opacity/color/background-color/box-shadow/filter`
+					);
+				}
+			}
+			if (atrules.some((a) => a.name === 'keyframes') && !ANIMATABLE.has(d.property) && !/^(--|animation-)/.test(d.property)) {
+				ctx.report(
+					'motion',
+					d.start,
+					`keyframe animates "${d.property}"; animate only transform/opacity/color/background-color/box-shadow/filter`
+				);
+			}
+		});
+	}
+});

package/lint/rules/no-raw-color.mjs

@@ -0,0 +1,59 @@
+import { inlineDeclarations, walkDeclarations, walkMarkup } from '../context.mjs';
+
+/**
+ * @typedef {import('../context.mjs').Context} Context
+ * @typedef {import('../context.mjs').DeclarationLike} DeclarationLike
+ * @typedef {import('../context.mjs').Atrule} Atrule
+ */
+
+const THEME_SELECTOR = /:root|:host|\[data-theme|\[data-look|@theme/;
+const HEX = /#[0-9a-f]{3,8}\b/i;
+const FUNCTIONS = /\b(rgba?|hsla?|hwb|lab|lch|oklab|oklch)\(([^()]*(?:\([^()]*\)[^()]*)*)\)/gi;
+
+/** @param {string} value */
+function stripUrls(value) {
+	return value.replace(/url\((?:[^)(]|\([^)(]*\))*\)/gi, 'url()');
+}
+
+/** @param {string} value */
+export function rawColorIn(value) {
+	const text = stripUrls(value);
+	const hex = HEX.exec(text);
+	if (hex) return hex[0];
+	for (const m of text.matchAll(FUNCTIONS)) {
+		if (!/var\(|\bfrom\b/.test(m[2])) return m[0];
+	}
+	return null;
+}
+
+/**
+ * @param {Context} ctx
+ * @param {DeclarationLike} declaration
+ * @param {string[]} selectors
+ * @param {Atrule[]} atrules
+ */
+function check(ctx, declaration, selectors, atrules) {
+	if (declaration.property.startsWith('--')) return;
+	if (selectors.some((s) => THEME_SELECTOR.test(s))) return;
+	if (atrules.some((a) => a.name === 'property')) return;
+	const hit = rawColorIn(declaration.value);
+	if (hit) {
+		ctx.report(
+			'no-raw-color',
+			declaration.start,
+			`raw color ${hit} in "${declaration.property}"; use a theme token (var(--…)) or define it in a theme block`
+		);
+	}
+}
+
+export default /** @type {import('../context.mjs').LintRule} */ ({
+	id: 'no-raw-color',
+	description: 'hex/rgb/hsl literals outside a theme block',
+	check(ctx) {
+		walkDeclarations(ctx, (d, { selectors, atrules }) => check(ctx, d, selectors, atrules));
+		walkMarkup(ctx, (node) => {
+			if (node.type !== 'RegularElement' && node.type !== 'Component') return;
+			for (const d of inlineDeclarations(node)) check(ctx, d, [], []);
+		});
+	}
+});

package/lint/rules/no-raw-control.mjs

@@ -0,0 +1,23 @@
+import { staticAttribute, walkMarkup } from '../context.mjs';
+
+/** @type {Partial<Record<string, string>>} */
+const CONTROLS = {
+	button: 'Button',
+	input: 'Input / Checkbox / Switch / Radio',
+	select: 'Select',
+	textarea: 'Textarea'
+};
+
+export default /** @type {import('../context.mjs').LintRule} */ ({
+	id: 'no-raw-control',
+	description: 'raw <button>/<input>/<select>/<textarea> instead of the atoms',
+	check(ctx) {
+		walkMarkup(ctx, (node) => {
+			if (node.type !== 'RegularElement') return;
+			const atom = CONTROLS[node.name];
+			if (!atom) return;
+			if (node.name === 'input' && staticAttribute(node, 'type') === 'hidden') return;
+			ctx.report('no-raw-control', node.start, `raw <${node.name}>; use the ${atom} atom`);
+		});
+	}
+});