shelving/ui/block/Preformatted.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.preformatted,
	.prose pre {
		/* Identity */
		--color-black: var(--preformatted-color-black, inherit);
		--color-dark: var(--preformatted-color-dark, inherit);
		--color-vivid: var(--preformatted-color-vivid, inherit);
		--color-light: var(--preformatted-color-light, inherit);
		--color-white: var(--preformatted-color-white, inherit);

		/* Box */
		display: block;
		margin-inline: 0;
		margin-block: var(--preformatted-spacing, var(--spacing-paragraph));
		padding: var(--preformatted-padding, var(--space-xsmall));
		border: var(--preformatted-thickness, var(--thickness, var(--stroke-normal))) solid var(--color-vivid);
		border-radius: var(--preformatted-radius, var(--radius-normal));

		/* Style — `bg=light / text=dark` (2-step pair). */
		background-color: var(--color-light);
		color: var(--color-dark);
		tab-size: 2;

		/* Typography */
		font-family: var(--preformatted-font, var(--font-code));

		/* Wrap long lines by default. */
		white-space: pre-wrap;
		overflow-wrap: anywhere;

		/* Variants */
		&.nowrap {
			white-space: pre;
			overflow-wrap: normal;
		}
	}
}

@layer overrides {
	.preformatted,
	.prose pre {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}