fix: add background color in uui-textarea (#410)

* add css variable and use correct background variable

* adds JSDocs and updates story

Author: JesmoDev

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -11,6 +11,7 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
  * @fires KeyboardEvent#keyup on keyup
  * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
  * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
+ * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
  */
 @defineElement('uui-textarea')
 export class UUITextareaElement extends FormControlMixin(LitElement) {
@@ -77,6 +78,10 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
         outline: none;
         min-height: var(--uui-textarea-min-height);
         max-height: var(--uui-textarea-max-height);
+        background-color: var(
+          --uui-textarea-background-color,
+          var(--uui-color-surface)
+        );
       }
       :host(:hover)
         textarea:not([readonly]):not([disabled])

packages/uui-textarea/lib/uui-textarea.story.ts

@@ -16,11 +16,22 @@ export default {
   },
 };
 
-export const AAAOverview: Story = props =>
-  html`<uui-textarea
-    style="--uui-textarea-min-height: ${props[
-      '--uui-textarea-min-height'
-    ]}; --uui-textarea-max-height: ${props['--uui-textarea-max-height']}"
+export const AAAOverview: Story = props => {
+  const minHeight = props['--uui-textarea-min-height'];
+  const maxHeight = props['--uui-textarea-max-height'];
+  const backgroundColor = props['--uui-textarea-background-color'];
+
+  const styles = `
+  ${minHeight ? `--uui-textarea-min-height: ${minHeight};` : ''}
+  ${maxHeight ? `--uui-textarea-max-height: ${maxHeight};` : ''}
+  ${
+    backgroundColor
+      ? `--uui-textarea-background-color: ${backgroundColor};`
+      : ''
+  }
+  `;
+  return html`<uui-textarea
+    style=${styles}
     .label=${props.label}
     ?auto-height=${props.autoHeight}
     .minlength=${props.minlength}
@@ -31,18 +42,21 @@ export const AAAOverview: Story = props =>
     .name=${props.name}
     .error=${props.error}
     .value=${props.value}></uui-textarea>`;
+};
 
 AAAOverview.storyName = 'Overview';
 
 AAAOverview.args = {
   label: 'Label',
   '--uui-textarea-min-height': '',
   '--uui-textarea-max-height': '',
+  '--uui-textarea-background-color': '',
 };
 
 AAAOverview.argTypes = {
   '--uui-textarea-min-height': { control: { type: 'text' } },
   '--uui-textarea-max-height': { control: { type: 'text' } },
+  '--uui-textarea-background-color': { control: { type: 'color' } },
 };
 
 AAAOverview.parameters = {