toggle.ts — astro Source File

Source Code

import { settings } from '../settings.js';

const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;

type ToggleStyle = (typeof styles)[number];

export class DevToolbarToggle extends HTMLElement {
	shadowRoot: ShadowRoot;
	input: HTMLInputElement;
	_toggleStyle: ToggleStyle = 'gray';

	get toggleStyle() {
		return this._toggleStyle;
	}

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

	static observedAttributes = ['toggle-style'];

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

		this.shadowRoot.innerHTML = `
		<style>
			:host {
				--purple-bg-on: rgba(113, 24, 226, 1);
				--purple-border-off: rgba(113, 24, 226, 1);
				--purple-border-on: rgba(224, 204, 250, 1);

				--gray-bg-on: rgba(61, 125, 31, 1);
				--gray-border-off: rgba(145, 152, 173, 1);
				--gray-border-on: rgba(213, 249, 196, 1);

				--red-bg-on: rgba(179, 62, 102, 1);
				--red-border-off: rgba(179, 62, 102, 1);
				--red-border-on: rgba(249, 196, 215, 1);

				--green-bg-on: rgba(61, 125, 31, 1);
				--green-border-off: rgba(61, 125, 31, 1);
				--green-border-on: rgba(213, 249, 196, 1);

				--yellow-bg-on: rgba(181, 138, 45, 1);
				--yellow-border-off: rgba(181, 138, 45, 1);
				--yellow-border-on: rgba(255, 236, 179, 1);

				--blue-bg-on: rgba(54, 69, 217, 1);
				--blue-border-off: rgba(54, 69, 217, 1);
				--blue-border-on: rgba(189, 195, 255, 1);
			}

			input {
				appearance: none;
// ... (78 more lines)