From 6599337ef5b05440d5eb3c0302011ce3fe0c64f6 Mon Sep 17 00:00:00 2001
From: Victor Genaev <vgenaev@gmail.com>
Date: Sun, 24 Sep 2023 19:16:32 +0200
Subject: [PATCH] chore(Textarea): migrate to Tailwind

chore(tailwind): add boxShadow formElement tokens

test: update snapshots

chore(tokens): fix small typo

chore(tokens): add formElementBorderColorErrorHover

chore(tailwind): add form-element-error-hover box-shadow classname
---
 .../Textarea/Textarea.stories.tsx             | 172 ++++++++++++++++++
 .../Textarea/__tests__/index.test.tsx         |  86 +++++++++
 .../src/tmp-tailwind/Textarea/index.tsx       | 146 +++++++++++++++
 .../output/docs-tokens.json                   |  32 ++--
 .../orbit-design-tokens/output/tokens.css     |   2 +-
 .../orbit-design-tokens/output/tokens.less    |   2 +-
 .../orbit-design-tokens/output/tokens.scss    |   2 +-
 .../orbit-design-tokens/output/tokens.styl    |   2 +-
 .../orbit-design-tokens/output/tokens.xml     |   8 +-
 .../form-element/form-element-box-shadow.json |  12 +-
 .../src/js/createTokens.ts                    |  10 +-
 .../src/presets/components/index.ts           |  15 +-
 12 files changed, 451 insertions(+), 38 deletions(-)
 create mode 100644 packages/orbit-components/src/tmp-tailwind/Textarea/Textarea.stories.tsx
 create mode 100644 packages/orbit-components/src/tmp-tailwind/Textarea/__tests__/index.test.tsx
 create mode 100644 packages/orbit-components/src/tmp-tailwind/Textarea/index.tsx

