shelving/ui/notice/Notice.module.css

Toolkit for using data in JavaScript.

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

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

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

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

		/* Typography */
		font-size: var(--notice-size, var(--size-normal));
		font-weight: var(--notice-weight, var(--weight-strong));
		text-align: start;
	}
}

@layer overrides {
	.notice {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}