From c852a6a9a02b287d95264577287d77b42de92e28 Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.de>
Date: Thu, 30 Oct 2025 14:23:26 +0000
Subject: [PATCH] revert: "feat: implement style api for input component
 (#3969)"

This reverts commit 2935dd6a4585095e1958f01d7b213ff293e955c8.
---
 build-tools/utils/custom-css-properties.js    |  15 --
 pages/input/style-permutations.page.tsx       | 181 --------------
 .../__snapshots__/documenter.test.ts.snap     | 230 ------------------
 src/input/__integ__/input.test.ts             |  53 ----
 src/input/__tests__/styles.test.tsx           | 117 ---------
 src/input/index.tsx                           |   2 -
 src/input/interfaces.ts                       |  51 ----
 src/input/internal.tsx                        |   3 -
 src/input/styles.scss                         |  71 +-----
 src/input/styles.tsx                          |  56 -----
 src/internal/styles/forms/mixins.scss         |  61 ++---
 11 files changed, 28 insertions(+), 812 deletions(-)
 delete mode 100644 pages/input/style-permutations.page.tsx
 delete mode 100644 src/input/__tests__/styles.test.tsx
 delete mode 100644 src/input/styles.tsx

diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 8f8225825c..96f18200b0 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -95,21 +95,6 @@ const customCssPropertiesList = [
   'styleBoxShadowDefault',
   'styleBoxShadowDisabled',
   'styleBoxShadowHover',
-  // Readonly state
-  'styleBackgroundReadonly',
-  'styleBorderColorReadonly',
-  'styleBoxShadowReadonly',
-  'styleColorReadonly',
-  // Focus state
-  'styleBackgroundFocus',
-  'styleBorderColorFocus',
-  'styleBoxShadowFocus',
-  'styleColorFocus',
-  // Placeholder style properties
-  'stylePlaceholderColor',
-  'stylePlaceholderFontSize',
-  'stylePlaceholderFontStyle',
-  'stylePlaceholderFontWeight',
   // Alert focus ring properties
   'alertFocusRingBorderColor',
   'alertFocusRingBorderRadius',
diff --git a/pages/input/style-permutations.page.tsx b/pages/input/style-permutations.page.tsx
deleted file mode 100644
index dd2a0d5dc0..0000000000
--- a/pages/input/style-permutations.page.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import Input, { InputProps } from '~components/input';
-
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
-import ScreenshotArea from '../utils/screenshot-area';
-
-const permutations = createPermutations<InputProps>([
-  {
-    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 InputStylePermutations() {
-  return (
-    <>
-      <h1>Input Style permutations</h1>
-      <ScreenshotArea disableAnimations={true}>
-        <PermutationsView
-          permutations={permutations}
-          render={permutation => <Input ariaLabel="Input 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 f4a10fff93..1d566c5d45 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -14705,236 +14705,6 @@ including the date, month, week, time, datetime-local, number and range types.",
       "optional": true,
       "type": "InputProps.Step",
     },
-    {
-      "inlineType": {
-        "name": "InputProps.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": "InputProps.Style",
-    },
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of control to render.
diff --git a/src/input/__integ__/input.test.ts b/src/input/__integ__/input.test.ts
index 97abb951b2..97844aafbf 100644
--- a/src/input/__integ__/input.test.ts
+++ b/src/input/__integ__/input.test.ts
@@ -46,56 +46,3 @@ describe('Input', () => {
     })
   );
 });
-
-describe('Input Style API', () => {
-  test(
-    'hover and focus states',
-    useBrowser(async browser => {
-      await browser.url('#/light/input/style-permutations');
-      const page = new InputPage(browser);
-      const inputSelector = '.screenshot-area input:first-of-type';
-
-      // Default state - teal theme
-      await expect((await browser.$(inputSelector).getCSSProperty('border-color')).value).toBe('rgba(20,184,166,1)');
-      await expect((await browser.$(inputSelector).getCSSProperty('border-width')).value).toBe('2px');
-      await expect((await browser.$(inputSelector).getCSSProperty('border-radius')).value).toBe('8px');
-      await expect((await browser.$(inputSelector).getCSSProperty('background-color')).value).toBe(
-        'rgba(153,246,228,1)'
-      );
-      await expect((await browser.$(inputSelector).getCSSProperty('color')).value).toBe('rgba(13,92,84,1)');
-      await expect((await browser.$(inputSelector).getCSSProperty('font-size')).value).toBe('16px');
-      await expect((await browser.$(inputSelector).getCSSProperty('font-weight')).value).toBe(500);
-      await expect((await browser.$(inputSelector).getCSSProperty('padding-block')).value).toBe('12px');
-      await expect((await browser.$(inputSelector).getCSSProperty('padding-inline')).value).toBe('16px');
-
-      // Placeholder styles
-      await expect((await browser.$(inputSelector).getCSSProperty('color', '::placeholder' as any)).value).toBe(
-        'rgb(20,184,166)'
-      );
-      await expect((await browser.$(inputSelector).getCSSProperty('font-size', '::placeholder' as any)).value).toBe(
-        '14px'
-      );
-      await expect((await browser.$(inputSelector).getCSSProperty('font-style', '::placeholder' as any)).value).toBe(
-        'italic'
-      );
-      await expect((await browser.$(inputSelector).getCSSProperty('font-weight', '::placeholder' as any)).value).toBe(
-        400
-      );
-
-      // Hover state
-      await page.hoverElement(inputSelector);
-      await expect((await browser.$(inputSelector).getCSSProperty('border-color')).value).toBe('rgba(15,118,110,1)');
-      await expect((await browser.$(inputSelector).getCSSProperty('background-color')).value).toBe(
-        'rgba(94,234,212,1)'
-      );
-
-      // Focus state
-      await page.click(inputSelector);
-      await expect((await browser.$(inputSelector).getCSSProperty('border-color')).value).toBe('rgba(13,148,136,1)');
-      await expect((await browser.$(inputSelector).getCSSProperty('background-color')).value).toBe(
-        'rgba(94,234,212,1)'
-      );
-      await expect((await browser.$(inputSelector).getCSSProperty('color')).value).toBe('rgba(13,92,84,1)');
-    })
-  );
-});
diff --git a/src/input/__tests__/styles.test.tsx b/src/input/__tests__/styles.test.tsx
deleted file mode 100644
index b209b6a2d6..0000000000
--- a/src/input/__tests__/styles.test.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-// 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 { getInputStyles } from '../styles';
-
-// Mock the environment module
-jest.mock('../../internal/environment', () => ({
-  SYSTEM: 'core',
-}));
-
-describe('getInputStyles', () => {
-  afterEach(() => {
-    jest.resetModules();
-  });
-
-  test('handles all possible style configurations', () => {
-    expect(getInputStyles(undefined)).toBeUndefined();
-    expect(getInputStyles({})).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(getInputStyles(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 { getInputStyles: getInputStylesNonCore } = await import('../styles');
-
-    const style = {
-      root: {
-        borderRadius: '4px',
-      },
-    };
-
-    const result = getInputStylesNonCore(style);
-
-    expect(result).toBeUndefined();
-  });
-});
diff --git a/src/input/index.tsx b/src/input/index.tsx
index 351bdf14af..3dab16d75a 100644
--- a/src/input/index.tsx
+++ b/src/input/index.tsx
@@ -43,7 +43,6 @@ const Input = React.forwardRef(
       controlId,
       clearAriaLabel,
       nativeInputAttributes,
-      style,
       ...rest
     }: InputProps,
     ref: Ref<InputProps.Ref>
@@ -100,7 +99,6 @@ const Input = React.forwardRef(
           controlId,
           clearAriaLabel,
           nativeInputAttributes,
-          style,
         }}
         className={clsx(styles.root, baseProps.className)}
         __inheritFormFieldProps={true}
diff --git a/src/input/interfaces.ts b/src/input/interfaces.ts
index d0db2c9b8d..ad59504ea5 100644
--- a/src/input/interfaces.ts
+++ b/src/input/interfaces.ts
@@ -181,11 +181,6 @@ export interface InputProps
    * including the date, month, week, time, datetime-local, number and range types.
    */
   step?: InputProps.Step;
-
-  /**
-   * @awsuiSystem core
-   */
-  style?: InputProps.Style;
 }
 
 export namespace InputProps {
@@ -207,53 +202,7 @@ export namespace InputProps {
      */
     select(): 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;
-    };
-  }
 }
-
 export interface BaseChangeDetail {
   value: string;
 }
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
index 7c798d294e..1036329854 100644
--- a/src/input/internal.tsx
+++ b/src/input/internal.tsx
@@ -24,7 +24,6 @@ import {
   GeneratedAnalyticsMetadataInputComponent,
 } from './analytics-metadata/interfaces';
 import { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';
-import { getInputStyles } from './styles';
 import { convertAutoComplete, useSearchProps } from './utils';
 
 import styles from './styles.css.js';
@@ -93,7 +92,6 @@ function InternalInput(
     __inheritFormFieldProps,
     __injectAnalyticsComponentMetadata,
     __skipNativeAttributesWarnings,
-    style,
     ...rest
   }: InternalInputProps,
   ref: Ref<HTMLInputElement>
@@ -218,7 +216,6 @@ function InternalInput(
         nativeAttributes={nativeInputAttributes}
         skipWarnings={__skipNativeAttributesWarnings}
         ref={mergedRef}
-        style={getInputStyles(style)}
       />
       {__rightIcon && (
         <span
diff --git a/src/input/styles.scss b/src/input/styles.scss
index c2b972ffc3..c2a193e301 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -5,8 +5,6 @@
 
 @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;
 
 @mixin placeholder {
   &::-webkit-input-placeholder {
@@ -35,70 +33,35 @@
   @include styles.styles-reset;
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
+  color: awsui.$color-text-body-default;
   inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
-  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
+  background-color: 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
-    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});
-
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
   &.input-readonly {
-    @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});
+    @include styles.form-readonly-element;
   }
 
   @include 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})
-    );
+    @include styles.form-placeholder;
   }
 
   &:focus {
-    @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);
+    @include styles.form-focus-element;
   }
 
   &:disabled {
-    @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});
+    @include styles.form-disabled-element;
+    cursor: default;
     @include placeholder {
       @include styles.form-placeholder-disabled;
     }
