Merge pull request #343 from aws/dogusata/input-border-color

Added separate border color to input

Author: dogusata

example/src/theme-builder/base-theme-light-config.json

@@ -68,6 +68,20 @@
         "alpha": "100",
         "value": "#006ab1"
     },
+    "--mynah-color-text-input-border": {
+        "type": "color",
+        "description": "Border of the chat input textbox, when it does not have focus",
+        "category": "border-style",
+        "alpha": "100",
+        "value": "#fafcff"
+    },
+    "--mynah-color-text-input-border-focused": {
+        "type": "color",
+        "description": "Border of the chat input textbox, when it has focus",
+        "category": "border-style",
+        "alpha": "100",
+        "value": "#e6e8eb"
+    },
     "--mynah-color-text-input": {
         "type": "color",
         "description": "Input text color used in input fields",

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.35.0",
+    "version": "4.35.1",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",

package.json

@@ -30,6 +30,8 @@
     --mynah-color-text-disabled: var(--vscode-disabledForeground, var(--mynah-color-text-weak));
     --mynah-color-text-link: var(--vscode-textLink-foreground);
     --mynah-color-text-link-alternate: var(--mynah-color-button-reverse);
+    --mynah-color-text-input-border: var(--mynah-color-bg);
+    --mynah-color-text-input-border-focused: var(--mynah-color-border-default);
     --mynah-color-text-input: var(--vscode-input-foreground);
     --mynah-color-text-input-placeholder: var(--vscode-input-placeholderForeground, var(--mynah-color-text-disabled));
 

src/styles/_variables.scss

@@ -367,14 +367,13 @@
             pointer-events: none;
         }
         &::before {
-            opacity: 0;
-            @include gradient-border($gradient: var(--mynah-color-gradient-input), $background: var(--mynah-input-bg));
+            border: var(--mynah-border-width) solid var(--mynah-color-text-input-border);
         }
     }
 
     &.input-has-focus > .mynah-chat-prompt {
         &::before {
-            opacity: 1;
+            border: var(--mynah-border-width) solid var(--mynah-color-text-input-border-focused);
         }
     }