feat(toolbar): allow select element to have colors

withastro · Mar 29, 2024 · 190e68f · 190e68f
1 parent 7efe653
commit 190e68f
Showing 1 changed file with 57 additions and 1 deletion.
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
@@ -1,15 +1,39 @@
+import { settings } from '../settings.js';
+
+const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+
+type SelectStyle = (typeof styles)[number];
+
 export class DevToolbarSelect extends HTMLElement {
 	shadowRoot: ShadowRoot;
 	element: HTMLSelectElement;
+	_selectStyle: SelectStyle = 'gray';
+
+	static observedAttributes = ['select-style'];
 
 	constructor() {
 		super();
 		this.shadowRoot = this.attachShadow({ mode: 'open' });
 		this.shadowRoot.innerHTML = `
       <style>
         :host {
+          --purple-text: rgba(224, 204, 250, 1);
+					--purple-border: rgba(113, 24, 226, 1);
+
           --gray-text: rgba(191, 193, 201, 1);
-          --gray-border: rgba(145, 152, 173, 1);
+					--gray-border:rgba(191, 193, 201, 1);
+
+					--red-text: rgba(249, 196, 215, 1);
+					--red-border: rgba(179, 62, 102, 1);
+
+					--green-text: rgba(213, 249, 196, 1);
+					--green-border: rgba(61, 125, 31, 1);
+
+					--yellow-text: rgba(249, 233, 196, 1);
+					--yellow-border: rgba(181, 138, 45, 1);
+
+					--blue-text: rgba(189, 195, 255, 1);
+					--blue-border: rgba(54, 69, 217, 1);
 
           --text-color: var(--gray-text);
           --border-color: var(--gray-border);
@@ -35,6 +59,7 @@ export class DevToolbarSelect extends HTMLElement {
           background-repeat: no-repeat;
         }
       </style>
+      <style id="selected-style"></style>
       <slot></slot>
     `;
 		this.element = document.createElement('select');
@@ -48,5 +73,36 @@ export class DevToolbarSelect extends HTMLElement {
 
 	connectedCallback() {
 		this.shadowRoot.append(this.element);
+		this.updateStyle();
+	}
+
+	attributeChangedCallback() {
+		if (this.hasAttribute('select-style')) {
+			this.selectStyle = this.getAttribute('select-style') as SelectStyle;
+		}
+	}
+
+	updateStyle() {
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+		if (style) {
+			style.innerHTML = `
+			:host {
+				--text-color: var(--${this.selectStyle}-text);
+				--border-color: var(--${this.selectStyle}-border);
+			}
+		`;
+		}
+	}
+
+	get selectStyle() {
+		return this._selectStyle;
+	}
+	set selectStyle(value) {
+		if (!styles.includes(value)) {
+			settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(', ')}.`);
+			return;
+		}
+		this._selectStyle = value;
+		this.updateStyle();
 	}
 }