shelving/ui/form/Button.module.css

Toolkit for using data in JavaScript.

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

@layer components {
	.button {
		/* Identity — rebind all five steps so per-component theme hooks (`--button-color-vivid`, etc.)
		 * override the cascaded scale while still inheriting from variant/page scope by default. */
		--color-black: var(--button-color-black, inherit);
		--color-dark: var(--button-color-dark, inherit);
		--color-vivid: var(--button-color-vivid, inherit);
		--color-light: var(--button-color-light, inherit);
		--color-white: var(--button-color-white, inherit);

		/* Box */
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
		border-radius: var(--button-radius, var(--radius-xsmall));
		border: var(--button-border, var(--stroke-normal)) solid color-mix(in oklch, var(--color-vivid) 50%, transparent);
		padding-block: var(--button-padding, var(--space-small));
		padding-inline: var(--button-padding, var(--space-small));
		margin-inline: 0;
		margin-block: var(--button-spacing, var(--space-small));
		flex-grow: var(--grow-timid); /* Inputs in flex rows expand timidly compared to other elements. */

		/* Content */
		white-space: nowrap;
		overflow: hidden;
		word-break: normal;
		justify-content: center;
		align-items: center;

		/* Style — default appearance is `bg=light / text=dark` (2-step pair, fine for short labels). */
		background-color: var(--color-light);
		color: var(--color-vivid);
		text-decoration: none;
		transition: all 120ms ease-in-out;
		cursor: pointer;
		outline: var(--button-focus-border, var(--stroke-focus)) solid transparent;
		outline-offset: calc(0px - var(--button-border, var(--stroke-normal)));

		/* Typography */
		font-family: var(--button-font, var(--font-body));
		font-weight: var(--button-weight, var(--weight-strong));
		font-size: var(--button-size, var(--size-normal));
		line-height: var(--button-leading, var(--leading-normal));

		/* Pseudo-classes */
		&:disabled,
		&:where(a:not(:any-link)) {
			opacity: var(--button-disabled-opacity, 0.5);
			cursor: default;
		}
		&:where(:enabled:hover, :focus:not(:focus-visible)) {
			background: color-mix(in oklch, var(--color-light) 85%, var(--color-white));
			border-color: var(--color-vivid);
		}
		&:focus-visible {
			outline-color: var(--button-color-focus, var(--color-focus));
		}

		/* Variants */
		&.small {
			padding-block: var(--button-small-padding, var(--space-xxsmall));
			padding-inline: var(--button-small-padding, var(--space-xxsmall));
		}
		&.fit {
			inline-size: fit-content;
		}
		&.strong {
			/* Strong appearance — `bg=vivid / text=white` (2-step pair). */
			background: var(--color-vivid);
			border-color: var(--color-vivid);
			color: var(--color-white);

			&:where(:enabled:hover, :focus:not(:focus-visible)) {
				background: color-mix(in oklch, var(--color-vivid) 85%, var(--color-white));
			}
		}
		&.plain:not(:hover, :focus) {
			border-color: transparent;
			background: transparent;
		}
		&.outline:not(:hover, :focus) {
			background: transparent;
		}
	}
}

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