updateStyle() — astro Function Reference

Architecture documentation for the updateStyle() function in badge.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 3

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47["updateStyle()"]
  bc3405ae_fd18_8ad9_3e21_98219f1338ab["DevToolbarBadge"]
  ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47 -->|defined in| bc3405ae_fd18_8ad9_3e21_98219f1338ab
  2f2ad715_49e8_63a1_2da9_4f6bf82a59ef["size()"]
  2f2ad715_49e8_63a1_2da9_4f6bf82a59ef -->|calls| ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47
  721779b3_bbd4_66f6_a690_516e63a08cf8["badgeStyle()"]
  721779b3_bbd4_66f6_a690_516e63a08cf8 -->|calls| ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47
  7065b5eb_d557_a5be_81bd_32fbbdcbe809["connectedCallback()"]
  7065b5eb_d557_a5be_81bd_32fbbdcbe809 -->|calls| ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47
  style ce5889ba_3e4c_5cfe_9b6d_d4afe134fd47 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts lines 108–119

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');

		if (style) {
			style.innerHTML = `
			.badge {
				--text-color: var(--${this.badgeStyle}-text);
				--border-color: var(--${this.badgeStyle}-border);
				--size: var(--${this.size});
			}`;
		}
	}