Spectrum 2 🎉 Feature Branch

.changeset/beige-dragons-tickle.md

@@ -0,0 +1,49 @@
+---
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/dropzone": major
+---
+
+# S2 Illustrated Message Migration
+
+This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing. Dropzone `--mod` names are renamed to match the semantic tokens in illustrated message.
+
+## Illustrated Message
+
+New properties
+`--spectrum-illustrated-message-heading-to-description`
+`--spectrum-illustrated-message-illustration-to-heading`
+`--spectrum-illustrated-message-illustration-to-content`
+`--spectrum-illustrated-message-description-to-action`
+`--spectrum-illustrated-message-illustration-color`
+`--spectrum-illustrated-message-illustration-size`
+`--spectrum-illustrated-message-small-cjk-title-font-size`
+`--spectrum-illustrated-message-large-cjk-title-font-size`
+`--spectrum-illustrated-message-large-body-font-size`
+`--spectrum-illustrated-message-horizontal-maximum-width`
+
+New mods
+`--mod-illustrated-message-description-to-action`
+`--mod-illustrated-message-heading-to-description`
+`--mod-illustrated-message-illustration-to-content`
+`--mod-illustrated-message-horizontal-maximum-width`
+
+Removed properties
+`--spectrum-illustrated-message-title-to-heading`
+`--spectrum-illustrated-message-description-max-inline-size`
+`--spectrum-illustrated-message-heading-max-inline-size`
+`--spectrum-illustrated-message-illustration-accent-color`
+`--mod-illustrated-message-illustration-accent-color`
+`--highcontrast-illustrated-message-illustration-accent-color`
+
+## Dropzone
+
+New mods
+`--mod-drop-zone-body-to-action`
+`--mod-drop-zone-illustration-to-title`
+
+## Dropzone nested mods
+
+Renamed mods
+`--mod-illustrated-message-title-to-heading` > `--mod-illustrated-message-illustration-to-heading`
+`--mod-illustrated-message-heading-to-body` > `--mod-illustrated-message-heading-to-description`
+`--mod-illustrated-message-content-maximum-width` > `--mod-illustrated-message-vertical-maximum-width`

.changeset/big-beds-care.md

@@ -0,0 +1,39 @@
+---
+"@spectrum-css/dropzone": major
+---
+
+## Dropzone S2 Migration
+
+Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed.
+
+The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap.
+
+### SVG Border
+
+To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property.
+
+### New mods
+
+`--mod-drop-zone-content-height`
+`--mod-drop-zone-edge-to-text`
+`--mod-drop-zone-title-line-height`
+`--mod-drop-zone-border-dash-length`
+`--mod-drop-zone-border-dash-gap`
+
+### Removed mods
+
+`--mod-drop-zone-body-color`
+`--mod-drop-zone-body-font-family`
+`--mod-drop-zone-body-font-style`
+`--mod-drop-zone-body-font-weight`
+`--mod-drop-zone-body-line-height`
+`--mod-drop-zone-content-color`
+`--mod-drop-zone-content-edge-to-text`
+`--mod-drop-zone-content-font-size`
+`--mod-drop-zone-heading-color`
+`--mod-drop-zone-heading-font-family`
+`--mod-drop-zone-heading-font-size`
+`--mod-drop-zone-heading-font-style`
+`--mod-drop-zone-heading-font-weight`
+`--mod-drop-zone-heading-line-height`
+`--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title`

.changeset/chilly-peaches-sniff.md

@@ -0,0 +1,21 @@
+---
+"@spectrum-css/statuslight": major
+---
+
+## Spectrum 2 migration
+
+New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight.
+
+New mods added:
+
+- `--mod-statuslight-font-family`
+- `--mod-statuslight-font-style`
+- `--mod-statuslight-nonsemantic-brown-color`
+- `--mod-statuslight-nonsemantic-cinnamon-color`
+- `--mod-statuslight-nonsemantic-pink-color`
+- `--mod-statuslight-nonsemantic-silver-color`
+- `--mod-statuslight-nonsemantic-turquoise-color`
+
+Removed mods:
+
+- `--mod-statuslight-semantic-accent-color`

