@cossistant/next/tailwind.css

Next.js-ready SDK for building AI-powered support/chat widgets. Hooks + primitives, WS-driven, TypeScript-first. Next.js-ready, Tailwind optional.

@custom-variant dark (&:is(.dark *));

@layer base {
	.cossistant {
		@apply border-co-border;
		@apply scroll-smooth;

		color-scheme: inherit;

		/* Typeface tokens */
		--co-font-sans: var(
			--co-theme-font-sans,
			var(--font-sans, "Geist", "Inter", sans-serif)
		);
		--co-font-mono: var(
			--co-theme-font-mono,
			var(--font-mono, "Geist Mono", "Inter Mono", monospace)
		);

		--co-border-color: var(
			--co-theme-border-color,
			var(--color-border, oklch(92.2% 0 0))
		);

		/* Core surfaces */
		--co-radius: var(--co-theme-radius, var(--radius, 0.625rem));
		--co-background-base: var(
			--co-theme-background,
			var(--background, oklch(99% 0 0))
		);
		--co-foreground-base: var(
			--co-theme-foreground,
			var(--foreground, oklch(14.5% 0 0))
		);
		--co-popover-base: var(
			--co-theme-popover,
			var(--popover, var(--co-background-base))
		);
		--co-popover-foreground-base: var(
			--co-theme-popover-foreground,
			var(--popover-foreground, var(--co-foreground-base))
		);
		--co-primary-base: var(
			--co-theme-primary,
			var(--primary, oklch(20.5% 0 0))
		);
		--co-primary-foreground-base: var(
			--co-theme-primary-foreground,
			var(--primary-foreground, oklch(98.5% 0 0))
		);
		--co-secondary-base: var(
			--co-theme-secondary,
			var(--secondary, oklch(97% 0 0))
		);
		--co-secondary-foreground-base: var(
			--co-theme-secondary-foreground,
			var(--secondary-foreground, oklch(20.5% 0 0))
		);
		--co-border-base: var(--co-theme-border, var(--border, oklch(92.2% 0 0)));
		--co-input-base: var(--co-theme-input, var(--input, oklch(92.2% 0 0)));
		--co-ring-base: var(--co-theme-ring, var(--ring, var(--co-primary-base)));
		--co-accent-base: var(
			--co-theme-accent,
			var(--accent, var(--co-primary-base))
		);
		--co-accent-foreground-base: var(
			--co-theme-accent-foreground,
			var(--accent-foreground, var(--co-primary-foreground-base))
		);

		/* Neutral shades derived from the background */
		--co-background-50-mix: color-mix(
			in oklch,
			var(--co-background-base) 98%,
			var(--co-foreground-base)
		);
		--co-background-100-mix: color-mix(
			in oklch,
			var(--co-background-base) 97%,
			var(--co-foreground-base)
		);
		--co-background-200-mix: color-mix(
			in oklch,
			var(--co-background-base) 96%,
			var(--co-foreground-base)
		);
		--co-background-300-mix: color-mix(
			in oklch,
			var(--co-background-base) 95%,
			var(--co-foreground-base)
		);
		--co-background-400-mix: color-mix(
			in oklch,
			var(--co-background-base) 94%,
			var(--co-foreground-base)
		);
		--co-background-500-mix: color-mix(
			in oklch,
			var(--co-background-base) 93%,
			var(--co-foreground-base)
		);
		--co-background-600-mix: color-mix(
			in oklch,
			var(--co-background-base) 92%,
			var(--co-foreground-base)
		);

		/* Muted tones */
		--co-muted-mix: color-mix(
			in oklch,
			var(--co-background-base) 85%,
			var(--co-foreground-base)
		);
		--co-muted-foreground-mix: color-mix(
			in oklch,
			var(--co-foreground-base) 70%,
			white
		);

		/* Public tokens consumed by Tailwind theme */
		--co-background: var(--co-background-base);
		--co-background-50: var(
			--co-theme-background-50,
			var(--co-background-50-mix, oklch(92% 0 0))
		);
		--co-background-100: var(
			--co-theme-background-100,
			var(--co-background-100-mix, oklch(93% 0 0))
		);
		--co-background-200: var(
			--co-theme-background-200,
			var(--co-background-200-mix, oklch(94% 0 0))
		);
		--co-background-300: var(
			--co-theme-background-300,
			var(--co-background-300-mix, oklch(95% 0 0))
		);
		--co-background-400: var(
			--co-theme-background-400,
			var(--co-background-400-mix, oklch(96% 0 0))
		);
		--co-background-500: var(
			--co-theme-background-500,
			var(--co-background-500-mix, oklch(97% 0 0))
		);
		--co-background-600: var(
			--co-theme-background-600,
			var(--co-background-600-mix, oklch(98% 0 0))
		);

		--co-foreground: var(--co-foreground-base);
		--co-popover: var(--co-popover-base);
		--co-popover-foreground: var(--co-popover-foreground-base);
		--co-primary: var(--co-primary-base);
		--co-primary-foreground: var(--co-primary-foreground-base);
		--co-secondary: var(--co-secondary-base);
		--co-secondary-foreground: var(--co-secondary-foreground-base);
		--co-muted: var(
			--co-theme-muted,
			var(--muted, var(--co-muted-mix, oklch(97% 0 0)))
		);
		--co-muted-foreground: var(
			--co-theme-muted-foreground,
			var(--muted-foreground, var(--co-muted-foreground-mix, oklch(55.6% 0 0)))
		);
		--co-border: var(--co-border-base);
		--co-input: var(--co-input-base);
		--co-ring: var(--co-ring-base);
		--co-accent: var(--co-accent-base);
		--co-accent-foreground: var(--co-accent-foreground-base);

		/* Accent palette */
		--co-pink: var(--co-theme-pink, oklch(76.3% 0.152 354));
		--co-yellow: var(--co-theme-yellow, oklch(86.4% 0.144 99));
		--co-blue: var(--co-theme-blue, oklch(72.5% 0.132 241));
		--co-orange: var(--co-theme-orange, oklch(74.5% 0.166 50));

		/* Status colors */
		--co-destructive: var(--co-theme-destructive, oklch(57.7% 0.245 27.325));
		--co-destructive-foreground: var(
			--co-theme-destructive-foreground,
			oklch(57.7% 0.245 27.325)
		);
		--co-success: var(--co-theme-success, oklch(71.7% 0.18 142));
		--co-success-foreground: var(
			--co-theme-success-foreground,
			oklch(26.5% 0.052 142.7)
		);
		--co-neutral: var(--co-theme-neutral, oklch(60.8% 0 0));
		--co-neutral-foreground: var(
			--co-theme-neutral-foreground,
			oklch(25.6% 0 0)
		);
		--co-warning: var(--co-theme-warning, oklch(86.4% 0.144 99));
		--co-warning-foreground: var(
			--co-theme-warning-foreground,
			oklch(41.4% 0.071 99)
		);
	}

	.dark .cossistant,
	.cossistant[data-color-scheme="dark"] {
		/* Provide dark defaults without overriding host tokens */
		--co-background-base: var(
			--co-theme-background,
			var(--background, oklch(15.5% 0 0))
		);
		--co-foreground-base: var(
			--co-theme-foreground,
			var(--foreground, oklch(98.5% 0 0))
		);
		--co-border-color: var(
			--co-theme-border-color,
			var(--color-border, oklch(26.9% 0 0))
		);
		--co-popover-base: var(
			--co-theme-popover,
			var(--popover, oklch(14.5% 0 0))
		);
		--co-popover-foreground-base: var(
			--co-theme-popover-foreground,
			var(--popover-foreground, oklch(98.5% 0 0))
		);
		--co-primary-base: var(
			--co-theme-primary,
			var(--primary, oklch(98.5% 0 0))
		);
		--co-primary-foreground-base: var(
			--co-theme-primary-foreground,
			var(--primary-foreground, oklch(20.5% 0 0))
		);
		--co-secondary-base: var(
			--co-theme-secondary,
			var(--secondary, oklch(26.9% 0 0))
		);
		--co-secondary-foreground-base: var(
			--co-theme-secondary-foreground,
			var(--secondary-foreground, oklch(98.5% 0 0))
		);
		--co-border-base: var(--co-theme-border, var(--border, oklch(26.9% 0 0)));
		--co-input-base: var(--co-theme-input, var(--input, oklch(26.9% 0 0)));
		--co-ring-base: var(--co-theme-ring, var(--ring, var(--co-primary-base)));
		--co-accent-base: var(
			--co-theme-accent,
			var(--accent, var(--co-primary-base))
		);
		--co-accent-foreground-base: var(
			--co-theme-accent-foreground,
			var(--accent-foreground, var(--co-primary-foreground-base))
		);

		--co-muted-mix: color-mix(
			in oklch,
			var(--co-background-base) 55%,
			var(--co-foreground-base)
		);
		--co-muted-foreground-mix: color-mix(
			in oklch,
			var(--co-foreground-base) 65%,
			white
		);

		--co-background-50-mix: color-mix(
			in oklch,
			var(--co-background-base) 98%,
			var(--co-foreground-base)
		);
		--co-background-100-mix: color-mix(
			in oklch,
			var(--co-background-base) 96%,
			var(--co-foreground-base)
		);
		--co-background-200-mix: color-mix(
			in oklch,
			var(--co-background-base) 94%,
			var(--co-foreground-base)
		);
		--co-background-300-mix: color-mix(
			in oklch,
			var(--co-background-base) 92%,
			var(--co-foreground-base)
		);
		--co-background-400-mix: color-mix(
			in oklch,
			var(--co-background-base) 90%,
			var(--co-foreground-base)
		);
		--co-background-500-mix: color-mix(
			in oklch,
			var(--co-background-base) 88%,
			var(--co-foreground-base)
		);
		--co-background-600-mix: color-mix(
			in oklch,
			var(--co-background-base) 86%,
			var(--co-foreground-base)
		);

		--co-pink: var(--co-theme-pink, oklch(84.2% 0.109 354));
		--co-yellow: var(--co-theme-yellow, oklch(90.3% 0.111 99));
		--co-blue: var(--co-theme-blue, oklch(79.8% 0.089 241));
		--co-orange: var(--co-theme-orange, oklch(68.2% 0.194 50));

		--co-destructive: var(--co-theme-destructive, oklch(39.6% 0.141 25.723));
		--co-destructive-foreground: var(
			--co-theme-destructive-foreground,
			oklch(63.7% 0.237 25.331)
		);
		--co-success: var(--co-theme-success, oklch(60% 0.15 142));
		--co-success-foreground: var(
			--co-theme-success-foreground,
			oklch(85% 0.12 142)
		);
		--co-neutral: var(--co-theme-neutral, oklch(50% 0 0));
		--co-neutral-foreground: var(--co-theme-neutral-foreground, oklch(85% 0 0));
		--co-warning: var(--co-theme-warning, oklch(90.3% 0.111 99));
		--co-warning-foreground: var(
			--co-theme-warning-foreground,
			oklch(85% 0.1 99)
		);
	}
}

