@dorsk/tsumikit 0.23.0 → 0.24.0

package/dist/styles/app.css

@@ -1,300 +1,10 @@
 /*
- * Base reset + element defaults + a small generic utility layer + the
- * syntax-highlight token mapping (which must be global to reach {@html} output).
- * Component styling lives in each component's own scoped <style>, never here.
- * Consumes ONLY tokens from variables.css — never a raw color/size.
- * Mobile-first: base styles target phones; `min-width` queries enhance up.
+ * All-in-one stylesheet: tokens + built-in themes, reset + element defaults,
+ * generic utilities and the syntax-highlight token mapping (global so it
+ * reaches {@html} output). Import the parts individually to compose your own
+ * stack — see README "Theming".
  */
 @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);
-}
-
-/* ---------- generic utilities ----------
- * Small, content-agnostic helpers (NOT component styling — components own that in
- * their own scope). Layout components (Container/Stack/Cluster/AutoGrid) are the
- * recommended API; these stay for ad-hoc markup and as documented escape hatches. */
-.container {
-	width: 100%;
-	max-width: var(--content-max);
-	margin-inline: auto;
-	padding-inline: max(var(--sp-4), var(--safe-left)) 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;
-}
-.faint {
-	/* `--faint-color` lets a parent retint slotted `.faint` text via inheritance
-	   (custom props cross the slot boundary, so no :global needed). */
-	color: var(--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;
-}
-/* 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;
-	}
-}
-
-/* ---------- icon sizing ----------
- * Components own their own button/control styling in scope (Button, IconButton,
- * Modal, Toaster, Dot, …). This single rule stays global because it also sizes
- * raw decorative SVGs that callers drop in outside any component. */
-.icon,
-svg[aria-hidden='true'] {
-	flex: none;
-	width: 1em;
-	height: 1em;
-	min-width: 1em;
-	min-height: 1em;
-}
-
-/* ---------- misc ---------- */
-.divider {
-	height: 1px;
-	background: var(--border);
-	border: 0;
-	margin: var(--sp-2) 0;
-}
-.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;
-	}
-}
-
-/* Stronger separators when the user asks for more contrast. */
-@media (prefers-contrast: more) {
-	:root {
-		--border: var(--border-strong);
-	}
-}
+@import './reset.css';
+@import './utilities.css';
+@import './syntax.css';

package/dist/styles/reset.css

@@ -0,0 +1,97 @@
+/*
+ * RESET + element defaults. Consumes ONLY tokens from tokens.css — never a raw
+ * color/size. Mobile-first: base styles target phones; `min-width` queries
+ * enhance up.
+ */
+
+*,
+*::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);
+}
+

package/dist/styles/syntax.css

@@ -0,0 +1,94 @@
+/* ---------- 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;
+	}
+}
+
+/* Stronger separators when the user asks for more contrast. */
+@media (prefers-contrast: more) {
+	:root {
+		--border: var(--border-strong);
+	}
+}