diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif new file mode 100644 index 00000000000..b174ea58827 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif new file mode 100644 index 00000000000..03f6b9354db Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif new file mode 100644 index 00000000000..b8f0f06368e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif new file mode 100644 index 00000000000..fa7d55a5762 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif new file mode 100644 index 00000000000..c7917e3b70b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif new file mode 100644 index 00000000000..8c4f1707547 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif new file mode 100644 index 00000000000..a39fdd58c11 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif new file mode 100644 index 00000000000..fbc4c12eea8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif new file mode 100644 index 00000000000..87a8b97d8c7 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif new file mode 100644 index 00000000000..13b7ab0f9a3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif new file mode 100644 index 00000000000..5bbaaccafb3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif new file mode 100644 index 00000000000..1974ea66b44 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif new file mode 100644 index 00000000000..6a983add5cf Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif new file mode 100644 index 00000000000..f090d7ffefc Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif new file mode 100644 index 00000000000..63c6c1930e6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif new file mode 100644 index 00000000000..a71978b1378 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif new file mode 100644 index 00000000000..61ce68ab608 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif new file mode 100644 index 00000000000..a57afd4e22f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif new file mode 100644 index 00000000000..d1fa6ac2ac9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif new file mode 100644 index 00000000000..8194eb32536 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif new file mode 100644 index 00000000000..92f85a78b17 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif new file mode 100644 index 00000000000..7da44d46ece Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif new file mode 100644 index 00000000000..7ec609f96fe Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif new file mode 100644 index 00000000000..a11edc65035 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif new file mode 100644 index 00000000000..effe81fb76a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif new file mode 100644 index 00000000000..f992f7b6487 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif new file mode 100644 index 00000000000..61c60eea495 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif new file mode 100644 index 00000000000..3e08a952898 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif new file mode 100644 index 00000000000..1d139a7a56a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif new file mode 100644 index 00000000000..366dc8e888b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif new file mode 100644 index 00000000000..275cf3c1193 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif new file mode 100644 index 00000000000..7d696876ebe Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif new file mode 100644 index 00000000000..94a84005d51 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif new file mode 100644 index 00000000000..84a02f404d6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif new file mode 100644 index 00000000000..36624bd4370 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif new file mode 100644 index 00000000000..fb5db20bdf5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif new file mode 100644 index 00000000000..1d389b85db5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif new file mode 100644 index 00000000000..7c042c3fb4e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif new file mode 100644 index 00000000000..556d79a35f1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif new file mode 100644 index 00000000000..80920b7bd8f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif new file mode 100644 index 00000000000..0688e35ba82 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif new file mode 100644 index 00000000000..917325576e0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif new file mode 100644 index 00000000000..4df1f861143 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif new file mode 100644 index 00000000000..7231459d338 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif new file mode 100644 index 00000000000..a1e1f341061 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif new file mode 100644 index 00000000000..4fca6fb0faa Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif new file mode 100644 index 00000000000..c535a917392 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif new file mode 100644 index 00000000000..3b6f1bf6684 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif new file mode 100644 index 00000000000..b2224db9d5f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif new file mode 100644 index 00000000000..2a8ba4ee3ff Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif new file mode 100644 index 00000000000..7e2f8c71741 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif new file mode 100644 index 00000000000..bc01aca2371 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif new file mode 100644 index 00000000000..c434ecec5be Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif new file mode 100644 index 00000000000..12a847c70a1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif new file mode 100644 index 00000000000..9e42d37fc61 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif new file mode 100644 index 00000000000..5cb4bd67e6f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif new file mode 100644 index 00000000000..c452a42b839 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif new file mode 100644 index 00000000000..056907aeeb3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif new file mode 100644 index 00000000000..d9c62839302 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif new file mode 100644 index 00000000000..801ccc7a1ae Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif new file mode 100644 index 00000000000..d93b585bdee Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif new file mode 100644 index 00000000000..7c028fc7f55 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif new file mode 100644 index 00000000000..aca350bf438 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif new file mode 100644 index 00000000000..4c87e314658 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif new file mode 100644 index 00000000000..96e442e7a0f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif new file mode 100644 index 00000000000..8ccc1a4fe43 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif new file mode 100644 index 00000000000..159f8a23fe4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif new file mode 100644 index 00000000000..f8746efbddf Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif new file mode 100644 index 00000000000..20e82cf4a6c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif new file mode 100644 index 00000000000..d16ef946255 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif new file mode 100644 index 00000000000..5f848415f4f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif new file mode 100644 index 00000000000..eaa00c9b4f3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif new file mode 100644 index 00000000000..9d96545e80e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif new file mode 100644 index 00000000000..fc51238167c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif new file mode 100644 index 00000000000..e95a702ce83 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif new file mode 100644 index 00000000000..fb2d114d339 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif new file mode 100644 index 00000000000..18a0945f02f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif new file mode 100644 index 00000000000..d7410a916b7 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif new file mode 100644 index 00000000000..9de7d076e6e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif new file mode 100644 index 00000000000..0cdefb2fb05 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif new file mode 100644 index 00000000000..834b6d4d478 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif new file mode 100644 index 00000000000..2046c49959a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif new file mode 100644 index 00000000000..5c9063a4efd Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif new file mode 100644 index 00000000000..a51a554fbbb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif new file mode 100644 index 00000000000..89fc05936c0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif new file mode 100644 index 00000000000..fd4bf177e67 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif new file mode 100644 index 00000000000..d4c86d8b705 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif new file mode 100644 index 00000000000..a9e74a5c4e1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif new file mode 100644 index 00000000000..09247588dc8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif new file mode 100644 index 00000000000..85db150a394 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif new file mode 100644 index 00000000000..8493722ac43 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif new file mode 100644 index 00000000000..8494a377a2f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif new file mode 100644 index 00000000000..0ef66fdb073 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif b/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif new file mode 100644 index 00000000000..a01411d8937 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif new file mode 100644 index 00000000000..3b6814304c4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif new file mode 100644 index 00000000000..a8d723ad387 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif new file mode 100644 index 00000000000..95795d9830f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif new file mode 100644 index 00000000000..fe6de936788 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif new file mode 100644 index 00000000000..32e503d6c4b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif new file mode 100644 index 00000000000..3821ea2f8e2 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif new file mode 100644 index 00000000000..76a91abb678 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif new file mode 100644 index 00000000000..41c23b61664 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif new file mode 100644 index 00000000000..295881ccee5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif new file mode 100644 index 00000000000..89449a0432a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif new file mode 100644 index 00000000000..a0a7bf9c5d0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif new file mode 100644 index 00000000000..37908f301e3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif new file mode 100644 index 00000000000..e52092de8a5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif new file mode 100644 index 00000000000..d45981126e2 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif new file mode 100644 index 00000000000..77367712a50 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif new file mode 100644 index 00000000000..fa354b3636f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif new file mode 100644 index 00000000000..4f468767bb0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif new file mode 100644 index 00000000000..45500ac054a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif new file mode 100644 index 00000000000..c1883f83dcc Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif new file mode 100644 index 00000000000..83e4d24cd6f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif b/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif new file mode 100644 index 00000000000..87998cb2b2e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif new file mode 100644 index 00000000000..b08bc92da06 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif new file mode 100644 index 00000000000..67f90113273 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif b/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif new file mode 100644 index 00000000000..fd526018880 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif new file mode 100644 index 00000000000..724cada9e24 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif new file mode 100644 index 00000000000..b84ae6e5f8b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif b/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif new file mode 100644 index 00000000000..0eae64abf29 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif new file mode 100644 index 00000000000..b5dfbbf6217 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif new file mode 100644 index 00000000000..01d7c52d7eb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif b/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif new file mode 100644 index 00000000000..7231459d338 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif new file mode 100644 index 00000000000..7a1d0ddd852 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif new file mode 100644 index 00000000000..2f362dcd826 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif b/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif new file mode 100644 index 00000000000..ff922d05a80 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif new file mode 100644 index 00000000000..d7e4f530e31 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif new file mode 100644 index 00000000000..5154f3500b7 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif new file mode 100644 index 00000000000..07d1fe34c2f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif new file mode 100644 index 00000000000..a469015d491 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif new file mode 100644 index 00000000000..f3107b56334 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif new file mode 100644 index 00000000000..3e59d6355ef Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif new file mode 100644 index 00000000000..953bc7cf551 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif new file mode 100644 index 00000000000..dbd7ed476f4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif new file mode 100644 index 00000000000..bb4ad8159f3 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif new file mode 100644 index 00000000000..c452a42b839 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif new file mode 100644 index 00000000000..5e954f16599 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif new file mode 100644 index 00000000000..efc04904ce7 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif new file mode 100644 index 00000000000..5690b86d487 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif new file mode 100644 index 00000000000..59646cc2884 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif new file mode 100644 index 00000000000..0e05f1cd281 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif new file mode 100644 index 00000000000..daeab61d348 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif b/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif new file mode 100644 index 00000000000..1cffa67d897 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif new file mode 100644 index 00000000000..8ccc1a4fe43 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif b/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif new file mode 100644 index 00000000000..ec66fd85374 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif new file mode 100644 index 00000000000..4ebc19d925a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif new file mode 100644 index 00000000000..08fdd33dab1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif new file mode 100644 index 00000000000..1f517d22438 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif new file mode 100644 index 00000000000..d7fe09f8daf Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif new file mode 100644 index 00000000000..23a6170c526 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif new file mode 100644 index 00000000000..3aa16ce6e6c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif new file mode 100644 index 00000000000..db591049ca9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif new file mode 100644 index 00000000000..63e63712003 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif new file mode 100644 index 00000000000..f4f7c905e96 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif new file mode 100644 index 00000000000..c58127c27eb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif new file mode 100644 index 00000000000..1d64552547d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif new file mode 100644 index 00000000000..17a4ef4e29a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif b/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif new file mode 100644 index 00000000000..0f58b101cce Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif b/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif new file mode 100644 index 00000000000..56a68dc4927 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif differ diff --git a/packages/dev/s2-docs/src/ComponentCard.tsx b/packages/dev/s2-docs/src/ComponentCard.tsx index 92b3f4095fb..1409c28c885 100644 --- a/packages/dev/s2-docs/src/ComponentCard.tsx +++ b/packages/dev/s2-docs/src/ComponentCard.tsx @@ -1,103 +1,169 @@ /* eslint-disable rulesdir/imports */ /* eslint-disable monorepo/no-internal-import */ -import ActionBarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionBar.svg'; -import ActionButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg'; -import ActionGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionGroup.svg'; + +import AccordionDark from 'url:../assets/component-illustrations/dark/Accordion.avif'; +import AccordionLight from 'url:../assets/component-illustrations/light/Accordion.avif'; +import ActionBarDark from 'url:../assets/component-illustrations/dark/ActionBar.avif'; +import ActionBarLight from 'url:../assets/component-illustrations/light/ActionBar.avif'; +import ActionButtonDark from 'url:../assets/component-illustrations/dark/ActionButton.avif'; +import ActionButtonLight from 'url:../assets/component-illustrations/light/ActionButton.avif'; +import ActionGroupDark from 'url:../assets/component-illustrations/dark/ActionGroup.avif'; +import ActionGroupLight from 'url:../assets/component-illustrations/light/ActionGroup.avif'; +import ActionMenuDark from 'url:../assets/component-illustrations/dark/ActionMenu.avif'; +import ActionMenuLight from 'url:../assets/component-illustrations/light/ActionMenu.avif'; +// @ts-ignore import AdobeDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/AdobeDefault.svg'; -import AutocompleteSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Autocomplete.svg'; -import AvatarGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/AvatarGroup.svg'; -import AvatarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Avatar.svg'; -import BadgeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Badge.svg'; -import BreadcrumbsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Breadcrumbs.svg'; -import ButtonGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ButtonGroup.svg'; -import ButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Button.svg'; -import CalendarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Calendar.svg'; +import AvatarDark from 'url:../assets/component-illustrations/dark/Avatar.avif'; +import AvatarGroupDark from 'url:../assets/component-illustrations/dark/AvatarGroup.avif'; +import AvatarGroupLight from 'url:../assets/component-illustrations/light/AvatarGroup.avif'; +import AvatarLight from 'url:../assets/component-illustrations/light/Avatar.avif'; +import BackgroundDark from 'url:../assets/component-illustrations/dark/gradient-bg.avif'; +import BackgroundLight from 'url:../assets/component-illustrations/light/gradient-bg.avif'; +import BadgeDark from 'url:../assets/component-illustrations/dark/Badge.avif'; +import BadgeLight from 'url:../assets/component-illustrations/light/Badge.avif'; +import BreadcrumbsDark from 'url:../assets/component-illustrations/dark/Breadcrumbs.avif'; +import BreadcrumbsLight from 'url:../assets/component-illustrations/light/Breadcrumbs.avif'; +import ButtonDark from 'url:../assets/component-illustrations/dark/Button.avif'; +import ButtonGroupDark from 'url:../assets/component-illustrations/dark/ButtonGroup.avif'; +import ButtonGroupLight from 'url:../assets/component-illustrations/light/ButtonGroup.avif'; +import ButtonLight from 'url:../assets/component-illustrations/light/Button.avif'; +import CalendarDark from 'url:../assets/component-illustrations/dark/Calendar.avif'; +import CalendarLight from 'url:../assets/component-illustrations/light/Calendar.avif'; import {Card, CardPreview, CardProps, Content, Text} from '@react-spectrum/s2'; -import CardSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Card.svg'; -import CardViewSvg from '@react-spectrum/docs/pages/assets/component-illustrations/CardView.svg'; -import CheckboxGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/CheckboxGroup.svg'; -import CheckboxSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Checkbox.svg'; -import CollectionsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Collections.svg'; -import ColorAreaSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorArea.svg'; -import ColorFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorField.svg'; -import ColorPickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorPicker.svg'; -import ColorSliderSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorSlider.svg'; -import ColorSwatchPickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorSwatchPicker.svg'; -import ColorSwatchSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorSwatch.svg'; -import ColorWheelSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorWheel.svg'; -import ComboBoxSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ComboBox.svg'; -import ContextualHelpSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ContextualHelp.svg'; -import DateFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DateField.svg'; -import DatePickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DatePicker.svg'; -import DateRangePickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DateRangePicker.svg'; -import DialogSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg'; -import DisclosureGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DisclosureGroup.svg'; -import DisclosureSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Disclosure.svg'; -import DividerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Divider.svg'; -import DragAndDropSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DragAndDrop.svg'; -import DropZoneSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DropZone.svg'; +import CardDark from 'url:../assets/component-illustrations/dark/Card.avif'; +import CardLight from 'url:../assets/component-illustrations/light/Card.avif'; +import CardViewDark from 'url:../assets/component-illustrations/dark/CardView.avif'; +import CardViewLight from 'url:../assets/component-illustrations/light/CardView.avif'; +import CheckboxDark from 'url:../assets/component-illustrations/dark/Checkbox.avif'; +import CheckboxGroupDark from 'url:../assets/component-illustrations/dark/CheckboxGroup.avif'; +import CheckboxGroupLight from 'url:../assets/component-illustrations/light/CheckboxGroup.avif'; +import CheckboxLight from 'url:../assets/component-illustrations/light/Checkbox.avif'; +import ClientSideRoutingDark from 'url:../assets/component-illustrations/dark/ClientSideRouting.avif'; +import ClientSideRoutingLight from 'url:../assets/component-illustrations/light/ClientSideRouting.avif'; +import CollectionDark from 'url:../assets/component-illustrations/dark/Collection.avif'; +import CollectionLight from 'url:../assets/component-illustrations/light/Collection.avif'; +import ColorAreaDark from 'url:../assets/component-illustrations/dark/ColorArea.avif'; +import ColorAreaLight from 'url:../assets/component-illustrations/light/ColorArea.avif'; +import ColorFieldDark from 'url:../assets/component-illustrations/dark/ColorField.avif'; +import ColorFieldLight from 'url:../assets/component-illustrations/light/ColorField.avif'; +import ColorSliderDark from 'url:../assets/component-illustrations/dark/ColorSlider.avif'; +import ColorSliderLight from 'url:../assets/component-illustrations/light/ColorSlider.avif'; +import ColorSwatchDark from 'url:../assets/component-illustrations/dark/ColorSwatch.avif'; +import ColorSwatchLight from 'url:../assets/component-illustrations/light/ColorSwatch.avif'; +import ColorSwatchPickerDark from 'url:../assets/component-illustrations/dark/ColorSwatchPicker.avif'; +import ColorSwatchPickerLight from 'url:../assets/component-illustrations/light/ColorSwatchPicker.avif'; +import ColorWheelDark from 'url:../assets/component-illustrations/dark/ColorWheel.avif'; +import ColorWheelLight from 'url:../assets/component-illustrations/light/ColorWheel.avif'; +import ComboBoxDark from 'url:../assets/component-illustrations/dark/ComboBox.avif'; +import ComboBoxLight from 'url:../assets/component-illustrations/light/ComboBox.avif'; +import ContextualHelpDark from 'url:../assets/component-illustrations/dark/ContextualHelp.avif'; +import ContextualHelpLight from 'url:../assets/component-illustrations/light/ContextualHelp.avif'; +import DateFieldDark from 'url:../assets/component-illustrations/dark/DateField.avif'; +import DateFieldLight from 'url:../assets/component-illustrations/light/DateField.avif'; +import DatePickerDark from 'url:../assets/component-illustrations/dark/DatePicker.avif'; +import DatePickerLight from 'url:../assets/component-illustrations/light/DatePicker.avif'; +import DateRangePickerDark from 'url:../assets/component-illustrations/dark/DateRangePicker.avif'; +import DateRangePickerLight from 'url:../assets/component-illustrations/light/DateRangePicker.avif'; +import DialogDark from 'url:../assets/component-illustrations/dark/Dialog.avif'; +import DialogLight from 'url:../assets/component-illustrations/light/Dialog.avif'; +import DisclosureDark from 'url:../assets/component-illustrations/dark/Disclosure.avif'; +import DisclosureLight from 'url:../assets/component-illustrations/light/Disclosure.avif'; +import DividerDark from 'url:../assets/component-illustrations/dark/Divider.avif'; +import DividerLight from 'url:../assets/component-illustrations/light/Divider.avif'; +import DropZoneDark from 'url:../assets/component-illustrations/dark/DropZone.avif'; +import DropZoneLight from 'url:../assets/component-illustrations/light/DropZone.avif'; import {ExampleImage} from './ExampleList'; -import FileTriggerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/FileTrigger.svg'; -import FocusScopeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/FocusScope.svg'; -import FormSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Form.svg'; -import GroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Group.svg'; -import IconsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Icons.svg'; -import IllustratedMessageSvg from '@react-spectrum/docs/pages/assets/component-illustrations/IllustratedMessage.svg'; -import IllustrationsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Illustrations.svg'; -import ImageSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Image.svg'; -import InlineAlertSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InlineAlert.svg'; -import InputSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Input.svg'; -import InternationalizedDateSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InternationalizedDate.svg'; +import FormsDark from 'url:../assets/component-illustrations/dark/Forms.avif'; +import FormsLight from 'url:../assets/component-illustrations/light/Forms.avif'; +import GettingStartedDark from 'url:../assets/component-illustrations/dark/GettingStarted.avif'; +import GettingStartedLight from 'url:../assets/component-illustrations/light/GettingStarted.avif'; +import IconsDark from 'url:../assets/component-illustrations/dark/Icons.avif'; +import IconsLight from 'url:../assets/component-illustrations/light/Icons.avif'; +import IllustratedMessageDark from 'url:../assets/component-illustrations/dark/IllustratedMessage.avif'; +import IllustratedMessageLight from 'url:../assets/component-illustrations/light/IllustratedMessage.avif'; +import IllustrationsDark from 'url:../assets/component-illustrations/dark/Illustrations.avif'; +import IllustrationsLight from 'url:../assets/component-illustrations/light/Illustrations.avif'; +import ImageDark from 'url:../assets/component-illustrations/dark/Image.avif'; +import ImageLight from 'url:../assets/component-illustrations/light/Image.avif'; +import InlineAlertDark from 'url:../assets/component-illustrations/dark/InlineAlert.avif'; +import InlineAlertLight from 'url:../assets/component-illustrations/light/InlineAlert.avif'; +// @ts-ignore import InternationalizedDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InternationalizedDefault.svg'; -import LabeledValueSvg from '@react-spectrum/docs/pages/assets/component-illustrations/LabeledValue.svg'; -import LabelSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Label.svg'; -import LinkSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg'; -import ListBoxSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ListBox.svg'; -import ListViewSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ListView.svg'; -import mcpSvg from './icons/mcp.svg'; -import MenuSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Menu.svg'; -import MeterSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Meter.svg'; -import ModalSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Modal.svg'; -import NumberFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/NumberField.svg'; +import LinkButtonDark from 'url:../assets/component-illustrations/dark/LinkButton.avif'; +import LinkButtonLight from 'url:../assets/component-illustrations/light/LinkButton.avif'; +import LinkDark from 'url:../assets/component-illustrations/dark/Link.avif'; +import LinkLight from 'url:../assets/component-illustrations/light/Link.avif'; +import McpServerDark from 'url:../assets/component-illustrations/dark/McpServer.avif'; +import McpServerLight from 'url:../assets/component-illustrations/light/McpServer.avif'; +import MenuDark from 'url:../assets/component-illustrations/dark/Menu.avif'; +import MenuLight from 'url:../assets/component-illustrations/light/Menu.avif'; +import MeterDark from 'url:../assets/component-illustrations/dark/Meter.avif'; +import MeterLight from 'url:../assets/component-illustrations/light/Meter.avif'; +import NumberFieldDark from 'url:../assets/component-illustrations/dark/NumberField.avif'; +import NumberFieldLight from 'url:../assets/component-illustrations/light/NumberField.avif'; import {Page} from '@parcel/rsc'; -import PickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Picker.svg'; -import PopoverSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Popover.svg'; -import ProgressBarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ProgressBar.svg'; -import ProgressCircleSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ProgressCircle.svg'; -import RadioGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/RadioGroup.svg'; -import RangeCalendarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/RangeCalendar.svg'; -import RangeSliderSvg from '@react-spectrum/docs/pages/assets/component-illustrations/RangeSlider.svg'; +import PickerDark from 'url:../assets/component-illustrations/dark/Picker.avif'; +import PickerLight from 'url:../assets/component-illustrations/light/Picker.avif'; +import PopoverDark from 'url:../assets/component-illustrations/dark/Popover.avif'; +import PopoverLight from 'url:../assets/component-illustrations/light/Popover.avif'; +import ProgressBarDark from 'url:../assets/component-illustrations/dark/ProgressBar.avif'; +import ProgressBarLight from 'url:../assets/component-illustrations/light/ProgressBar.avif'; +import ProgressCircleDark from 'url:../assets/component-illustrations/dark/ProgressCircle.avif'; +import ProgressCircleLight from 'url:../assets/component-illustrations/light/ProgressCircle.avif'; +import ProviderDark from 'url:../assets/component-illustrations/dark/Provider.avif'; +import ProviderLight from 'url:../assets/component-illustrations/light/Provider.avif'; +import RadioGroupDark from 'url:../assets/component-illustrations/dark/RadioGroup.avif'; +import RadioGroupLight from 'url:../assets/component-illustrations/light/RadioGroup.avif'; +import RangeCalendarDark from 'url:../assets/component-illustrations/dark/RangeCalendar.avif'; +import RangeCalendarLight from 'url:../assets/component-illustrations/light/RangeCalendar.avif'; +import RangeSliderDark from 'url:../assets/component-illustrations/dark/RangeSlider.avif'; +import RangeSliderLight from 'url:../assets/component-illustrations/light/RangeSlider.avif'; import React from 'react'; +// @ts-ignore import ReactAriaDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ReactAriaDefault.svg'; -import SearchFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SearchField.svg'; -import SegmentedControlSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SegmentedControl.svg'; -import SelectBoxGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SelectBoxGroup.svg'; -import SelectionSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Selection.svg'; -import SkeletonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Skeleton.svg'; -import SliderSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Slider.svg'; -import StatusLightSvg from '@react-spectrum/docs/pages/assets/component-illustrations/StatusLight.svg'; +import SearchFieldDark from 'url:../assets/component-illustrations/dark/SearchField.avif'; +import SearchFieldLight from 'url:../assets/component-illustrations/light/SearchField.avif'; +import SegmentedControlDark from 'url:../assets/component-illustrations/dark/SegmentedControl.avif'; +import SegmentedControlLight from 'url:../assets/component-illustrations/light/SegmentedControl.avif'; +import SelectBoxGroupDark from 'url:../assets/component-illustrations/dark/SelectBoxGroup.avif'; +import SelectBoxGroupLight from 'url:../assets/component-illustrations/light/SelectBoxGroup.avif'; +import SelectionDark from 'url:../assets/component-illustrations/dark/Selection.avif'; +import SelectionLight from 'url:../assets/component-illustrations/light/Selection.avif'; +import SkeletonDark from 'url:../assets/component-illustrations/dark/Skeleton.avif'; +import SkeletonLight from 'url:../assets/component-illustrations/light/Skeleton.avif'; +import SliderDark from 'url:../assets/component-illustrations/dark/Slider.avif'; +import SliderLight from 'url:../assets/component-illustrations/light/Slider.avif'; +import StatusLightDark from 'url:../assets/component-illustrations/dark/StatusLight.avif'; +import StatusLightLight from 'url:../assets/component-illustrations/light/StatusLight.avif'; import {style} from '@react-spectrum/s2/style' with { type: 'macro' }; -import SwitchSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Switch.svg'; -import TableSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Table.svg'; -import TabsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Tabs.svg'; -import TagGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/TagGroup.svg'; -import TextAreaSvg from '@react-spectrum/docs/pages/assets/component-illustrations/TextArea.svg'; -import TextFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/TextField.svg'; -import TimeFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/TimeField.svg'; -import ToastSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Toast.svg'; -import ToggleButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ToggleButton.svg'; -import ToolbarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Toolbar.svg'; -import TooltipSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Tooltip.svg'; -import TreeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Tree.svg'; -import useFocusRingSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useFocusRing.svg'; -import useFocusSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useFocus.svg'; -import useFocusWithinSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useFocusWithin.svg'; -import useHoverSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useHover.svg'; -import useKeyboardSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useKeyboard.svg'; -import useLongPressSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useLongPress.svg'; -import useMoveSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useMove.svg'; -import usePressSvg from '@react-spectrum/docs/pages/assets/component-illustrations/usePress.svg'; -import VirtualizerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Virtualizer.svg'; +import StyleDark from 'url:../assets/component-illustrations/dark/Style.avif'; +import StyleLight from 'url:../assets/component-illustrations/light/Style.avif'; +import StyleMacroDark from 'url:../assets/component-illustrations/dark/StyleMacro.avif'; +import StyleMacroLight from 'url:../assets/component-illustrations/light/StyleMacro.avif'; +import SwitchDark from 'url:../assets/component-illustrations/dark/Switch.avif'; +import SwitchLight from 'url:../assets/component-illustrations/light/Switch.avif'; +import TableDark from 'url:../assets/component-illustrations/dark/Table.avif'; +import TableLight from 'url:../assets/component-illustrations/light/Table.avif'; +import TabsDark from 'url:../assets/component-illustrations/dark/Tabs.avif'; +import TabsLight from 'url:../assets/component-illustrations/light/Tabs.avif'; +import TagGroupDark from 'url:../assets/component-illustrations/dark/TagGroup.avif'; +import TagGroupLight from 'url:../assets/component-illustrations/light/TagGroup.avif'; +import TextAreaDark from 'url:../assets/component-illustrations/dark/TextArea.avif'; +import TextAreaLight from 'url:../assets/component-illustrations/light/TextArea.avif'; +import TextFieldDark from 'url:../assets/component-illustrations/dark/TextField.avif'; +import TextFieldLight from 'url:../assets/component-illustrations/light/TextField.avif'; +import TimeFieldDark from 'url:../assets/component-illustrations/dark/TimeField.avif'; +import TimeFieldLight from 'url:../assets/component-illustrations/light/TimeField.avif'; +import ToastDark from 'url:../assets/component-illustrations/dark/Toast.avif'; +import ToastLight from 'url:../assets/component-illustrations/light/Toast.avif'; +import ToggleButtonDark from 'url:../assets/component-illustrations/dark/ToggleButton.avif'; +import ToggleButtonGroupDark from 'url:../assets/component-illustrations/dark/ToggleButtonGroup.avif'; +import ToggleButtonGroupLight from 'url:../assets/component-illustrations/light/ToggleButtonGroup.avif'; +import ToggleButtonLight from 'url:../assets/component-illustrations/light/ToggleButton.avif'; +import TooltipDark from 'url:../assets/component-illustrations/dark/Tooltip.avif'; +import TooltipLight from 'url:../assets/component-illustrations/light/Tooltip.avif'; +import TreeDark from 'url:../assets/component-illustrations/dark/Tree.avif'; +import TreeLight from 'url:../assets/component-illustrations/light/Tree.avif'; export interface ComponentCardItem { id: string, @@ -105,154 +171,126 @@ export interface ComponentCardItem { href: string } -const componentIllustrations: Record = { - 'Accordion': DisclosureGroupSvg, - 'ActionBar': ActionBarSvg, - 'ActionButton': ActionButtonSvg, - 'ActionButtonGroup': ButtonGroupSvg, // TODO: get better illustration - 'ActionGroup': ActionGroupSvg, - 'ActionMenu': MenuSvg, - 'Autocomplete': AutocompleteSvg, - 'Avatar': AvatarSvg, - 'AvatarGroup': AvatarGroupSvg, - 'Badge': BadgeSvg, - 'Breadcrumbs': BreadcrumbsSvg, - 'Button': ButtonSvg, - 'ButtonGroup': ButtonGroupSvg, - 'Calendar': CalendarSvg, - 'Card': CardSvg, - 'CardView': CardViewSvg, - 'Checkbox': CheckboxSvg, - 'CheckboxGroup': CheckboxGroupSvg, - 'Collections': CollectionsSvg, - 'ColorArea': ColorAreaSvg, - 'ColorField': ColorFieldSvg, - 'ColorPicker': ColorPickerSvg, - 'ColorSlider': ColorSliderSvg, - 'ColorSwatch': ColorSwatchSvg, - 'ColorSwatchPicker': ColorSwatchPickerSvg, - 'ColorWheel': ColorWheelSvg, - 'ComboBox': ComboBoxSvg, - 'ContextualHelp': ContextualHelpSvg, - 'DateField': DateFieldSvg, - 'DatePicker': DatePickerSvg, - 'DateRangePicker': DateRangePickerSvg, - 'Dialog': DialogSvg, - 'Disclosure': DisclosureSvg, - 'DisclosureGroup': DisclosureGroupSvg, - 'Divider': DividerSvg, - 'Drag and Drop': DragAndDropSvg, - 'DropZone': DropZoneSvg, - 'FileTrigger': FileTriggerSvg, - 'FocusScope': FocusScopeSvg, - 'Form': FormSvg, - 'Forms': FormSvg, - 'GridList': ListViewSvg, // GridList -> ListView - 'Group': GroupSvg, - 'Icons': IconsSvg, - 'IllustratedMessage': IllustratedMessageSvg, - 'Illustrations': IllustrationsSvg, - 'Image': ImageSvg, - 'InlineAlert': InlineAlertSvg, - 'Input': InputSvg, - 'InternationalizedDate': InternationalizedDateSvg, - 'Label': LabelSvg, - 'LabeledValue': LabeledValueSvg, - 'Link': LinkSvg, - 'LinkButton': ButtonSvg, // TODO: get better illustration - 'ListBox': ListBoxSvg, - 'ListView': ListViewSvg, - 'Menu': MenuSvg, - 'Meter': MeterSvg, - 'Modal': ModalSvg, - 'NumberField': NumberFieldSvg, - 'Picker': PickerSvg, - 'Popover': PopoverSvg, - 'ProgressBar': ProgressBarSvg, - 'ProgressCircle': ProgressCircleSvg, - 'RadioGroup': RadioGroupSvg, - 'RangeCalendar': RangeCalendarSvg, - 'RangeSlider': RangeSliderSvg, - 'SearchField': SearchFieldSvg, - 'SegmentedControl': SegmentedControlSvg, - 'Select': PickerSvg, // Select -> Picker - 'SelectBoxGroup': SelectBoxGroupSvg, - 'Selection': SelectionSvg, - 'Skeleton': SkeletonSvg, - 'Slider': SliderSvg, - 'StatusLight': StatusLightSvg, - 'Switch': SwitchSvg, - 'Table': TableSvg, - 'TableView': TableSvg, - 'Tabs': TabsSvg, - 'TagGroup': TagGroupSvg, - 'TextArea': TextAreaSvg, - 'TextField': TextFieldSvg, - 'TimeField': TimeFieldSvg, - 'Toast': ToastSvg, - 'ToggleButton': ToggleButtonSvg, - 'ToggleButtonGroup': ActionGroupSvg, // ToggleButtonGroup -> ActionGroup - 'Toolbar': ToolbarSvg, - 'Tooltip': TooltipSvg, - 'Tree': TreeSvg, - 'TreeView': TreeSvg, - 'Virtualizer': VirtualizerSvg, - 'useFocus': useFocusSvg, - 'useFocusRing': useFocusRingSvg, - 'useFocusWithin': useFocusWithinSvg, - 'useHover': useHoverSvg, - 'useKeyboard': useKeyboardSvg, - 'useLongPress': useLongPressSvg, - 'useMove': useMoveSvg, - 'usePress': usePressSvg, - 'MCP Server': mcpSvg -}; - -// Overrides for specific illustrations so they fit within the cards. -const propOverrides: Record = { - Autocomplete: { - style: {height: 'calc(100% - 16px)'} - }, - DateField: { - viewBox: '0 -56 276 276' - }, - TimeField: { - viewBox: '0 -56 276 276' - }, - DatePicker: { - style: {alignSelf: 'end', height: 'calc(100% - 16px)'} - }, - DateRangePicker: { - style: {alignSelf: 'end', height: 'calc(100% - 16px)'} - }, - DropZone: { - viewBox: '0 0 290 220', - style: {height: 'calc(100% - 16px)'} - }, - Select: { - // Safari doesn't calculate the max-height correctly with the aspect-ratio. - style: {height: 'calc(100% - 16px)'} - }, - Picker: { - style: {height: 'calc(100% - 16px)'} - }, - ComboBox: { - style: {height: 'calc(100% - 16px)'} - } +// Mapping from component names to their illustration [light, dark] tuple +const componentIllustrations: Record = { + // Components + 'Accordion': [AccordionLight, AccordionDark], + 'ActionBar': [ActionBarLight, ActionBarDark], + 'ActionButton': [ActionButtonLight, ActionButtonDark], + 'ActionButtonGroup': [ButtonGroupLight, ButtonGroupDark], + 'ActionGroup': [ActionGroupLight, ActionGroupDark], + 'ActionMenu': [ActionMenuLight, ActionMenuDark], + 'Avatar': [AvatarLight, AvatarDark], + 'AvatarGroup': [AvatarGroupLight, AvatarGroupDark], + 'Badge': [BadgeLight, BadgeDark], + 'Breadcrumbs': [BreadcrumbsLight, BreadcrumbsDark], + 'Button': [ButtonLight, ButtonDark], + 'ButtonGroup': [ButtonGroupLight, ButtonGroupDark], + 'Calendar': [CalendarLight, CalendarDark], + 'Card': [CardLight, CardDark], + 'CardView': [CardViewLight, CardViewDark], + 'Checkbox': [CheckboxLight, CheckboxDark], + 'CheckboxGroup': [CheckboxGroupLight, CheckboxGroupDark], + 'ColorArea': [ColorAreaLight, ColorAreaDark], + 'ColorField': [ColorFieldLight, ColorFieldDark], + 'ColorSlider': [ColorSliderLight, ColorSliderDark], + 'ColorSwatch': [ColorSwatchLight, ColorSwatchDark], + 'ColorSwatchPicker': [ColorSwatchPickerLight, ColorSwatchPickerDark], + 'ColorWheel': [ColorWheelLight, ColorWheelDark], + 'ComboBox': [ComboBoxLight, ComboBoxDark], + 'ContextualHelp': [ContextualHelpLight, ContextualHelpDark], + 'DateField': [DateFieldLight, DateFieldDark], + 'DatePicker': [DatePickerLight, DatePickerDark], + 'DateRangePicker': [DateRangePickerLight, DateRangePickerDark], + 'Dialog': [DialogLight, DialogDark], + 'Disclosure': [DisclosureLight, DisclosureDark], + 'DisclosureGroup': [AccordionLight, AccordionDark], + 'Divider': [DividerLight, DividerDark], + 'DropZone': [DropZoneLight, DropZoneDark], + 'Icons': [IconsLight, IconsDark], + 'IllustratedMessage': [IllustratedMessageLight, IllustratedMessageDark], + 'Illustrations': [IllustrationsLight, IllustrationsDark], + 'Image': [ImageLight, ImageDark], + 'InlineAlert': [InlineAlertLight, InlineAlertDark], + 'Link': [LinkLight, LinkDark], + 'LinkButton': [LinkButtonLight, LinkButtonDark], + 'Menu': [MenuLight, MenuDark], + 'Meter': [MeterLight, MeterDark], + 'NumberField': [NumberFieldLight, NumberFieldDark], + 'Picker': [PickerLight, PickerDark], + 'Popover': [PopoverLight, PopoverDark], + 'ProgressBar': [ProgressBarLight, ProgressBarDark], + 'ProgressCircle': [ProgressCircleLight, ProgressCircleDark], + 'Provider': [ProviderLight, ProviderDark], + 'RadioGroup': [RadioGroupLight, RadioGroupDark], + 'RangeCalendar': [RangeCalendarLight, RangeCalendarDark], + 'RangeSlider': [RangeSliderLight, RangeSliderDark], + 'SearchField': [SearchFieldLight, SearchFieldDark], + 'SegmentedControl': [SegmentedControlLight, SegmentedControlDark], + 'Select': [PickerLight, PickerDark], + 'SelectBoxGroup': [SelectBoxGroupLight, SelectBoxGroupDark], + 'Skeleton': [SkeletonLight, SkeletonDark], + 'Slider': [SliderLight, SliderDark], + 'StatusLight': [StatusLightLight, StatusLightDark], + 'Switch': [SwitchLight, SwitchDark], + 'Table': [TableLight, TableDark], + 'TableView': [TableLight, TableDark], + 'Tabs': [TabsLight, TabsDark], + 'TagGroup': [TagGroupLight, TagGroupDark], + 'TextArea': [TextAreaLight, TextAreaDark], + 'TextField': [TextFieldLight, TextFieldDark], + 'TimeField': [TimeFieldLight, TimeFieldDark], + 'Toast': [ToastLight, ToastDark], + 'ToggleButton': [ToggleButtonLight, ToggleButtonDark], + 'ToggleButtonGroup': [ToggleButtonGroupLight, ToggleButtonGroupDark], + 'Tooltip': [TooltipLight, TooltipDark], + 'Tree': [TreeLight, TreeDark], + 'TreeView': [TreeLight, TreeDark], + // Guides + 'Collections': [CollectionLight, CollectionDark], + 'Forms': [FormsLight, FormsDark], + 'Selection': [SelectionLight, SelectionDark], + 'MCP Server': [McpServerLight, McpServerDark], + 'Styling': [StyleLight, StyleDark], + 'Style Macro': [StyleMacroLight, StyleMacroDark], + 'Getting Started': [GettingStartedLight, GettingStartedDark], + 'Client Side Routing': [ClientSideRoutingLight, ClientSideRoutingDark] }; const illustrationContainer = style({ width: 'full', - aspectRatio: '3/2', - backgroundColor: '--anatomy-gray-100', + aspectRatio: '8/5', display: 'flex', alignItems: 'center', justifyContent: 'center', - minHeight: 0 + minHeight: 0, + overflow: 'hidden', + position: 'relative' +}); + +const backgroundStyles = style({ + position: 'absolute', + inset: 0, + width: 'full', + height: 'full', + objectFit: 'cover', + userSelect: 'none', + pointerEvents: 'none' }); const illustrationStyles = style({ + position: 'relative', + width: 'full', + height: 'full', + objectFit: 'cover', + userSelect: 'none', + pointerEvents: 'none' +}); + +const defaultIllustrationStyles = style({ + position: 'relative', maxWidth: 'calc(100% - 16px)', + maxHeight: 'calc(100% - 16px)', userSelect: 'none', pointerEvents: 'none' }); @@ -266,8 +304,74 @@ function getDefaultIllustration(href: string) { return AdobeDefaultSvg; } +const releaseText = style({ + position: 'relative', + font: 'heading-lg', + color: 'white' +}); + +interface IllustrationProps { + name: string, + href: string +} + +function ComponentIllustration({name, href}: IllustrationProps) { + const illustration = componentIllustrations[name]; + + if (!illustration) { + // Return the default library logo for components without illustrations + const DefaultIllustration = getDefaultIllustration(href); + return ( +
+ {/* Background gradient */} + + + + + +
+ ); + } + + const [light, dark] = illustration; + + return ( +
+ {/* Background gradient */} + + + + + + {/* Component illustration */} + + + + + +
+ ); +} + function getReleaseVersionLabel(href: string) { - let match = href.match(/releases\/(v[\w-]+)\.html$/i); + // Match releases with or without .html extension + let match = href.match(/releases\/(v[\w-]+)(?:\.html)?$/i); if (!match) { return null; } @@ -281,32 +385,30 @@ interface ComponentCardProps extends Omit { } export function ComponentCard({id, name, href, description, size, ...otherProps}: ComponentCardProps) { - let IllustrationComponent = componentIllustrations[name] || getDefaultIllustration(href); - let overrides = propOverrides[name] || {}; let preview; let releaseVersion = getReleaseVersionLabel(href); + if (releaseVersion) { preview = ( -
- {releaseVersion} +
+ {/* Background gradient */} + + + + + + {releaseVersion}
); } else if (href.includes('react-aria/examples/') && !href.endsWith('index.html')) { preview = ; } else { - preview = ( -
-
- ); + preview = ; } return ( diff --git a/scripts/processComponentImages.mjs b/scripts/processComponentImages.mjs new file mode 100644 index 00000000000..d7fc9ea9414 --- /dev/null +++ b/scripts/processComponentImages.mjs @@ -0,0 +1,141 @@ +import fs from 'fs'; +import path from 'path'; +import sharp from 'sharp'; + +const OUTPUT_DIR = 'packages/dev/s2-docs/assets/component-illustrations'; + +// Mappings from source file names to target page names +const mappings = { + 'DateAndTime.avif': 'DatePicker.avif', + 'DateAndTime(Range).avif': 'DateRangePicker.avif', + 'Slider(Range).avif': 'RangeSlider.avif', + 'InLineAlert.avif': 'InlineAlert.avif', + 'CardsView.avif': 'CardView.avif', + 'Cards.avif': 'Card.avif', + 'Images.avif': 'Image.avif', + 'Swatch.avif': 'ColorSwatch.avif', + 'SwatchGroup.avif': 'ColorSwatchPicker.avif', + 'TreeView.avif': 'Tree.avif', + 'SelectBox.avif': 'SelectBoxGroup.avif', + 'MigratingToSpectrum3.avif': 'MigratingToSpectrum3.avif', + 'MigratingToSpectrum2.avif': 'MigratingToSpectrum2.avif', + "What'sNew.avif": 'WhatsNew.avif', + 'Releases(Numbers).avif': 'Releases.avif', + 'Home.avif': 'Home.avif', + 'MCPServer.avif': 'McpServer.avif' +}; + +function transformFilename(basename) { + // Remove the _4-3_(Light|Dark)@2x suffix and convert kebab-case to PascalCase + let renamed = basename + .replace(/_4-3_(Light|Dark)@2x/i, '') + .replace(/\.png$/i, '.avif') + .replace(/-([a-z])/gi, (_, v) => v.toUpperCase()) + .replace(/^([a-z])/, (_, v) => v.toUpperCase()) // Capitalize first letter + .replace(/ /g, ''); // Remove spaces + + // Apply custom mappings + if (mappings[renamed]) { + renamed = mappings[renamed]; + } + + return renamed; +} + +async function processImages(sourceDir) { + if (!sourceDir) { + console.error('Usage: node scripts/processComponentImages.mjs '); + console.error('Example: node scripts/processComponentImages.mjs temp'); + process.exit(1); + } + + // Resolve the source directory + sourceDir = path.resolve(sourceDir); + + if (!fs.existsSync(sourceDir)) { + console.error(`Error: Source directory "${sourceDir}" does not exist.`); + process.exit(1); + } + + console.log(`Processing images from: ${sourceDir}`); + console.log(`Output directory: ${OUTPUT_DIR}\n`); + + // Ensure output directories exist + fs.mkdirSync(path.join(OUTPUT_DIR, 'light'), {recursive: true}); + fs.mkdirSync(path.join(OUTPUT_DIR, 'dark'), {recursive: true}); + + let processedCount = 0; + + // Process background images + const backgrounds = [ + {src: 'Backgrounds/Gradient_Light_@2x.png', dest: 'light/gradient-bg.avif'}, + {src: 'Backgrounds/Gradient_Dark_@2x.png', dest: 'dark/gradient-bg.avif'} + ]; + + for (const bg of backgrounds) { + const srcPath = path.join(sourceDir, bg.src); + const destPath = path.join(OUTPUT_DIR, bg.dest); + + if (fs.existsSync(srcPath)) { + try { + await sharp(srcPath) + .avif({quality: 80}) + .toFile(destPath); + console.log(`✓ ${bg.src} -> ${bg.dest}`); + processedCount++; + } catch (err) { + console.error(`✗ Error processing ${bg.src}:`, err.message); + } + } + } + + // Process Light mode and Dark mode directories + const modes = [ + {srcFolder: 'Light mode', destFolder: 'light'}, + {srcFolder: 'Dark mode', destFolder: 'dark'} + ]; + + for (const mode of modes) { + const modeDir = path.join(sourceDir, mode.srcFolder); + + if (!fs.existsSync(modeDir)) { + console.log(`Skipping ${mode.srcFolder} (directory not found)`); + continue; + } + + // Process both Components and Guides subdirectories + const subdirs = ['Components', 'Guides']; + + for (const subdir of subdirs) { + const fullSubdir = path.join(modeDir, subdir); + + if (!fs.existsSync(fullSubdir)) { + continue; + } + + const files = fs.readdirSync(fullSubdir).filter(f => f.toLowerCase().endsWith('.png')); + + for (const file of files) { + const srcPath = path.join(fullSubdir, file); + const newFilename = transformFilename(file); + const destPath = path.join(OUTPUT_DIR, mode.destFolder, newFilename); + + try { + await sharp(srcPath) + .avif({quality: 80}) + .toFile(destPath); + console.log(`✓ ${mode.srcFolder}/${subdir}/${file} -> ${mode.destFolder}/${newFilename}`); + processedCount++; + } catch (err) { + console.error(`✗ Error processing ${file}:`, err.message); + } + } + } + } + + console.log(`\nDone! Processed ${processedCount} images.`); +} + +// Get source directory from command line arguments +const sourceDir = process.argv[2]; +processImages(sourceDir).catch(console.error);