MCPcopy Create free account
hub / github.com/TanStack/devtools / injectStyles

Function injectStyles

packages/devtools-a11y/src/core/utils/ui.utils.ts:113–184  ·  view source on GitHub ↗

* Inject overlay styles into the document

()

Source from the content-addressed store, hash-verified

111 outline: ${styleFor('serious').outline} ${styleFor('serious').colors.border} !important;
112 outline-offset: 2px !important;
113 background-color: ${styleFor('serious').colors.subtleFill} !important;
114 }
115
116 .${HIGHLIGHT_CLASS}--moderate {
117 outline: ${styleFor('moderate').outline} ${styleFor('moderate').colors.border} !important;
118 outline-offset: 2px !important;
119 background-color: ${styleFor('moderate').colors.subtleFill} !important;
120 }
121
122 .${HIGHLIGHT_CLASS}--minor {
123 outline: ${styleFor('minor').outline} ${styleFor('minor').colors.border} !important;
124 outline-offset: 2px !important;
125 background-color: ${styleFor('minor').colors.subtleFill} !important;
126 }
127
128 .${TOOLTIP_CLASS} {
129 position: fixed;
130 padding: 4px 8px;
131 border-radius: 4px;
132 font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} / ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
133 white-space: nowrap;
134 z-index: 99990;
135 pointer-events: none;
136 box-shadow: ${semantic.shadow.sm};
137 max-width: 90vw;
138 overflow: hidden;
139 text-overflow: ellipsis;
140 }
141
142 .${TOOLTIP_CLASS}--critical {
143 background: ${styleFor('critical').colors.solidFill};
144 color: ${styleFor('critical').colors.onFill};
145 }
146
147 .${TOOLTIP_CLASS}--serious {
148 background: ${styleFor('serious').colors.solidFill};
149 color: ${styleFor('serious').colors.onFill};
150 }
151
152 .${TOOLTIP_CLASS}--moderate {
153 background: ${styleFor('moderate').colors.solidFill};
154 color: ${styleFor('moderate').colors.onFill};
155 }
156
157 .${TOOLTIP_CLASS}--minor {
158 background: ${styleFor('minor').colors.solidFill};
159 color: ${styleFor('minor').colors.onFill};
160 }
161 `
162 document.head.appendChild(style)
163}
164
165/**
166 * Calculate optimal tooltip position, ensuring it's always visible in viewport
167 */
168function calculateTooltipPosition(
169 targetElement: Element,
170 tooltip: HTMLElement,

Callers 2

highlightElementFunction · 0.85
highlightAllIssuesFunction · 0.85

Calls

no outgoing calls

Tested by

no test coverage detected