@@ -135,7 +135,136 @@ export class AmazonQChatViewProvider implements WebviewViewProvider {
135135 overflow: hidden;
136136 margin: 0;
137137 padding: 0;
138+
139+ --mynah-font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
140+ 'Amazon Ember', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
141+ font-size: var(--vscode-font-size, 12px);
142+ font-family: var(--mynah-font-family, 'system-ui');
143+ --mynah-max-width: 2560px;
144+ --mynah-sizing-base: 0.2rem;
145+ --mynah-sizing-half: calc(var(--mynah-sizing-base) / 2);
146+ --mynah-sizing-1: var(--mynah-sizing-base);
147+ --mynah-sizing-2: calc(var(--mynah-sizing-base) * 2);
148+ --mynah-sizing-3: calc(var(--mynah-sizing-base) * 3);
149+ --mynah-sizing-4: calc(var(--mynah-sizing-base) * 4);
150+ --mynah-sizing-5: calc(var(--mynah-sizing-base) * 5);
151+ --mynah-sizing-6: calc(var(--mynah-sizing-base) * 6);
152+ --mynah-sizing-7: calc(var(--mynah-sizing-base) * 7);
153+ --mynah-sizing-8: calc(var(--mynah-sizing-base) * 8);
154+ --mynah-sizing-9: calc(var(--mynah-sizing-base) * 9);
155+ --mynah-sizing-10: calc(var(--mynah-sizing-base) * 10);
156+ --mynah-sizing-11: calc(var(--mynah-sizing-base) * 11);
157+ --mynah-sizing-12: calc(var(--mynah-sizing-base) * 12);
158+ --mynah-sizing-13: calc(var(--mynah-sizing-base) * 13);
159+ --mynah-sizing-14: calc(var(--mynah-sizing-base) * 14);
160+ --mynah-sizing-15: calc(var(--mynah-sizing-base) * 15);
161+ --mynah-sizing-16: calc(var(--mynah-sizing-base) * 16);
162+ --mynah-sizing-17: calc(var(--mynah-sizing-base) * 17);
163+ --mynah-sizing-18: calc(var(--mynah-sizing-base) * 18);
164+ --mynah-chat-wrapper-spacing: var(--mynah-sizing-2);
165+ --mynah-button-border-width: 1px;
166+ --mynah-border-width: 1px;
167+
168+ --mynah-color-text-default: var(--vscode-foreground);
169+ --mynah-color-text-strong: var(--vscode-input-foreground);
170+ --mynah-color-text-weak: var(--vscode-disabledForeground);
171+ --mynah-color-text-link: var(--vscode-textLink-foreground);
172+ --mynah-color-text-input: var(--vscode-input-foreground);
173+
174+ --mynah-color-bg: var(--vscode-sideBar-background);
175+ --mynah-color-tab-active: var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg)));
176+ --mynah-color-light: rgba(0, 0, 0, 0.05);
177+
178+ --mynah-color-border-default: var(--vscode-panel-border, var(--vscode-tab-border, rgba(0, 0, 0, 0.1)));
179+
180+ --mynah-color-highlight: rgba(255, 179, 0, 0.25);
181+ --mynah-color-highlight-text: #886411;
182+
183+ --mynah-color-toggle: var(--vscode-sideBar-background);
184+ --mynah-color-toggle-reverse: rgba(0, 0, 0, 0.5);
185+
186+ --mynah-color-syntax-bg: var(--vscode-terminal-dropBackground);
187+ --mynah-color-syntax-variable: var(--vscode-debugTokenExpression-name);
188+ --mynah-color-syntax-function: var(--vscode-gitDecoration-modifiedResourceForeground);
189+ --mynah-color-syntax-operator: var(--vscode-debugTokenExpression-name);
190+ --mynah-color-syntax-attr-value: var(--vscode-debugIcon-stepBackForeground);
191+ --mynah-color-syntax-attr: var(--vscode-debugTokenExpression-string);
192+ --mynah-color-syntax-property: var(--vscode-terminal-ansiCyan);
193+ --mynah-color-syntax-comment: var(--vscode-debugConsole-sourceForeground);
194+ --mynah-color-syntax-code: var(--vscode-terminal-ansiBlue);
195+ --mynah-syntax-code-font-family: var(--vscode-editor-font-family);
196+ --mynah-syntax-code-font-size: var(--vscode-editor-font-size, var(--mynah-font-size-medium));
197+ --mynah-syntax-code-block-max-height: calc(25 * var(--mynah-syntax-code-line-height));
198+
199+ --mynah-color-status-info: var(--vscode-editorInfo-foreground);
200+ --mynah-color-status-success: var(--vscode-terminal-ansiGreen);
201+ --mynah-color-status-warning: var(--vscode-editorWarning-foreground);
202+ --mynah-color-status-error: var(--vscode-editorError-foreground);
203+
204+ --mynah-color-button: var(--vscode-button-background);
205+ --mynah-color-button-reverse: var(--vscode-button-foreground);
206+
207+ --mynah-color-alternate: var(--vscode-button-secondaryBackground);
208+ --mynah-color-alternate-reverse: var(--vscode-button-secondaryForeground);
209+
210+ --mynah-card-bg: var(--vscode-editor-background);
211+
212+ --mynah-shadow-button: none;
213+ --mynah-shadow-card: none;
214+ --mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
215+
216+ --mynah-font-size-xxsmall: 0.75rem;
217+ --mynah-font-size-xsmall: 0.85rem;
218+ --mynah-font-size-small: 0.95rem;
219+ --mynah-font-size-medium: 1rem;
220+ --mynah-font-size-large: 1.125rem;
221+ --mynah-line-height: 1.1rem;
222+ --mynah-syntax-code-line-height: 1.1rem;
223+
224+ --mynah-card-radius: var(--mynah-sizing-2);
225+ --mynah-input-radius: var(--mynah-sizing-1);
226+ --mynah-card-radius-corner: 0;
227+ --mynah-button-radius: var(--mynah-sizing-1);
228+
229+ --mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
230+ --mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1);
231+ --mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1);
232+ --mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1);
233+ --mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1);
234+ --mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
235+ --mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1), transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
236+ }
237+
238+ body.vscode-dark,
239+ body.vscode-high-contrast:not(.vscode-high-contrast-light) {
240+ --mynah-color-light: rgba(255, 255, 255, 0.05);
241+ --mynah-color-highlight: rgba(0, 137, 255, 0.2);
242+ --mynah-color-highlight-text: rgba(0, 137, 255, 1);
243+ }
244+
245+ body .mynah-card-body h1 {
246+ --mynah-line-height: 1.5rem;
247+ font-size: 1.25em;
248+ }
249+
250+ body .mynah-card-body h2,
251+ body .mynah-card-body h3,
252+ body .mynah-card-body h4 {
253+ font-size: 1em;
254+ }
255+
256+ div.mynah-card.padding-large {
257+ padding: var(--mynah-sizing-4) var(--mynah-sizing-3);
258+ }
259+
260+ .mynah-chat-wrapper {
261+ padding: 0.75rem 1.25rem;
262+ box-sizing: border-box;
138263 }
264+ .mynah-syntax-highlighter>pre>code, .mynah-syntax-highlighter>pre {
265+ overflow: hidden !important;
266+ text-wrap: wrap !important;
267+ }
139268 </style>
140269 </head>
141270 <body>
0 commit comments