@aegisjsproject/styles/css/theme.css

Pre-made and reusable styles for `@aegisjsproject/core`

@layer base.aegisjsproject.theme {
	:root {
		color-scheme: light dark;
		font-family: var(--aegis-font, system-ui);
	}

	[data-theme="light"] {
		color-scheme: only light;
	}

	[data-theme="dark"] {
		color-scheme: only dark;
	}

	:root, [data-theme] {
		color: light-dark(var(--aegis-color-light, #212529), var(--aegis-color-dark, #f8f9fa));
		background-color: light-dark(var(--aegis-bg-light, #f8f9fa), var(--aegis-bg-dark, #212529));
	}
}

@layer components.aegisjsproject.theme {
	:host {
		color: var(--aegis-color-light, #212529);
		color: light-dark(var(--aegis-color-light, #212529), var(--aegis-color-dark, #f8f9fa));
		background-color: var(--aegis-bg-light, #f8f9fa);
		background-color: light-dark(var(--aegis-bg-light, #f8f9fa), var(--aegis-bg-dark, #212529));
		font-family: system-ui;
	}

	:host(:not([hidden]):not([popover])) {
		display: block;
	}

	:host([theme="light"]) {
		color-scheme: only light;
	}

	:host([theme="dark"]) {
		color-scheme: only dark;
	}
}

@layer components.aegisjsproject.theme {
	:host {
		border-width: 1px;
		border-style: solid;
		border-color: light-dark(var(--aegis-border-color-light, #dee2e6), var(--aegis-border-color-dark, #495057));
		border-radius: var(--aegis-border-radius, 8px);
	}
}