src/system-colors.css
@property --system-cs-is-light {
	syntax: '<integer>';
	inherits: true;
	initial-value: 1; /* ON */
}

@layer --system {
	:root {
		/**
		 * color-scheme state
		 *
		 * Example:
		 * color-mix(): Light mode is the first color value and dark mode the second.
		 * color: color-mix(in oklab, black var(--system-cs-state), white);
		 */
		--system-cs-state: calc(var(--system-cs-is-light, 1 /* fallback to light mode */) * 100%);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--system-cs-is-light: 0; /* OFF */
		}
	}

	:root {
		/* AccentColor doesn't work in chrome */
		--system-accent-color: color-mix(in oklab, dodgerblue 90%, black);

		/*--system-accent-color-text: AccentColorText;*/
		/*--system-active-text: ActiveText;*/
		/* ButtonBorder is broken in Safari */

		--system-button-border: color-mix(in oklab, var(--system-stroke-color) var(--system-cs-state), ButtonBorder);

		/* ButtonFace is broken in Safari */
		--system-button-face: transparent;

		/* ButtonText is broken in Safari */
		--system-button-text: color-mix(in oklab, ButtonText var(--system-cs-state), CanvasText);

		/* Canvas & CanvasText must be set as initial values are not always parsed */
		--system-canvas: Canvas;
		--system-canvas-text: CanvasText;

		/* Field is broken in iOS */
		--system-field: color-mix(in oklab, Field var(--system-cs-state), var(--system-canvas));
		/* FieldText is broken in iOS */
		--system-field-text: color-mix(in oklab, FieldText var(--system-cs-state), var(--system-canvas-text));

		/* ButtonText is broken in Safari */
		--system-gray-text: color-mix(in oklab, var(--system-canvas) 50%, var(--system-canvas-text));

		--system-highlight: color-mix(
			in oklab,
			Highlight var(--system-cs-state),
			color-mix(in oklab, steelblue 80%, CanvasText)
		);
		--system-highlight-text: HighlightText;

		/* LinkText is too dark in darkmode */
		--system-link-text: color-mix(
			in oklab,
			LinkText var(--system-cs-state),
			color-mix(in oklab, LinkText 60%, CanvasText)
		);

		/*--system-mark: Mark;*/
		/*--system-mark-text: MarkText;*/
		/*--system-selected-item: SelectedItem;*/
		/*--system-selected-item-text: SelectedItemText;*/

		/* VisitedText is too dark in darkmode */
		--system-visited-text: color-mix(
			in oklab,
			VisitedText var(--system-cs-state),
			color-mix(in oklab, VisitedText 60%, CanvasText)
		);
	}
}
