compote-ui/dist/theme.css

An opinionated UI component library for Svelte, built on top of [Ark UI](https://ark-ui.com) with additional components and features not available in the core Ark UI library.

@import './open-props/props.colors-oklch-hues.css';
@import './open-props/props.colors-oklch.css';
@import './open-props/props.gray-oklch.css';

@source './components/**/*.{svelte,js}';

:root {
	color-scheme: light dark;

	--dim: 0.3;
	--radius: 6px;
	--font-sans: 'Nunito Sans Variable', sans-serif;
	--font-serif: Merriweather, serif;
	--font-mono: Fira Code, monospace;

	--color-hue: var(--hue-orange);
	--gray-hue: 250;

	--compote-ink: light-dark(var(--gray-15), var(--gray-1));
	--compote-ink-dim: light-dark(var(--gray-11), var(--gray-5));
	--compote-ink-inverse: white;
	--compote-surface-3: light-dark(var(--gray-5), var(--gray-10));
	--compote-surface-2: light-dark(var(--gray-4), var(--gray-12));
	--compote-surface-1: light-dark(var(--gray-3), var(--gray-13));
	--compote-surface-document: light-dark(var(--gray-2), var(--gray-14));
	--compote-well: light-dark(var(--gray-1), var(--gray-15));

	--compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
	--compote-danger: oklch(from var(--color-7) l c var(--hue-red));
	--compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
	--compote-success: oklch(from var(--color-7) l c var(--hue-green));
	--compote-info: oklch(from var(--color-7) l c var(--hue-blue));

	--compote-border: var(--compote-surface-3);
	--compote-ring: var(--compote-primary);
}

.dark {
	color-scheme: dark;
}
.light {
	color-scheme: light;
}

@theme inline {
	--color-ink: var(--compote-ink);
	--color-ink-dim: var(--compote-ink-dim);
	--color-ink-inverse: var(--compote-ink-inverse);
	--color-surface-3: var(--compote-surface-3);
	--color-surface-2: var(--compote-surface-2);
	--color-surface-1: var(--compote-surface-1);
	--color-surface-document: var(--compote-surface-document);
	--color-well: var(--compote-well);

	--color-primary: var(--compote-primary);
	--color-danger: var(--compote-danger);
	--color-warning: var(--compote-warning);
	--color-success: var(--compote-success);
	--color-info: var(--compote-info);

	--color-border: var(--compote-border);
	--color-ring: var(--compote-ring);

	--font-sans: var(--font-sans);
	--font-mono: var(--font-mono);
	--font-serif: var(--font-serif);

	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
}

@layer base {
	* {
		@apply border-surface-3;
	}
	body {
		@apply bg-surface-document text-ink;
	}
}

.table-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	border-radius: 2px;
	border: 1px solid var(--compote-border);
	background-color: transparent;
	cursor: pointer;
	transition:
		border-color 150ms ease,
		background-color 150ms ease;
}

.table-checkbox:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--compote-primary) 50%, transparent);
}

.table-checkbox:checked {
	border-color: var(--compote-primary);
	background-color: var(--compote-primary);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e%3cpolyline points='216 72 104 184 48 128' fill='none' stroke='white' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}

.table-checkbox:indeterminate {
	border-color: var(--compote-primary);
	background-color: var(--compote-primary);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e%3cline x1='40' y1='128' x2='216' y2='128' stroke='white' stroke-width='32' stroke-linecap='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}

.table-checkbox:disabled {
	pointer-events: none;
	opacity: 0.5;
}

.table-checkbox:focus-visible {
	outline: 2px solid var(--compote-ring);
	outline-offset: 2px;
}