diff --git a/packages/orbit-components/src/tmp-tailwind/Textarea/Textarea.stories.tsx b/packages/orbit-components/src/tmp-tailwind/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000000..5760ff89c3
--- /dev/null
+++ b/packages/orbit-components/src/tmp-tailwind/Textarea/Textarea.stories.tsx
@@ -0,0 +1,172 @@
+import * as React from "react";
+import { action } from "@storybook/addon-actions";
+import { text, boolean, select, number } from "@storybook/addon-knobs";
+
+import { SIZE_OPTIONS, RESIZE_OPTIONS } from "../../Textarea/consts";
+import RenderInRtl from "../../utils/rtl/RenderInRtl";
+import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
+
+import Textarea from ".";
+
+export default {
+  title: "Tailwind/Textarea",
+};
+
+export const Default = () => {
+  const label = text("Label", "Label");
+  const value = text("Value", "");
+  const placeholder = text("Placeholder", "Placeholder");
+
+  return (
+    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
+  );
+};
+
+Default.story = {
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const SmallSize = () => {
+  const value = text("Value", "");
+  const placeholder = text("Placeholder", "Placeholder");
+
+  return (
+    <Textarea size="small" placeholder={placeholder} onChange={action("change")} value={value} />
+  );
+};
+
+SmallSize.story = {
+  name: "Small size",
+
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const WithLabel = () => {
+  const label = text("Label", "Label");
+  const value = text("Value", "");
+  const placeholder = text("Placeholder", "Placeholder");
+
+  return (
+    <Textarea label={label} placeholder={placeholder} onChange={action("change")} value={value} />
+  );
+};
+
+WithLabel.story = {
+  name: "With label",
+
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const WithHelp = () => {
+  const value = text("Value", "Something");
+  const placeholder = text("Placeholder", "Placeholder");
+  const help = text("Help", "Everything is fine.");
+
+  return (
+    <Textarea placeholder={placeholder} help={help} onChange={action("change")} value={value} />
+  );
+};
+
+WithHelp.story = {
+  name: "With help",
+
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const WithError = () => {
+  const value = text("Value", "Something");
+  const placeholder = text("Placeholder", "Placeholder");
+  const error = text("Error", "Something went wrong.");
+
+  return (
+    <Textarea placeholder={placeholder} error={error} onChange={action("change")} value={value} />
+  );
+};
+
+WithError.story = {
+  name: "With error",
+
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const Playground = () => {
+  const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.SMALL);
+  const label = text("Label", "Label");
+  const value = text("Value", "");
+  const fullHeight = boolean("fullHeight", true);
+  const placeholder = text("Placeholder", "Placeholder");
+  const help = text("Help", "");
+  const error = text("Error", "Something went wrong.");
+  const disabled = boolean("Disabled", false);
+  const readOnly = boolean("Read-only", false);
+  const resize = select("resize", Object.values(RESIZE_OPTIONS), RESIZE_OPTIONS.VERTICAL);
+  const maxLength = number("maxLength", Infinity);
+  const dataTest = text("dataTest", "test");
+  const rows = number("rows", 3);
+  const required = boolean("required", false);
+  const spaceAfter = select("spaceAfter", Object.values(SPACINGS_AFTER), SPACINGS_AFTER.MEDIUM);
+
+  return (
+    <Textarea
+      size={size}
+      label={label}
+      value={value}
+      fullHeight={fullHeight}
+      placeholder={placeholder}
+      help={help}
+      error={error}
+      rows={rows}
+      required={required}
+      disabled={disabled}
+      readOnly={readOnly}
+      maxLength={maxLength}
+      resize={resize}
+      onChange={action("change")}
+      onFocus={action("focus")}
+      onBlur={action("blur")}
+      dataTest={dataTest}
+      spaceAfter={spaceAfter}
+    />
+  );
+};
+
+Playground.story = {
+  parameters: {
+    info: "Some description about this type of textarea in general.",
+  },
+};
+
+export const Rtl = () => {
+  const label = text("Label", "Label");
+  const help = text("Help", "");
+  const error = text("Error", "Something went wrong.");
+  return (
+    <RenderInRtl>
+      <Textarea
+        label={label}
+        help={help}
+        error={error}
+        placeholder="My placeholder"
+        value="Content of the Textarea"
+      />
+    </RenderInRtl>
+  );
+};
+
+Rtl.story = {
+  name: "RTL",
+
+  parameters: {
+    info: "This is a preview of this component in RTL setup.",
+  },
+};
diff --git a/packages/orbit-components/src/tmp-tailwind/Textarea/__tests__/index.test.tsx b/packages/orbit-components/src/tmp-tailwind/Textarea/__tests__/index.test.tsx
new file mode 100644
index 0000000000..0e5ee8c261
--- /dev/null
+++ b/packages/orbit-components/src/tmp-tailwind/Textarea/__tests__/index.test.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+import userEvent from "@testing-library/user-event";
+
+import { render, screen, act } from "../../../test-utils";
+import Textarea from "..";
+import SPACINGS_AFTER from "../../../common/getSpacingToken/consts";
+
+describe("Textarea", () => {
+  const user = userEvent.setup();
+
+  it("should have expected DOM output", async () => {
+    const name = "name";
+    const label = "Label";
+    const placeholder = "placeholder";
+    const dataTest = "test";
+    const maxLength = 200;
+    const fullHeight = true;
+    const spaceAfter = SPACINGS_AFTER.NORMAL;
+    const dataAttrs = {
+      "data-sample": "Sample",
+    };
+
+    render(
+      <Textarea
+        name={name}
+        label={label}
+        defaultValue="value"
+        rows={4}
+        fullHeight={fullHeight}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        help={<div>Something useful.</div>}
+        dataTest={dataTest}
+        spaceAfter={spaceAfter}
+        dataAttrs={dataAttrs}
+      />,
+    );
+
+    const textarea = screen.getByRole("textbox");
+
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
+    expect(screen.getByDisplayValue("value")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+
+    await act(() => user.tab());
+    expect(screen.getByText("Something useful.")).toBeInTheDocument();
+    expect(textarea).toHaveAttribute("maxlength", maxLength.toString());
+    expect(textarea).toHaveAttribute("rows", "4");
+    expect(textarea).toHaveAttribute("name", name);
+    expect(textarea).toHaveAttribute("data-sample", "Sample");
+    expect(textarea).not.toBeInvalid();
+    expect(textarea.parentElement).toHaveStyle({ marginBottom: "12px" });
+    expect(textarea).toHaveStyle({ padding: "12px" });
+  });
+
+  it("should trigger event handlers", async () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    const onChange = jest.fn();
+
+    render(<Textarea onFocus={onFocus} onBlur={onBlur} onChange={onChange} />);
+
+    const textarea = screen.getByRole("textbox");
+
+    await user.tab();
+    expect(onFocus).toHaveBeenCalled();
+    await user.tab();
+    expect(onBlur).toHaveBeenCalled();
+    await act(() => user.type(textarea, "kek"));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("should have error", async () => {
+    render(<Textarea error="error" size="small" />);
+    const textarea = screen.getByRole("textbox");
+
+    await act(() => user.tab());
+    expect(screen.getByText("error")).toBeInTheDocument();
+    expect(textarea).toHaveStyle({ padding: "8px 12px 8px 12px" });
+    expect(textarea).toBeInvalid();
+    expect(textarea).toHaveAccessibleDescription("error");
+    // Needs to flush async `floating-ui` hooks
+    // https://github.com/floating-ui/floating-ui/issues/1520
+    await act(async () => {});
+  });
+});
diff --git a/packages/orbit-components/src/tmp-tailwind/Textarea/index.tsx b/packages/orbit-components/src/tmp-tailwind/Textarea/index.tsx
new file mode 100644
index 0000000000..abd52aa692
--- /dev/null
+++ b/packages/orbit-components/src/tmp-tailwind/Textarea/index.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+import cx from "clsx";
+
+import ErrorFormTooltip from "../../ErrorFormTooltip";
+import FormLabel from "../../FormLabel";
+import { SIZE_OPTIONS, RESIZE_OPTIONS } from "../../Textarea/consts";
+import useErrorTooltip from "../../ErrorFormTooltip/hooks/useErrorTooltip";
+import getFieldDataState from "../../common/getFieldDataState";
+import type { Props } from "../../Textarea/types";
+import useRandomId from "../../hooks/useRandomId";
+import { getSpaceAfterClasses } from "../../common/tailwind";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
+  const {
+    size = SIZE_OPTIONS.NORMAL,
+    disabled,
+    resize = RESIZE_OPTIONS.VERTICAL,
+    dataTest,
+    id,
+    spaceAfter,
+    fullHeight,
+    defaultValue,
+    value,
+    label,
+    name,
+    error,
+    placeholder,
+    helpClosable = true,
+    maxLength,
+    onChange,
+    onFocus,
+    onBlur,
+    tabIndex,
+    help,
+    rows,
+    readOnly,
+    required,
+    dataAttrs,
+  }: Props = props;
+
+  const forID = useRandomId();
+  const inputId = id || forID;
+
+  const hasTooltip = Boolean(error || help);
+
+  const {
+    tooltipShown,
+    tooltipShownHover,
+    setTooltipShown,
+    setTooltipShownHover,
+    labelRef,
+    iconRef,
+    handleFocus,
+  } = useErrorTooltip({ onFocus, hasTooltip });
+
+  const shown = tooltipShown || tooltipShownHover;
+
+  return (
+    <label
+      className={cx(
+        "font-base relative flex w-full flex-col",
+        fullHeight && "h-full flex-1",
+        spaceAfter && getSpaceAfterClasses(spaceAfter),
+      )}
+      ref={labelRef}
+    >
+      {label && (
+        <FormLabel
+          filled={!!value}
+          error={!!error}
+          help={!!help}
+          required={required}
+          disabled={disabled}
+          iconRef={iconRef}
+          onMouseEnter={() => setTooltipShownHover(true)}
+          onMouseLeave={() => setTooltipShownHover(false)}
+        >
+          {label}
+        </FormLabel>
+      )}
+
+      <textarea
+        className={cx(
+          "w-full appearance-none",
+          "font-base",
+          "rounded-normal relative box-border block overflow-auto",
+          "min-h-form-box-normal",
+          "duration-fast transition-shadow ease-in-out",
+          "border border-transparent",
+          // TODO: remove when will be migrated from tmp-folder
+          size === SIZE_OPTIONS.SMALL && "text-normal px-sm py-xs leading-normal",
+          resize === RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none",
+          size === SIZE_OPTIONS.NORMAL && "text-normal p-sm leading-normal",
+          error ? "shadow-form-element-error" : "shadow-form-element",
+          disabled ? "cursor-not-allowed" : "cursor-text",
+          fullHeight && "h-full flex-1",
+          disabled || readOnly
+            ? "bg-form-element-disabled-background"
+            : [
+                "bg-form-element-background",
+                error ? "hover:shadow-form-element-error-hover" : "hover:bg-form-element-hover",
+              ],
+          "[&::placeholder]:text-form-element-foreground",
+        )}
+        data-state={getFieldDataState(!!error)}
+        data-test={dataTest}
+        aria-required={!!required}
+        id={inputId}
+        name={name}
+        value={value}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        placeholder={String(placeholder)}
+        maxLength={maxLength}
+        onChange={onChange}
+        rows={rows}
+        onFocus={handleFocus}
+        onBlur={onBlur}
+        tabIndex={tabIndex ? Number(tabIndex) : undefined}
+        readOnly={readOnly}
+        ref={ref}
+        aria-describedby={shown ? `${inputId}-feedback` : undefined}
+        aria-invalid={error ? true : undefined}
+        {...dataAttrs}
+      />
+      {hasTooltip && (
+        <ErrorFormTooltip
+          id={`${inputId}-feedback`}
+          help={help}
+          inputSize={size}
+          helpClosable={helpClosable}
+          error={error}
+          onShown={setTooltipShown}
+          shown={shown}
+          referenceElement={labelRef}
+        />
+      )}
+    </label>
+  );
+});
+
+Textarea.displayName = "Textarea";
+
+export default Textarea;
diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json
index e606063687..417fd105d6 100644
--- a/packages/orbit-design-tokens/output/docs-tokens.json
+++ b/packages/orbit-design-tokens/output/docs-tokens.json
@@ -12408,48 +12408,48 @@
       "value": "inset 0 0 0 1px rgba(210, 28, 28, 1)"
     }
   },
-  "formElementBoxShadowHover": {
+  "formElementBoxShadowErrorHover": {
     "type": "box-shadow",
     "deprecated": false,
     "replacement": null,
     "schema": {
       "namespace": "component",
       "object": "form-element",
-      "variant": "box-shadow-hover"
+      "variant": "box-shadow-error-hover"
     },
     "javascript": {
-      "name": "formElementBoxShadowHover",
-      "value": "inset 0 0 0 1px rgba(166, 182, 200, 1)"
+      "name": "formElementBoxShadowErrorHover",
+      "value": "inset 0 0 0 1px rgba(185, 25, 25, 1)"
     },
     "foundation": {
-      "name": "formElementBoxShadowHover",
-      "value": "inset 0 0 0 1px color(#A6B6C8, opacity: 100)"
+      "name": "formElementBoxShadowErrorHover",
+      "value": "inset 0 0 0 1px color(#B91919, opacity: 100)"
     },
     "scss": {
-      "name": "formElementBoxShadowHover",
-      "value": "inset 0 0 0 1px rgba(166, 182, 200, 1)"
+      "name": "formElementBoxShadowErrorHover",
+      "value": "inset 0 0 0 1px rgba(185, 25, 25, 1)"
     }
   },
-  "formElementBoxShadowErrorHover": {
+  "formElementBoxShadowHover": {
     "type": "box-shadow",
     "deprecated": false,
     "replacement": null,
     "schema": {
       "namespace": "component",
       "object": "form-element",
-      "variant": "box-shadow-error-hover"
+      "variant": "box-shadow-hover"
     },
     "javascript": {
-      "name": "formElementBoxShadowErrorHover",
-      "value": "inset 0 0 0 1px rgba(185, 25, 25, 1)"
+      "name": "formElementBoxShadowHover",
+      "value": "inset 0 0 0 1px rgba(166, 182, 200, 1)"
     },
     "foundation": {
-      "name": "formElementBoxShadowErrorHover",
-      "value": "inset 0 0 0 1px color(#B91919, opacity: 100)"
+      "name": "formElementBoxShadowHover",
+      "value": "inset 0 0 0 1px color(#A6B6C8, opacity: 100)"
     },
     "scss": {
-      "name": "formElementBoxShadowErrorHover",
-      "value": "inset 0 0 0 1px rgba(185, 25, 25, 1)"
+      "name": "formElementBoxShadowHover",
+      "value": "inset 0 0 0 1px rgba(166, 182, 200, 1)"
     }
   },
   "formElementFocusBoxShadow": {
diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css
index b536d90ae9..6e4cec1a18 100644
--- a/packages/orbit-design-tokens/output/tokens.css
+++ b/packages/orbit-design-tokens/output/tokens.css
@@ -536,8 +536,8 @@
   --form-element-border-color-error-hover: rgb(185, 25, 25); /* Should be used for all form-elements when the component has error and hover state and it's needed to render border attribute, or combined with shadows. */
   --form-element-box-shadow: rgb(186, 199, 213);
   --form-element-box-shadow-error: rgb(210, 28, 28);
-  --form-element-box-shadow-hover: rgb(166, 182, 200);
   --form-element-box-shadow-error-hover: rgb(185, 25, 25);
+  --form-element-box-shadow-hover: rgb(166, 182, 200);
   --form-element-focus-box-shadow: rgb(1, 114, 203);
   --form-element-error-focus-box-shadow: rgb(210, 28, 28);
   --form-element-normal-font-size: 15;
diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less
index 4a5cf876ae..b33c4a7031 100644
--- a/packages/orbit-design-tokens/output/tokens.less
+++ b/packages/orbit-design-tokens/output/tokens.less
@@ -535,8 +535,8 @@
 @form-element-border-color-error-hover: rgb(185, 25, 25); // Should be used for all form-elements when the component has error and hover state and it's needed to render border attribute, or combined with shadows.
 @form-element-box-shadow: rgb(186, 199, 213);
 @form-element-box-shadow-error: rgb(210, 28, 28);
-@form-element-box-shadow-hover: rgb(166, 182, 200);
 @form-element-box-shadow-error-hover: rgb(185, 25, 25);
+@form-element-box-shadow-hover: rgb(166, 182, 200);
 @form-element-focus-box-shadow: rgb(1, 114, 203);
 @form-element-error-focus-box-shadow: rgb(210, 28, 28);
 @form-element-normal-font-size: 15;
diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss
index 637a42f76a..8db36dd92a 100644
--- a/packages/orbit-design-tokens/output/tokens.scss
+++ b/packages/orbit-design-tokens/output/tokens.scss
@@ -546,8 +546,8 @@ $form-element-border-color-error: rgb(210, 28, 28);
 $form-element-border-color-error-hover: rgb(185, 25, 25);
 $form-element-box-shadow: inset 0 0 0 1px rgba(186, 199, 213, 1);
 $form-element-box-shadow-error: inset 0 0 0 1px rgba(210, 28, 28, 1);
-$form-element-box-shadow-hover: inset 0 0 0 1px rgba(166, 182, 200, 1);
 $form-element-box-shadow-error-hover: inset 0 0 0 1px rgba(185, 25, 25, 1);
+$form-element-box-shadow-hover: inset 0 0 0 1px rgba(166, 182, 200, 1);
 $form-element-focus-box-shadow: inset 0 0 0 1px rgba(1, 114, 203, 1),
   inset 0 0 0 3px rgba(1, 114, 203, 0.15);
 $form-element-error-focus-box-shadow: inset 0 0 0 1px rgba(210, 28, 28, 1),
diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl
index 0c84d5a87f..9c7a0bbac8 100644
--- a/packages/orbit-design-tokens/output/tokens.styl
+++ b/packages/orbit-design-tokens/output/tokens.styl
@@ -535,8 +535,8 @@ $form-element-border-color-error= rgb(210, 28, 28); // Should be used for all fo
 $form-element-border-color-error-hover= rgb(185, 25, 25); // Should be used for all form-elements when the component has error and hover state and it's needed to render border attribute, or combined with shadows.
 $form-element-box-shadow= rgb(186, 199, 213);
 $form-element-box-shadow-error= rgb(210, 28, 28);
-$form-element-box-shadow-hover= rgb(166, 182, 200);
 $form-element-box-shadow-error-hover= rgb(185, 25, 25);
+$form-element-box-shadow-hover= rgb(166, 182, 200);
 $form-element-focus-box-shadow= rgb(1, 114, 203);
 $form-element-error-focus-box-shadow= rgb(210, 28, 28);
 $form-element-normal-font-size= 15;
diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml
index 3f14cbb815..ee8ee53ec2 100644
--- a/packages/orbit-design-tokens/output/tokens.xml
+++ b/packages/orbit-design-tokens/output/tokens.xml
@@ -2147,14 +2147,14 @@
     <name>formElementBoxShadowError</name>
     <value>#D21C1C</value>
   </token>
-  <token>
-    <name>formElementBoxShadowHover</name>
-    <value>#A6B6C8</value>
-  </token>
   <token>
     <name>formElementBoxShadowErrorHover</name>
     <value>#B91919</value>
   </token>
+  <token>
+    <name>formElementBoxShadowHover</name>
+    <value>#A6B6C8</value>
+  </token>
   <token>
     <name>formElementFocusBoxShadow</name>
     <value>#0172CB</value>
diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/component/form-element/form-element-box-shadow.json b/packages/orbit-design-tokens/src/dictionary/definitions/component/form-element/form-element-box-shadow.json
index b7aa918a04..124b9b3350 100644
--- a/packages/orbit-design-tokens/src/dictionary/definitions/component/form-element/form-element-box-shadow.json
+++ b/packages/orbit-design-tokens/src/dictionary/definitions/component/form-element/form-element-box-shadow.json
@@ -35,9 +35,9 @@
           ]
         }
       },
-      "box-shadow-hover": {
+      "box-shadow-error-hover": {
         "type": "box-shadow",
-        "value": "{component.form-element.border-color-hover}",
+        "value": "{component.form-element.border-color-error-hover}",
         "attributes": {
           "box-shadow": [
             {
@@ -45,16 +45,16 @@
               "y": 0,
               "blur": 0,
               "spread": 1,
-              "color": "{component.form-element.border-color-hover}",
+              "color": "{component.form-element.border-color-error-hover}",
               "opacity": 100,
               "inset": true
             }
           ]
         }
       },
-      "box-shadow-error-hover": {
+      "box-shadow-hover": {
         "type": "box-shadow",
-        "value": "{component.form-element.border-color-error-hover}",
+        "value": "{component.form-element.border-color-hover}",
         "attributes": {
           "box-shadow": [
             {
@@ -62,7 +62,7 @@
               "y": 0,
               "blur": 0,
               "spread": 1,
-              "color": "{component.form-element.border-color-error-hover}",
+              "color": "{component.form-element.border-color-hover}",
               "opacity": 100,
               "inset": true
             }
diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts
index b1b8c92647..6f7bbbca69 100644
--- a/packages/orbit-design-tokens/src/js/createTokens.ts
+++ b/packages/orbit-design-tokens/src/js/createTokens.ts
@@ -551,8 +551,8 @@ export interface Tokens {
   formElementBorderColorErrorHover: string;
   formElementBoxShadow: string;
   formElementBoxShadowError: string;
-  formElementBoxShadowHover: string;
   formElementBoxShadowErrorHover: string;
+  formElementBoxShadowHover: string;
   formElementFocusBoxShadow: string;
   formElementErrorFocusBoxShadow: string;
   formElementNormalFontSize: string;
@@ -1438,17 +1438,17 @@ const createTokens: CreateTokens = foundation => ({
       inset: true,
     },
   ]),
-  formElementBoxShadowHover: boxShadow([
+  formElementBoxShadowErrorHover: boxShadow([
     {
       def: ["0", "0", "0", "1px"],
-      color: transparentColor(foundation.palette.cloud.darkHover, 100),
+      color: transparentColor(foundation.palette.red.normalHover, 100),
       inset: true,
     },
   ]),
-  formElementBoxShadowErrorHover: boxShadow([
+  formElementBoxShadowHover: boxShadow([
     {
       def: ["0", "0", "0", "1px"],
-      color: transparentColor(foundation.palette.red.normalHover, 100),
+      color: transparentColor(foundation.palette.cloud.darkHover, 100),
       inset: true,
     },
   ]),
diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
index 244f014325..04e5c3f9ae 100644
--- a/packages/orbit-tailwind-preset/src/presets/components/index.ts
+++ b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -226,8 +226,8 @@ const cfg = (options?: Options): Config => {
           "country-flag": defaultTokens.countryFlagShadow,
           "form-element": defaultTokens.formElementBoxShadow,
           "form-element-error": defaultTokens.formElementBoxShadowError,
-          "form-element-hover": defaultTokens.formElementBoxShadowHover,
           "form-element-error-hover": defaultTokens.formElementBoxShadowErrorHover,
+          "form-element-hover": defaultTokens.formElementBoxShadowHover,
           "form-element-focus": defaultTokens.formElementFocusBoxShadow,
           switch: `inset 0 0 1px 0 rgba(7, 64, 92, 0.1),${defaultTokens.boxShadowAction}`,
         },
@@ -267,7 +267,7 @@ const cfg = (options?: Options): Config => {
       },
     },
     plugins: [
-      plugin(({ addVariant }) => {
+      plugin(({ addVariant, addUtilities }) => {
         return (
           addVariant("not-last", "&:not(:last-child)"),
           addVariant("not-first", "&:not(:first-child)"),
@@ -277,7 +277,16 @@ const cfg = (options?: Options): Config => {
           addVariant(
             "safari",
             "@supports (-webkit-touch-callout: none) and (not (translate: none))",
-          )
+          ),
+          addUtilities({
+            ".scrollbar-none": {
+              "-ms-overflow-style": "none",
+              "scrollbar-width": "none",
+              "&::-webkit-scrollbar": {
+                display: "none",
+              },
+            },
+          })
         );
       }),
     ],