@f0rbit/ui 0.1.2

package/src/styles/reset.css

@@ -0,0 +1,93 @@
+@layer reset {
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	* {
+		margin: 0;
+	}
+
+	body {
+		line-height: var(--leading-normal, 1.5);
+		-webkit-font-smoothing: antialiased;
+		font-family: var(--font);
+		background: var(--bg);
+		color: var(--fg-muted);
+	}
+
+	img,
+	picture,
+	video,
+	canvas,
+	svg {
+		display: block;
+		max-width: 100%;
+	}
+
+	input,
+	button,
+	textarea,
+	select {
+		font: inherit;
+		font-size: var(--text-sm);
+		line-height: var(--text-sm-lh);
+	}
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		overflow-wrap: break-word;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		color: var(--fg);
+		font-weight: var(--font-semibold, 600);
+	}
+
+	a {
+		color: var(--accent);
+		text-decoration: none;
+		transition: filter var(--transition);
+	}
+
+	a:hover {
+		filter: var(--hover-filter);
+	}
+
+	ul,
+	ol {
+		list-style: none;
+		padding: 0;
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+		}
+	}
+}

package/src/styles/tokens.css

@@ -0,0 +1,121 @@
+@layer tokens {
+	:root {
+		--bg: oklch(97% 0.02 290);
+		--bg-alt: oklch(96% 0.01 290);
+		--border: oklch(91% 0.01 290);
+
+		--fg: oklch(1% 0.02 290);
+		--fg-muted: oklch(25% 0.02 290);
+		--fg-subtle: oklch(35% 0.02 290);
+		--fg-faint: oklch(50% 0.03 290);
+
+		--accent: oklch(46% 0.015 300);
+		--accent-fg: var(--bg);
+
+		--success: oklch(0.95 0.05 150);
+		--success-fg: oklch(0.35 0.15 150);
+		--error: oklch(0.95 0.05 20);
+		--error-fg: oklch(0.45 0.15 20);
+		--warning: oklch(0.95 0.08 85);
+		--warning-fg: oklch(0.45 0.15 85);
+		--info: oklch(0.95 0.05 240);
+		--info-fg: oklch(0.4 0.15 240);
+
+		--font: "neue-haas-grotesk-text", "Inter", Helvetica, sans-serif;
+		--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+		--font-semibold: 600;
+
+		--text-xs: 0.75rem;
+		--text-xs-lh: 1rem;
+		--text-sm: 0.875rem;
+		--text-sm-lh: 1.25rem;
+		--text-base: 1rem;
+		--text-base-lh: 1.5rem;
+		--text-lg: 1.125rem;
+		--text-lg-lh: 1.75rem;
+		--text-xl: 1.25rem;
+		--text-xl-lh: 1.75rem;
+		--text-2xl: 1.5rem;
+		--text-2xl-lh: 2rem;
+		--text-3xl: 1.875rem;
+		--text-3xl-lh: 2.25rem;
+		--text-4xl: 2.25rem;
+		--text-4xl-lh: 2.5rem;
+
+		--leading-normal: 1.5;
+
+		--space-xs: 0.25rem;
+		--space-sm: 0.35rem;
+		--space-md: 0.75rem;
+		--space-lg: 1.5rem;
+		--space-xl: 2.5rem;
+
+		--radius: 0.25rem;
+		--radius-lg: 0.5rem;
+
+		--shadow: 0 1px 3px rgb(0 0 0 / 0.1);
+		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.15);
+
+		--transition: 150ms ease;
+
+		--hover-filter: brightness(0.8);
+	}
+
+	/* Dark mode: system preference or explicit data-theme */
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme="light"]) {
+			--bg: oklch(21% 0.015 280);
+			--bg-alt: oklch(27% 0.02 290);
+			--border: oklch(32% 0.02 290);
+
+			--fg: oklch(100% 0 0);
+			--fg-muted: oklch(85% 0.02 290);
+			--fg-subtle: oklch(75% 0.02 290);
+			--fg-faint: oklch(60% 0.03 290);
+
+			--accent: oklch(70% 0.035 280);
+
+			--success: oklch(0.35 0.05 150);
+			--success-fg: oklch(0.85 0.1 150);
+			--error: oklch(0.35 0.05 20);
+			--error-fg: oklch(0.85 0.1 20);
+			--warning: oklch(0.35 0.08 85);
+			--warning-fg: oklch(0.85 0.12 85);
+			--info: oklch(0.35 0.05 240);
+			--info-fg: oklch(0.85 0.1 240);
+
+			--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+			--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);
+
+			--hover-filter: brightness(1.2);
+		}
+	}
+
+	/* Explicit dark theme override */
+	:root[data-theme="dark"] {
+		--bg: oklch(21% 0.015 280);
+		--bg-alt: oklch(27% 0.02 290);
+		--border: oklch(32% 0.02 290);
+
+		--fg: oklch(100% 0 0);
+		--fg-muted: oklch(85% 0.02 290);
+		--fg-subtle: oklch(75% 0.02 290);
+		--fg-faint: oklch(60% 0.03 290);
+
+		--accent: oklch(70% 0.035 280);
+
+		--success: oklch(0.35 0.05 150);
+		--success-fg: oklch(0.85 0.1 150);
+		--error: oklch(0.35 0.05 20);
+		--error-fg: oklch(0.85 0.1 20);
+		--warning: oklch(0.35 0.08 85);
+		--warning-fg: oklch(0.85 0.12 85);
+		--info: oklch(0.35 0.05 240);
+		--info-fg: oklch(0.85 0.1 240);
+
+		--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);
+
+		--hover-filter: brightness(1.2);
+	}
+}

