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..9b051e06a26 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..67ade05f1fa 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..76e54008ca0 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..4189d1edb39 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..3f420d9d037 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..53bddfaa6dd 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..a575121125b 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..4d75bedebed 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..08787e88bf5 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..68f0c3bbe78 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..10a1eef3f51 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..259c8ababec 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..f159193839d 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..360af533224 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..30ebe0b071f 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..1a6d4d5a22a 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..f2f65151a45 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..876696ce2a9 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..9f70d1b42fe 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..4f4924a3a8c 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..2e1c8667442 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..71786db5409 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..d33dadc5ee9 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..61c1dd7b853 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..d6b66984642 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..46c18c81391 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..f71e3c479cb 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..00fba252914 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..e0563f317ab 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..dbf26131dc2 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..ae358f3eeda 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..a1504b00e7e 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..5ce86f2e733 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..baaf507f2ab 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..1920c559f78 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..3332838a1e8 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..e23769b1d6e 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..18ddaeaa551 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..35c04e39828 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..61dc90c53b6 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..98e9b5cd736 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..06e298b15c9 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..d20f22db53c 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..069bc95d4d4 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..d4570ca92c1 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..1daa9c50d42 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..8bbe86cb145 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..2bf95bce5eb 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..38220922209 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..e05825c7b15 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..89cf90c0ac4 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..b3e09277b33 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..ab95405a454 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..3dbf1d1d010 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..6a7681135ac 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..1ee8609106d 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..43014b9ef3e 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..77f40e5cd24 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..a5337493ba5 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..5b2d004614d 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..2146736e3a2 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..985d0f8b9eb 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..6aa3c5f62c8 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..e1101354f62 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..138fc00fabf 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..a0d64a4456a 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..9e8b60cb34b 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..3126b2b1b2e 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..1b96802cd57 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..2b3bff9a13e 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..c2131738468 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..15948949fd0 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..e4df49f9975 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..b909698c3be 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..3a38c01154d 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..4d1d7dac95d 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..b93e61fb021 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..facd62adb50 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..1d28a3aab8d 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..5444be9d5bb 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..13bced33bed 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..64036e945c9 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..e8dc552fd54 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..b2c26754f14 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..018e08d6fc5 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..f2deba54ae1 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..4a39232e0b6 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..f667b5e5596 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..d565d13616b 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..a2c041d06ce 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..11f02509890 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..64ecea88095 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..8fcc28c5212 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..7f20f7b548f 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..70aaa278779 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..39db9b53a29 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..4fd7a90fe11 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..4210e3d96e0 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..4d2e0e79c25 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..728f7e140bd 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..e119f6e37ba 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..c6781c29830 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..3a0ee5307fc 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..a3b5eded965 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..1ebf0934889 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..75889ed5f45 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..b76bee53606 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..ae71fdc37fa 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..39bc4be3be9 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..0a350c85684 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..5529b07ff4a 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..da5e932391d 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..e9fcd010a7c 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..38596f0a6b6 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..cdb88b99b42 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..1792fb9e6e1 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..4b33ef983ff 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..e5a1419cfc6 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..db8887e5de1 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..c9e7982a482 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..fcbcad733b4 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..a3bd706aa83 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..7081774156f 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..4916d375006 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..1fb8fdab652 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..10d5e4e4777 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..998e9bbdc9e 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..3b785c3a403 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..3517f2fc1ad 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..63ede86da3c 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..a562f4ec754 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..02359c3df14 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..b6026249784 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..ef3706dab04 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..cf9e3df5814 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..4f4f213c605 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..312e8671816 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..5cab5d3e890 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..989751ca23e 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..bf7471aa464 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..0b34f0f2eed 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..d8da97f2c6c 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..1a324bdff6f 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..892b6c6ee66 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..20634182b2f 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..3db89630a6f 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..75e89ea9f19 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..ebb08810b77 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..f74dee4a20f 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..a615c974573 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..41cd8576194 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..fca359a4ae8 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..6f93278734b 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..eabfb83266f 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..714b06e994a 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..1ede73e07fc 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..490c99d3c41 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..8f8af88b48c 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..5052405f65a 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,63 @@ 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 ( +
+ {/* 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 +374,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..3d65f60b084 --- /dev/null +++ b/scripts/processComponentImages.mjs @@ -0,0 +1,118 @@ +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 Light and Dark directories + const modes = [ + {srcFolder: 'Light', destFolder: 'light'}, + {srcFolder: 'Dark', 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);