add more styles

Author: ctlai95

packages/core/resources/css/amazonq-webview.css

@@ -8,6 +8,11 @@ html {
     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);
@@ -29,6 +34,56 @@ html {
     --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;
@@ -42,6 +97,14 @@ html {
     --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,