.changeset/clean-oranges-smell.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/preview": major
+---
+
+Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that
+are used for loading in the sprite sheet and the individual icons, as they have moved.
+
+The global Icon Loader has been updated to apply the existing key name renaming from file names to icon
+names. This is now done once at the loader step, rather than each time within the Icon component template.
+The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the
+design system.

.changeset/few-doors-smile.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/buttongroup": patch
+---
+
+Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property.

.changeset/flat-snails-admire.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/infieldprogresscircle": major
+---
+
+## Infield Progresscircle S2 Migration
+
+In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness.

.changeset/fresh-crabs-deliver.md

@@ -0,0 +1,16 @@
+---
+"@spectrum-css/breadcrumb": major
+---
+
+#### Spectrum 2 Migration
+
+The breadcrumbs component is now updated to use the S2 specs and tokens. This includes updated spacing, heights, colors, font sizes, etc.
+
+There has been a major design change to the variant classes related to density and sizing, to align their terminology better with t-shirt sizes:
+
+- The "compact" variant no longer exists. The `spectrum-Breadcrumbs--compact` class and associated custom properties are removed. The default (medium) breadcrumbs are now sized similar to what was previously called compact.
+- There is a new "large" variant, which uses the `spectrum-Breadcrumbs--sizeL` class. This is sized similarly to what was previously the default.
+
+In the multiline variant, the size of the title item can optionally be customized using an additional child heading element that applies one of the
+typography component's `spectrum-Heading--size*` classes. The preferred sizes specified in the design spec are small, medium, large (default), and
+extra-large. If an additional heading element is not used within the title item, the text will still be sized correctly to the default.

.changeset/fresh-seahorses-join.md

@@ -0,0 +1,8 @@
+---
+"@spectrum-css/button": patch
+---
+
+#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend
+
+Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override.
+This should not result in any changed visuals or behavior, as the same CSS has been integrated.

.changeset/friendly-dolls-raise.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/avatar": major
+---
+
+Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness.

.changeset/giant-windows-smoke.md

@@ -0,0 +1,26 @@
+---
+"@spectrum-css/colorwheel": major
+---
+
+# colorwheel S2 migration
+
+This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function.
+
+This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel.
+
+Support is provided for the `240px` and `192px` sizes outlined in the design requirements.
+
+The `forced-colors` media query has been moved to the bottom of the file consistent with our other component implementations.
+
+Stories, tests and documentation have been updated to be consistent with these changes.
+
+The following mods have been removed:
+
+```css
+--mod-colorwheel-height
+--mod-colorwheel-width
+--mod-colorwheel-min-width
+--mod-colorwheel-path-borders
+--mod-colorwheel-colorarea-margin
+--mod-colorwheel-border-width
+```

.changeset/hot-books-fail.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/picker": major
+---
+
+#### Spectrum 2 migration
+
+Picker now uses Spectrum 2 tokens and specifications. A few notable changes:
+
+- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+- The mod custom property `--mod-picker-spacing-text-to-alert-icon-inline-start` has been renamed to `--mod-picker-spacing-text-to-icon-inline-end`. This removed the fallback that was marked as deprecated in a previous version.
+- The mod custom property `--mod-picker-spacing-text-to-icon` has been removed. Use `--mod-picker-spacing-text-to-icon-inline-end` for the spacing between text and visual (indicator or disclosure), or `--mod-picker-spacing-starting-icon-to-text` for the space between the optional workflow icon and the text.

.changeset/itchy-kids-travel.md

@@ -0,0 +1,24 @@
+---
+"@spectrum-css/progresscircle": major
+---
+
+## Progress circle S2 migration
+
+This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
+
+### Animation
+
+`@keyframes spectrum-dashoffset-animation`:
+This animation was created by React Spectrum and used to keep the same speed and bezier curve.
+
+### Added tokens
+
+### Removed styles & mods
+
+`--spectrum-progress-circle-track-border-color-over-background`
+`--spectrum-progress-circle-fill-border-color-over-background`
+`--spectrum-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`
+`--highcontrast-progress-circle-track-border-style`
+`--mod-progress-circle-track-border-style`
+`--spectrum-progress-circle-track-border-style`

