@dorsk/tsumikit 0.1.0

package/dist/styles/app.css

@@ -0,0 +1,522 @@
+/*
+ * Base reset + element defaults + reusable global classes.
+ * Consumes ONLY tokens from variables.css — never a raw color/size.
+ * Mobile-first: base styles target phones; `min-width` queries enhance up.
+ */
+@import './variables.css';
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-text-size-adjust: 100%;
+	text-size-adjust: 100%;
+	/* The font scaler drives --fs-scale, so only --fs-* text tokens grow — chrome
+	   rem dimensions stay fixed. A scaled-up token can still push a min-width child
+	   past the viewport; clip sideways so the page never gains a horizontal bar. */
+	overflow-x: hidden;
+	max-width: 100%;
+	scrollbar-gutter: stable;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--text);
+	font-family: var(--font-sans);
+	font-size: var(--fs-base);
+	line-height: var(--lh-normal);
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+	overflow-x: hidden;
+	scrollbar-gutter: stable;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure {
+	margin: 0;
+}
+
+a {
+	color: var(--link);
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+
+button {
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+}
+
+input,
+textarea,
+select {
+	font: inherit;
+	color: inherit;
+}
+
+/* iOS: inputs <16px trigger an auto-zoom on focus — never let that happen. */
+input,
+textarea,
+select {
+	font-size: max(16px, var(--fs-base));
+}
+
+code,
+pre {
+	font-family: var(--font-mono);
+	font-size: 0.875em;
+}
+
+/* Visible focus ring for keyboard users only (mouse clicks don't trigger it). */
+:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 2px;
+	border-radius: var(--r-sm);
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+::-webkit-scrollbar-thumb {
+	background: var(--border-strong);
+	border-radius: var(--r-pill);
+}
+
+/* ---------- layout primitives ---------- */
+.container {
+	width: 100%;
+	max-width: var(--content-max);
+	margin-inline: auto;
+	padding-inline: var(--sp-4);
+	padding-left: max(var(--sp-4), var(--safe-left));
+	padding-right: max(var(--sp-4), var(--safe-right));
+}
+.stack {
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-3);
+}
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+}
+.row-wrap {
+	flex-wrap: wrap;
+}
+.spacer {
+	flex: 1;
+}
+.muted {
+	color: var(--text-muted);
+}
+.faint {
+	color: var(--text-faint);
+}
+.mono {
+	font-family: var(--font-mono);
+}
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+}
+.nowrap {
+	white-space: nowrap;
+}
+/* Intrinsically responsive grid — no media queries: columns are at least
+   --col-min wide and fill the row, wrapping when they can't. Set --col-min to
+   tune. This adapts to the available space, so it works inside any container. */
+.auto-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 14rem)), 1fr));
+	gap: var(--sp-4);
+}
+/* Opt a wrapper into container queries so descendants can respond to THIS box's
+   width (not the viewport). Pair with `@container (…)` in a component's scope,
+   or with the .cq-* utilities below. */
+.cq {
+	container-type: inline-size;
+}
+/* Container-responsive utilities — they react to the nearest ancestor query
+   container (any `.cq`, or an AppShell region), NOT the viewport. Put them on
+   children of a container so a component degrades when ITS box is tight,
+   wherever it lives. The breakpoints are container widths. */
+@container (max-width: 30rem) {
+	.cq-hide {
+		display: none !important;
+	} /* e.g. wrap a button's label to drop it → icon-only */
+	.cq-stack {
+		flex-direction: column !important;
+		align-items: stretch !important;
+	}
+	.cq-truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+}
+@container (max-width: 18rem) {
+	.cq-hide-xs {
+		display: none !important;
+	}
+}
+
+/* ---------- control modifiers ----------
+ * The Button atom owns .btn + its variants in its scoped style. What stays
+ * global are the icon-sizing rule (used by raw aria-hidden svgs too) and the
+ * string-passed modifiers (.btn-icon / .btn-control*) that ride on a
+ * Button-rendered element and so can't live in one component's scope. */
+.btn svg,
+.icon,
+svg[aria-hidden='true'] {
+	flex: none;
+	width: 1em;
+	height: 1em;
+	min-width: 1em;
+	min-height: 1em;
+}
+.btn-icon {
+	min-height: 2.25rem;
+	min-width: 2.25rem;
+	padding: var(--sp-2);
+}
+.btn-icon-inline {
+	min-height: 0;
+	min-width: 0;
+	padding: 0 var(--sp-1);
+	border: none;
+	background: none;
+	color: var(--text-muted);
+}
+.btn-icon-inline:hover:not(:disabled) {
+	border: none;
+	background: none;
+	color: var(--text);
+}
+.btn-icon-inline.hover-danger:hover:not(:disabled) {
+	color: var(--danger);
+}
+/* Uniform-height control: icon buttons, inputs and action buttons sharing a
+   toolbar/composer row line up exactly. Square icon variant: .btn-control-square. */
+.btn-control {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	height: var(--control-height);
+	min-height: var(--control-height);
+	padding: 0 var(--sp-3);
+	border: 1px solid var(--border-strong);
+	border-radius: var(--r-md);
+	background: var(--surface);
+	color: var(--text);
+	font-weight: var(--fw-medium);
+	font-size: var(--fs-sm);
+	line-height: 1;
+	white-space: nowrap;
+	transition:
+		background 0.12s var(--ease),
+		border-color 0.12s var(--ease),
+		opacity 0.12s var(--ease);
+	user-select: none;
+}
+.btn-control:hover:not(:disabled) {
+	border-color: var(--accent);
+}
+.btn-control:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.btn-control.btn-primary {
+	background: var(--accent);
+	border-color: var(--accent);
+	color: var(--text-on-accent);
+}
+.btn-control.btn-primary:hover:not(:disabled) {
+	border-color: var(--accent);
+	filter: brightness(1.08);
+}
+.btn-control-square {
+	width: var(--control-height);
+	padding: 0;
+	flex: none;
+}
+
+/* ---------- status dots ---------- */
+.dot {
+	width: 0.55rem;
+	height: 0.55rem;
+	border-radius: var(--r-pill);
+	flex: none;
+	display: inline-block;
+}
+.dot-active {
+	background: var(--dot-active);
+	box-shadow: 0 0 6px var(--dot-active);
+}
+.dot-stale {
+	background: var(--dot-stale);
+}
+.dot-dead {
+	background: var(--dot-dead);
+}
+.dot-hibernated {
+	background: var(--dot-hibernated);
+}
+
+/* ---------- modal / bottom sheet ---------- */
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.55);
+	z-index: var(--z-modal);
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+@media (min-width: 640px) {
+	.overlay {
+		align-items: center;
+		padding: var(--sp-6);
+	}
+}
+.sheet {
+	width: 100%;
+	max-width: 34rem;
+	max-height: calc(100dvh - var(--safe-top) - var(--sp-6));
+	display: flex;
+	flex-direction: column;
+	background: var(--bg-elevated);
+	border: 1px solid var(--border);
+	border-radius: var(--r-lg) var(--r-lg) 0 0;
+	box-shadow: var(--shadow-lg);
+	animation: sheet-up 0.18s var(--ease);
+	padding-bottom: var(--safe-bottom);
+}
+@media (min-width: 640px) {
+	.sheet {
+		border-radius: var(--r-lg);
+		padding-bottom: 0;
+	}
+}
+@keyframes sheet-up {
+	from {
+		transform: translateY(8%);
+		opacity: 0.4;
+	}
+}
+.sheet-head {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: var(--sp-4);
+	border-bottom: 1px solid var(--border);
+}
+.sheet-title {
+	font-size: var(--fs-lg);
+	font-weight: var(--fw-semibold);
+}
+.sheet-body {
+	padding: var(--sp-4);
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.sheet-foot {
+	display: flex;
+	gap: var(--sp-2);
+	padding: var(--sp-4);
+	border-top: 1px solid var(--border);
+}
+
+/* ---------- toast ---------- */
+.toast-wrap {
+	position: fixed;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: calc(var(--safe-bottom) + var(--sp-4));
+	z-index: var(--z-toast);
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-2);
+	width: calc(100% - var(--sp-8));
+	max-width: 30rem;
+	pointer-events: none;
+}
+.toast-wrap .toast {
+	pointer-events: auto;
+	width: 100%;
+	text-align: left;
+	color: inherit;
+	cursor: pointer;
+	background: var(--bg-elevated-2);
+	border: 1px solid var(--border-strong);
+	border-radius: var(--r-md);
+	padding: var(--sp-3) var(--sp-4);
+	box-shadow: var(--shadow-md);
+	font-size: var(--fs-sm);
+	animation: sheet-up 0.18s var(--ease);
+}
+.toast-wrap .toast-err {
+	border-color: var(--danger);
+	color: var(--danger);
+}
+.toast-wrap .toast-ok {
+	border-color: var(--accent);
+}
+
+/* ---------- misc ---------- */
+.empty {
+	text-align: center;
+	color: var(--text-faint);
+	padding: var(--sp-10) var(--sp-4);
+}
+.divider {
+	height: 1px;
+	background: var(--border);
+	border: 0;
+	margin: var(--sp-2) 0;
+}
+.spin {
+	width: 1.1rem;
+	height: 1.1rem;
+	border: 2px solid var(--border-strong);
+	border-top-color: var(--accent);
+	border-radius: 50%;
+	animation: spin 0.7s linear infinite;
+	display: inline-block;
+}
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ---------- syntax-highlight token mapping ----------
+ * CodeBlock doesn't bundle a highlighter; it renders whatever HTML you pass.
+ * Class-based highlighters (highlight.js `hljs-*`, Prism `token.*`) are themed
+ * here by mapping their token classes onto the --syn-* theme tokens, so colors
+ * track every theme. This must be GLOBAL: Svelte scoped styles don't reach
+ * {@html} content. (Shiki emits inline colors instead — see the README for how
+ * to theme it via its css-variables theme.) */
+.hljs-keyword,
+.hljs-built_in,
+.hljs-type,
+.hljs-literal,
+.hljs-symbol,
+.hljs-selector-tag,
+.token.keyword,
+.token.builtin,
+.token.tag {
+	color: var(--syn-keyword);
+}
+.hljs-string,
+.hljs-char,
+.hljs-regexp,
+.token.string,
+.token.char,
+.token.regex,
+.token.attr-value {
+	color: var(--syn-string);
+}
+.hljs-number,
+.hljs-attr,
+.hljs-attribute,
+.hljs-variable,
+.hljs-template-variable,
+.token.number,
+.token.boolean,
+.token.attr-name {
+	color: var(--syn-number);
+}
+.hljs-comment,
+.hljs-quote,
+.token.comment,
+.token.prolog {
+	color: var(--syn-comment);
+	font-style: italic;
+}
+.hljs-title,
+.hljs-title.function_,
+.hljs-section,
+.hljs-name,
+.hljs-meta,
+.hljs-property,
+.token.function,
+.token.class-name {
+	color: var(--syn-function);
+}
+.hljs-punctuation,
+.token.punctuation,
+.token.operator {
+	color: var(--syn-punct);
+}
+.hljs-addition {
+	color: var(--syn-string);
+}
+.hljs-deletion {
+	color: var(--danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+/* Forced colors (Windows High Contrast). The OS replaces our palette with its
+   own; our job is to not fight it and to keep affordances visible. Keep the
+   focus ring mapped to a system color, and make sure the focus outline shows
+   even where we'd normally rely on a token border. */
+@media (forced-colors: active) {
+	:focus-visible {
+		outline: 2px solid Highlight;
+		outline-offset: 2px;
+	}
+	/* Status tints/borders drawn with color-mix collapse to the system palette;
+	   force a readable border so badges/cards keep their edges. */
+	.dot,
+	.btn-control,
+	.btn-icon {
+		forced-color-adjust: auto;
+	}
+}
+
+/* Stronger separators when the user asks for more contrast. */
+@media (prefers-contrast: more) {
+	:root {
+		--border: var(--border-strong);
+	}
+}