diff --git a/packages/amazonq/src/lsp/chat/webviewProvider.ts b/packages/amazonq/src/lsp/chat/webviewProvider.ts index 025881f3460..d0f1047beed 100644 --- a/packages/amazonq/src/lsp/chat/webviewProvider.ts +++ b/packages/amazonq/src/lsp/chat/webviewProvider.ts @@ -117,6 +117,7 @@ export class AmazonQChatViewProvider implements WebviewViewProvider { const contentPolicy = `default-src ${entrypoint} data: blob: 'unsafe-inline'; script-src ${entrypoint} filesystem: ws: wss: 'unsafe-inline';` + // TODO move these styles to a dedicated css file. return ` @@ -135,7 +136,136 @@ export class AmazonQChatViewProvider implements WebviewViewProvider { overflow: hidden; margin: 0; padding: 0; + + --mynah-font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'Amazon Ember', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: var(--vscode-font-size, 12px); + font-family: var(--mynah-font-family, 'system-ui'); + --mynah-max-width: 2560px; + --mynah-sizing-base: 0.2rem; + --mynah-sizing-half: calc(var(--mynah-sizing-base) / 2); + --mynah-sizing-1: var(--mynah-sizing-base); + --mynah-sizing-2: calc(var(--mynah-sizing-base) * 2); + --mynah-sizing-3: calc(var(--mynah-sizing-base) * 3); + --mynah-sizing-4: calc(var(--mynah-sizing-base) * 4); + --mynah-sizing-5: calc(var(--mynah-sizing-base) * 5); + --mynah-sizing-6: calc(var(--mynah-sizing-base) * 6); + --mynah-sizing-7: calc(var(--mynah-sizing-base) * 7); + --mynah-sizing-8: calc(var(--mynah-sizing-base) * 8); + --mynah-sizing-9: calc(var(--mynah-sizing-base) * 9); + --mynah-sizing-10: calc(var(--mynah-sizing-base) * 10); + --mynah-sizing-11: calc(var(--mynah-sizing-base) * 11); + --mynah-sizing-12: calc(var(--mynah-sizing-base) * 12); + --mynah-sizing-13: calc(var(--mynah-sizing-base) * 13); + --mynah-sizing-14: calc(var(--mynah-sizing-base) * 14); + --mynah-sizing-15: calc(var(--mynah-sizing-base) * 15); + --mynah-sizing-16: calc(var(--mynah-sizing-base) * 16); + --mynah-sizing-17: calc(var(--mynah-sizing-base) * 17); + --mynah-sizing-18: calc(var(--mynah-sizing-base) * 18); + --mynah-chat-wrapper-spacing: var(--mynah-sizing-2); + --mynah-button-border-width: 1px; + --mynah-border-width: 1px; + + --mynah-color-text-default: var(--vscode-foreground); + --mynah-color-text-strong: var(--vscode-input-foreground); + --mynah-color-text-weak: var(--vscode-disabledForeground); + --mynah-color-text-link: var(--vscode-textLink-foreground); + --mynah-color-text-input: var(--vscode-input-foreground); + + --mynah-color-bg: var(--vscode-sideBar-background); + --mynah-color-tab-active: var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg))); + --mynah-color-light: rgba(0, 0, 0, 0.05); + + --mynah-color-border-default: var(--vscode-panel-border, var(--vscode-tab-border, rgba(0, 0, 0, 0.1))); + + --mynah-color-highlight: rgba(255, 179, 0, 0.25); + --mynah-color-highlight-text: #886411; + + --mynah-color-toggle: var(--vscode-sideBar-background); + --mynah-color-toggle-reverse: rgba(0, 0, 0, 0.5); + + --mynah-color-syntax-bg: var(--vscode-terminal-dropBackground); + --mynah-color-syntax-variable: var(--vscode-debugTokenExpression-name); + --mynah-color-syntax-function: var(--vscode-gitDecoration-modifiedResourceForeground); + --mynah-color-syntax-operator: var(--vscode-debugTokenExpression-name); + --mynah-color-syntax-attr-value: var(--vscode-debugIcon-stepBackForeground); + --mynah-color-syntax-attr: var(--vscode-debugTokenExpression-string); + --mynah-color-syntax-property: var(--vscode-terminal-ansiCyan); + --mynah-color-syntax-comment: var(--vscode-debugConsole-sourceForeground); + --mynah-color-syntax-code: var(--vscode-terminal-ansiBlue); + --mynah-syntax-code-font-family: var(--vscode-editor-font-family); + --mynah-syntax-code-font-size: var(--vscode-editor-font-size, var(--mynah-font-size-medium)); + --mynah-syntax-code-block-max-height: calc(25 * var(--mynah-syntax-code-line-height)); + + --mynah-color-status-info: var(--vscode-editorInfo-foreground); + --mynah-color-status-success: var(--vscode-terminal-ansiGreen); + --mynah-color-status-warning: var(--vscode-editorWarning-foreground); + --mynah-color-status-error: var(--vscode-editorError-foreground); + + --mynah-color-button: var(--vscode-button-background); + --mynah-color-button-reverse: var(--vscode-button-foreground); + + --mynah-color-alternate: var(--vscode-button-secondaryBackground); + --mynah-color-alternate-reverse: var(--vscode-button-secondaryForeground); + + --mynah-card-bg: var(--vscode-editor-background); + + --mynah-shadow-button: none; + --mynah-shadow-card: none; + --mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4); + + --mynah-font-size-xxsmall: 0.75rem; + --mynah-font-size-xsmall: 0.85rem; + --mynah-font-size-small: 0.95rem; + --mynah-font-size-medium: 1rem; + --mynah-font-size-large: 1.125rem; + --mynah-line-height: 1.1rem; + --mynah-syntax-code-line-height: 1.1rem; + + --mynah-card-radius: var(--mynah-sizing-2); + --mynah-input-radius: var(--mynah-sizing-1); + --mynah-card-radius-corner: 0; + --mynah-button-radius: var(--mynah-sizing-1); + + --mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1); + --mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1); + --mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1); + --mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1); + --mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1); + --mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1); + --mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1), transform 800ms cubic-bezier(0.2, 1.05, 0, 1); + } + + body.vscode-dark, + body.vscode-high-contrast:not(.vscode-high-contrast-light) { + --mynah-color-light: rgba(255, 255, 255, 0.05); + --mynah-color-highlight: rgba(0, 137, 255, 0.2); + --mynah-color-highlight-text: rgba(0, 137, 255, 1); + } + + body .mynah-card-body h1 { + --mynah-line-height: 1.5rem; + font-size: 1.25em; + } + + body .mynah-card-body h2, + body .mynah-card-body h3, + body .mynah-card-body h4 { + font-size: 1em; + } + + div.mynah-card.padding-large { + padding: var(--mynah-sizing-4) var(--mynah-sizing-3); + } + + .mynah-chat-wrapper { + padding: 0.75rem 1.25rem; + box-sizing: border-box; } + .mynah-syntax-highlighter>pre>code, .mynah-syntax-highlighter>pre { + overflow: hidden !important; + text-wrap: wrap !important; + }