.changeset/itchy-shrimps-help.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": patch
+---
+
+S2 Popover has an updated default position, bottom-start. The correct `.spectrum-Popover--bottom-start` class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted.

.changeset/light-years-speak.md

@@ -0,0 +1,23 @@
+---
+"@spectrum-css/tooltip": major
+---
+
+## Spectrum 2 migration
+
+This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed.
+
+The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform.
+
+Some custom property mods have been removed:
+
+- `--mod-tooltip-background-color-informative`
+- `--mod-tooltip-background-color-negative`
+- `--mod-tooltip-background-color-positive`
+- `--mod-tooltip-icon-spacing-block-start`
+- `--mod-tooltip-icon-spacing-inline-end`
+- `--mod-tooltip-icon-spacing-inline-start`
+- `--mod-tooltip-icon-width`
+
+And one mod has been added:
+
+- `--mod-tooltip-tip-corner-radius`

.changeset/mean-eggs-learn.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/thumbnail": minor
+---
+
+Replaces corner-radius-75 with thumbnail-corner-radius.

.changeset/metal-fireants-switch.md

@@ -0,0 +1,52 @@
+---
+"@spectrum-css/dialog": major
+"@spectrum-css/modal": patch
+"@spectrum-css/underlay": patch
+---
+
+## Spectrum 2 Standard Dialog Migration
+
+This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area.
+
+The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`.
+
+Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed:
+
+_New Mods_
+`--mod-standard-dialog-spacing-title-to-header-content`
+`--mod-standard-dialog-spacing-title-to-description`
+`--mod-standard-dialog-header-content-font-size`
+
+_Renamed Mods_
+`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small`
+`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width`
+`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large`
+`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius`
+`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size`
+`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height`
+`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color`
+`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight`
+`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight`
+`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height`
+`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color`
+`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size`
+`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size`
+`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size`
+`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding`
+`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer`
+`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button`
+`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group`
+
+_Removed Mods_
+`--mod-dialog-confirm-buttongroup-padding-top`
+`--mod-dialog-confirm-close-button-size`
+`--mod-dialog-confirm-description-margin`
+`--mod-dialog-confirm-description-padding`
+`--mod-dialog-confirm-divider-block-spacing-end`
+`--mod-dialog-confirm-divider-block-spacing-start`
+`--mod-dialog-confirm-divider-height`
+
+Modal and underlay updates
+
+- Modal component now uses the updated corner rounding.
+- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens.

.changeset/modern-chairs-sit.md

@@ -0,0 +1,23 @@
+---
+"@spectrum-css/dialog": major
+"@spectrum-css/modal": minor
+---
+
+## S2 Takeover dialog
+
+This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog).
+
+Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional `.spectrum-Dialog-headerContentWrapper` element that should center whatever component/content within.
+
+Class names updated to match naming convention (remove hyphens and capitalize second word):
+`.spectrum-Dialog-header-content` > `.spectrum-Dialog-headerContent`
+`.spectrum-Dialog-footer-content` > `.spectrum-Dialog-footerContent`
+
+_New Mods_
+`--mod-takeover-dialog-grid-spacing`
+`--mod-takeover-dialog-spacing-header-content-gap`
+`--mod-takeover-dialog-title-font-size`
+
+Modal updates
+
+- Modal component now uses the updated margin token (`window-to-edge`) found in the takeover dialog design specs. This work also introduced `--spectrum-modal-takeover-window-to-edge`

.changeset/nine-kings-repair.md

@@ -0,0 +1,18 @@
+---
+"@spectrum-css/button": major
+---
+
+#### Spectrum 2 migration
+
+Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
+
+- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
+- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
+- The `.spectrum-Button--fill` class is no longer needed and has been removed.
+
+The following `--mod` custom properties have been renamed:
+
+- `--mod-line-height-100` has been renamed to `--mod-button-line-height`
+- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`
+- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
+- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`