refactor(ux): css variables for font-sizes aws#5042

Problem
Update font-sizes in Login Page for AWS Toolkits and Amazon Q

Solution
- Use CSS Variables
- Initially used `rem` though now using `var(--vscode-font-size)` for base font size. This way the extension's base font will be as set by user for their VSCode
- fixed colors for dark and light theme

Author: ivikash

packages/core/src/login/webview/vue/base.css

@@ -0,0 +1,8 @@
+:root {
+    /* Font-sizes */
+    --font-size-sm: calc(0.75 * var(--font-size-base));
+    --font-size-base: var(--vscode-font-size);
+    --font-size-md: calc(1.25 * var(--font-size-base));
+    --font-size-lg: calc(1.5 * var(--font-size-base));
+    --font-size-xl: calc(1.75 * var(--font-size-base));
+}

packages/core/src/login/webview/vue/login.vue

@@ -574,6 +574,8 @@ export default defineComponent({
 </script>
 
 <style>
+@import './base.css';
+
 .selectable-item {
     margin-bottom: 10px;
     margin-top: 10px;
@@ -590,7 +592,7 @@ export default defineComponent({
     color: #c6c6c6;
     margin-bottom: 5px;
     margin-top: 5px;
-    font-size: 10px;
+    font-size: var(--font-size-sm);
     font-weight: 500;
 }
 .vscode-light .hint {
@@ -611,31 +613,32 @@ export default defineComponent({
 }
 
 .header {
-    font-size: 12px;
+    font-size: var(--font-size-base);
     font-weight: bold;
 }
-.header.vscode-dark {
+
+.vscode-dark .header {
     color: white;
 }
-.header.vscode-light {
+.vscode-light .header {
     color: black;
 }
 
 .title {
     margin-bottom: 3px;
     margin-top: 3px;
-    font-size: 11px;
+    font-size: var(--font-size-base);
     font-weight: 500;
 }
-.title.vscode-dark {
+.vscode-dark .title {
     color: white;
 }
-.title.vscode-light {
+.vscode-light .title {
     color: black;
 }
 
 .subHeader {
-    font-size: 10px;
+    font-size: var(--font-size-sm);
 }
 .continue-button {
     background-color: var(--vscode-button-background);
@@ -648,6 +651,7 @@ export default defineComponent({
     margin-bottom: 3px;
     margin-top: 3px;
     cursor: pointer;
+    font-size: var(--font-size-base);
 }
 .back-button {
     background: none;
@@ -677,7 +681,7 @@ export default defineComponent({
     padding-right: 8px;
     padding-top: 6px;
     padding-bottom: 6px;
-    font-size: 13px;
+    font-size: var(--font-size-base);
     font-weight: 400;
 }
 body.vscode-light .urlInput {
@@ -696,7 +700,7 @@ body.vscode-dark .urlInput {
     padding-right: 8px;
     padding-top: 6px;
     padding-bottom: 6px;
-    font-size: 13px;
+    font-size: var(--font-size-base);
     font-weight: 400;
 }
 body.vscode-light .iamInput {
@@ -714,18 +718,18 @@ body.vscode-dark .iamInput {
     padding-right: 8px;
     padding-top: 6px;
     padding-bottom: 6px;
-    font-size: 13px;
+    font-size: var(--font-size-base);
     font-weight: 400;
 }
 body.vscode-light .regionSelect {
     color: black;
 }
 body.vscode-dark .regionSelect {
-    color: #cccccc;
+    color: white;
 }
 .start-url-error {
     color: #ff0000;
-    font-size: 8px;
+    font-size: var(--font-size-sm);
 }
 #logo {
     fill: var(--vscode-button-foreground);

packages/core/src/login/webview/vue/selectableItem.vue

@@ -117,21 +117,20 @@ export default defineComponent({
 }
 
 .title {
-    font-size: 12px;
-    font-weight: bold;
+    font-size: var(--font-size-base);
 }
 
 .text {
     display: flex;
     flex-direction: column;
-    font-size: 12px;
+    font-size: var(--font-size-sm);
     justify-content: center;
 }
 
-.text.vscode-dark {
+.vscode-dark .text {
     color: white;
 }
-.text.vscode-light {
+.vscode-light .text {
     color: black;
 }
 .icon {