Spectrum 2 🎉 Feature Branch

.changeset/angry-needles-behave.md

@@ -0,0 +1,23 @@
+---
+"@spectrum-css/radio": major
+---
+
+### Spectrum 2 migration
+
+Updates:
+
+- High contrast tokens have been modified
+- Typography tokens modified
+
+#### New tokens
+
+`--spectrum-radio-border-width`
+`--spectrum-radio-text-font-weight`
+`--spectrum-radio-text-font-style`
+
+#### Modified tokens
+
+`--spectrum-radio-emphasized-accent-color`
+`--spectrum-radio-emphasized-accent-color-hover`
+`--spectrum-radio-emphasized-accent-color-down`
+`--spectrum-radio-emphasized-accent-color-focus`

.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
+---
+
+### Spectrum 2 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/big-jars-pump.md

@@ -0,0 +1,82 @@
+---
+"@spectrum-css/inlinealert": major
+---
+
+#### Spectrum 2 migration
+
+This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification.
+
+Subtle and bold treatments have been added for each badge variant.
+
+To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--subtle"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with subtle fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-52w58"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--bold"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with bold fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-mty2x"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product.
+
+##### New mods
+
+`--mod-inlinealert-border-and-icon-color-neutral`
+`--mod-inlinealert-min-spacing-header-to-icon`
+`--mod-inlinealert-spacing-content-link-button`
+`--mod-inlinealert-spacing-header-content`
+
+##### Removed mods
+
+`--mod-inlinealert-spacing-header-content-button`
+`--mod-inlinealert-spacing-header-to-icon`
+
+##### New custom properties
+
+`--spectrum-inlinealert-min-spacing-header-to-icon`
+`--spectrum-inlinealert-spacing-content-link-button`
+`--spectrum-inlinealert-spacing-header-content`
+
+##### Removed custom properties
+
+`--spectrum-inlinealert-spacing-header-content-button`
+`--spectrum-inlinealert-spacing-header-to-icon`

.changeset/breezy-impalas-push.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/switch": patch
+---
+
+### S2 switch fixes
+
+This work addresses minor regressions in the Switch component. Animation tokens are reimplemented and their usage updated within the style definitions.
+
+Reference:
+
+- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651)

.changeset/calm-hats-sleep.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/bundle": major
+---
+
+Release bundle with the latest styles on the S2 feature branch.

.changeset/chatty-lands-attack.md

@@ -0,0 +1,44 @@
+---
+"@spectrum-css/accordion": major
+---
+
+### Spectrum 2 migration
+
+Accordion now uses Spectrum 2 tokens and specifications.
+
+New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
+the spacing around the content area.
+
+#### New features
+
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
+- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
+  collapsing the accordion item.
+- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item
+  header does not have padding.
+- Per design spec, accordion items have a min-width and default width. Default width can be
+  overridden with `--mod-accordion-item-width` but should not be smaller than
+  `--spectrum-accordion-item-minimum-width`.
+
+#### Markup changes
+
+The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
+from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra
+element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has
+been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading
+text.
+
+#### Mod changes
+
+The following `--mod` custom properties have been renamed to better reflect how they are used:
+
+- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height`
+- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size`
+- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline`
+
+New mods:
+
+- `--mod-accordion-animation-duration`
+- `--mod-accordion-edge-to-content-area`
+- `--mod-accordion-item-minimum-width`
+- `--mod-accordion-top-to-disclosure-indicator`

.changeset/chilled-peaches-enjoy.md

@@ -0,0 +1,27 @@
+---
+"@spectrum-css/actionbutton": major
+---
+
+Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
+
+- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
+- Includes the Spectrum 2 down state transform.
+- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
+- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
+- Background and content colors were updated.
+- Mod custom properties have been adjusted:
+  - Renamed:
+    - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
+    - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
+    - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
+  - Removed:
+    - `--mod-actionbutton-border-color-default`
+    - `--mod-actionbutton-border-color-disabled`
+    - `--mod-actionbutton-border-color-down`
+    - `--mod-actionbutton-border-color-focus`
+    - `--mod-actionbutton-border-color-hover`
+    - `--mod-actionbutton-border-width`
+    - `--mod-actionbutton-static-content-color`
+  - New:
+    - `--mod-actionbutton-font-weight`
+    - `--mod-actionbutton-font-style`

.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/cute-pillows-stand.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/statuslight": patch
+---
+
+### S2 status light fix
+
+This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web.

.changeset/deep-sloths-fetch.md

@@ -0,0 +1,24 @@
+---
+"@spectrum-css/actionbar": major
+---
+
+### Actionbar S2 Migration
+
+Action bar now has some updated colors, corner radius, and icons. There's a new look to the default and emphasized variants.
+
+The emphasized has changed from an `accent` background color to a `neutral` background color. In light mode, the clear button and action buttons are `staticWhite` and in dark mode they are `staticBlack`.
+
+#### New tokens
+
+`--spectrum-actionbar-emphasized-actionbutton-label-color`
+`--spectrum-actionbar-emphasized-icon-color`
+`--spectrum-actionbar-minimum-width`
+`--spectrum-actionbar-spacing-label-to-action-group`
+`--spectrum-actionbar-spacing-action-group-edge`
+`--spectrum-actionbar-close-button-to-counter`
+
+#### New mods
+
+`--mod-actionbar-minimum-width`
+`--mod-actionbar-spacing-action-group-edge`
+`--mod-actionbar-spacing-label-to-action-group`

.changeset/dirty-melons-look.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/swatch": patch
+---
+
+Updates the add swatch icon to use the ui rather than workflow icon