Toggles with redesign tokens (#39917)

app/javascript/mastodon/components/form_fields/redesign.module.scss

@@ -0,0 +1,19 @@
+.toggle.toggle {
+  background: rgb(from var(--color-bg-inverted) r g b / 70%);
+
+  &::before {
+    box-shadow: none;
+    background: var(--color-bg-primary);
+  }
+}
+
+.toggle.toggleSmall {
+  --padding: 2px;
+  --diameter: 14px;
+
+  width: 32px;
+}
+
+input:checked + .toggle.toggleSmall::before {
+  transform: translateX(var(--diameter));
+}

app/javascript/mastodon/components/form_fields/redesign.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ToggleField } from './redesign';
+
+interface FieldProps {
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+const meta = {
+  title: 'Redesign/Form Fields',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We need to add args or TS doesn't see it in other render functions.
+  render(args) {
+    return <>Empty</>; // Override elsewhere
+  },
+  args: {
+    label: 'Label',
+    hint: 'This is a description of this form field',
+    disabled: false,
+  },
+} satisfies Meta<FieldProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Toggle: Story = {
+  render(args) {
+    return <ToggleField {...args} />;
+  },
+};
+
+export const ToggleSmall: Story = {
+  render(args) {
+    return <ToggleField {...args} size='sm' />;
+  },
+};

app/javascript/mastodon/components/form_fields/redesign.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+
+import type { Merge } from 'type-fest';
+
+import classes from './redesign.module.scss';
+import {
+  Toggle as OldToggle,
+  ToggleField as OldToggleField,
+} from './toggle_field';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToggleComponent<T extends React.JSXElementConstructor<any>> = React.FC<
+  Merge<
+    React.ComponentProps<T>,
+    {
+      size?: 'sm' | 'lg';
+    }
+  >
+>;
+
+export const Toggle: ToggleComponent<typeof OldToggle> = ({
+  className,
+  size,
+  ...props
+}) => (
+  <OldToggle
+    {...props}
+    className={classNames(
+      className,
+      classes.toggle,
+      size === 'sm' && classes.toggleSmall,
+    )}
+  />
+);
+
+export const ToggleField: ToggleComponent<typeof OldToggleField> = ({
+  className,
+  size,
+  ...props
+}) => (
+  <OldToggleField
+    {...props}
+    className={classNames(
+      className,
+      classes.toggle,
+      size === 'sm' && classes.toggleSmall,
+    )}
+  />
+);