@chitrank2050/monoline-ui 0.2.0

package/styles/theme/tailwind.css

@@ -0,0 +1,371 @@
+/* =============================================================================
+ * tailwind.css · Tailwind v4 @theme customization
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Maps our custom properties (variables) to Tailwind's utility class generator.
+ * ========================================================================== */
+@theme inline {
+	/* Colours (shadcn-compat) */
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+
+	/* Extended */
+	--color-surface: var(--surface);
+	--color-surface-2: var(--surface-2);
+	--color-surface-3: var(--surface-3);
+	--color-surface-primary: var(--surface-primary);
+	--color-button: var(--button);
+	--color-button-hover: var(--button-hover);
+	--color-code: var(--code);
+	--color-accent-soft: var(--accent-soft);
+	--color-border-strong: var(--border-strong);
+	--color-text: var(--text);
+	--color-text-primary: var(--text-primary);
+	--color-text-primary-foreground: var(--text-primary-foreground);
+	--color-text-secondary: var(--text-secondary);
+	--color-text-muted: var(--text-muted);
+	--color-body: var(--text-body);
+	--color-code-text: var(--code-text);
+	--color-btn-primary-hover: var(--btn-primary-hover);
+	--color-live: var(--color-live);
+	--color-live-soft: var(--color-live-soft);
+	--color-live-border: var(--color-live-border);
+	--color-callout-tip-text: var(--callout-tip-text);
+	--color-callout-tip-accent: var(--callout-tip-accent);
+	--color-callout-warn-text: var(--callout-warn-text);
+	--color-callout-warn-accent: var(--callout-warn-accent);
+	--color-callout-info-text: var(--callout-info-text);
+	--color-callout-info-accent: var(--callout-info-accent);
+
+	/* Fonts */
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-script: var(--font-script);
+	--font-headline: var(--font-headline);
+
+	/* Font Sizes */
+	--text-3xs: var(--text-3xs);
+	--text-2xs: var(--text-2xs);
+	--text-xs: var(--text-xs);
+	--text-sm: var(--text-sm);
+	--text-base: var(--text-base);
+	--text-md: var(--text-md);
+	--text-lg: var(--text-lg);
+	--text-xl: var(--text-xl);
+	--text-2xl: var(--text-2xl);
+	--text-3xl: var(--text-3xl);
+	--text-4xl: var(--text-4xl);
+	--text-5xl: var(--text-5xl);
+	--text-6xl: var(--text-6xl);
+	--text-7xl: var(--text-7xl);
+
+	/* Line Heights */
+	--leading-none: var(--leading-none);
+	--leading-tight: var(--leading-tight);
+	--leading-snug: var(--leading-snug);
+	--leading-normal: var(--leading-normal);
+	--leading-relaxed: var(--leading-relaxed);
+	--leading-loose: var(--leading-loose);
+
+	/* Letter Spacings */
+	--tracking-display: var(--tracking-display);
+	--tracking-heading: var(--tracking-heading);
+	--tracking-body: var(--tracking-body);
+	--tracking-normal: var(--tracking-normal);
+	--tracking-meta: var(--tracking-meta);
+	--tracking-eyebrow: var(--tracking-eyebrow);
+
+	/* Spacing */
+	--breakpoint-mobile: 24.375rem;
+	--breakpoint-tablet: 48rem;
+	--breakpoint-desktop: 80rem;
+	--breakpoint-wide: 96rem;
+
+	--spacing-space-0: var(--space-0);
+	--spacing-space-px: var(--space-px);
+	--spacing-space-0-5: var(--space-0-5);
+	--spacing-space-1: var(--space-1);
+	--spacing-space-1-5: var(--space-1-5);
+	--spacing-space-2: var(--space-2);
+	--spacing-space-3: var(--space-3);
+	--spacing-space-4: var(--space-4);
+	--spacing-space-5: var(--space-5);
+	--spacing-space-6: var(--space-6);
+	--spacing-space-7: var(--space-7);
+	--spacing-space-8: var(--space-8);
+	--spacing-space-9: var(--space-9);
+	--spacing-space-10: var(--space-10);
+	--spacing-space-12: var(--space-12);
+	--spacing-space-14: var(--space-14);
+	--spacing-space-16: var(--space-16);
+	--spacing-space-20: var(--space-20);
+	--spacing-space-24: var(--space-24);
+	--spacing-space-28: var(--space-28);
+	--spacing-space-32: var(--space-32);
+
+	--spacing-ml-0: var(--ml-space-0);
+	--spacing-ml-px: var(--ml-space-px);
+	--spacing-ml-0-5: var(--ml-space-0-5);
+	--spacing-ml-1: var(--ml-space-1);
+	--spacing-ml-1-5: var(--ml-space-1-5);
+	--spacing-ml-2: var(--ml-space-2);
+	--spacing-ml-2-5: var(--ml-space-2-5);
+	--spacing-ml-3: var(--ml-space-3);
+	--spacing-ml-3-5: var(--ml-space-3-5);
+	--spacing-ml-4: var(--ml-space-4);
+	--spacing-ml-5: var(--ml-space-5);
+	--spacing-ml-6: var(--ml-space-6);
+	--spacing-ml-7: var(--ml-space-7);
+	--spacing-ml-8: var(--ml-space-8);
+	--spacing-ml-9: var(--ml-space-9);
+	--spacing-ml-10: var(--ml-space-10);
+	--spacing-ml-11: var(--ml-space-11);
+	--spacing-ml-12: var(--ml-space-12);
+	--spacing-ml-14: var(--ml-space-14);
+	--spacing-ml-16: var(--ml-space-16);
+	--spacing-ml-20: var(--ml-space-20);
+	--spacing-ml-24: var(--ml-space-24);
+	--spacing-ml-28: var(--ml-space-28);
+	--spacing-ml-32: var(--ml-space-32);
+
+	--spacing-footer-y-sm: var(--ml-footer-y-sm);
+	--spacing-footer-y-sm-tablet: var(--ml-footer-y-sm-tablet);
+	--spacing-footer-y-sm-desktop: var(--ml-footer-y-sm-desktop);
+	--spacing-footer-y-md: var(--ml-footer-y-md);
+	--spacing-footer-y-md-tablet: var(--ml-footer-y-md-tablet);
+	--spacing-footer-y-md-desktop: var(--ml-footer-y-md-desktop);
+	--spacing-footer-y-lg: var(--ml-footer-y-lg);
+	--spacing-footer-y-lg-tablet: var(--ml-footer-y-lg-tablet);
+	--spacing-footer-y-lg-desktop: var(--ml-footer-y-lg-desktop);
+	--spacing-footer-x-sm: var(--ml-footer-x-sm);
+	--spacing-footer-x-sm-tablet: var(--ml-footer-x-sm-tablet);
+	--spacing-footer-x-sm-desktop: var(--ml-footer-x-sm-desktop);
+	--spacing-footer-x-md: var(--ml-footer-x-md);
+	--spacing-footer-x-md-tablet: var(--ml-footer-x-md-tablet);
+	--spacing-footer-x-md-desktop: var(--ml-footer-x-md-desktop);
+	--spacing-footer-x-lg: var(--ml-footer-x-lg);
+	--spacing-footer-x-lg-tablet: var(--ml-footer-x-lg-tablet);
+	--spacing-footer-x-lg-desktop: var(--ml-footer-x-lg-desktop);
+	--spacing-footer-layout-gap-sm: var(--ml-footer-layout-gap-sm);
+	--spacing-footer-layout-gap-sm-desktop: var(
+		--ml-footer-layout-gap-sm-desktop
+	);
+	--spacing-footer-layout-gap-md: var(--ml-footer-layout-gap-md);
+	--spacing-footer-layout-gap-md-desktop: var(
+		--ml-footer-layout-gap-md-desktop
+	);
+	--spacing-footer-layout-gap-lg: var(--ml-footer-layout-gap-lg);
+	--spacing-footer-layout-gap-lg-desktop: var(
+		--ml-footer-layout-gap-lg-desktop
+	);
+	--spacing-footer-intro-gap-sm: var(--ml-footer-intro-gap-sm);
+	--spacing-footer-intro-gap-md: var(--ml-footer-intro-gap-md);
+	--spacing-footer-intro-gap-lg: var(--ml-footer-intro-gap-lg);
+	--spacing-footer-column-gap-x-sm: var(--ml-footer-column-gap-x-sm);
+	--spacing-footer-column-gap-y-sm: var(--ml-footer-column-gap-y-sm);
+	--spacing-footer-column-gap-x-md: var(--ml-footer-column-gap-x-md);
+	--spacing-footer-column-gap-y-md: var(--ml-footer-column-gap-y-md);
+	--spacing-footer-column-gap-x-lg: var(--ml-footer-column-gap-x-lg);
+	--spacing-footer-column-gap-y-lg: var(--ml-footer-column-gap-y-lg);
+	--spacing-footer-meta-mt-sm: var(--ml-footer-meta-mt-sm);
+	--spacing-footer-meta-pt-sm: var(--ml-footer-meta-pt-sm);
+	--spacing-footer-meta-mt-md: var(--ml-footer-meta-mt-md);
+	--spacing-footer-meta-pt-md: var(--ml-footer-meta-pt-md);
+	--spacing-footer-meta-mt-lg: var(--ml-footer-meta-mt-lg);
+	--spacing-footer-meta-pt-lg: var(--ml-footer-meta-pt-lg);
+
+	/* Radii */
+	--radius-sm: var(--radius-sm);
+	--radius-md: var(--radius-md);
+	--radius-lg: var(--radius-lg);
+	--radius-xl: var(--radius-xl);
+	--radius-2xl: var(--radius-2xl);
+	--radius-3xl: var(--radius-3xl);
+	--radius-pill: var(--radius-pill);
+
+	/* Border widths */
+	--border-width-thin: var(--border-thin);
+	--border-width-medium: var(--border-medium);
+	--border-width-thick: var(--border-thick);
+
+	/* Shadows */
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-card: var(--shadow-lg);
+
+	/* Z-index */
+	--z-index-base: var(--z-base);
+	--z-index-elevated: var(--z-elevated);
+	--z-index-sticky: var(--z-sticky);
+	--z-index-dropdown: var(--z-dropdown);
+	--z-index-overlay: var(--z-overlay);
+	--z-index-modal: var(--z-modal);
+	--z-index-toast: var(--z-toast);
+	--z-index-tooltip: var(--z-tooltip);
+	--z-index-max: var(--z-max);
+
+	/* Containers */
+	--container-monoline-sm: var(--container-sm);
+	--container-monoline-md: var(--container-md);
+	--container-monoline-lg: var(--container-lg);
+	--container-monoline-xl: var(--container-xl);
+	--container-monoline-2xl: var(--container-2xl);
+	--container-container-sm: var(--container-sm);
+	--container-container-md: var(--container-md);
+	--container-container-lg: var(--container-lg);
+	--container-container-xl: var(--container-xl);
+	--container-container-2xl: var(--container-2xl);
+	--container-prose: var(--container-prose);
+
+	/* Blurs */
+	--blur-sm: var(--blur-sm);
+	--blur-md: var(--blur-md);
+	--blur-lg: var(--blur-lg);
+	--blur-xl: var(--blur-xl);
+
+	/* Motion */
+	--ease-linear: var(--ease-linear);
+	--ease-in: var(--ease-in);
+	--ease-out: var(--ease-out);
+	--ease-in-out: var(--ease-in-out);
+	--ease-out-expo: var(--ease-out-expo);
+	--ease-spring: var(--ease-spring);
+	--ease-spring-soft: var(--ease-spring-soft);
+	--ease-out-back: var(--ease-out-back);
+	--duration-instant: var(--duration-instant);
+	--duration-micro: var(--duration-micro);
+	--duration-fast: var(--duration-fast);
+	--duration-short: var(--duration-short);
+	--duration-medium: var(--duration-medium);
+	--duration-long: var(--duration-long);
+	--duration-xlong: var(--duration-xlong);
+
+	--animate-heart-pop: heart-pop var(--duration-medium) var(--ease-out-expo);
+	--animate-ring-ripple: ring-ripple var(--duration-long) var(--ease-out);
+	--animate-shimmer: shimmer 1.4s linear infinite;
+	--animate-progress-loop: progress-loop 1.4s var(--ease-in-out) infinite;
+	--animate-toast-in: toast-in 3.4s var(--ease-in-out);
+	--animate-fade-up: fade-up var(--duration-long) var(--ease-out-expo) both;
+	--animate-slide-in-left: slide-in-left var(--duration-short)
+		var(--ease-out-expo);
+	--animate-slide-in-right: slide-in-right var(--duration-short)
+		var(--ease-out-expo);
+	--animate-scale-in: scale-in var(--duration-fast) var(--ease-out-expo);
+	--animate-glow-pulse: glow-pulse 2.2s var(--ease-in-out) infinite;
+}
+
+@utility border-thin {
+	border-width: var(--border-thin);
+}
+
+@utility border-medium {
+	border-width: var(--border-medium);
+}
+
+@utility border-thick {
+	border-width: var(--border-thick);
+}
+
+@utility border-x-thin {
+	border-inline-width: var(--border-thin);
+}
+
+@utility border-x-medium {
+	border-inline-width: var(--border-medium);
+}
+
+@utility border-x-thick {
+	border-inline-width: var(--border-thick);
+}
+
+@utility border-y-thin {
+	border-block-width: var(--border-thin);
+}
+
+@utility border-y-medium {
+	border-block-width: var(--border-medium);
+}
+
+@utility border-y-thick {
+	border-block-width: var(--border-thick);
+}
+
+@utility border-t-thin {
+	border-block-start-width: var(--border-thin);
+}
+
+@utility border-t-medium {
+	border-block-start-width: var(--border-medium);
+}
+
+@utility border-t-thick {
+	border-block-start-width: var(--border-thick);
+}
+
+@utility border-r-thin {
+	border-inline-end-width: var(--border-thin);
+}
+
+@utility border-r-medium {
+	border-inline-end-width: var(--border-medium);
+}
+
+@utility border-r-thick {
+	border-inline-end-width: var(--border-thick);
+}
+
+@utility border-b-thin {
+	border-block-end-width: var(--border-thin);
+}
+
+@utility border-b-medium {
+	border-block-end-width: var(--border-medium);
+}
+
+@utility border-b-thick {
+	border-block-end-width: var(--border-thick);
+}
+
+@utility border-l-thin {
+	border-inline-start-width: var(--border-thin);
+}
+
+@utility border-l-medium {
+	border-inline-start-width: var(--border-medium);
+}
+
+@utility border-l-thick {
+	border-inline-start-width: var(--border-thick);
+}