From b0d264aa11fad51d961b9522498b973fa9b4709b Mon Sep 17 00:00:00 2001
From: Maximilian Schoell <schomax@amazon.de>
Date: Mon, 3 Nov 2025 15:17:05 +0100
Subject: [PATCH 1/2] feat: implement style api for textarea component

---
 pages/textarea/integration.page.tsx           | 101 +++++++-
 pages/textarea/style-permutations.page.tsx    | 181 ++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     | 230 ++++++++++++++++++
 src/textarea/__tests__/styles.test.tsx        | 117 +++++++++
 src/textarea/index.tsx                        |   3 +
 src/textarea/interfaces.ts                    |  50 ++++
 src/textarea/styles.scss                      |  72 +++++-
 src/textarea/styles.tsx                       |  56 +++++
 8 files changed, 787 insertions(+), 23 deletions(-)
 create mode 100644 pages/textarea/style-permutations.page.tsx
 create mode 100644 src/textarea/__tests__/styles.test.tsx
 create mode 100644 src/textarea/styles.tsx

diff --git a/pages/textarea/integration.page.tsx b/pages/textarea/integration.page.tsx
index 961f50dffd..7373926222 100644
--- a/pages/textarea/integration.page.tsx
+++ b/pages/textarea/integration.page.tsx
@@ -8,19 +8,94 @@ export default function Page() {
   const [value, setValue] = useState('');
   const [submitStatus, setSubmitStatus] = useState(false);
 
+  const [styleableValue, setStyleableValue] = useState('Test value');
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isWarning, setIsWarning] = useState(false);
+
   return (
-    <div id="test" style={{ padding: 10 }}>
-      <h1>Textarea submit test</h1>
-      {submitStatus ? <div id="submit-success">Submitted</div> : null}
-      <form
-        onSubmit={event => {
-          console.log('submitted');
-          event.preventDefault();
-          setSubmitStatus(true);
-        }}
-      >
-        <Textarea value={value} ariaLabel="textarea" onChange={event => setValue(event.detail.value)} />
-      </form>
-    </div>
+    <>
+      <div id="test" style={{ padding: 10 }}>
+        <h1>Textarea submit test</h1>
+        {submitStatus ? <div id="submit-success">Submitted</div> : null}
+        <form
+          onSubmit={event => {
+            console.log('submitted');
+            event.preventDefault();
+            setSubmitStatus(true);
+          }}
+        >
+          <Textarea value={value} ariaLabel="textarea" onChange={event => setValue(event.detail.value)} />
+        </form>
+      </div>
+
+      <div id="styleable-textarea-test" style={{ padding: 10 }}>
+        <h1>Textarea Style API with State Toggles</h1>
+        <div style={{ marginBottom: '20px' }}>
+          <Textarea
+            ariaLabel="Styleable test textarea"
+            value={styleableValue}
+            onChange={event => setStyleableValue(event.detail.value)}
+            invalid={isInvalid}
+            disabled={isDisabled}
+            readOnly={isReadOnly}
+            warning={isWarning}
+            placeholder="Enter text"
+            data-testid="styleable-textarea"
+            style={{
+              root: {
+                borderColor: {
+                  default: '#3b82f6',
+                  hover: '#2563eb',
+                  focus: '#1d4ed8',
+                  disabled: '#93c5fd',
+                  readonly: '#60a5fa',
+                },
+                borderWidth: '2px',
+                borderRadius: '8px',
+                backgroundColor: {
+                  default: '#dbeafe',
+                  hover: '#bfdbfe',
+                  focus: '#bfdbfe',
+                  disabled: '#eff6ff',
+                  readonly: '#f0f9ff',
+                },
+                color: {
+                  default: '#1e40af',
+                  hover: '#1e40af',
+                  focus: '#1e3a8a',
+                  disabled: '#93c5fd',
+                  readonly: '#3b82f6',
+                },
+                fontSize: '16px',
+                fontWeight: '500',
+                paddingBlock: '10px',
+                paddingInline: '14px',
+              },
+              placeholder: {
+                color: '#60a5fa',
+                fontSize: '14px',
+                fontStyle: 'italic',
+              },
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <button id="toggle-invalid" onClick={() => setIsInvalid(!isInvalid)} type="button">
+            Toggle Invalid ({isInvalid ? 'ON' : 'OFF'})
+          </button>
+          <button id="toggle-disabled" onClick={() => setIsDisabled(!isDisabled)} type="button">
+            Toggle Disabled ({isDisabled ? 'ON' : 'OFF'})
+          </button>
+          <button id="toggle-readonly" onClick={() => setIsReadOnly(!isReadOnly)} type="button">
+            Toggle ReadOnly ({isReadOnly ? 'ON' : 'OFF'})
+          </button>
+          <button id="toggle-warning" onClick={() => setIsWarning(!isWarning)} type="button">
+            Toggle Warning ({isWarning ? 'ON' : 'OFF'})
+          </button>
+        </div>
+      </div>
+    </>
   );
 }
diff --git a/pages/textarea/style-permutations.page.tsx b/pages/textarea/style-permutations.page.tsx
new file mode 100644
index 0000000000..efde3c413e
--- /dev/null
+++ b/pages/textarea/style-permutations.page.tsx
@@ -0,0 +1,181 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Textarea, { TextareaProps } from '~components/textarea';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<TextareaProps>([
+  {
+    value: ['This is an example value'],
+    placeholder: [''],
+    disabled: [false, true],
+    readOnly: [false, true],
+    onChange: [() => {}],
+    style: [
+      {
+        root: {
+          borderColor: {
+            default: '#14b8a6',
+            hover: '#0f766e',
+            focus: '#0d9488',
+            disabled: '#99f6e4',
+            readonly: '#5eead4',
+          },
+          borderWidth: '2px',
+          borderRadius: '8px',
+          backgroundColor: {
+            default: '#99f6e4',
+            hover: '#5eead4',
+            focus: '#5eead4',
+            disabled: '#5eead4',
+            readonly: '#ccfbf1',
+          },
+          boxShadow: {
+            default: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            hover: '0 2px 4px rgba(20, 184, 166, 0.15)',
+            focus: '0 0 0 4px rgba(20, 184, 166, 0.2), 0 2px 4px rgba(20, 184, 166, 0.15)',
+            disabled: 'none',
+            readonly: '0 1px 2px rgba(0, 0, 0, 0.05)',
+          },
+          color: {
+            default: '#0d5c54',
+            hover: '#0d5c54',
+            focus: '#0d5c54',
+            disabled: '#0d5c54',
+            readonly: '#0f766e',
+          },
+          fontSize: '16px',
+          fontWeight: '500',
+          paddingBlock: '12px',
+          paddingInline: '16px',
+        },
+        placeholder: {
+          color: '#14b8a6',
+          fontSize: '14px',
+          fontStyle: 'italic',
+          fontWeight: '400',
+        },
+      },
+      {
+        root: {
+          borderColor: {
+            default: '#ef4444',
+            hover: '#b91c1c',
+            focus: '#dc2626',
+            disabled: '#fca5a5',
+            readonly: '#fca5a5',
+          },
+          borderWidth: '2px',
+          borderRadius: '8px',
+          backgroundColor: {
+            default: '#fecaca',
+            hover: '#fca5a5',
+            focus: '#fca5a5',
+            disabled: '#fca5a5',
+            readonly: '#fee2e2',
+          },
+          boxShadow: {
+            default: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            hover: '0 2px 4px rgba(239, 68, 68, 0.15)',
+            focus: '0 0 0 4px rgba(239, 68, 68, 0.2), 0 2px 4px rgba(239, 68, 68, 0.15)',
+            disabled: 'none',
+            readonly: '0 1px 2px rgba(0, 0, 0, 0.05)',
+          },
+          color: {
+            default: '#7f1d1d',
+            hover: '#7f1d1d',
+            focus: '#7f1d1d',
+            disabled: '#7f1d1d',
+            readonly: '#991b1b',
+          },
+        },
+      },
+      {
+        root: {
+          borderColor: {
+            default: '#f59e0b',
+            hover: '#b45309',
+            focus: '#d97706',
+            disabled: '#fcd34d',
+            readonly: '#fcd34d',
+          },
+          borderWidth: '2px',
+          borderRadius: '16px',
+          backgroundColor: {
+            default: '#fde68a',
+            hover: '#fcd34d',
+            focus: '#fcd34d',
+            disabled: '#fcd34d',
+            readonly: '#fef3c7',
+          },
+          boxShadow: {
+            default: '0 2px 8px rgba(245, 158, 11, 0.15)',
+            hover: '0 6px 16px rgba(245, 158, 11, 0.25)',
+            focus: '0 0 0 4px rgba(245, 158, 11, 0.25), 0 6px 16px rgba(245, 158, 11, 0.3)',
+            disabled: 'none',
+            readonly: '0 2px 8px rgba(245, 158, 11, 0.15)',
+          },
+          color: {
+            default: '#78350f',
+            hover: '#78350f',
+            focus: '#78350f',
+            disabled: '#78350f',
+            readonly: '#92400e',
+          },
+        },
+      },
+      {
+        root: {
+          borderColor: {
+            default: '#10b981',
+            hover: '#047857',
+            focus: '#059669',
+            disabled: '#6ee7b7',
+            readonly: '#6ee7b7',
+          },
+          borderWidth: '3px',
+          borderRadius: '0px',
+          backgroundColor: {
+            default: '#d1fae5',
+            hover: '#a7f3d0',
+            focus: '#a7f3d0',
+            disabled: '#a7f3d0',
+            readonly: '#ecfdf5',
+          },
+          boxShadow: {
+            default: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            hover: '0 2px 4px rgba(16, 185, 129, 0.1)',
+            focus: '0 0 0 4px rgba(16, 185, 129, 0.2), 0 2px 4px rgba(16, 185, 129, 0.15)',
+            disabled: 'none',
+            readonly: '0 1px 2px rgba(0, 0, 0, 0.05)',
+          },
+          color: {
+            default: '#064e3b',
+            hover: '#064e3b',
+            focus: '#064e3b',
+            disabled: '#064e3b',
+            readonly: '#065f46',
+          },
+        },
+      },
+    ],
+  },
+]);
+
+export default function TextareaStylePermutations() {
+  return (
+    <>
+      <h1>Textarea Style permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => <Textarea ariaLabel="Textarea field" {...permutation} />}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 8a783bfec3..11cc60509b 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -25350,6 +25350,236 @@ inadvertently sending data (such as user passwords) to third parties.",
       "optional": true,
       "type": "boolean",
     },
+    {
+      "inlineType": {
+        "name": "TextareaProps.Style",
+        "properties": [
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "name": "color",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontSize",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontStyle",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontWeight",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "placeholder",
+            "optional": true,
+            "type": "{ color?: string | undefined; fontSize?: string | undefined; fontStyle?: string | undefined; fontWeight?: string | undefined; }",
+          },
+          {
+            "inlineType": {
+              "name": "object",
+              "properties": [
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "name": "default",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "disabled",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "focus",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "hover",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "readonly",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "backgroundColor",
+                  "optional": true,
+                  "type": "{ default?: string | undefined; disabled?: string | undefined; focus?: string | undefined; hover?: string | undefined; readonly?: string | undefined; }",
+                },
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "name": "default",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "disabled",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "focus",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "hover",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "readonly",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "borderColor",
+                  "optional": true,
+                  "type": "{ default?: string | undefined; disabled?: string | undefined; focus?: string | undefined; hover?: string | undefined; readonly?: string | undefined; }",
+                },
+                {
+                  "name": "borderRadius",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "borderWidth",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "name": "default",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "disabled",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "focus",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "hover",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "readonly",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "boxShadow",
+                  "optional": true,
+                  "type": "{ default?: string | undefined; disabled?: string | undefined; focus?: string | undefined; hover?: string | undefined; readonly?: string | undefined; }",
+                },
+                {
+                  "inlineType": {
+                    "name": "object",
+                    "properties": [
+                      {
+                        "name": "default",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "disabled",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "focus",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "hover",
+                        "optional": true,
+                        "type": "string",
+                      },
+                      {
+                        "name": "readonly",
+                        "optional": true,
+                        "type": "string",
+                      },
+                    ],
+                    "type": "object",
+                  },
+                  "name": "color",
+                  "optional": true,
+                  "type": "{ default?: string | undefined; disabled?: string | undefined; focus?: string | undefined; hover?: string | undefined; readonly?: string | undefined; }",
+                },
+                {
+                  "name": "fontSize",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "fontWeight",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "paddingBlock",
+                  "optional": true,
+                  "type": "string",
+                },
+                {
+                  "name": "paddingInline",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "root",
+            "optional": true,
+            "type": "{ backgroundColor?: { default?: string | undefined; disabled?: string | undefined; focus?: string | undefined; hover?: string | undefined; readonly?: string | undefined; } | undefined; ... 8 more ...; paddingInline?: string | undefined; }",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "style",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "TextareaProps.Style",
+    },
     {
       "description": "Specifies the text entered into the form element.",
       "name": "value",
diff --git a/src/textarea/__tests__/styles.test.tsx b/src/textarea/__tests__/styles.test.tsx
new file mode 100644
index 0000000000..3ce30536f5
--- /dev/null
+++ b/src/textarea/__tests__/styles.test.tsx
@@ -0,0 +1,117 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import customCssProps from '../../internal/generated/custom-css-properties';
+import { getTextareaStyles } from '../styles';
+
+// Mock the environment module
+jest.mock('../../internal/environment', () => ({
+  SYSTEM: 'core',
+}));
+
+describe('getTextareaStyles', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  test('handles all possible style configurations', () => {
+    expect(getTextareaStyles(undefined)).toBeUndefined();
+    expect(getTextareaStyles({})).toBeUndefined();
+
+    const allStyles = {
+      root: {
+        borderRadius: '4px',
+        borderWidth: '1px',
+        fontSize: '14px',
+        fontWeight: '400',
+        paddingBlock: '8px',
+        paddingInline: '12px',
+        backgroundColor: {
+          default: '#ffffff',
+          disabled: '#f0f0f0',
+          hover: '#fafafa',
+          focus: '#ffffff',
+          readonly: '#ffffff',
+        },
+        borderColor: {
+          default: '#cccccc',
+          disabled: '#e0e0e0',
+          hover: '#999999',
+          focus: '#0073bb',
+          readonly: '#e0e0e0',
+        },
+        boxShadow: {
+          default: 'none',
+          disabled: 'none',
+          hover: '0 1px 2px rgba(0,0,0,0.1)',
+          focus: '0 0 0 2px #0073bb',
+          readonly: 'none',
+        },
+        color: {
+          default: '#000000',
+          disabled: '#999999',
+          hover: '#000000',
+          focus: '#000000',
+          readonly: '#000000',
+        },
+      },
+      placeholder: {
+        color: '#999999',
+        fontSize: '14px',
+        fontWeight: '400',
+        fontStyle: 'italic',
+      },
+    };
+
+    expect(getTextareaStyles(allStyles)).toEqual({
+      borderRadius: '4px',
+      borderWidth: '1px',
+      fontSize: '14px',
+      fontWeight: '400',
+      paddingBlock: '8px',
+      paddingInline: '12px',
+      [customCssProps.styleBackgroundDefault]: '#ffffff',
+      [customCssProps.styleBackgroundDisabled]: '#f0f0f0',
+      [customCssProps.styleBackgroundHover]: '#fafafa',
+      [customCssProps.styleBackgroundFocus]: '#ffffff',
+      [customCssProps.styleBackgroundReadonly]: '#ffffff',
+      [customCssProps.styleBorderColorDefault]: '#cccccc',
+      [customCssProps.styleBorderColorDisabled]: '#e0e0e0',
+      [customCssProps.styleBorderColorHover]: '#999999',
+      [customCssProps.styleBorderColorFocus]: '#0073bb',
+      [customCssProps.styleBorderColorReadonly]: '#e0e0e0',
+      [customCssProps.styleBoxShadowDefault]: 'none',
+      [customCssProps.styleBoxShadowDisabled]: 'none',
+      [customCssProps.styleBoxShadowHover]: '0 1px 2px rgba(0,0,0,0.1)',
+      [customCssProps.styleBoxShadowFocus]: '0 0 0 2px #0073bb',
+      [customCssProps.styleBoxShadowReadonly]: 'none',
+      [customCssProps.styleColorDefault]: '#000000',
+      [customCssProps.styleColorDisabled]: '#999999',
+      [customCssProps.styleColorHover]: '#000000',
+      [customCssProps.styleColorFocus]: '#000000',
+      [customCssProps.styleColorReadonly]: '#000000',
+      [customCssProps.stylePlaceholderColor]: '#999999',
+      [customCssProps.stylePlaceholderFontSize]: '14px',
+      [customCssProps.stylePlaceholderFontWeight]: '400',
+      [customCssProps.stylePlaceholderFontStyle]: 'italic',
+    });
+  });
+
+  test('returns undefined when SYSTEM is not core', async () => {
+    jest.resetModules();
+    jest.doMock('../../internal/environment', () => ({
+      SYSTEM: 'visual-refresh',
+    }));
+
+    const { getTextareaStyles: getTextareaStylesNonCore } = await import('../styles');
+
+    const style = {
+      root: {
+        borderRadius: '4px',
+      },
+    };
+
+    const result = getTextareaStylesNonCore(style);
+
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/src/textarea/index.tsx b/src/textarea/index.tsx
index 0ddf772f4c..c07ae53af0 100644
--- a/src/textarea/index.tsx
+++ b/src/textarea/index.tsx
@@ -16,6 +16,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import WithNativeAttributes from '../internal/utils/with-native-attributes';
 import { GeneratedAnalyticsMetadataTextareaComponent } from './analytics-metadata/interfaces';
 import { TextareaProps } from './interfaces';
+import { getTextareaStyles } from './styles';
 
 import styles from './styles.css.js';
 
@@ -43,6 +44,7 @@ const Textarea = React.forwardRef(
       autoFocus,
       ariaLabel,
       nativeTextareaAttributes,
+      style,
       ...rest
     }: TextareaProps,
     ref: Ref<TextareaProps.Ref>
@@ -116,6 +118,7 @@ const Textarea = React.forwardRef(
           nativeAttributes={nativeTextareaAttributes}
           ref={textareaRef}
           id={controlId}
+          style={getTextareaStyles(style)}
         />
       </span>
     );
diff --git a/src/textarea/interfaces.ts b/src/textarea/interfaces.ts
index 4e92f73f8b..de2f6055c3 100644
--- a/src/textarea/interfaces.ts
+++ b/src/textarea/interfaces.ts
@@ -50,6 +50,11 @@ export interface TextareaProps
    * @awsuiSystem core
    */
   nativeTextareaAttributes?: NativeAttributes<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
+
+  /**
+   * @awsuiSystem core
+   */
+  style?: TextareaProps.Style;
 }
 
 export namespace TextareaProps {
@@ -67,4 +72,49 @@ export namespace TextareaProps {
      */
     focus(): void;
   }
+
+  export interface Style {
+    root?: {
+      backgroundColor?: {
+        default?: string;
+        disabled?: string;
+        focus?: string;
+        hover?: string;
+        readonly?: string;
+      };
+      borderColor?: {
+        default?: string;
+        disabled?: string;
+        focus?: string;
+        hover?: string;
+        readonly?: string;
+      };
+      borderRadius?: string;
+      borderWidth?: string;
+      boxShadow?: {
+        default?: string;
+        disabled?: string;
+        focus?: string;
+        hover?: string;
+        readonly?: string;
+      };
+      color?: {
+        default?: string;
+        disabled?: string;
+        focus?: string;
+        hover?: string;
+        readonly?: string;
+      };
+      fontSize?: string;
+      fontWeight?: string;
+      paddingBlock?: string;
+      paddingInline?: string;
+    };
+    placeholder?: {
+      color?: string;
+      fontSize?: string;
+      fontStyle?: string;
+      fontWeight?: string;
+    };
+  }
 }
diff --git a/src/textarea/styles.scss b/src/textarea/styles.scss
index 3f0acc5ee0..5f7c792105 100644
--- a/src/textarea/styles.scss
+++ b/src/textarea/styles.scss
@@ -5,6 +5,8 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/foundation' as foundation;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .root {
   /* used for test-utils */
@@ -22,31 +24,77 @@
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
 
-  color: awsui.$color-text-body-default;
+  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
   max-inline-size: 100%;
   inline-size: 100%;
   display: block;
   box-sizing: border-box;
-  background-color: awsui.$color-background-input-default;
+  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
   border-start-start-radius: styles.$control-border-radius;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
+
+  border-block: awsui.$border-width-field solid
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+  border-inline: awsui.$border-width-field solid
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+
+  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
+
   @include styles.font-body-m;
 
+  &:hover {
+    border-color: var(
+      #{custom-props.$styleBorderColorHover},
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+    );
+    color: var(
+      #{custom-props.$styleColorHover},
+      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
+    );
+    background-color: var(
+      #{custom-props.$styleBackgroundHover},
+      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+    );
+    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
+  }
+
   &.textarea-readonly {
-    @include styles.form-readonly-element;
+    @include styles.form-readonly-element(
+      $background-color: var(
+          #{custom-props.$styleBackgroundReadonly},
+          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+        ),
+      $border-color: var(
+          #{custom-props.$styleBorderColorReadonly},
+          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+        )
+    );
+    color: var(
+      #{custom-props.$styleColorReadonly},
+      var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
+    );
+    box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
   }
 
   &::placeholder {
-    @include styles.form-placeholder;
+    @include styles.form-placeholder(
+      $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
+      $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
+      $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
+      $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
+    );
     opacity: 1;
   }
 
   &:focus {
-    @include styles.form-focus-element;
+    @include styles.form-focus-element(
+      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
+      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+    );
+    color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
+    background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
   }
 
   &:invalid {
@@ -55,9 +103,13 @@
   }
 
   &:disabled {
-    @include styles.form-disabled-element;
-    cursor: default;
-
+    @include styles.form-disabled-element(
+      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
+      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
+      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
+      $cursor: default
+    );
+    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
     &::placeholder {
       @include styles.form-placeholder-disabled;
       opacity: 1;
diff --git a/src/textarea/styles.tsx b/src/textarea/styles.tsx
new file mode 100644
index 0000000000..c31e80006c
--- /dev/null
+++ b/src/textarea/styles.tsx
@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { TextareaProps } from './interfaces';
+
+export function getTextareaStyles(style: TextareaProps['style']) {
+  let properties = {};
+
+  if (style?.root && SYSTEM === 'core') {
+    properties = {
+      borderRadius: style?.root?.borderRadius,
+      borderWidth: style?.root?.borderWidth,
+      fontSize: style?.root?.fontSize,
+      fontWeight: style?.root?.fontWeight,
+      paddingBlock: style?.root?.paddingBlock,
+      paddingInline: style?.root?.paddingInline,
+      ...(style?.root?.backgroundColor && {
+        [customCssProps.styleBackgroundDefault]: style.root.backgroundColor?.default,
+        [customCssProps.styleBackgroundDisabled]: style.root.backgroundColor?.disabled,
+        [customCssProps.styleBackgroundHover]: style.root.backgroundColor?.hover,
+        [customCssProps.styleBackgroundFocus]: style.root.backgroundColor?.focus,
+        [customCssProps.styleBackgroundReadonly]: style.root.backgroundColor?.readonly,
+      }),
+      ...(style?.root?.borderColor && {
+        [customCssProps.styleBorderColorDefault]: style.root.borderColor?.default,
+        [customCssProps.styleBorderColorDisabled]: style.root.borderColor?.disabled,
+        [customCssProps.styleBorderColorHover]: style.root.borderColor?.hover,
+        [customCssProps.styleBorderColorFocus]: style.root.borderColor?.focus,
+        [customCssProps.styleBorderColorReadonly]: style.root.borderColor?.readonly,
+      }),
+      ...(style?.root?.boxShadow && {
+        [customCssProps.styleBoxShadowDefault]: style.root.boxShadow?.default,
+        [customCssProps.styleBoxShadowDisabled]: style.root.boxShadow?.disabled,
+        [customCssProps.styleBoxShadowHover]: style.root.boxShadow?.hover,
+        [customCssProps.styleBoxShadowFocus]: style.root.boxShadow?.focus,
+        [customCssProps.styleBoxShadowReadonly]: style.root.boxShadow?.readonly,
+      }),
+      ...(style?.root?.color && {
+        [customCssProps.styleColorDefault]: style.root.color?.default,
+        [customCssProps.styleColorDisabled]: style.root.color?.disabled,
+        [customCssProps.styleColorHover]: style.root.color?.hover,
+        [customCssProps.styleColorFocus]: style.root.color?.focus,
+        [customCssProps.styleColorReadonly]: style.root.color?.readonly,
+      }),
+      ...(style?.placeholder && {
+        [customCssProps.stylePlaceholderColor]: style.placeholder?.color,
+        [customCssProps.stylePlaceholderFontSize]: style.placeholder?.fontSize,
+        [customCssProps.stylePlaceholderFontWeight]: style.placeholder?.fontWeight,
+        [customCssProps.stylePlaceholderFontStyle]: style.placeholder?.fontStyle,
+      }),
+    };
+
+    return properties;
+  }
+}

From 078fd3002803d2dc540a6163f584e72f459fd5d0 Mon Sep 17 00:00:00 2001
From: Maximilian Schoell <schomax@amazon.de>
Date: Mon, 3 Nov 2025 21:21:43 +0100
Subject: [PATCH 2/2] tests: add pseudo selector testing page

---
 pages/textarea/integration.page.tsx      | 101 +++-------------------
 pages/textarea/pseudo-selectors.page.tsx | 104 +++++++++++++++++++++++
 2 files changed, 117 insertions(+), 88 deletions(-)
 create mode 100644 pages/textarea/pseudo-selectors.page.tsx

diff --git a/pages/textarea/integration.page.tsx b/pages/textarea/integration.page.tsx
index 7373926222..961f50dffd 100644
--- a/pages/textarea/integration.page.tsx
+++ b/pages/textarea/integration.page.tsx
@@ -8,94 +8,19 @@ export default function Page() {
   const [value, setValue] = useState('');
   const [submitStatus, setSubmitStatus] = useState(false);
 
-  const [styleableValue, setStyleableValue] = useState('Test value');
-  const [isInvalid, setIsInvalid] = useState(false);
-  const [isDisabled, setIsDisabled] = useState(false);
-  const [isReadOnly, setIsReadOnly] = useState(false);
-  const [isWarning, setIsWarning] = useState(false);
-
   return (
-    <>
-      <div id="test" style={{ padding: 10 }}>
-        <h1>Textarea submit test</h1>
-        {submitStatus ? <div id="submit-success">Submitted</div> : null}
-        <form
-          onSubmit={event => {
-            console.log('submitted');
-            event.preventDefault();
-            setSubmitStatus(true);
-          }}
-        >
-          <Textarea value={value} ariaLabel="textarea" onChange={event => setValue(event.detail.value)} />
-        </form>
-      </div>
-
-      <div id="styleable-textarea-test" style={{ padding: 10 }}>
-        <h1>Textarea Style API with State Toggles</h1>
-        <div style={{ marginBottom: '20px' }}>
-          <Textarea
-            ariaLabel="Styleable test textarea"
-            value={styleableValue}
-            onChange={event => setStyleableValue(event.detail.value)}
-            invalid={isInvalid}
-            disabled={isDisabled}
-            readOnly={isReadOnly}
-            warning={isWarning}
-            placeholder="Enter text"
-            data-testid="styleable-textarea"
-            style={{
-              root: {
-                borderColor: {
-                  default: '#3b82f6',
-                  hover: '#2563eb',
-                  focus: '#1d4ed8',
-                  disabled: '#93c5fd',
-                  readonly: '#60a5fa',
-                },
-                borderWidth: '2px',
-                borderRadius: '8px',
-                backgroundColor: {
-                  default: '#dbeafe',
-                  hover: '#bfdbfe',
-                  focus: '#bfdbfe',
-                  disabled: '#eff6ff',
-                  readonly: '#f0f9ff',
-                },
-                color: {
-                  default: '#1e40af',
-                  hover: '#1e40af',
-                  focus: '#1e3a8a',
-                  disabled: '#93c5fd',
-                  readonly: '#3b82f6',
-                },
-                fontSize: '16px',
-                fontWeight: '500',
-                paddingBlock: '10px',
-                paddingInline: '14px',
-              },
-              placeholder: {
-                color: '#60a5fa',
-                fontSize: '14px',
-                fontStyle: 'italic',
-              },
-            }}
-          />
-        </div>
-        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-          <button id="toggle-invalid" onClick={() => setIsInvalid(!isInvalid)} type="button">
-            Toggle Invalid ({isInvalid ? 'ON' : 'OFF'})
-          </button>
-          <button id="toggle-disabled" onClick={() => setIsDisabled(!isDisabled)} type="button">
-            Toggle Disabled ({isDisabled ? 'ON' : 'OFF'})
-          </button>
-          <button id="toggle-readonly" onClick={() => setIsReadOnly(!isReadOnly)} type="button">
-            Toggle ReadOnly ({isReadOnly ? 'ON' : 'OFF'})
-          </button>
-          <button id="toggle-warning" onClick={() => setIsWarning(!isWarning)} type="button">
-            Toggle Warning ({isWarning ? 'ON' : 'OFF'})
-          </button>
-        </div>
-      </div>
-    </>
+    <div id="test" style={{ padding: 10 }}>
+      <h1>Textarea submit test</h1>
+      {submitStatus ? <div id="submit-success">Submitted</div> : null}
+      <form
+        onSubmit={event => {
+          console.log('submitted');
+          event.preventDefault();
+          setSubmitStatus(true);
+        }}
+      >
+        <Textarea value={value} ariaLabel="textarea" onChange={event => setValue(event.detail.value)} />
+      </form>
+    </div>
   );
 }
diff --git a/pages/textarea/pseudo-selectors.page.tsx b/pages/textarea/pseudo-selectors.page.tsx
new file mode 100644
index 0000000000..5f72e65709
--- /dev/null
+++ b/pages/textarea/pseudo-selectors.page.tsx
@@ -0,0 +1,104 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Textarea from '~components/textarea';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function TextareaPseudoSelectorsPage() {
+  const [value, setValue] = useState('Test value');
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isWarning, setIsWarning] = useState(false);
+  const [customStyling, setCustomStyling] = useState(false);
+
+  const customStyle = {
+    root: {
+      borderColor: {
+        default: '#3b82f6',
+        hover: '#2563eb',
+        focus: '#1d4ed8',
+        disabled: '#93c5fd',
+        readonly: '#60a5fa',
+      },
+      borderWidth: '2px',
+      borderRadius: '8px',
+      backgroundColor: {
+        default: '#dbeafe',
+        hover: '#bfdbfe',
+        focus: '#bfdbfe',
+        disabled: '#eff6ff',
+        readonly: '#f0f9ff',
+      },
+      color: {
+        default: '#1e40af',
+        hover: '#1e40af',
+        focus: '#1e3a8a',
+        disabled: '#93c5fd',
+        readonly: '#3b82f6',
+      },
+      fontSize: '16px',
+      fontWeight: '500',
+      paddingBlock: '10px',
+      paddingInline: '14px',
+    },
+    placeholder: {
+      color: '#60a5fa',
+      fontSize: '14px',
+      fontStyle: 'italic',
+    },
+  };
+
+  return (
+    <>
+      <h1>Textarea Style API - Pseudo Selectors</h1>
+      <ScreenshotArea>
+        <Textarea
+          ariaLabel="Test textarea"
+          value={value}
+          onChange={event => setValue(event.detail.value)}
+          invalid={isInvalid}
+          disabled={isDisabled}
+          readOnly={isReadOnly}
+          warning={isWarning}
+          placeholder="Enter text"
+          data-testid="test-textarea"
+          style={customStyling ? customStyle : undefined}
+        />
+      </ScreenshotArea>
+
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginTop: '20px' }}>
+        <button id="toggle-styling" onClick={() => setCustomStyling(!customStyling)} type="button">
+          Toggle Custom Styling ({customStyling ? 'ON' : 'OFF'})
+        </button>
+        <button id="toggle-invalid" onClick={() => setIsInvalid(!isInvalid)} type="button">
+          Toggle Invalid ({isInvalid ? 'ON' : 'OFF'})
+        </button>
+        <button id="toggle-disabled" onClick={() => setIsDisabled(!isDisabled)} type="button">
+          Toggle Disabled ({isDisabled ? 'ON' : 'OFF'})
+        </button>
+        <button id="toggle-readonly" onClick={() => setIsReadOnly(!isReadOnly)} type="button">
+          Toggle ReadOnly ({isReadOnly ? 'ON' : 'OFF'})
+        </button>
+        <button id="toggle-warning" onClick={() => setIsWarning(!isWarning)} type="button">
+          Toggle Warning ({isWarning ? 'ON' : 'OFF'})
+        </button>
+        <button
+          id="reset-all"
+          onClick={() => {
+            setCustomStyling(false);
+            setIsInvalid(false);
+            setIsDisabled(false);
+            setIsReadOnly(false);
+            setIsWarning(false);
+          }}
+          type="button"
+        >
+          Reset All
+        </button>
+      </div>
+    </>
+  );
+}