@@ -109,22 +72,6 @@
     box-shadow: none;
   }
 
-  &:hover:not(:focus):not(:disabled):not(.input-readonly) {
-    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});
-  }
-
   &.input-invalid {
     @include styles.form-invalid-control();
     &.input-has-icon-left {
diff --git a/src/input/styles.tsx b/src/input/styles.tsx
deleted file mode 100644
index f0e17cf567..0000000000
--- a/src/input/styles.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// 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 { InputProps } from './interfaces';
-
-export function getInputStyles(style: InputProps['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;
-  }
-}
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 0740185e52..39af2ed1e8 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -113,36 +113,27 @@
 
 // Use for form input elements, excluding buttons
 // or for elements that have a light border and light background
-@mixin form-focus-element(
-  $border-radius: constants.$control-border-radius,
-  $border-color: awsui.$color-border-input-focused,
-  $box-shadow: foundation.$box-shadow-focused-light
-) {
+@mixin form-focus-element($border-radius: constants.$control-border-radius) {
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
   border-start-start-radius: $border-radius;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
 
-  box-shadow: $box-shadow;
+  box-shadow: foundation.$box-shadow-focused-light;
 }
 
-@mixin form-disabled-element(
-  $background-color: awsui.$color-background-input-disabled,
-  $border-color: awsui.$color-border-input-disabled,
-  $color: awsui.$color-text-input-disabled,
-  $cursor: auto
-) {
-  background-color: $background-color;
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
-  color: $color;
-  cursor: $cursor;
+@mixin form-disabled-element {
+  background-color: awsui.$color-background-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  color: awsui.$color-text-input-disabled;
+  cursor: auto;
 }
 
 @mixin button-trigger-disabled-element {
@@ -153,13 +144,10 @@
   cursor: auto;
 }
 
-@mixin form-readonly-element(
-  $background-color: awsui.$color-background-input-default,
-  $border-color: awsui.$color-border-input-disabled
-) {
-  background-color: $background-color;
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
+@mixin form-readonly-element {
+  background-color: awsui.$color-background-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
 }
 
 @mixin button-trigger-readonly-element {
@@ -168,24 +156,13 @@
   border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
 }
 
-@mixin form-placeholder(
-  $color: awsui.$color-text-input-placeholder,
-  $font-size: null,
-  $font-style: italic,
-  $font-weight: null
-) {
-  color: $color;
-  @if $font-size {
-    font-size: $font-size;
-  }
-  font-style: $font-style;
-  @if $font-weight {
-    font-weight: $font-weight;
-  }
+@mixin form-placeholder {
+  color: awsui.$color-text-input-placeholder;
+  font-style: italic;
 }
 
-@mixin form-placeholder-disabled($color: awsui.$color-text-input-placeholder-disabled) {
-  color: $color;
+@mixin form-placeholder-disabled {
+  color: awsui.$color-text-input-placeholder-disabled;
 }
 
 @mixin form-control-description {