@miyagi/core/frontend/assets/css/tokens.css

miyagi is a component development tool for JavaScript template engines.

html {
	--font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
		"Helvetica", "Arial", sans-serif;
	--font-size: 1rem;
	--line-height: 1.5;
	--divider: 0.0625rem solid var(--color-Divider);

	/* colors */
	--color-Code-background: light-dark(
		var(--color-Code-background--light),
		var(--color-Code-background--dark)
	);
	--color-Divider: light-dark(
		var(--color-Divider--light),
		var(--color-Divider--dark)
	);
	--color-Icon: light-dark(var(--color-Icon--light), var(--color-Icon--dark));
	--color-Iframe-background: light-dark(
		var(--color-Iframe-background--light),
		var(--color-Iframe-background--dark)
	);
	--color-Iframe-link: light-dark(
		var(--color-Iframe-link--light),
		var(--color-Iframe-link--dark)
	);
	--color-Iframe-text-secondary: light-dark(
		var(--color-Iframe-text-secondary--light),
		var(--color-Iframe-text-secondary--dark)
	);
	--color-Iframe-text-tertiary: light-dark(
		var(--color-Iframe-text-tertiary--light),
		var(--color-Iframe-text-tertiary--dark)
	);
	--color-Iframe-text: light-dark(
		var(--color-Iframe-text--light),
		var(--color-Iframe-text--dark)
	);
	--color-Link-active-background: light-dark(
		var(--color-Link-active-background--light),
		var(--color-Link-active-background--dark)
	);
	--color-Link: light-dark(var(--color-Link--light), var(--color-Link--dark));
	--color-Menu-background: light-dark(
		var(--color-Menu-background--light),
		var(--color-Menu-background--dark)
	);
	--color-MenuBar-background: light-dark(
		var(--color-MenuBar-background--light),
		var(--color-MenuBar-background--dark)
	);
	--color-Negative: light-dark(
		var(--color-Negative--light),
		var(--color-Negative--dark)
	);
	--color-Outline: light-dark(
		var(--color-Outline--light),
		var(--color-Outline--dark)
	);
	--color-Positive: light-dark(
		var(--color-Positive--light),
		var(--color-Positive--dark)
	);
	--color-Text: light-dark(var(--color-Text--light), var(--color-Text--dark));
	--color-Tooltip-background: light-dark(
		var(--color-Tooltip-background--light),
		var(--color-Tooltip-background--dark)
	);
	--color-Tooltip-outline: light-dark(
		var(--color-Tooltip-outline--light),
		var(--color-Tooltip-outline--dark)
	);

	/* light */
	--color-Code-background--light: hsl(0deg 0% 96%);
	--color-Divider--light: rgb(0 0 0 / 10%);
	--color-Icon--light: hsl(0deg 0% 56%);
	--color-Iframe-background--light: #fff;
	--color-Iframe-link--light: hsl(0deg 0% 12%);
	--color-Iframe-text--light: hsl(0deg 0% 12%);
	--color-Iframe-text-secondary--light: hsl(0deg 0% 36%);
	--color-Iframe-text-tertiary--light: hsl(0deg 0% 56%);
	--color-Link--light: hsl(0deg 0% 12%);
	--color-Link-active-background--light: #fff;
	--color-Menu-background--light: hsl(0deg 0% 96%);
	--color-MenuBar-background--light: rgb(0 0 0 / 5%);
	--color-Negative--light: #d9173e;
	--color-Outline--light: hsl(0deg 0% 86%);
	--color-Positive--light: hsl(80deg 100% 25%);
	--color-Text--light: hsl(0deg 0% 36%);
	--color-Tooltip-background--light: #f5f5f5;
	--color-Tooltip-outline--light: #ddd;

	/* dark */
	--color-Code-background--dark: hsl(0deg 0% 16%);
	--color-Divider--dark: rgb(255 255 255 / 5%);
	--color-Icon--dark: hsl(0deg 0% 60%);
	--color-Iframe-background--dark: hsl(0deg 0% 12%);
	--color-Iframe-link--dark: hsl(0deg 0% 100%);
	--color-Iframe-text--dark: hsl(0deg 0% 100%);
	--color-Iframe-text-secondary--dark: hsl(0deg 0% 80%);
	--color-Iframe-text-tertiary--dark: hsl(0deg 0% 60%);
	--color-Link--dark: hsl(0deg 0% 100%);
	--color-Link-active-background--dark: hsl(0deg 0% 12%);
	--color-Menu-background--dark: hsl(0deg 0% 16%);
	--color-MenuBar-background--dark: rgb(255 255 255 / 2.5%);
	--color-Negative--dark: #ff305a;
	--color-Outline--dark: hsl(0deg 0% 26%);
	--color-Positive--dark: #8dd203;
	--color-Text--dark: hsl(0deg 0% 80%);
	--color-Tooltip-background--dark: #333;
	--color-Tooltip-outline--dark: #444;
}