Nx MCP Server

import { css } from '@microsoft/fast-element'; import { disabledCursor, display, focusVisible, } from '@microsoft/fast-foundation'; const approxInputHeight = '2.3rem'; const inputMinWidth = '100px'; const borderWidth = '1'; const cornerRadius = '0.25rem'; const listboxCornerRadius = '1rem'; const designUnit = '4'; // refer to https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/dropdown/dropdown.styles.ts // and https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/option/option.styles.ts // for inspiration export const intellijComboboxStyles = () => css` ${display('inline-flex')} :host { background: var(--select-field-background-color); box-sizing: border-box; color: var(--foreground-color); contain: contents; font-family: inherit; position: relative; user-select: none; min-width: ${inputMinWidth}; outline: none; vertical-align: top; } .control { align-items: center; box-sizing: border-box; border: calc(${borderWidth} * 1px) solid var(--field-border-color); border-radius: ${cornerRadius}; cursor: pointer; display: flex; font-family: inherit; font-size: inherit; line-height: normal; min-height: 100%; padding: 2px 6px 2px 8px; width: 100%; } input { -webkit-appearance: none; font: inherit; background: transparent; border: 0; color: inherit; outline: none; padding-top: 0.375rem; padding-bottom: 0.375rem; } .listbox { background: var(--background-color); --tw-ring-color: var(--focus-border-color); --tw-ring-offset-width: 0px; box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); border-radius: ${listboxCornerRadius}; box-sizing: border-box; display: inline-flex; flex-direction: column; left: 0; max-height: 200px; padding: 0 0 calc(${designUnit} * 1px) 0; overflow-y: auto; position: absolute; width: 100%; z-index: 1; } .listbox[hidden] { display: none; } :host(:${focusVisible}) .control { border-color: var(--focus-border-color); } :host(:not([disabled]):hover) { background: var(--select-field-background-color); border-color: var(--field-border-color); } :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) { background: var(--active-selection-background-color); border: calc(${borderWidth} * 1px) solid var(--focus-border-color); color: var(--foreground-color); } :host([disabled]) { cursor: ${disabledCursor}; opacity: 0.4; } :host([disabled]) .control { cursor: ${disabledCursor}; user-select: none; } :host([disabled]:hover) { background: var(--select-field-background-color); color: var(--foreground-color); fill: currentcolor; } :host(:not([disabled])) .control:active { --tw-ring-color: var(--focus-border-color); --tw-ring-offset-width: 0px; box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); } :host(:focus-within) .control { --tw-ring-color: var(--focus-border-color); --tw-ring-offset-width: 0px; box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); } :host(:empty) .listbox { display: none; } :host([open]) .control { --tw-ring-color: var(--focus-border-color); --tw-ring-offset-width: 0px; box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); } :host([open][position='above']) .listbox, :host([open][position='below']) .control { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } :host([open][position='above']) .control, :host([open][position='below']) .listbox { border-top-left-radius: 0; border-top-right-radius: 0; } :host([open][position='above']) .listbox { bottom: ${approxInputHeight}; } :host([open][position='below']) .listbox { top: ${approxInputHeight}; } .selected-value { flex: 1 1 auto; font-family: inherit; overflow: hidden; text-align: start; text-overflow: ellipsis; white-space: nowrap; } .indicator { flex: 0 0 auto; margin-inline-start: 1em; } slot[name='listbox'] { display: none; width: 100%; } :host([open]) slot[name='listbox'] { display: flex; position: absolute; } .end { margin-inline-start: auto; } .start, .end, .indicator, .select-indicator, ::slotted(svg), ::slotted(span) { fill: currentcolor; height: 1em; min-height: calc(${designUnit} * 4px); min-width: calc(${designUnit} * 4px); width: 1em; } ::slotted([role='option']), ::slotted(option) { flex: 0 0 auto; } `; export const intellijOptionStyles = () => css` ${display('inline-flex')} :host { font-family: inherit; border-radius: ${cornerRadius}; border: calc(${borderWidth} * 1px) solid transparent; box-sizing: border-box; color: var(--foreground-color); cursor: pointer; fill: currentcolor; font-size: inherit; line-height: normal; margin: 0; outline: none; overflow: hidden; padding: 0.125rem 0.5rem 0.5rem; user-select: none; white-space: nowrap; } :host(:${focusVisible}) { border-color: var(--focus-border-color); background: var(--active-selection-background-color); color: var(--foreground-color); } :host([aria-selected='true']) { background: var(--active-selection-background-color); border: calc(${borderWidth} * 1px) solid var(--focus-border-color); color: var(--foreground-color); } :host(:active) { background: var(--active-selection-background-color); color: var(--foreground-color); } :host(:not([aria-selected='true']):hover) { background: var(--active-selection-background-color); border: calc(${borderWidth} * 1px) solid var(--focus-border-color); color: var(--foreground-color); } :host(:not([aria-selected='true']):active) { background: var(--active-selection-background-color); color: var(--foreground-color); } :host([disabled]) { cursor: ${disabledCursor}; opacity: 0.4; } :host([disabled]:hover) { background-color: inherit; } .content { grid-column-start: 2; justify-self: start; overflow: hidden; text-overflow: ellipsis; } `;