Add fallback styles to Textarea

Author: bendera

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 - **Button**: Fixed the button border style.
 
+### Added
+
+- Added fallback styles to **Textarea**.
+
 ## [1.13.1] - 2025-02-16
 
 ### Fixed
@@ -27,7 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Added
 
 - **Badge**: Added `tab-header-counter` variant.
-- Added fallback styles from **Badge**, **Button** and **Textfield**.
+- Added fallback styles to **Badge**, **Button** and **Textfield**.
   These components still look proper even if the theme variables provided by VSCode are not present.
   In such cases, the components appear with the default theme (Dark Modern).
 

src/vscode-textarea/vscode-textarea.styles.ts

@@ -20,7 +20,7 @@ const styles: CSSResultGroup = [
     }
 
     .shadow {
-      box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
+      box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset;
       display: none;
       inset: 0 0 auto 0;
       height: 6px;
@@ -34,20 +34,17 @@ const styles: CSSResultGroup = [
     }
 
     textarea {
-      background-color: var(--vscode-settings-textInputBackground);
-      border-color: var(
-        --vscode-settings-textInputBorder,
-        var(--vscode-settings-textInputBackground)
-      );
+      background-color: var(--vscode-settings-textInputBackground, #313131);
+      border-color: var(--vscode-settings-textInputBorder, transparent);
       border-radius: 2px;
       border-style: solid;
       border-width: 1px;
       box-sizing: border-box;
-      color: var(--vscode-settings-textInputForeground);
+      color: var(--vscode-settings-textInputForeground, #cccccc);
       display: block;
-      font-family: var(--vscode-font-family);
-      font-size: var(--vscode-font-size);
-      font-weight: var(--vscode-font-weight);
+      font-family: var(--vscode-font-family, sans-serif);
+      font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
       height: 100%;
       width: 100%;
     }
@@ -62,33 +59,36 @@ const styles: CSSResultGroup = [
 
     :host([invalid]) textarea,
     :host(:invalid) textarea {
-      background-color: var(--vscode-inputValidation-errorBackground);
+      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
       border-color: var(--vscode-inputValidation-errorBorder, #be1100);
     }
 
     textarea.monospace {
-      background-color: var(--vscode-editor-background);
-      color: var(--vscode-editor-foreground);
-      font-family: var(--vscode-editor-font-family);
-      font-size: var(--vscode-editor-font-size);
-      font-weight: var(--vscode-editor-font-weight);
+      background-color: var(--vscode-editor-background, #1f1f1f);
+      color: var(--vscode-editor-foreground, #cccccc);
+      font-family: var(--vscode-editor-font-family, monospace);
+      font-size: var(--vscode-editor-font-size, 14px);
+      font-weight: var(--vscode-editor-font-weight, normal);
     }
 
     .textarea.monospace::placeholder {
-      color: var(--vscode-editor-inlineValuesForeground);
+      color: var(
+        --vscode-editor-inlineValuesForeground,
+        rgba(255, 255, 255, 0.5)
+      );
     }
 
     textarea.cursor-pointer {
       cursor: pointer;
     }
 
     textarea:focus {
-      border-color: var(--vscode-focusBorder);
+      border-color: var(--vscode-focusBorder, #0078d4);
       outline: none;
     }
 
     textarea::placeholder {
-      color: var(--vscode-input-placeholderForeground);
+      color: var(--vscode-input-placeholderForeground, #989898);
       opacity: 1;
     }
 
@@ -105,15 +105,24 @@ const styles: CSSResultGroup = [
     }
 
     textarea:hover::-webkit-scrollbar-thumb {
-      background-color: var(--vscode-scrollbarSlider-background);
+      background-color: var(
+        --vscode-scrollbarSlider-background,
+        rgba(121, 121, 121, 0.4)
+      );
     }
 
     textarea::-webkit-scrollbar-thumb:hover {
-      background-color: var(--vscode-scrollbarSlider-hoverBackground);
+      background-color: var(
+        --vscode-scrollbarSlider-hoverBackground,
+        rgba(100, 100, 100, 0.7)
+      );
     }
 
     textarea::-webkit-scrollbar-thumb:active {
-      background-color: var(--vscode-scrollbarSlider-activeBackground);
+      background-color: var(
+        --vscode-scrollbarSlider-activeBackground,
+        rgba(191, 191, 191, 0.4)
+      );
     }
 
     textarea::-webkit-scrollbar-corner {

src/vscode-textarea/vscode-textarea.ts

@@ -18,24 +18,24 @@ import styles from './vscode-textarea.styles.js';
  * @fires {InputEvent} input
  * @fires {Event} change
  *
- * @cssprop --vscode-scrollbar-shadow
- * @cssprop --vscode-settings-textInputBackground
- * @cssprop --vscode-settings-textInputBorder
- * @cssprop --vscode-settings-textInputForeground
- * @cssprop --vscode-input-placeholderForeground
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-editor-background
- * @cssprop --vscode-editor-foreground
- * @cssprop --vscode-editor-font-family
- * @cssprop --vscode-editor-font-size
- * @cssprop --vscode-editor-font-weight
- * @cssprop --vscode-editor-inlineValuesForeground
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-scrollbarSlider-background
- * @cssprop --vscode-scrollbarSlider-hoverBackground
- * @cssprop --vscode-scrollbarSlider-activeBackground
+ * @cssprop [--vscode-scrollbar-shadow=#000000]
+ * @cssprop [--vscode-settings-textInputBackground=#313131]
+ * @cssprop [--vscode-settings-textInputBorder=transparent]
+ * @cssprop [--vscode-settings-textInputForeground=#cccccc]
+ * @cssprop [--vscode-input-placeholderForeground=#989898]
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-editor-background=#1f1f1f]
+ * @cssprop [--vscode-editor-foreground=#cccccc]
+ * @cssprop [--vscode-editor-font-family=monospace]
+ * @cssprop [--vscode-editor-font-size=14px]
+ * @cssprop [--vscode-editor-font-weight=normal]
+ * @cssprop [--vscode-editor-inlineValuesForeground=rgba(255, 255, 255, 0.5)]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]
+ * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]
+ * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]
  */
 @customElement('vscode-textarea')
 export class VscodeTextarea