packages/ui/src/button/style.module.css - trunk - githubmirror/gutenberg

packages/ui/src/button/style.module.css
272 строки10 KB
Marco Ciampini
DS: Name font weight tokens by intent (#80093)
13 июл 2026, 22:20
13 июл 2026, 22:200cf7ede
@layer wp-ui {
	@layer utilities, components, compositions, overrides;

	@layer components {
		.button,
		.is-unstyled {
			appearance: none;
			padding: 0;
		}

		.button {
			/* Internal variables */
			--wp-ui-button-font-weight: var(--wpds-typography-font-weight-emphasis);

			--wp-ui-button-background-color: var(--wpds-color-background-interactive-brand-strong);
			--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-strong-active);
			--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-brand-strong-disabled);
			--wp-ui-button-foreground-color: var(--wpds-color-foreground-interactive-brand-strong);
			--wp-ui-button-foreground-color-active: var(--wpds-color-foreground-interactive-brand-strong-active);
			--wp-ui-button-foreground-color-disabled: var(--wpds-color-foreground-interactive-brand-strong-disabled);
			--wp-ui-button-padding-block: var(--wpds-dimension-padding-xs);
			--wp-ui-button-padding-inline: var(--wpds-dimension-padding-md);
			--wp-ui-button-height: var(--wpds-dimension-size-lg);
			--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
			--wp-ui-button-font-size: var(--wpds-typography-font-size-md);
			--wp-ui-button-min-width: calc(4ch + 2 * var(--wp-ui-button-padding-inline));
			/* Icons are rendered as 24px but need to occupy a 16px footprint */
			--wp-ui-button-icon-margin: calc((var(--wpds-dimension-size-2xs) - var(--wpds-dimension-size-sm)) / 2);

			/* by default, borders have the same color as the background */
			--wp-ui-button-border-color: var(--wp-ui-button-background-color);
			--wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);
			--wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);

			--_gcd-button-font-family: var(--wpds-typography-font-family-body);
			--_gcd-button-font-size: var(--wp-ui-button-font-size);
			--_gcd-button-font-weight: var(--wp-ui-button-font-weight);

			/* Styles */
			position: relative;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: var(--wpds-dimension-gap-sm);
			aspect-ratio: var(--wp-ui-button-aspect-ratio);
			min-width: var(--wp-ui-button-min-width);
			max-width: 100%;
			min-height: var(--wp-ui-button-height);
			padding-block: var(--wp-ui-button-padding-block);
			padding-inline: var(--wp-ui-button-padding-inline);
			border-style: solid;
			border-width: 1px;
			border-color: var(--wp-ui-button-border-color);
			border-radius: var(--wpds-border-radius-sm);
			background-color: var(--wp-ui-button-background-color);
			background-clip: border-box;
			font-family: var(--wpds-typography-font-family-body);
			font-size: var(--wp-ui-button-font-size);
			font-weight: var(--wp-ui-button-font-weight);
			line-height: var(--wpds-typography-line-height-sm);
			text-align: center;
			text-decoration: none;
			color: var(--wp-ui-button-foreground-color);
			overflow-wrap: anywhere;

			&:not([data-disabled]) {
				cursor: var(--wpds-cursor-control);
			}

			@media not ( prefers-reduced-motion ) {
				transition: color 0.1s ease-out;

				* {
					transition: opacity 0.1s ease-out;
				}
			}

			/* Use pointer cursor for buttons that are links */
			&[href] {
				/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Links should always use pointer. */
				cursor: pointer;
			}

			/* Make sure that links rendered as children of `Button` use button styles */
			*[href] {
				color: inherit;
				text-decoration: inherit;
			}

			/* States — use property declarations (not variable reassignment) so that
			   higher CSS layers can safely override the custom property values without
			   breaking state handling. */
			&:not([data-disabled]):is(:hover, :active, :focus) {
				/* hover/active/focus states apply when the button is not disabled. A non
				disabled, loading button will have hover/active/focus styles */
				background-color: var(--wp-ui-button-background-color-active);
				color: var(--wp-ui-button-foreground-color-active);
				border-color: var(--wp-ui-button-border-color-active);
			}

			&[data-disabled]:not(.is-loading) {
				/* A loading button, even when disabled, won't "look" disabled */
				background-color: var(--wp-ui-button-background-color-disabled);
				color: var(--wp-ui-button-foreground-color-disabled);
				border-color: var(--wp-ui-button-border-color-disabled);

				@media ( forced-colors: active ) {
					border-color: GrayText;
					color: GrayText;
				}
			}

			/* Loading spinner — not animated and hidden unless in loading state */
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				inset-inline-start: 50%;
				transform: translate(-50%, -50%);

				display: block;
				box-sizing: border-box;
				height: var(--wp-ui-button-font-size);
				aspect-ratio: 1;

				border: var(--wpds-border-width-focus) solid;
				border-block-start-color: var(--wp-ui-button-foreground-color);
				border-inline-end-color: var(--wp-ui-button-foreground-color);
				border-block-end-color: transparent;
				border-inline-start-color: transparent;
				border-radius: 50%;

				pointer-events: none;
				opacity: 0;

				@media not ( prefers-reduced-motion ) {
					transition: opacity 0.1s ease-out;
				}

				@media ( forced-colors: active ) {
					border-color: ButtonText;
					border-block-end-style: none;
					border-inline-start-style: none;
				}
			}
		}

		.is-small {
			--wp-ui-button-padding-block: 0px;
			--wp-ui-button-padding-inline: var(--wpds-dimension-padding-sm);
			--wp-ui-button-height: var(--wpds-dimension-size-sm);
		}

		.icon {
			margin: var(--wp-ui-button-icon-margin);
		}

		/* Variants (`tone` + `variant`) overrides compared to default styles */

		/* All outline buttons have a border */
		.is-brand {
			/* no need to redefine variables for .is-brand.is-solid as it's the default variant */

			/* Outline and minimal buttons use the same foreground color */
			&.is-outline,
			&.is-minimal {
				--wp-ui-button-foreground-color: var(--wpds-color-foreground-interactive-brand);
				--wp-ui-button-foreground-color-active: var(--wpds-color-foreground-interactive-brand-active);
				--wp-ui-button-foreground-color-disabled: var(--wpds-color-foreground-interactive-brand-disabled);
			}

			&.is-outline {
				--wp-ui-button-background-color: var(--wpds-color-background-interactive-brand-weak);
				--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-weak-active);
				--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-brand-weak-disabled);
				--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-brand);
				--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-brand-active);
				--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-brand-disabled);
			}

			&.is-minimal {
				--wp-ui-button-background-color: var(--wpds-color-background-interactive-brand-weak);
				--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-weak-active);
				--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-brand-weak-disabled);
			}
		}

		.is-neutral {
			/* Solid and pressed minimal share the strong appearance */
			&.is-solid,
			&.is-minimal[aria-pressed="true"] {
				--wp-ui-button-background-color: var(--wpds-color-background-interactive-neutral-strong);
				--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-neutral-strong-active);
				--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-neutral-strong-disabled);
				--wp-ui-button-foreground-color: var(--wpds-color-foreground-interactive-neutral-strong);
				--wp-ui-button-foreground-color-active: var(--wpds-color-foreground-interactive-neutral-strong-active);
				--wp-ui-button-foreground-color-disabled: var(--wpds-color-foreground-interactive-neutral-strong-disabled);
			}

			/* Outline and unpressed minimal buttons use the same foreground color */
			&.is-outline,
			&.is-minimal:not([aria-pressed="true"]) {
				--wp-ui-button-foreground-color: var(--wpds-color-foreground-interactive-neutral);
				--wp-ui-button-foreground-color-active: var(--wpds-color-foreground-interactive-neutral-active);
				--wp-ui-button-foreground-color-disabled: var(--wpds-color-foreground-interactive-neutral-disabled);
			}

			&.is-outline {
				--wp-ui-button-background-color: var(--wpds-color-background-interactive-neutral-weak);
				--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-neutral-weak-active);
				--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-neutral-weak-disabled);
				--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-neutral);
				--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-neutral-active);
				--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
			}

			&.is-minimal:not([aria-pressed="true"]) {
				--wp-ui-button-background-color: var(--wpds-color-background-interactive-neutral-weak);
				--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-neutral-weak-active);
				--wp-ui-button-background-color-disabled: var(--wpds-color-background-interactive-neutral-weak-disabled);
			}
		}

		.is-unstyled {
			min-width: unset;
			border: none;
			background: none;
		}

		.is-compact {
			--wp-ui-button-height: var(--wpds-dimension-size-md);
		}

		.is-loading:not(.is-unstyled) {
			color: transparent;

			/* Keep text transparent when a loading button is hovered — needed because
			 the hover state now sets `color` as a property declaration. */
			&:not([data-disabled]):is(:hover, :active, :focus) {
				color: transparent;
			}

			@media ( forced-colors: active ) {
				color: ButtonFace;
			}

			* {
				opacity: 0;
			}

			&::before {
				transition-delay: 0.05s;
				opacity: 1;

				@media not ( prefers-reduced-motion ) {
					animation: loading-animation 1s linear infinite;
				}
			}
		}

	}

	@keyframes loading-animation {
		0% {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}
}