@chitrank2050/monoline-ui 0.2.0

package/styles/theme/utilities.css

@@ -0,0 +1,281 @@
+/* =============================================================================
+ * utilities.css · Custom helper classes, print, accessibility, and transitions
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Contains custom layout utility classes, interaction states, font families,
+ * print stylesheet rules, and reduced motion configurations.
+ * ========================================================================== */
+
+.img-placeholder {
+	background-color: var(--placeholder-bg);
+	background-image: repeating-linear-gradient(
+		135deg,
+		var(--placeholder-stripe) 0,
+		var(--placeholder-stripe) 1px,
+		transparent 1px,
+		transparent 0.875rem
+	);
+	position: relative;
+	overflow: hidden;
+}
+
+.ml-control-surface--secondary {
+	border-color: var(--border-strong);
+	background: var(--button);
+	color: var(--primary);
+}
+
+.ml-control-surface--secondary:not(:disabled):not([aria-disabled="true"]):not(
+		[data-disabled="true"]
+	):hover {
+	border-color: color-mix(in oklch, var(--primary) 35%, transparent);
+	background: var(--button-hover);
+	color: var(--primary);
+}
+
+.ml-control-surface--secondary:not(:disabled):not([aria-disabled="true"]):not(
+		[data-disabled="true"]
+	):active {
+	border-color: color-mix(in oklch, var(--primary) 48%, transparent);
+	background: color-mix(in oklch, var(--button-hover) 82%, var(--primary));
+	color: var(--primary);
+}
+
+.ml-control-surface--secondary[data-active="true"],
+.ml-control-surface--secondary[aria-pressed="true"],
+.ml-control-surface--secondary[aria-checked="true"] {
+	border-color: var(--primary);
+	background: var(--primary);
+	color: var(--primary-foreground);
+}
+
+.ml-control-surface--ghost {
+	border-color: transparent;
+	background: transparent;
+	color: var(--text-body);
+}
+
+.ml-control-surface--ghost:not(:disabled):not([aria-disabled="true"]):not(
+		[data-disabled="true"]
+	):hover {
+	background: var(--button-hover);
+	color: var(--primary);
+}
+
+.ml-control-surface--ghost:not(:disabled):not([aria-disabled="true"]):not(
+		[data-disabled="true"]
+	):active {
+	background: color-mix(in oklch, var(--button-hover) 82%, var(--primary));
+	color: var(--primary);
+}
+
+.ml-control-surface--ghost[data-active="true"],
+.ml-control-surface--ghost[aria-pressed="true"],
+.ml-control-surface--ghost[aria-checked="true"] {
+	background: color-mix(in oklch, var(--button-hover) 76%, transparent);
+	color: var(--primary);
+}
+
+.ml-control-surface--secondary[data-disabled="true"],
+.ml-control-surface--ghost[data-disabled="true"] {
+	border-color: var(--border);
+	background: color-mix(in oklch, var(--button) 55%, transparent);
+	color: var(--text-muted);
+	opacity: 0.58;
+}
+
+.ml-control-surface--ghost[data-disabled="true"] {
+	border-color: transparent;
+	background: transparent;
+}
+
+/* --- Transitions & Composable Interaction States --- */
+.transition-micro {
+	transition:
+		background-color var(--duration-micro) var(--ease-out),
+		border-color var(--duration-micro) var(--ease-out),
+		box-shadow var(--duration-micro) var(--ease-out),
+		color var(--duration-micro) var(--ease-out),
+		opacity var(--duration-micro) var(--ease-out),
+		transform var(--duration-micro) var(--ease-out);
+}
+.transition-short {
+	transition:
+		background-color var(--duration-short) var(--ease-out),
+		border-color var(--duration-short) var(--ease-out),
+		box-shadow var(--duration-short) var(--ease-out),
+		color var(--duration-short) var(--ease-out),
+		opacity var(--duration-short) var(--ease-out),
+		transform var(--duration-short) var(--ease-out-expo);
+}
+.transition-medium {
+	transition:
+		opacity var(--duration-medium) var(--ease-out),
+		transform var(--duration-medium) var(--ease-out-expo);
+}
+.transition-long {
+	transition:
+		opacity var(--duration-long) var(--ease-out),
+		transform var(--duration-long) var(--ease-out-expo);
+}
+
+@layer utilities {
+	.ml-interaction-color {
+		transition: color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-color:hover {
+		color: var(--text);
+	}
+
+	.ml-interaction-focus {
+		transition:
+			border-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-focus:focus-within {
+		border-color: var(--border-strong);
+		box-shadow: var(--focus-ring-layered);
+	}
+
+	.ml-interaction-surface {
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-surface:hover {
+		border-color: var(--border);
+		background: var(--surface);
+		color: var(--text);
+	}
+
+	.ml-interaction-control {
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-control:hover {
+		border-color: var(--border-strong);
+		background: var(--surface-2);
+		box-shadow: var(--shadow-sm);
+		color: var(--text);
+	}
+
+	.ml-interaction-control-primary:hover {
+		border-color: var(--btn-primary-hover);
+		background: var(--btn-primary-hover);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.ml-interaction-tab {
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-tab:hover {
+		color: var(--text);
+	}
+
+	.ml-interaction-tab-underline {
+		transition:
+			border-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-interaction-tab-underline:hover {
+		color: var(--text);
+	}
+}
+
+/* --- Reduced Motion (prefers-reduced-motion: reduce) --- */
+@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;
+	}
+	.ml-card--hover:hover,
+	.ml-card--interactive:hover {
+		transform: none;
+	}
+	.ml-card--hover:hover .ml-card__image > * {
+		transform: none;
+	}
+}
+
+/* --- Print Stylesheet --- */
+@media print {
+	:root,
+	.dark,
+	[data-theme="dark"] {
+		--background: #ffffff;
+		--foreground: #000000;
+		--text: #000000;
+		--text-body: #000000;
+		--text-secondary: #333333;
+		--text-muted: #666666;
+		--surface: #ffffff;
+		--border: #cccccc;
+		color-scheme: light;
+	}
+	body {
+		background: #fff;
+		color: #000;
+	}
+	nav,
+	.navbar,
+	footer,
+	.footer,
+	button {
+		display: none !important;
+	}
+	.prose,
+	.prose * {
+		color: #000 !important;
+	}
+	a {
+		color: #000;
+		text-decoration: underline;
+	}
+	a::after {
+		content: " (" attr(href) ")";
+		font-size: 0.8em;
+		color: #666;
+	}
+}
+
+/* --- Font Family Utility Classes (beyond Tailwind's default set) --- */
+.font-sans {
+	font-family: var(--font-sans);
+}
+.font-mono {
+	font-family: var(--font-mono);
+}
+.font-script {
+	font-family: var(--font-script);
+}
+.font-headline {
+	font-family: var(--font-headline);
+}
+
+/* --- Eyebrow utility (standalone class, no component import needed) --- */
+.eyebrow,
+.ml-eyebrow {
+	font-family: var(--font-mono);
+	font-size: var(--text-2xs);
+	letter-spacing: var(--tracking-eyebrow);
+	text-transform: uppercase;
+	color: var(--text-muted);
+	display: inline-block;
+}

package/styles/theme.css

@@ -0,0 +1,68 @@
+/* =============================================================================
+ * theme.css · entry point for monoline-ui theme foundations
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Bundles design tokens, tailwind config, base, typography, animations,
+ * and utilities.
+ * ========================================================================== */
+
+@import "./theme/tokens.css";
+@import "./theme/tailwind.css";
+@import "./theme/base.css";
+@import "./theme/typography.css";
+@import "./theme/animations.css";
+@import "./theme/utilities.css";
+
+/* =============================================================================
+ * USAGE NOTES (read these once, then forget them)
+ * ─────────────────────────────────────────────────────────────────────────────
+ * - Theme switch:  <html data-theme="dark">  or  <html class="dark">
+ *                  Either works; pick whichever your app already toggles.
+ * - Tailwind:      bg-background, text-foreground, bg-card, border-border-strong
+ *                  All auto-generated from the @theme block above.
+ * - CSS direct:    background: var(--surface);  color: var(--text-muted);
+ *                  Use directly when Tailwind utility names would be ugly.
+ * - Animations:    <div className="animate-heart-pop">  or  animation: heart-pop ...
+ * - Motion tokens: transition-duration: var(--duration-short)
+ *                  transition-timing-function: var(--ease-out-expo)
+ * - Reduced motion is handled automatically - your custom transitions in
+ *   component code should still use the duration tokens so they're caught.
+ *
+ * If you need a token that isn't here, add it to the appropriate section
+ * (DARK + LIGHT + @theme inline) instead of inlining a value in a component.
+ * This file is the single source. Components reference, don't redefine.
+ * ========================================================================== */
+
+/* =============================================================================
+ * Component Styles (auto-generated by sync-exports)
+ * ========================================================================== */
+/* @components-start */
+@import "../components/avatar/avatar.css";
+@import "../components/back-link/back-link.css";
+@import "../components/badge/badge.css";
+@import "../components/button/button.css";
+@import "../components/callout/callout.css";
+@import "../components/card/card.css";
+@import "../components/code-block/code-block.css";
+@import "../components/command-search/command-search.css";
+@import "../components/container/container.css";
+@import "../components/data-list/data-list.css";
+@import "../components/eyebrow/eyebrow.css";
+@import "../components/footer/footer.css";
+@import "../components/input/input.css";
+@import "../components/link-list/link-list.css";
+@import "../components/media-frame/media-frame.css";
+@import "../components/navbar/navbar.css";
+@import "../components/progress/progress.css";
+@import "../components/rail/rail.css";
+@import "../components/resources-panel/resources-panel.css";
+@import "../components/segmented-control/segmented-control.css";
+@import "../components/select/select.css";
+@import "../components/skeleton/skeleton.css";
+@import "../components/status/status.css";
+@import "../components/tag/tag.css";
+@import "../components/testimonial/testimonial.css";
+@import "../components/testimonial-grid/testimonial-grid.css";
+@import "../components/theme-switcher/theme-switcher.css";
+@import "../components/toast/toast.css";
+@import "../components/toggle/toggle.css";
+/* @components-end */