From 8ad3aff8958dbf54b8a6923783bf4aeb5c211cc1 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Mon, 15 Jun 2026 13:16:53 -0500
Subject: [PATCH 01/21] feat: Update TextInput border radius

---
 modules/react/text-input/lib/TextInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index 5cb1be52ef..1ecfb96a6e 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -27,7 +27,7 @@ export const textInputStencil = createStencil({
     display: 'block',
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.legacy.shape.md,
+    borderRadius: system.shape.lg,
     height: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: system.legacy.padding.xs, // Compensate for border

From b3f1b31b790d7a4ee33146c49198e4d6e5dc4f69 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Mon, 15 Jun 2026 13:26:44 -0500
Subject: [PATCH 02/21] feat: Remove background color from Caution and Error
 states for TextInput/Area

---
 modules/react/text-input/lib/TextInput.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index 1ecfb96a6e..82345c444c 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -74,7 +74,6 @@ export const textInputStencil = createStencil({
         borderColor: system.legacy.color.brand.border.critical,
         // borderWidth: px2rem(2),
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
-        backgroundColor: system.legacy.color.brand.surface.critical.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: system.legacy.color.brand.border.critical,
@@ -89,7 +88,6 @@ export const textInputStencil = createStencil({
       caution: {
         borderColor: system.legacy.color.brand.border.caution,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`,
-        backgroundColor: system.legacy.color.brand.surface.caution.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: system.legacy.color.brand.border.caution,

From bf299e6d3671553d0e2a7672aa2acf638fddded6 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Tue, 16 Jun 2026 13:04:09 -0500
Subject: [PATCH 03/21] fix: Preserve use of legacy tokens for TextInput

---
 modules/react/text-input/lib/TextInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index 82345c444c..bb9a0421e2 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -27,7 +27,7 @@ export const textInputStencil = createStencil({
     display: 'block',
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.shape.lg,
+    borderRadius: system.legacy.shape.lg,
     height: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: system.legacy.padding.xs, // Compensate for border

From cfea945805575ade891a55e3af5c0084a4e3f8c6 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Mon, 22 Jun 2026 16:49:55 -0500
Subject: [PATCH 04/21] feat: Update styles for FormFieldGroupList

---
 modules/react/form-field/lib/FormFieldGroupList.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx
index a8e8a64fc7..802539eb6d 100644
--- a/modules/react/form-field/lib/FormFieldGroupList.tsx
+++ b/modules/react/form-field/lib/FormFieldGroupList.tsx
@@ -11,9 +11,9 @@ const formFieldGroupListStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.legacy.shape.md,
+    borderRadius: system.legacy.shape.lg,
     gap: system.legacy.gap.sm,
-    padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.xxs}`,
     margin: `0 ${calc.negate(base.legacy.size150)}`,
     transition: '100ms box-shadow',
     width: 'fit-content',
@@ -21,11 +21,9 @@ const formFieldGroupListStencil = createStencil({
   modifiers: {
     error: {
       error: {
-        backgroundColor: system.legacy.color.brand.surface.critical.default,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
       },
       caution: {
-        backgroundColor: system.legacy.color.brand.surface.caution.default,
         boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.border.caution}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.focus.caution.inner}`,
       },
     },

From f07ad88c203d132ff9729e868c1a36667a7b7df3 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 14:07:32 -0500
Subject: [PATCH 05/21] docs: Add visual changes to v16 Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 44 +++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index 2ae1d3c43e..16534bed12 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -86,11 +86,51 @@ yarn remove @workday/canvas-kit-codemod
 
 ## New Components
 
-[Content will be added]
+> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
+> unless specified otherwise.
 
 ## Component Updates
 
-[Content will be added]
+### Color Picker
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- **Sana Canvas:** swatch shape is now **6px** (previously **4px**).
+
+### Form Field
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
+  in v15, this shape is primarily visible for error and caution states.
+- Block-level padding and inline-level padding for grouped inputs is now **8px** and **4px**,
+  respectively. Again, this padding is primarily visible for error and caution states.
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Area
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
 
 ## Deprecations
 

From bcdef56bee5ffc3b6ab12e847a1c465833583a6c Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 15:12:55 -0500
Subject: [PATCH 06/21] feat: Add cornerShapeStencil to TextInput,
 FormFieldGroupList, and ColorSwatch

---
 .../react/color-picker/lib/parts/ColorSwatch.tsx |  7 ++++---
 .../react/form-field/lib/FormFieldGroupList.tsx  |  5 +++--
 modules/react/text-input/lib/TextInput.tsx       | 16 +++++++++++++---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/modules/react/color-picker/lib/parts/ColorSwatch.tsx b/modules/react/color-picker/lib/parts/ColorSwatch.tsx
index c924b998d2..a885facd17 100644
--- a/modules/react/color-picker/lib/parts/ColorSwatch.tsx
+++ b/modules/react/color-picker/lib/parts/ColorSwatch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, pickForegroundColor} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
@@ -12,15 +12,16 @@ export interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const colorPickerColorSwatchStencil = createStencil({
+  extends: cornerShapeStencil,
   vars: {
     color: '',
     iconColor: '',
   },
   base: ({color, iconColor}) => ({
     [systemIconStencil.vars.color]: iconColor,
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
     width: system.legacy.size.xxs,
     height: system.legacy.size.xxs,
-    borderRadius: system.legacy.shape.sm,
     backgroundColor: color,
     display: 'flex',
     alignItems: 'center',
@@ -50,7 +51,7 @@ export const ColorSwatch = ({color, showCheck = false, ...elemProps}: ColorSwatc
         colorPickerColorSwatchStencil({
           color,
           iconColor: pickForegroundColor(color),
-          withShadow: showCheck || lowerCasedColor === '#ffffff',
+          withShadow: showCheck || lowerCasedColor === '#ffffff' ? 'true' : undefined,
         })
       )}
     >
diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx
index 802539eb6d..ecbc4da6ae 100644
--- a/modules/react/form-field/lib/FormFieldGroupList.tsx
+++ b/modules/react/form-field/lib/FormFieldGroupList.tsx
@@ -1,4 +1,4 @@
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
@@ -8,10 +8,11 @@ import {useFormFieldModel} from './hooks';
 export interface FormFieldGroupListProps extends CSProps, FlexProps {}
 
 const formFieldGroupListStencil = createStencil({
+  extends: cornerShapeStencil,
   base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.legacy.shape.lg,
     gap: system.legacy.gap.sm,
     padding: `${system.legacy.padding.xs} ${system.legacy.padding.xxs}`,
     margin: `0 ${calc.negate(base.legacy.size150)}`,
diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx
index bb9a0421e2..db6e2c7eff 100644
--- a/modules/react/text-input/lib/TextInput.tsx
+++ b/modules/react/text-input/lib/TextInput.tsx
@@ -1,4 +1,9 @@
-import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common';
+import {
+  ErrorType,
+  GrowthBehavior,
+  cornerShapeStencil,
+  createComponent,
+} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {CSProps, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -15,10 +20,12 @@ export interface TextInputProps extends GrowthBehavior, CSProps {
 }
 
 export const textInputStencil = createStencil({
+  extends: cornerShapeStencil,
   vars: {
     width: '',
   },
   base: ({width}) => ({
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
     fontFamily: system.fontFamily.default,
     fontSize: system.legacy.fontSize.subtext.lg,
     fontWeight: system.fontWeight.normal,
@@ -27,7 +34,6 @@ export const textInputStencil = createStencil({
     display: 'block',
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.legacy.shape.lg,
     height: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: system.legacy.padding.xs, // Compensate for border
@@ -115,7 +121,11 @@ export const TextInput = createComponent('input')({
         ref={ref}
         {...mergeStyles(
           elemProps,
-          textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
+          textInputStencil({
+            width: typeof width === 'number' ? px2rem(width) : width,
+            grow: grow === true ? 'true' : grow === false ? 'false' : undefined,
+            error,
+          })
         )}
       />
     );

From 37afba81035f9cee640ea7bd9cd30f5c39a671fe Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 15:39:56 -0500
Subject: [PATCH 07/21] docs: Update Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index 463b06e10e..c1baaa0c40 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -93,6 +93,14 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Updates
 
+### Color Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+
 ### Color Picker
 
 **PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
@@ -111,6 +119,9 @@ yarn remove @workday/canvas-kit-codemod
   in v15, this shape is primarily visible for error and caution states.
 - Block-level padding and inline-level padding for grouped inputs is now **8px** and **4px**,
   respectively. Again, this padding is primarily visible for error and caution states.
+- Block padding for grouped inputs is now **8px** (previously **10px** and **8px**). Inline padding
+  for grouped inputs is now **4px** (previously **12px**). Again, this padding is primarily visible
+  for error and caution states.
 - Error and caution states no longer display a status background color; only the standard background
   is shown.
 

From f7805ddcd64592e4ceb94ad1058fb6f04e12627e Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 16:07:27 -0500
Subject: [PATCH 08/21] chore: Add Sana Theme Color Picker visual tests

---
 .../visual-testing/ColorPicker.stories.tsx    | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
index 08138ac104..5e326eea5c 100644
--- a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
+++ b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
@@ -24,33 +24,40 @@ export const ColorPickerStates = {
     },
   },
   render: () => (
-    <StaticStates>
-      <ComponentStatesTable
-        rowProps={[
-          {label: 'Default', props: {}},
-          {label: 'with Hex Input', props: {showCustomHexInput: true}},
-          {
-            label: 'With Reset',
-            props: {
-              resetColor: defaultColorSet.blueberry400,
-              resetLabel: 'Reset',
-              onColorReset: noop,
-            },
-          },
-          {
-            label: 'With Reset and Hex Input',
-            props: {
-              showCustomHexInput: true,
-              resetColor: defaultColorSet.blueberry400,
-              resetLabel: 'Reset',
-              onColorReset: noop,
-            },
-          },
-        ]}
-        columnProps={[{label: 'Default', props: {}}]}
-      >
-        {props => <ColorPicker {...props} onColorChange={noop} />}
-      </ComponentStatesTable>
-    </StaticStates>
+    <>
+      {[undefined, 'sana-canvas'].map(theme => (
+        <>
+          {theme && <h3>{theme}</h3>}
+          <StaticStates data-theme={theme}>
+            <ComponentStatesTable
+              rowProps={[
+                {label: 'Default', props: {}},
+                {label: 'with Hex Input', props: {showCustomHexInput: true}},
+                {
+                  label: 'With Reset',
+                  props: {
+                    resetColor: defaultColorSet.blueberry400,
+                    resetLabel: 'Reset',
+                    onColorReset: noop,
+                  },
+                },
+                {
+                  label: 'With Reset and Hex Input',
+                  props: {
+                    showCustomHexInput: true,
+                    resetColor: defaultColorSet.blueberry400,
+                    resetLabel: 'Reset',
+                    onColorReset: noop,
+                  },
+                },
+              ]}
+              columnProps={[{label: 'Default', props: {}}]}
+            >
+              {props => <ColorPicker {...props} onColorChange={noop} />}
+            </ComponentStatesTable>
+          </StaticStates>
+        </>
+      ))}
+    </>
   ),
 };

From 92518ad1bb0621e15e5eaa09b1879219873bbd54 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 17:32:02 -0500
Subject: [PATCH 09/21] docs: Fix Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index c1baaa0c40..4dfb75917b 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -88,11 +88,13 @@ yarn remove @workday/canvas-kit-codemod
 
 ## New Components
 
-> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
-> unless specified otherwise.
+[Content will be added]
 
 ## Component Updates
 
+> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
+> unless specified otherwise.
+
 ### Color Input
 
 **PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
@@ -117,8 +119,6 @@ yarn remove @workday/canvas-kit-codemod
 
 - Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
   in v15, this shape is primarily visible for error and caution states.
-- Block-level padding and inline-level padding for grouped inputs is now **8px** and **4px**,
-  respectively. Again, this padding is primarily visible for error and caution states.
 - Block padding for grouped inputs is now **8px** (previously **10px** and **8px**). Inline padding
   for grouped inputs is now **4px** (previously **12px**). Again, this padding is primarily visible
   for error and caution states.

From ae9ae1efd961deec629d475aee3091b777318b59 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 17:35:16 -0500
Subject: [PATCH 10/21] chore: Revert update to Color Picker visual testing
 stories

---
 .../visual-testing/ColorPicker.stories.tsx    | 63 +++++++++----------
 1 file changed, 28 insertions(+), 35 deletions(-)

diff --git a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
index 5e326eea5c..08138ac104 100644
--- a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
+++ b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
@@ -24,40 +24,33 @@ export const ColorPickerStates = {
     },
   },
   render: () => (
-    <>
-      {[undefined, 'sana-canvas'].map(theme => (
-        <>
-          {theme && <h3>{theme}</h3>}
-          <StaticStates data-theme={theme}>
-            <ComponentStatesTable
-              rowProps={[
-                {label: 'Default', props: {}},
-                {label: 'with Hex Input', props: {showCustomHexInput: true}},
-                {
-                  label: 'With Reset',
-                  props: {
-                    resetColor: defaultColorSet.blueberry400,
-                    resetLabel: 'Reset',
-                    onColorReset: noop,
-                  },
-                },
-                {
-                  label: 'With Reset and Hex Input',
-                  props: {
-                    showCustomHexInput: true,
-                    resetColor: defaultColorSet.blueberry400,
-                    resetLabel: 'Reset',
-                    onColorReset: noop,
-                  },
-                },
-              ]}
-              columnProps={[{label: 'Default', props: {}}]}
-            >
-              {props => <ColorPicker {...props} onColorChange={noop} />}
-            </ComponentStatesTable>
-          </StaticStates>
-        </>
-      ))}
-    </>
+    <StaticStates>
+      <ComponentStatesTable
+        rowProps={[
+          {label: 'Default', props: {}},
+          {label: 'with Hex Input', props: {showCustomHexInput: true}},
+          {
+            label: 'With Reset',
+            props: {
+              resetColor: defaultColorSet.blueberry400,
+              resetLabel: 'Reset',
+              onColorReset: noop,
+            },
+          },
+          {
+            label: 'With Reset and Hex Input',
+            props: {
+              showCustomHexInput: true,
+              resetColor: defaultColorSet.blueberry400,
+              resetLabel: 'Reset',
+              onColorReset: noop,
+            },
+          },
+        ]}
+        columnProps={[{label: 'Default', props: {}}]}
+      >
+        {props => <ColorPicker {...props} onColorChange={noop} />}
+      </ComponentStatesTable>
+    </StaticStates>
   ),
 };

From 6f6ed4b2e42958de6751068e71fbb8db8978355d Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 17:42:33 -0500
Subject: [PATCH 11/21] chore: Default Color Picker stories to Sana Canvas
 theme

---
 .../color-picker/stories/examples/InputInteraction.tsx          | 2 +-
 .../color-picker/stories/visual-testing/ColorPicker.stories.tsx | 2 +-
 modules/react/color-picker/stories/visualTesting.stories.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx b/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
index 65d26b4733..5c85495024 100644
--- a/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
+++ b/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
@@ -10,7 +10,7 @@ export const InputInteraction = () => {
     textAreaRef.current?.focus();
   };
   return (
-    <div className="App">
+    <div className="App" data-theme="sana-canvas">
       <ColorPicker showCustomHexInput onColorChange={handleColorChange} />
       <label htmlFor="test">Text Area</label>
       <textarea id="test" style={{color: color}} ref={textAreaRef} />
diff --git a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
index 08138ac104..c09ced1a17 100644
--- a/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
+++ b/modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx
@@ -24,7 +24,7 @@ export const ColorPickerStates = {
     },
   },
   render: () => (
-    <StaticStates>
+    <StaticStates data-theme="sana-canvas">
       <ComponentStatesTable
         rowProps={[
           {label: 'Default', props: {}},
diff --git a/modules/react/color-picker/stories/visualTesting.stories.tsx b/modules/react/color-picker/stories/visualTesting.stories.tsx
index c404d5d1d2..9b1ee7fdef 100644
--- a/modules/react/color-picker/stories/visualTesting.stories.tsx
+++ b/modules/react/color-picker/stories/visualTesting.stories.tsx
@@ -21,7 +21,7 @@ export default {
 };
 
 export const ColorInputStates = () => (
-  <StaticStates>
+  <StaticStates data-theme="sana-canvas">
     <ComponentStatesTable
       rowProps={permutateProps(
         {

From 07db652e5fd54f24e80777d31fc28b6e1bdfc352 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 17:48:57 -0500
Subject: [PATCH 12/21] chore: Default Form Field, Text Area, and Text Input
 stories to Sana Canvas theme

---
 modules/react/form-field/stories/visualTesting.stories.tsx | 2 +-
 modules/react/text-area/stories/visualTesting.stories.tsx  | 2 +-
 modules/react/text-input/stories/visualTesting.stories.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/react/form-field/stories/visualTesting.stories.tsx b/modules/react/form-field/stories/visualTesting.stories.tsx
index 17d812751d..65ba91d01f 100644
--- a/modules/react/form-field/stories/visualTesting.stories.tsx
+++ b/modules/react/form-field/stories/visualTesting.stories.tsx
@@ -21,7 +21,7 @@ export default {
 };
 
 export const FormFieldStates = () => (
-  <StaticStates>
+  <StaticStates data-theme="sana-canvas">
     <ComponentStatesTable
       rowProps={[
         {label: 'Required', props: {isRequired: true}},
diff --git a/modules/react/text-area/stories/visualTesting.stories.tsx b/modules/react/text-area/stories/visualTesting.stories.tsx
index f3a3144030..5cbdb5f506 100644
--- a/modules/react/text-area/stories/visualTesting.stories.tsx
+++ b/modules/react/text-area/stories/visualTesting.stories.tsx
@@ -20,7 +20,7 @@ export default {
 };
 
 export const TextAreaStates = () => (
-  <StaticStates>
+  <StaticStates data-theme="sana-canvas">
     <ComponentStatesTable
       rowProps={permutateProps(
         {
diff --git a/modules/react/text-input/stories/visualTesting.stories.tsx b/modules/react/text-input/stories/visualTesting.stories.tsx
index c39826c549..82822dd5a6 100644
--- a/modules/react/text-input/stories/visualTesting.stories.tsx
+++ b/modules/react/text-input/stories/visualTesting.stories.tsx
@@ -24,7 +24,7 @@ export default {
 };
 
 export const TextInputStates = () => (
-  <StaticStates>
+  <StaticStates data-theme="sana-canvas">
     <ComponentStatesTable
       rowProps={permutateProps(
         {
@@ -88,7 +88,7 @@ TextInputThemedStates.parameters = {
 };
 
 export const InputGroupStates = () => (
-  <StaticStates>
+  <StaticStates data-theme="sana-canvas">
     <ComponentStatesTable
       rowProps={[
         {

From 9bde3e38928080662284f009122b370bbb99efcd Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:23:50 -0500
Subject: [PATCH 13/21] chore: Add v16 Upgrade Guide to routes file

---
 .storybook/routes.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.storybook/routes.js b/.storybook/routes.js
index a921a0cb03..5f17176fb5 100644
--- a/.storybook/routes.js
+++ b/.storybook/routes.js
@@ -84,6 +84,9 @@ const routes = {
   '/help/upgrade-guides/canvas-v15-upgrade-guide/': 'guides-upgrade-guides-v15-0-overview--docs',
   '/help/upgrade-guides/canvas-v15-upgrade-guide/#tab=visual-changes':
     'guides-upgrade-guides-v15-0-visual-changes--docs',
+  '/help/upgrade-guides/canvas-v16-upgrade-guide/': 'guides-upgrade-guides-v16-0-overview--docs',
+  '/help/upgrade-guides/canvas-v16-upgrade-guide/#tab=visual-changes':
+    'guides-upgrade-guides-v16-0-visual-changes--docs',
 };
 
 export default routes;

From 92b234ce6e49bb901df07ad87d8fb4b3bf5cf659 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:25:06 -0500
Subject: [PATCH 14/21] docs: Add Sana Canvas example to Text Input

---
 .../react/text-input/stories/TextInput.mdx    | 19 ++++++++++++-----
 .../text-input/stories/TextInput.stories.ts   |  4 ++++
 .../stories/examples/SanaCanvas.tsx           | 21 +++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 modules/react/text-input/stories/examples/SanaCanvas.tsx

diff --git a/modules/react/text-input/stories/TextInput.mdx b/modules/react/text-input/stories/TextInput.mdx
index 7286e5bcf7..bf11361ca5 100644
--- a/modules/react/text-input/stories/TextInput.mdx
+++ b/modules/react/text-input/stories/TextInput.mdx
@@ -1,10 +1,7 @@
 import {Meta} from '@storybook/blocks';
 
-import {
-  ExampleCodeBlock,
-  Specifications,
-  SymbolDoc,
-} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+
 import {Basic} from './examples/Basic';
 import {Disabled} from './examples/Disabled';
 import {Grow} from './examples/Grow';
@@ -13,6 +10,7 @@ import {LabelPosition} from './examples/LabelPosition';
 import {Placeholder} from './examples/Placeholder';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
+import {SanaCanvas} from './examples/SanaCanvas';
 
 import TextInputStoriesMeta from './TextInput.stories';
 
@@ -32,6 +30,17 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+### Sana Canvas Theme
+
+To apply the Sana Canvas theme to Text Input, apply the `data-theme="sana-canvas"` attribute to your
+component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
+area.
+
+This example applies `data-theme="sana-canvas"` to the wrapping
+[Form Field](/components/inputs/form-field/).
+
+<ExampleCodeBlock code={SanaCanvas} />
+
 ### Basic Example
 
 Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
diff --git a/modules/react/text-input/stories/TextInput.stories.ts b/modules/react/text-input/stories/TextInput.stories.ts
index fd60a45796..7c5cd7c660 100644
--- a/modules/react/text-input/stories/TextInput.stories.ts
+++ b/modules/react/text-input/stories/TextInput.stories.ts
@@ -11,6 +11,7 @@ import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {Placeholder as PlaceholderExample} from './examples/Placeholder';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
+import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/Text Input',
@@ -49,3 +50,6 @@ export const Required: Story = {
 export const Icons: Story = {
   render: IconsExample,
 };
+export const SanaCanvas: Story = {
+  render: SanaCanvasExample,
+};
diff --git a/modules/react/text-input/stories/examples/SanaCanvas.tsx b/modules/react/text-input/stories/examples/SanaCanvas.tsx
new file mode 100644
index 0000000000..835f40099e
--- /dev/null
+++ b/modules/react/text-input/stories/examples/SanaCanvas.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export const SanaCanvas = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField data-theme="sana-canvas">
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      </FormField.Field>
+    </FormField>
+  );
+};

From 646df839369f3d700951ebc2c638cc82a419d5b4 Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:28:56 -0500
Subject: [PATCH 15/21] docs: Add Sana Canvas example to Text Area

---
 modules/react/text-area/stories/TextArea.mdx  | 12 +++++++++++
 .../text-area/stories/TextArea.stories.ts     |  4 ++++
 .../text-area/stories/examples/SanaCanvas.tsx | 21 +++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 modules/react/text-area/stories/examples/SanaCanvas.tsx

diff --git a/modules/react/text-area/stories/TextArea.mdx b/modules/react/text-area/stories/TextArea.mdx
index d03f4ae0cc..d099924b96 100644
--- a/modules/react/text-area/stories/TextArea.mdx
+++ b/modules/react/text-area/stories/TextArea.mdx
@@ -15,6 +15,7 @@ import {Placeholder} from './examples/Placeholder';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
 import {ResizeConstraints} from './examples/ResizeConstraints';
+import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={TextAreaStoriesMeta} />
 
@@ -32,6 +33,17 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+### Sana Canvas Theme
+
+To apply the Sana Canvas theme to Text Area, apply the `data-theme="sana-canvas"` attribute to your
+component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
+area.
+
+This example applies `data-theme="sana-canvas"` to the wrapping
+[Form Field](/components/inputs/form-field/).
+
+<ExampleCodeBlock code={SanaCanvas} />
+
 ### Basic Example
 
 Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
diff --git a/modules/react/text-area/stories/TextArea.stories.ts b/modules/react/text-area/stories/TextArea.stories.ts
index 1e19035a72..364b4d7dde 100644
--- a/modules/react/text-area/stories/TextArea.stories.ts
+++ b/modules/react/text-area/stories/TextArea.stories.ts
@@ -11,6 +11,7 @@ import {Placeholder as PlaceholderExample} from './examples/Placeholder';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
 import {ResizeConstraints as ResizeConstraintsExample} from './examples/ResizeConstraints';
+import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/TextArea',
@@ -50,3 +51,6 @@ export const Required: Story = {
 export const ResizeConstraints: Story = {
   render: ResizeConstraintsExample,
 };
+export const SanaCanvas: Story = {
+  render: SanaCanvasExample,
+};
diff --git a/modules/react/text-area/stories/examples/SanaCanvas.tsx b/modules/react/text-area/stories/examples/SanaCanvas.tsx
new file mode 100644
index 0000000000..83edd4d18f
--- /dev/null
+++ b/modules/react/text-area/stories/examples/SanaCanvas.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+
+export const SanaCanvas = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField data-theme="sana-canvas">
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      </FormField.Field>
+    </FormField>
+  );
+};

From d38721cd047844c2b1ce6d1e7716e757358fceed Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:34:00 -0500
Subject: [PATCH 16/21] docs: Add Sana Canvas example to Form Field

---
 .../react/form-field/stories/FormField.mdx    | 11 ++++++++++
 .../form-field/stories/FormField.stories.ts   |  6 +++--
 .../stories/examples/SanaCanvas.tsx           | 22 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 modules/react/form-field/stories/examples/SanaCanvas.tsx

diff --git a/modules/react/form-field/stories/FormField.mdx b/modules/react/form-field/stories/FormField.mdx
index 7e475c2d21..5b2417845e 100644
--- a/modules/react/form-field/stories/FormField.mdx
+++ b/modules/react/form-field/stories/FormField.mdx
@@ -18,6 +18,7 @@ import {Hint} from './examples/Hint';
 import {Grow} from './examples/Grow';
 import {ThemedError} from './examples/ThemedErrors';
 import {GroupedInputs} from './examples/GroupedInputs';
+import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={FormFieldStoriesMeta} />
 
@@ -34,6 +35,16 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+### Sana Canvas Theme
+
+To apply the Sana Canvas theme to Form Field, apply the `data-theme="sana-canvas"` attribute to your
+component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
+area.
+
+This example applies `data-theme="sana-canvas"` directly to the Form Field.
+
+<ExampleCodeBlock code={SanaCanvas} />
+
 ### Basic
 
 Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
diff --git a/modules/react/form-field/stories/FormField.stories.ts b/modules/react/form-field/stories/FormField.stories.ts
index 41345a90cc..c29967e391 100644
--- a/modules/react/form-field/stories/FormField.stories.ts
+++ b/modules/react/form-field/stories/FormField.stories.ts
@@ -19,6 +19,7 @@ import {LabelPositionHorizontalEnd as LabelPositionHorizontalEndExample} from '.
 import {LabelPositionHorizontalStart as LabelPositionHorizontalStartExample} from './examples/LabelPositionHorizontalStart';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
+import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 import {ThemedError as ThemedErrorExample} from './examples/ThemedErrors';
 
 export default {
@@ -76,11 +77,12 @@ export const Grow: Story = {
 export const ThemedError: Story = {
   render: ThemedErrorExample,
 };
-
 export const GroupedInputs: Story = {
   render: GroupedInputsExample,
 };
-
 export const HiddenLabel: Story = {
   render: HiddenLabelExample,
 };
+export const SanaCanvas: Story = {
+  render: SanaCanvasExample,
+};
diff --git a/modules/react/form-field/stories/examples/SanaCanvas.tsx b/modules/react/form-field/stories/examples/SanaCanvas.tsx
new file mode 100644
index 0000000000..c89fdb0adf
--- /dev/null
+++ b/modules/react/form-field/stories/examples/SanaCanvas.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export const SanaCanvas = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField data-theme="sana-canvas">
+      <FormField.Label>First Name</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField.Field>
+    </FormField>
+  );
+};

From 4188f4567130c3a90e5cbac81f1d411d339a0c5b Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:38:33 -0500
Subject: [PATCH 17/21] docs: Add Sana Canvas example to Color Preview

---
 .../stories/color-preview/ColorPreview.mdx          | 12 ++++++++++++
 .../stories/color-preview/ColorPreview.stories.ts   |  4 ++++
 .../stories/color-preview/examples/SanaCanvas.tsx   | 13 +++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx

diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.mdx b/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
index aea39907c5..9812888df1 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
@@ -11,6 +11,7 @@ import * as ColorPreviewStories from './ColorPreview.stories';
 import {Basic} from './examples/Basic';
 import {LabelPosition} from './examples/LabelPosition';
 import {RefForwarding} from './examples/RefForwarding';
+import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={ColorPreviewStories} />
 
@@ -28,6 +29,17 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+### Sana Canvas Theme
+
+To apply the Sana Canvas theme to Color Preview, apply the `data-theme="sana-canvas"` attribute to your
+component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
+area.
+
+This example applies `data-theme="sana-canvas"` to the wrapping
+[Form Field](/components/inputs/form-field/).
+
+<ExampleCodeBlock code={SanaCanvas} />
+
 ### Basic Example
 
 <ExampleCodeBlock code={Basic} />
diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
index 187a36687b..cafe65ba1a 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
@@ -6,6 +6,7 @@ import mdxDoc from './ColorPreview.mdx';
 import {Basic as BasicExample} from './examples/Basic';
 import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
+import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/Color Picker/Color Preview',
@@ -29,3 +30,6 @@ export const LabelPosition: Story = {
 export const RefForwarding: Story = {
   render: RefForwardingExample,
 };
+export const SanaCanvas: Story = {
+  render: RefForwardingExample,
+};
diff --git a/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx b/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
new file mode 100644
index 0000000000..2ca9f242c1
--- /dev/null
+++ b/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
@@ -0,0 +1,13 @@
+import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export const SanaCanvas = () => {
+  return (
+    <FormField data-theme="sana-canvas">
+      <FormField.Label>Current Color</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={ColorPreview} value="#00ffcc" />
+      </FormField.Field>
+    </FormField>
+  );
+};

From 09245e9e670394ecf266b8708b209e231b21da9d Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Wed, 24 Jun 2026 18:45:26 -0500
Subject: [PATCH 18/21] docs: Add Sana Canvas example to Color Input

---
 .../stories/color-input/ColorInput.mdx        | 18 +++++++++++-----
 .../stories/color-input/ColorInput.stories.ts |  4 ++++
 .../color-input/examples/SanaCanvas.tsx       | 21 +++++++++++++++++++
 3 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx

diff --git a/modules/react/color-picker/stories/color-input/ColorInput.mdx b/modules/react/color-picker/stories/color-input/ColorInput.mdx
index 617345a90c..fe8fd372f3 100644
--- a/modules/react/color-picker/stories/color-input/ColorInput.mdx
+++ b/modules/react/color-picker/stories/color-input/ColorInput.mdx
@@ -1,10 +1,6 @@
 import {Meta} from '@storybook/blocks';
 
-import {
-  ExampleCodeBlock,
-  Specifications,
-  SymbolDoc,
-} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import ColorInputStoriesMeta from './ColorInput.stories';
 import {Basic} from './examples/Basic';
@@ -16,6 +12,7 @@ import {Grow} from './examples/Grow';
 import {LabelPosition} from './examples/LabelPosition';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
+import {SanaCanvas} from './examples/SanaCanvas';
 import {ValidColorChange} from './examples/ValidColorChange';
 
 <Meta of={ColorInputStoriesMeta} />
@@ -34,6 +31,17 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+### Sana Canvas Theme
+
+To apply the Sana Canvas theme to Color Input, apply the `data-theme="sana-canvas"` attribute to
+your component or to any ancestor element (such as `body`) if you wish to scope the theme to a
+larger area.
+
+This example applies `data-theme="sana-canvas"` to the wrapping
+[Form Field](/components/inputs/form-field/).
+
+<ExampleCodeBlock code={SanaCanvas} />
+
 ### Basic Example
 
 Color Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
diff --git a/modules/react/color-picker/stories/color-input/ColorInput.stories.ts b/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
index ebe2915497..d9e5e1633c 100644
--- a/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
+++ b/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
@@ -12,6 +12,7 @@ import {Grow as GrowExample} from './examples/Grow';
 import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
+import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 import {ValidColorChange as ValidColorChangeExample} from './examples/ValidColorChange';
 
 export default {
@@ -54,6 +55,9 @@ export const RefForwarding: Story = {
 export const Required: Story = {
   render: RequiredExample,
 };
+export const SanaCanvas: Story = {
+  render: SanaCanvasExample,
+};
 export const ValidColorChange: Story = {
   render: ValidColorChangeExample,
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx b/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx
new file mode 100644
index 0000000000..51d9e4acec
--- /dev/null
+++ b/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export const SanaCanvas = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <FormField data-theme="sana-canvas">
+      <FormField.Label>Background Color</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      </FormField.Field>
+    </FormField>
+  );
+};

From 8be501da18afd0b6e957d98cae3f8333a4632fcf Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Thu, 25 Jun 2026 10:41:49 -0500
Subject: [PATCH 19/21] fix: Fix Color Preview stories

---
 .../color-picker/stories/color-preview/ColorPreview.stories.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
index cafe65ba1a..09ad219638 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
@@ -31,5 +31,5 @@ export const RefForwarding: Story = {
   render: RefForwardingExample,
 };
 export const SanaCanvas: Story = {
-  render: RefForwardingExample,
+  render: SanaCanvasExample,
 };

From 4bce17fabee096ffd7e0f1278136ca6a31504c1b Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Thu, 25 Jun 2026 15:40:41 -0500
Subject: [PATCH 20/21] chore: Revert addition of SanaCanvas examples

---
 .../stories/color-input/ColorInput.mdx        | 18 +++++----------
 .../stories/color-input/ColorInput.stories.ts |  4 ----
 .../color-input/examples/SanaCanvas.tsx       | 21 ------------------
 .../stories/color-preview/ColorPreview.mdx    | 12 ----------
 .../color-preview/ColorPreview.stories.ts     |  4 ----
 .../color-preview/examples/SanaCanvas.tsx     | 13 -----------
 .../react/form-field/stories/FormField.mdx    | 11 ----------
 .../form-field/stories/FormField.stories.ts   |  6 ++---
 .../stories/examples/SanaCanvas.tsx           | 22 -------------------
 modules/react/text-area/stories/TextArea.mdx  | 12 ----------
 .../text-area/stories/TextArea.stories.ts     |  4 ----
 .../text-area/stories/examples/SanaCanvas.tsx | 21 ------------------
 .../react/text-input/stories/TextInput.mdx    | 19 +++++-----------
 .../text-input/stories/TextInput.stories.ts   |  4 ----
 .../stories/examples/SanaCanvas.tsx           | 21 ------------------
 15 files changed, 12 insertions(+), 180 deletions(-)
 delete mode 100644 modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx
 delete mode 100644 modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
 delete mode 100644 modules/react/form-field/stories/examples/SanaCanvas.tsx
 delete mode 100644 modules/react/text-area/stories/examples/SanaCanvas.tsx
 delete mode 100644 modules/react/text-input/stories/examples/SanaCanvas.tsx

diff --git a/modules/react/color-picker/stories/color-input/ColorInput.mdx b/modules/react/color-picker/stories/color-input/ColorInput.mdx
index fe8fd372f3..617345a90c 100644
--- a/modules/react/color-picker/stories/color-input/ColorInput.mdx
+++ b/modules/react/color-picker/stories/color-input/ColorInput.mdx
@@ -1,6 +1,10 @@
 import {Meta} from '@storybook/blocks';
 
-import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  Specifications,
+  SymbolDoc,
+} from '@workday/canvas-kit-docs';
 
 import ColorInputStoriesMeta from './ColorInput.stories';
 import {Basic} from './examples/Basic';
@@ -12,7 +16,6 @@ import {Grow} from './examples/Grow';
 import {LabelPosition} from './examples/LabelPosition';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
-import {SanaCanvas} from './examples/SanaCanvas';
 import {ValidColorChange} from './examples/ValidColorChange';
 
 <Meta of={ColorInputStoriesMeta} />
@@ -31,17 +34,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Sana Canvas Theme
-
-To apply the Sana Canvas theme to Color Input, apply the `data-theme="sana-canvas"` attribute to
-your component or to any ancestor element (such as `body`) if you wish to scope the theme to a
-larger area.
-
-This example applies `data-theme="sana-canvas"` to the wrapping
-[Form Field](/components/inputs/form-field/).
-
-<ExampleCodeBlock code={SanaCanvas} />
-
 ### Basic Example
 
 Color Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
diff --git a/modules/react/color-picker/stories/color-input/ColorInput.stories.ts b/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
index d9e5e1633c..ebe2915497 100644
--- a/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
+++ b/modules/react/color-picker/stories/color-input/ColorInput.stories.ts
@@ -12,7 +12,6 @@ import {Grow as GrowExample} from './examples/Grow';
 import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
-import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 import {ValidColorChange as ValidColorChangeExample} from './examples/ValidColorChange';
 
 export default {
@@ -55,9 +54,6 @@ export const RefForwarding: Story = {
 export const Required: Story = {
   render: RequiredExample,
 };
-export const SanaCanvas: Story = {
-  render: SanaCanvasExample,
-};
 export const ValidColorChange: Story = {
   render: ValidColorChangeExample,
 };
diff --git a/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx b/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx
deleted file mode 100644
index 51d9e4acec..0000000000
--- a/modules/react/color-picker/stories/color-input/examples/SanaCanvas.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-export const SanaCanvas = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField data-theme="sana-canvas">
-      <FormField.Label>Background Color</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
-      </FormField.Field>
-    </FormField>
-  );
-};
diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.mdx b/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
index 9812888df1..aea39907c5 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.mdx
@@ -11,7 +11,6 @@ import * as ColorPreviewStories from './ColorPreview.stories';
 import {Basic} from './examples/Basic';
 import {LabelPosition} from './examples/LabelPosition';
 import {RefForwarding} from './examples/RefForwarding';
-import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={ColorPreviewStories} />
 
@@ -29,17 +28,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Sana Canvas Theme
-
-To apply the Sana Canvas theme to Color Preview, apply the `data-theme="sana-canvas"` attribute to your
-component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
-area.
-
-This example applies `data-theme="sana-canvas"` to the wrapping
-[Form Field](/components/inputs/form-field/).
-
-<ExampleCodeBlock code={SanaCanvas} />
-
 ### Basic Example
 
 <ExampleCodeBlock code={Basic} />
diff --git a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
index 09ad219638..187a36687b 100644
--- a/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
+++ b/modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts
@@ -6,7 +6,6 @@ import mdxDoc from './ColorPreview.mdx';
 import {Basic as BasicExample} from './examples/Basic';
 import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
-import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/Color Picker/Color Preview',
@@ -30,6 +29,3 @@ export const LabelPosition: Story = {
 export const RefForwarding: Story = {
   render: RefForwardingExample,
 };
-export const SanaCanvas: Story = {
-  render: SanaCanvasExample,
-};
diff --git a/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx b/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
deleted file mode 100644
index 2ca9f242c1..0000000000
--- a/modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-export const SanaCanvas = () => {
-  return (
-    <FormField data-theme="sana-canvas">
-      <FormField.Label>Current Color</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={ColorPreview} value="#00ffcc" />
-      </FormField.Field>
-    </FormField>
-  );
-};
diff --git a/modules/react/form-field/stories/FormField.mdx b/modules/react/form-field/stories/FormField.mdx
index 5b2417845e..7e475c2d21 100644
--- a/modules/react/form-field/stories/FormField.mdx
+++ b/modules/react/form-field/stories/FormField.mdx
@@ -18,7 +18,6 @@ import {Hint} from './examples/Hint';
 import {Grow} from './examples/Grow';
 import {ThemedError} from './examples/ThemedErrors';
 import {GroupedInputs} from './examples/GroupedInputs';
-import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={FormFieldStoriesMeta} />
 
@@ -35,16 +34,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Sana Canvas Theme
-
-To apply the Sana Canvas theme to Form Field, apply the `data-theme="sana-canvas"` attribute to your
-component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
-area.
-
-This example applies `data-theme="sana-canvas"` directly to the Form Field.
-
-<ExampleCodeBlock code={SanaCanvas} />
-
 ### Basic
 
 Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
diff --git a/modules/react/form-field/stories/FormField.stories.ts b/modules/react/form-field/stories/FormField.stories.ts
index c29967e391..41345a90cc 100644
--- a/modules/react/form-field/stories/FormField.stories.ts
+++ b/modules/react/form-field/stories/FormField.stories.ts
@@ -19,7 +19,6 @@ import {LabelPositionHorizontalEnd as LabelPositionHorizontalEndExample} from '.
 import {LabelPositionHorizontalStart as LabelPositionHorizontalStartExample} from './examples/LabelPositionHorizontalStart';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
-import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 import {ThemedError as ThemedErrorExample} from './examples/ThemedErrors';
 
 export default {
@@ -77,12 +76,11 @@ export const Grow: Story = {
 export const ThemedError: Story = {
   render: ThemedErrorExample,
 };
+
 export const GroupedInputs: Story = {
   render: GroupedInputsExample,
 };
+
 export const HiddenLabel: Story = {
   render: HiddenLabelExample,
 };
-export const SanaCanvas: Story = {
-  render: SanaCanvasExample,
-};
diff --git a/modules/react/form-field/stories/examples/SanaCanvas.tsx b/modules/react/form-field/stories/examples/SanaCanvas.tsx
deleted file mode 100644
index c89fdb0adf..0000000000
--- a/modules/react/form-field/stories/examples/SanaCanvas.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export const SanaCanvas = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField data-theme="sana-canvas">
-      <FormField.Label>First Name</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-      </FormField.Field>
-    </FormField>
-  );
-};
diff --git a/modules/react/text-area/stories/TextArea.mdx b/modules/react/text-area/stories/TextArea.mdx
index d099924b96..d03f4ae0cc 100644
--- a/modules/react/text-area/stories/TextArea.mdx
+++ b/modules/react/text-area/stories/TextArea.mdx
@@ -15,7 +15,6 @@ import {Placeholder} from './examples/Placeholder';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
 import {ResizeConstraints} from './examples/ResizeConstraints';
-import {SanaCanvas} from './examples/SanaCanvas';
 
 <Meta of={TextAreaStoriesMeta} />
 
@@ -33,17 +32,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Sana Canvas Theme
-
-To apply the Sana Canvas theme to Text Area, apply the `data-theme="sana-canvas"` attribute to your
-component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
-area.
-
-This example applies `data-theme="sana-canvas"` to the wrapping
-[Form Field](/components/inputs/form-field/).
-
-<ExampleCodeBlock code={SanaCanvas} />
-
 ### Basic Example
 
 Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
diff --git a/modules/react/text-area/stories/TextArea.stories.ts b/modules/react/text-area/stories/TextArea.stories.ts
index 364b4d7dde..1e19035a72 100644
--- a/modules/react/text-area/stories/TextArea.stories.ts
+++ b/modules/react/text-area/stories/TextArea.stories.ts
@@ -11,7 +11,6 @@ import {Placeholder as PlaceholderExample} from './examples/Placeholder';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
 import {ResizeConstraints as ResizeConstraintsExample} from './examples/ResizeConstraints';
-import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/TextArea',
@@ -51,6 +50,3 @@ export const Required: Story = {
 export const ResizeConstraints: Story = {
   render: ResizeConstraintsExample,
 };
-export const SanaCanvas: Story = {
-  render: SanaCanvasExample,
-};
diff --git a/modules/react/text-area/stories/examples/SanaCanvas.tsx b/modules/react/text-area/stories/examples/SanaCanvas.tsx
deleted file mode 100644
index 83edd4d18f..0000000000
--- a/modules/react/text-area/stories/examples/SanaCanvas.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextArea} from '@workday/canvas-kit-react/text-area';
-
-export const SanaCanvas = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField data-theme="sana-canvas">
-      <FormField.Label>Leave a Review</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextArea} onChange={handleChange} value={value} />
-      </FormField.Field>
-    </FormField>
-  );
-};
diff --git a/modules/react/text-input/stories/TextInput.mdx b/modules/react/text-input/stories/TextInput.mdx
index bf11361ca5..7286e5bcf7 100644
--- a/modules/react/text-input/stories/TextInput.mdx
+++ b/modules/react/text-input/stories/TextInput.mdx
@@ -1,7 +1,10 @@
 import {Meta} from '@storybook/blocks';
 
-import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {
+  ExampleCodeBlock,
+  Specifications,
+  SymbolDoc,
+} from '@workday/canvas-kit-docs';
 import {Basic} from './examples/Basic';
 import {Disabled} from './examples/Disabled';
 import {Grow} from './examples/Grow';
@@ -10,7 +13,6 @@ import {LabelPosition} from './examples/LabelPosition';
 import {Placeholder} from './examples/Placeholder';
 import {RefForwarding} from './examples/RefForwarding';
 import {Required} from './examples/Required';
-import {SanaCanvas} from './examples/SanaCanvas';
 
 import TextInputStoriesMeta from './TextInput.stories';
 
@@ -30,17 +32,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Sana Canvas Theme
-
-To apply the Sana Canvas theme to Text Input, apply the `data-theme="sana-canvas"` attribute to your
-component or to any ancestor element (such as `body`) if you wish to scope the theme to a larger
-area.
-
-This example applies `data-theme="sana-canvas"` to the wrapping
-[Form Field](/components/inputs/form-field/).
-
-<ExampleCodeBlock code={SanaCanvas} />
-
 ### Basic Example
 
 Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
diff --git a/modules/react/text-input/stories/TextInput.stories.ts b/modules/react/text-input/stories/TextInput.stories.ts
index 7c5cd7c660..fd60a45796 100644
--- a/modules/react/text-input/stories/TextInput.stories.ts
+++ b/modules/react/text-input/stories/TextInput.stories.ts
@@ -11,7 +11,6 @@ import {LabelPosition as LabelPositionExample} from './examples/LabelPosition';
 import {Placeholder as PlaceholderExample} from './examples/Placeholder';
 import {RefForwarding as RefForwardingExample} from './examples/RefForwarding';
 import {Required as RequiredExample} from './examples/Required';
-import {SanaCanvas as SanaCanvasExample} from './examples/SanaCanvas';
 
 export default {
   title: 'Components/Inputs/Text Input',
@@ -50,6 +49,3 @@ export const Required: Story = {
 export const Icons: Story = {
   render: IconsExample,
 };
-export const SanaCanvas: Story = {
-  render: SanaCanvasExample,
-};
diff --git a/modules/react/text-input/stories/examples/SanaCanvas.tsx b/modules/react/text-input/stories/examples/SanaCanvas.tsx
deleted file mode 100644
index 835f40099e..0000000000
--- a/modules/react/text-input/stories/examples/SanaCanvas.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export const SanaCanvas = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField data-theme="sana-canvas">
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-      </FormField.Field>
-    </FormField>
-  );
-};

From 7b5ab04f83e4ad73ecb876e2d9738a4a7ba4181e Mon Sep 17 00:00:00 2001
From: James Fan <james@somewhatstrange.com>
Date: Thu, 25 Jun 2026 16:09:16 -0500
Subject: [PATCH 21/21] fix: Remove unnecessary data-theme from ColorPicker
 story

---
 .../color-picker/stories/examples/InputInteraction.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx b/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
index 5c85495024..65d26b4733 100644
--- a/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
+++ b/modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
@@ -10,7 +10,7 @@ export const InputInteraction = () => {
     textAreaRef.current?.focus();
   };
   return (
-    <div className="App" data-theme="sana-canvas">
+    <div className="App">
       <ColorPicker showCustomHexInput onColorChange={handleColorChange} />
       <label htmlFor="test">Text Area</label>
       <textarea id="test" style={{color: color}} ref={textAreaRef} />