handoff-app/src/app/css/index.css

Automated documentation toolchain for building client side documentation from figma

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 222.2 47.4% 11.2%;
		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 222.2 47.4% 11.2%;
		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;
		--card: 0 0% 100%;
		--card-foreground: 222.2 47.4% 11.2%;
		--primary: 222.2 47.4% 11.2%;
		--primary-foreground: 210 40% 98%;
		--primary-foreground: 0 0% 100%;
		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;
		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;
		--destructive: 0 100% 50%;
		--destructive-foreground: 210 40% 98%;
		--ring: 215 20.2% 65.1%;
		--radius: 0.5rem;
		--sidebar-background: 0 0% 98%;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 240 4.8% 95.9%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}

	.dark {
		--background: 224 71% 4%;
		--foreground: 213 31% 91%;
		--muted: 223 47% 11%;
		--muted-foreground: 215.4 16.3% 56.9%;
		--accent: 216 34% 17%;
		--accent-foreground: 210 40% 98%;
		--popover: 224 71% 4%;
		--popover-foreground: 215 20.2% 65.1%;
		--border: 216 34% 17%;
		--input: 216 34% 17%;
		--card: 224 71% 4%;
		--card-foreground: 213 31% 91%;
		--primary: 210 40% 98%;
		--primary-foreground: 222.2 47.4% 1.2%;
		--secondary: 222.2 47.4% 11.2%;
		--secondary-foreground: 210 40% 98%;
		--destructive: 0 63% 31%;
		--destructive-foreground: 210 40% 98%;
		--ring: 216 34% 17%;
		--sidebar-background: 240 5.9% 10%;
		--sidebar-foreground: 240 4.8% 95.9%;
		--sidebar-primary: 224.3 76.3% 48%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 240 3.7% 15.9%;
		--sidebar-accent-foreground: 240 4.8% 95.9%;
		--sidebar-border: 240 3.7% 15.9%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background font-sans text-foreground antialiased;
	}

	p,
	li {
		@apply text-gray-600;
		@apply dark:text-gray-400;
		@apply leading-relaxed;

		code {
			@apply text-gray-900;
			@apply dark:text-gray-100;
			@apply bg-gray-100;
			@apply dark:bg-gray-800;
			@apply px-1;
			@apply py-[2px];
			@apply rounded-sm;
			@apply font-mono;
			@apply text-[13px];
			@apply font-medium;
			@apply border;
			@apply border-gray-200;
			@apply dark:border-gray-700;
		}
	}

	.dotted-bg {
		--dot-bg: #fff;
		--dot-color: #dbdbdb;
		--dot-size: 1.5px;
		--dot-space: 14px;
		overflow: auto;
		background:
			linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space)
				var(--dot-space),
			linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
			var(--dot-color);
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
	}
}

@layer base {
	:root {
		--sidebar-background: transparent;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 240 4.8% 95.9%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}

	.dark {
		--sidebar-background: transparent;
		--sidebar-foreground: 240 4.8% 95.9%;
		--sidebar-primary: 224.3 76.3% 48%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 240 3.7% 15.9%;
		--sidebar-accent-foreground: 240 4.8% 95.9%;
		--sidebar-border: 240 3.7% 15.9%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}
}