@theme inline {
	--font-co-sans: var(--co-font-sans);
	--font-co-mono: var(--co-font-mono);
	--color-co-background: var(--co-background);
	--color-co-background-50: var(--co-background-50);
	--color-co-background-100: var(--co-background-100);
	--color-co-background-200: var(--co-background-200);
	--color-co-background-300: var(--co-background-300);
	--color-co-background-400: var(--co-background-400);
	--color-co-background-500: var(--co-background-500);
	--color-co-background-600: var(--co-background-600);

	--color-co-foreground: var(--co-foreground);

	--color-co-primary: var(--co-primary);
	--color-co-primary-foreground: var(--co-primary-foreground);
	--color-co-secondary: var(--co-secondary);
	--color-co-secondary-foreground: var(--co-secondary-foreground);
	--color-co-muted: var(--co-muted);
	--color-co-muted-foreground: var(--co-muted-foreground);
	--color-co-border: var(--co-border);
	--color-co-input: var(--co-input);
	--color-co-ring: var(--co-ring);
	--radius-co: var(--co-radius);

	/* custom colors */
	--color-co-pink: var(--co-pink);
	--color-co-yellow: var(--co-yellow);
	--color-co-blue: var(--co-blue);
	--color-co-orange: var(--co-orange);

	/* status colors */
	--color-co-destructive: var(--co-destructive);
	--color-co-destructive-foreground: var(--co-destructive-foreground);
	--color-co-success: var(--co-success);
	--color-co-success-foreground: var(--co-success-foreground);
	--color-co-neutral: var(--co-neutral);
	--color-co-neutral-foreground: var(--co-neutral-foreground);
	--color-co-warning: var(--co-warning);
	--color-co-warning-foreground: var(--co-warning-foreground);
}

@layer utilities {
	.cossistant {
		.animation-delay-0 {
			animation-delay: 0ms;
		}
		.animation-delay-200 {
			animation-delay: 200ms;
		}
		.animation-delay-400 {
			animation-delay: 400ms;
		}

		@keyframes bounce-dot {
			0%,
			80%,
			100% {
				transform: translateY(0);
			}
			40% {
				transform: translateY(-6px);
			}
		}

		.dot-bounce-1 {
			animation: bounce-dot 1.4s infinite;
			animation-delay: 0s;
		}

		.dot-bounce-2 {
			animation: bounce-dot 1.4s infinite;
			animation-delay: 0.16s;
		}

		.dot-bounce-3 {
			animation: bounce-dot 1.4s infinite;
			animation-delay: 0.32s;
		}
	}
}