DevToolbarButton Class — astro Architecture

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts lines 11–179

export class DevToolbarButton extends HTMLElement {
	_size: ButtonSize = 'small';
	_buttonStyle: ButtonStyle = 'purple';
	_buttonBorderRadius: ButtonBorderRadius = 'normal';

	get size() {
		return this._size;
	}

	set size(value) {
		if (!sizes.includes(value)) {
			settings.logger.error(
				`Invalid size: ${value}, expected one of ${sizes.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._size = value;
		this.updateStyle();
	}

	get buttonStyle() {
		return this._buttonStyle;
	}

	set buttonStyle(value) {
		if (!styles.includes(value)) {
			settings.logger.error(
				`Invalid style: ${value}, expected one of ${styles.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._buttonStyle = value;
		this.updateStyle();
	}

	get buttonBorderRadius() {
		return this._buttonBorderRadius;
	}

	set buttonBorderRadius(value) {
		if (!borderRadii.includes(value)) {
			settings.logger.error(
				`Invalid border-radius: ${value}, expected one of ${borderRadii.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._buttonBorderRadius = value;
		this.updateStyle();
	}

	static observedAttributes = ['button-style', 'size', 'button-border-radius'];

	shadowRoot: ShadowRoot;

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });

		this.shadowRoot.innerHTML = `
			<style>
				button {
					--purple-background: rgba(113, 24, 226, 1);
					--purple-border: rgba(224, 204, 250, 0.33);
					--purple-text: #fff;

					--gray-background: rgba(52, 56, 65, 1);
					--gray-border: rgba(71, 78, 94, 1);
					--gray-text: #fff;

					--red-background: rgba(179, 62, 102, 1);
					--red-border: rgba(249, 196, 215, 0.33);
					--red-text: #fff;

					--green-background: rgba(213, 249, 196, 1);
					--green-border: rgba(61, 125, 31, 1);
					--green-text: #000;

					--yellow-background: rgba(255, 236, 179, 1);
					--yellow-border: rgba(255, 191, 0, 1);
					--yellow-text: #000;