package/src/styles/utilities.css

@@ -0,0 +1,298 @@
+@layer utilities {
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stack-gap, var(--space-md));
+	}
+
+	.stack-sm {
+		--stack-gap: var(--space-sm);
+	}
+
+	.stack-lg {
+		--stack-gap: var(--space-lg);
+	}
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--row-gap, var(--space-sm));
+	}
+
+	.row-sm {
+		--row-gap: var(--space-xs);
+	}
+
+	.row-lg {
+		--row-gap: var(--space-md);
+	}
+
+	.row-between {
+		justify-content: space-between;
+	}
+
+	.row-end {
+		justify-content: flex-end;
+	}
+
+	.row-start {
+		align-items: flex-start;
+	}
+
+	.cluster {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-sm);
+		align-items: center;
+	}
+
+	.center {
+		max-width: var(--center-width, 65ch);
+		margin-inline: auto;
+		padding-inline: var(--space-md);
+	}
+
+	.center-narrow {
+		--center-width: 45ch;
+	}
+
+	.center-wide {
+		--center-width: 90ch;
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr));
+		gap: var(--space-md);
+	}
+
+	.grid-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.grid-3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	.grid-4 {
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	.text-primary {
+		color: var(--fg);
+	}
+
+	.text-muted {
+		color: var(--fg-muted);
+	}
+
+	.text-subtle {
+		color: var(--fg-subtle);
+	}
+
+	.text-faint {
+		color: var(--fg-faint);
+	}
+
+	.text-accent {
+		color: var(--accent);
+	}
+
+	.text-xs {
+		font-size: var(--text-xs);
+		line-height: var(--text-xs-lh);
+	}
+
+	.text-sm {
+		font-size: var(--text-sm);
+		line-height: var(--text-sm-lh);
+	}
+
+	.text-base {
+		font-size: var(--text-base);
+		line-height: var(--text-base-lh);
+	}
+
+	.text-lg {
+		font-size: var(--text-lg);
+		line-height: var(--text-lg-lh);
+	}
+
+	.text-xl {
+		font-size: var(--text-xl);
+		line-height: var(--text-xl-lh);
+	}
+
+	.text-2xl {
+		font-size: var(--text-2xl);
+		line-height: var(--text-2xl-lh);
+	}
+
+	.text-3xl {
+		font-size: var(--text-3xl);
+		line-height: var(--text-3xl-lh);
+	}
+
+	.text-4xl {
+		font-size: var(--text-4xl);
+		line-height: var(--text-4xl-lh);
+	}
+
+	.font-medium {
+		font-weight: 500;
+	}
+
+	.font-bold {
+		font-weight: 700;
+	}
+
+	.font-mono {
+		font-family: var(--font-mono);
+	}
+
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.list {
+		padding-left: var(--space-lg);
+	}
+
+	.list li {
+		position: relative;
+		padding-left: var(--space-sm);
+		margin-bottom: var(--space-xs);
+	}
+
+	.list li::marker {
+		color: var(--fg-faint);
+	}
+
+	.list li:last-child {
+		margin-bottom: 0;
+	}
+
+	ul.list {
+		list-style-type: disc;
+	}
+
+	ul.list ul {
+		list-style-type: circle;
+		margin-top: var(--space-xs);
+		padding-left: var(--space-lg);
+	}
+
+	ul.list ul ul {
+		list-style-type: square;
+	}
+
+	ol.list {
+		list-style-type: decimal;
+	}
+
+	ol.list ol {
+		list-style-type: lower-alpha;
+		margin-top: var(--space-xs);
+		padding-left: var(--space-lg);
+	}
+
+	ol.list ol ol {
+		list-style-type: lower-roman;
+	}
+
+	.list li > ul,
+	.list li > ol {
+		margin-top: var(--space-xs);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.hover-reveal {
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+
+	*:hover > .hover-reveal,
+	*:focus-within > .hover-reveal {
+		opacity: 1;
+	}
+
+	.interactive {
+		--_hover-border: var(--hover-border, var(--fg-faint));
+		transition: border-color var(--transition);
+	}
+
+	.interactive:hover {
+		border-color: var(--_hover-border);
+	}
+
+	.interactive-color {
+		--_hover-color: var(--hover-color, var(--fg));
+		transition: color var(--transition);
+	}
+
+	.interactive-color:hover {
+		color: var(--_hover-color);
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes pulse {
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.animate-spin {
+		animation: spin 1s linear infinite;
+	}
+
+	.animate-pulse {
+		animation: pulse 2s ease-in-out infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-spin,
+		.animate-pulse {
+			animation: none;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.hide-mobile {
+			display: none;
+		}
+
+		.grid-2,
+		.grid-3,
+		.grid-4 {
+			grid-template-columns: 1fr;
+		}
+	}
+}