[Toggle spacing] Website update to Style, Code, and A11y tabs

[laurenmrice]

Acceptance criteria

Update the Toggle component in website guidance to add the new feature flag spacing on the Style, Code, and Accessibility tabs.

---

Style tab

Color and Interactive state color sections

• Update the images to show the 8px spacing.

Structure section

Default toggle:

• Add an image for the Default toggle that shows the 8px spacing. Put this one first in this section.
  • The image caption should refer to this as the feature flag turned on.
• Add another Label text row to the table that specifies the 8px spacing. You can say "Label text (feature flag") for the new row in the table.

Small toggle:

• Add an image for the Small toggle that shows the 8px spacing. Put this one first in this section.
  • The image caption should refer to this as the feature flag turned on.
• Add another Label text row to the table that specifies the 8px spacing. You can say "Label text (feature flag") for the new row in the table.

---

Code tab

Refer to Tile as a reference when creating this section. The structure of this section for Toggle will be pretty similar.

• Add a ### Feature flags heading under the "Documentation" section.
• Add a paragraph under the heading about the toggle feature flag.
  • That paragraph content will mostly be word-for-word for what we have in the Tile component section, just take out anything related to Tile, and replace it with specifics to Toggle.

---

Accessibility tab

• Update all the images on the page to reflect the 8px spacing.
  • Fix the bug of the Do image of the data table color blending into the page background.

---

Review and merge

• Raise a PR
• Review and merge

[sunny-babbar]

Figma file template to create As-is and To-be layout in Figma before transferring to Vscode:

https://www.figma.com/design/MtVzjN4Xq7fE6j2Ty8GXeV/Toggle----Toggle-spacing--Website-update-to-Feature-flags-and-Usage-tabs--4630?node-id=1-3434&t=Jgz37dfs6Hvy7NEd-1