feat(text-area): add component tokens (#10343)

**Related Issue:** #7180, #7606, #9040

## Summary

Add the following component-scoped CSS Variables to `calcite-text-area`:

`--calcite-text-area-background-color`: Specifies the background color
of the component.
`--calcite-text-area-border-color`: Specifies the border color of the
text area.
`--calcite-text-area-character-limit-text-color`: Specifies the color of
the character limit text displayed in footer of the component.
`--calcite-text-area-divider-color`: Specifies the color of the divider
between the text area and footer.
`--calcite-text-area-font-size`: Specifies the font size of the thext
area and footer.
`--calcite-text-area-max-height`: Specifies the the maximum height of
the text area in the component.
`--calcite-text-area-min-height`: Specifies the minimum height of the
text area in the component.
`--calcite-text-area-text-color`: Specifies the color of text in the
component.
`--calcite-text-area-footer-border-color`: Specifies the border color of
the footer.

packages/calcite-components/src/components/text-area/resources.ts

@@ -11,10 +11,10 @@ export const CSS = {
   readOnly: "readonly",
   textAreaInvalid: "text-area--invalid",
   footerSlotted: "footer--slotted",
-  borderColor: "border--color",
   hide: "hide",
-  blockSizeFull: "block-size--full",
   footerEndSlotOnly: "footer--end-only",
+  textArea: "text-area",
+  textAreaOnly: "text-area--only",
 };
 
 export const IDS = {

packages/calcite-components/src/components/text-area/text-area.e2e.ts

@@ -10,6 +10,7 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -201,4 +202,83 @@ describe("calcite-text-area", () => {
   describe("translation support", () => {
     t9n("calcite-text-area");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-text-area placeholder="hello"></calcite-text-area>`, {
+        "--calcite-text-area-background-color": [
+          {
+            shadowSelector: `.${CSS.textArea}`,
+            targetProp: "backgroundColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "backgroundColor",
+          },
+        ],
+        "--calcite-text-area-border-color": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-text-area-font-size": [
+          {
+            shadowSelector: `.${CSS.textArea}`,
+            targetProp: "fontSize",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "fontSize",
+          },
+        ],
+        "--calcite-text-area-max-height": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "maxHeight",
+        },
+        "--calcite-text-area-min-height": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "minHeight",
+        },
+        "--calcite-text-area-text-color": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "color",
+        },
+        "--calcite-text-area-placeholder-text-color": {
+          shadowSelector: `.${CSS.textArea}::placeholder`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("max-chars", () => {
+      themed(html`<calcite-text-area max-length="10"></calcite-text-area>`, {
+        "--calcite-text-area-divider-color": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-text-area-footer-border-color": [
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderBottomColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderLeftColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderRightColor",
+          },
+        ],
+      });
+    });
+
+    describe("over limit", () => {
+      themed(html`<calcite-text-area max-length="4" value="12345"></calcite-text-area>`, {
+        "--calcite-text-area-character-limit-text-color": {
+          shadowSelector: `.${CSS.characterLimit}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });