@nldd/design-system 0.8.96 → 0.8.97

package/dist/palettes.html

@@ -1,245 +0,0 @@
-<!DOCTYPE html>
-<html lang="nl" data-scheme="light">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>NLDD Paletten</title>
-	<link rel="stylesheet" href="/css/settings.css">
-	<style>
-		body {
-			margin: 0;
-			padding: 2rem;
-			font-family: 'RijksSansVF', system-ui, sans-serif;
-			background: light-dark(#fff, #111);
-			color: light-dark(#111, #fff);
-		}
-
-		header {
-			display: flex;
-			align-items: baseline;
-			justify-content: space-between;
-			gap: 1rem;
-			max-width: 1400px;
-			margin: 0 auto 2rem;
-		}
-
-		h1 {
-			margin: 0;
-			font-size: 1.5rem;
-			font-weight: 600;
-		}
-
-		h2 {
-			margin: 2rem 0 0.5rem;
-			font-size: 1rem;
-			font-weight: 600;
-			text-transform: capitalize;
-			display: flex;
-			align-items: baseline;
-			gap: 0.75rem;
-		}
-
-		h2 small {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			font-weight: 400;
-		}
-
-		main {
-			max-width: 1400px;
-			margin: 0 auto;
-		}
-
-		section + section h1 {
-			margin-top: 3rem;
-		}
-
-		.section-title {
-			margin: 2.5rem 0 0.5rem;
-			font-size: 0.875rem;
-			font-weight: 600;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-			opacity: 0.6;
-		}
-
-		.strip {
-			display: grid;
-			grid-template-columns: repeat(25, 1fr);
-			gap: 2px;
-			border-radius: 6px;
-			overflow: hidden;
-		}
-
-		.swatch {
-			aspect-ratio: 1 / 2;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
-			padding: 4px;
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 9px;
-			line-height: 1;
-			position: relative;
-		}
-
-		.swatch.light-text { color: rgba(255,255,255,0.85); }
-		.swatch.dark-text { color: rgba(0,0,0,0.7); }
-
-		.swatch span {
-			text-align: center;
-		}
-
-		.swatch.is-ref::before {
-			content: '★';
-			position: absolute;
-			top: 4px;
-			right: 4px;
-			font-size: 10px;
-		}
-
-		button.toggle {
-			padding: 0.4rem 0.8rem;
-			border: 1px solid currentColor;
-			background: transparent;
-			color: inherit;
-			border-radius: 4px;
-			font: inherit;
-			font-size: 0.8rem;
-			cursor: pointer;
-		}
-
-		button.toggle:hover {
-			background: light-dark(#0001, #fff1);
-		}
-
-		footer {
-			max-width: 1400px;
-			margin: 3rem auto 0;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			line-height: 1.5;
-		}
-
-		footer code {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		}
-	</style>
-</head>
-<body>
-	<header>
-		<h1>NLDD Paletten</h1>
-		<button class="toggle" type="button" aria-label="Wissel kleurenschema">Light / Dark</button>
-	</header>
-
-	<main>
-		<div class="section-title">Functionele aliassen</div>
-		<div id="aliases"></div>
-
-		<div class="section-title">Descriptive paletten</div>
-		<div id="descriptive"></div>
-	</main>
-
-	<footer>
-		<p>★ markeert de step die het dichtst bij de oorspronkelijke referentiekleur ligt.
-		Step 500 = peak chroma. Plateau van mirror(ref) tot ref op volle chroma; daarbuiten taper.</p>
-		<p>Hex-waarden vind je in <code>src/assets/styles/palettes.generated.css</code>.</p>
-	</footer>
-
-	<script type="module">
-		const STEPS = [0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 450, 500,
-			550, 600, 650, 700, 750, 800, 850, 900, 925, 950, 975, 1000];
-
-		const ALIASES = ['accent', 'critical', 'mark', 'neutral', 'success', 'warning'];
-
-		const DESCRIPTIVE = [
-			{ name: 'coolgray',    hex: '#64748B' },
-			{ name: 'lintblauw',   hex: '#154273' },
-			{ name: 'donkerblauw', hex: '#01689B' },
-			{ name: 'hemelblauw',  hex: '#007BC7' },
-			{ name: 'lichtblauw',  hex: '#8FCAE7' },
-			{ name: 'paars',       hex: '#42145F' },
-			{ name: 'violet',      hex: '#A90061' },
-			{ name: 'robijnrood',  hex: '#CA005D' },
-			{ name: 'roze',        hex: '#F092CD' },
-			{ name: 'rood',        hex: '#D52B1E' },
-			{ name: 'oranje',      hex: '#E17000' },
-			{ name: 'donkergeel',  hex: '#FFB612' },
-			{ name: 'geel',        hex: '#F9E11E' },
-			{ name: 'donkerbruin', hex: '#673327' },
-			{ name: 'bruin',       hex: '#94710A' },
-			{ name: 'donkergroen', hex: '#275937' },
-			{ name: 'groen',       hex: '#39870C' },
-			{ name: 'mosgroen',    hex: '#777B00' },
-			{ name: 'mintgroen',   hex: '#76D2B6' },
-		];
-
-		// WCAG luminance from hex
-		function relLum(hex) {
-			const c = hex.slice(1).match(/.{2}/g).map(h => {
-				const v = parseInt(h, 16) / 255;
-				return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-			});
-			return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-		}
-
-		// Find the step whose target_lum is closest to the reference color's lum
-		function nearestStep(refHex) {
-			const lum = relLum(refHex);
-			const centerLum = Math.sqrt(1.05 * 0.05) - 0.05;
-			const logTarget = Math.log(Math.max(lum, 0.0001) + 0.05);
-			const logWhite = Math.log(1.05);
-			const logCenter = Math.log(centerLum + 0.05);
-			const logBlack = Math.log(0.05);
-
-			let pos;
-			if (logTarget >= logCenter) {
-				const t = (logTarget - logWhite) / (logCenter - logWhite);
-				pos = Math.max(0, Math.min(0.5, t * 0.5));
-			} else {
-				const t = (logTarget - logCenter) / (logBlack - logCenter);
-				pos = Math.max(0.5, Math.min(1.0, 0.5 + t * 0.5));
-			}
-			const target = pos * 1000;
-			return STEPS.reduce((a, b) =>
-				Math.abs(b - target) < Math.abs(a - target) ? b : a
-			);
-		}
-
-		// Decide light/dark text per swatch based on step (rough proxy for lightness in current scheme)
-		function textClass(step, scheme) {
-			// In light scheme, lower steps = lighter; in dark scheme, mirrored
-			const effective = scheme === 'dark' ? 1000 - step : step;
-			return effective < 500 ? 'dark-text' : 'light-text';
-		}
-
-		function renderPalette(name, refHex) {
-			const refStep = refHex ? nearestStep(refHex) : null;
-			const scheme = document.documentElement.dataset.scheme;
-			const swatches = STEPS.map(step => {
-				const cls = ['swatch', textClass(step, scheme)];
-				if (step === refStep) cls.push('is-ref');
-				return `<div class="${cls.join(' ')}" style="background:var(--primitives-color-${name}-${step})"><span>${step}</span></div>`;
-			}).join('');
-			const refLabel = refHex ? `<small>${refHex}</small>` : '';
-			return `<h2>${name}${refLabel}</h2><div class="strip">${swatches}</div>`;
-		}
-
-		function render() {
-			document.getElementById('aliases').innerHTML =
-				ALIASES.map(name => renderPalette(name)).join('');
-			document.getElementById('descriptive').innerHTML =
-				DESCRIPTIVE.map(({ name, hex }) => renderPalette(name, hex)).join('');
-		}
-
-		document.querySelector('button.toggle').addEventListener('click', () => {
-			const root = document.documentElement;
-			root.dataset.scheme = root.dataset.scheme === 'light' ? 'dark' : 'light';
-			render();
-		});
-
-		render();
-	</script>
-</body>
-</html>