@spectrum-css/[email protected]

Major Changes

• #3643 bfe2e2c Thanks @cdransf!

S2 toast migration

This migrates the toast component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons. The toast no longer supports a divider.

Tokens

Before	After
--spectrum-corner-radius-100	--spectrum-corner-radius-800

Mods

The following mods have been added.

--mod-toast-font-family
--mod-toast-font-style
--mod-toast-icon-block-size
--mod-toast-spacing-action-button-to-close
--mod-toast-spacing-bottom-edge-to-close-button
--mod-toast-spacing-close-button-to-edge
--mod-toast-spacing-text-to-close-button
--mod-toast-spacing-top-edge-to-close-button

Passthroughs

The following passthrough has been added.

--mod-closebutton-icon-color-default

@spectrum-css/[email protected]

Major Changes

• #3682 6d53893 Thanks @rise-erpelding! - Tag now uses Spectrum 2 tokens and specifications:

  • The invalid variant has been removed, tag errors are now displayed with help text within the tag group only.
  • Borders remain in high contrast but are otherwise transparent.
  • Thumbnail has been added as a visual option.
  • Tag now has a max-inline-size.
  • Read-only tags are now supported.
  • Passthroughs for clear button have been updated to match the current spec.
  • Default t-shirt size for tag is small.
  • Clear button has accessibly sized target.
  • Emphasized tags have accent coloring only when they are selected.

  Changed mods:

  • "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
  • "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
  • "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline",
  • "--mod-tag-label-spacing-inline-end" --> "--mod-tag-label-spacing-inline"
  • "--mod-tag-clear-button-spacing-inline-start" --> "--mod-tag-label-to-clear-icon",
  • "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon"

  Added mods:

  • "--mod-tag-avatar-size",
  • "--mod-tag-clear-button-size",
  • "--mod-tag-label-font-family",
  • "--mod-tag-label-font-style",
  • "--mod-tag-label-line-height-cjk",
  • "--mod-tag-maximum-width-multiplier",
  • "--mod-tag-min-inline-size",
  • "--mod-tag-thumbnail-size",
  • "--mod-tag-visual-spacing-inline-start"

  Removed mods:

  • "--mod-tag-background-color-invalid-selected",
  • "--mod-tag-background-color-invalid-selected-active",
  • "--mod-tag-background-color-invalid-selected-focus",
  • "--mod-tag-background-color-invalid-selected-hover",
  • "--mod-tag-border-color-emphasized-active",
  • "--mod-tag-border-color-emphasized-focus",
  • "--mod-tag-border-color-emphasized-hover",
  • "--mod-tag-border-color-invalid",
  • "--mod-tag-border-color-invalid-active",
  • "--mod-tag-border-color-invalid-focus",
  • "--mod-tag-border-color-invalid-hover",
  • "--mod-tag-border-color-invalid-selected",
  • "--mod-tag-border-color-invalid-selected-active",
  • "--mod-tag-border-color-invalid-selected-focus",
  • "--mod-tag-border-color-invalid-selected-hover",
  • "--mod-tag-border-color-selected-active",
  • "--mod-tag-border-color-selected-focus",
  • "--mod-tag-border-color-selected-hover",
  • "--mod-tag-content-color-invalid",
  • "--mod-tag-content-color-invalid-active",
  • "--mod-tag-content-color-invalid-focus",
  • "--mod-tag-content-color-invalid-hover",
  • "--mod-tag-content-color-invalid-selected",

@spectrum-css/[email protected]

Patch Changes

• #3687 53d1e5e Thanks @marissahuysentruyt! - ### 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

• #3767 ca78d52 Thanks @saashapina! - Fix active down state specificity by increasing the specificity of the active state selector. This change was necessary because the postcss-hover-media-feature plugin converts hover styles into a media query for devices that support hover. Without this adjustment, the hover styles could override the active down state styles due to the way CSS specificity and order are handled. By adding the additional .spectrum-Switch class in the active state selector, we ensure that the active state takes precedence over the hover state, maintaining the correct visual behavior of the switch component across different interaction states.

@spectrum-css/[email protected]

Major Changes

• #3677 d47295a Thanks @cdransf!

S2 migration for Swatch group

This migrates the swatch and swatchgroup components to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

An Add Swatch variant has been added with the required color tokens and the specified add UI icon.

The Add Swatch and Mixed Value variants may not be combined with background colors or images. To implement the Add Swatch you need to apply the is-addSwatch class to the spectrum-Swatch element. Add swatch keyboard focus may be applied by adding the is-keyboardFocused class to this combination of classes.

The spectrum-Swatch-icon is used to set the expected color to icons contained within the swatch.

The light and no border variants have been removed. Individual swatches have a border set to --spectrum-gray-1000 at 42% opacity, while the border opacity is set to 20% in swatch groups.

Removed custom properties

--spectrum-swatch-border-color
--spectrum-swatch-dash-icon-color (replaced by --spectrum-swatch-icon-color)

New custom properties

--spectrum-swatch-border-color-rgb
--spectrum-swatch-border-opacity
--spectrum-corner-radius-full
--spectrum-corner-radius-none
--spectrum-swatch-disabled-icon-border-opacity
--spectrum-swatch-icon-color
--spectrum-swatch-rectangle-width-multiplier

New mods

--mod-add-button-background
--mod-add-button-background-down
--mod-add-button-background-hover
--mod-add-button-background-keyboard-focus
--mod-corner-radius-full
--mod-mixed-button-background
--mod-swatchgroup-border-color
--mod-swatch-border-color-rgb
--mod-swatch-border-opacity

@spectrum-css/[email protected]

Major Changes

• #3677 d47295a Thanks @cdransf!

S2 migration for Swatch group

This migrates the swatch and swatchgroup components to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

An Add Swatch variant has been added with the required color tokens and the specified add UI icon.

The Add Swatch and Mixed Value variants may not be combined with background colors or images. To implement the Add Swatch you need to apply the is-addSwatch class to the spectrum-Swatch element. Add swatch keyboard focus may be applied by adding the is-keyboardFocused class to this combination of classes.

The spectrum-Swatch-icon is used to set the expected color to icons contained within the swatch.

The light and no border variants have been removed. Individual swatches have a border set to --spectrum-gray-1000 at 42% opacity, while the border opacity is set to 20% in swatch groups.

Removed custom properties

--spectrum-swatch-border-color
--spectrum-swatch-dash-icon-color (replaced by --spectrum-swatch-icon-color)

New custom properties

--spectrum-swatch-border-color-rgb
--spectrum-swatch-border-opacity
--spectrum-corner-radius-full
--spectrum-corner-radius-none
--spectrum-swatch-disabled-icon-border-opacity
--spectrum-swatch-icon-color
--spectrum-swatch-rectangle-width-multiplier

New mods

--mod-add-button-background
--mod-add-button-background-down
--mod-add-button-background-hover
--mod-add-button-background-keyboard-focus
--mod-corner-radius-full
--mod-mixed-button-background
--mod-swatchgroup-border-color
--mod-swatch-border-color-rgb
--mod-swatch-border-opacity

Patch Changes

• #3871 7578ad2 Thanks @cdransf! - Updates the add swatch icon to use the ui rather than workflow icon

@spectrum-css/[email protected]

Major Changes

• #3681 0a23664 Thanks @marissahuysentruyt! - ### Number field S2 Migration

  This work migrations the stepper/number field component to Spectrum 2! 🎉 The S1 stepper was very minimal, and didn't align with SWC or React's implementation. This migration should bring parity to the CSS component. New features include:

  • the display name for this component has changed from stepper to number field (based on design's, React's and SWC's naming conventions.)
    • Note: The NPM package name has remained as "stepper," and hasn't yet changed to "number field.""
  • an error state with alert icon
  • optional help text
  • embedded field label & optional positions

  Quick overview

  Because of all the new features and to align more with design, SWC and React, below is a quick recap of the following tokens & classes that have been renamed in the CSS:

  • All .spectrum-Stepper* class names have been converted to .spectrum-NumberField*
  • The .hide-stepper class has been converted to .spectrum-NumberField--hiddenStepper
  • Custom properties have been renamed from --spectrum-stepper* to --spectrum-numberfield*
  • Modifiable custom properties have been renamed from --mod-stepper* to --mod-numberfield*
  • Markup has changed
  • Styling lives on different elements
  • Lots more Chromatic test coverage

  Markup

  Following React's lead, the markup of the number field has changed. More obviously, help text and field label components are embedded into .spectrum-NumberField, instead of necessitating separate components. The number field now incorporates an error state that better reflects the embedded textfield's error state, so there is now an alert icon within the markup in an invalid number field. Additionally, a new .spectrum-NumberField-inputs containing wrapper was introduced to encapsulate the textfield element and infield button elements. This container allowed for some extra alignment styles for those 2 elements and then freed up the opportunity to introduced an "unstyled" input (as described more below). Custom classes were also added to the nested textfield and input elements to ensure styles for number field were passed correctly to the correct elements (.spectrum-NumberField-textfield and .spectrum-NumberField-input).

  Stemming from the infield button S2 migration, there is also an extra container for the inline (previously "stacked") stepper buttons.

  Styling

  The .spectrum-NumberField-textfield div is where the S2 design language lives (instead of on the input element), while the actual input (.spectrum-NumberField-input) is unstyled and incorporated more subtly. Breaking changes were introduced in all previous custom properties, where any --spectrum-stepper-* or --mod-stepper-* properties were renamed to --spectrum-numberfield-*or --mod-numberfield-*. This also applied to class names, where .spectrum-Stepper changed to .spectrum-NumberField. The hide-stepper class has also been updated to match our class naming conventions (.spectrum-NumberField--hiddenStepper).

  Mods

  Modifiable custom properties have been renamed from --mod-stepper* to --mod-numberfield.

  Removed custom properties include

  --mod-stepper-animation-duration
  --mod-stepper-button-border-width
  --mod-stepper-button-width
  --mod-stepper-button-width-quiet
  --mod-stepper-buttons-background-color
  --mod-stepper-buttons-border-color
  --mod-stepper-buttons-border-color-focus
  --mod-stepper-buttons-border-color-focus-hover
  --mod-stepper-buttons-border-color-hover
  --mod-stepper-buttons-border-color-keyboard-focus
  --mod-stepper-buttons-border-style
  --mod-stepper-buttons-border-width
  --mod-stepper-focus-indicator-visibility
  --mod-stepper-height (renamed to --mod-numberfield-block-size)
  --mod-stepper-width (renamed to --mod-numberfield-inline-size)

  New custom properties include

  --mod-numberfield-background-color
  --mod-numberfield-background-color-disabled
  --mod-numberfield-block-size (renamed from --mod-stepper-height)
  --mod-numberfield-border-color-disabled
  --mod-numberfield-border-color-invalid-default
  --mod-numberfield-border-color-invalid-focus
  --mod-numberfield-border-color-invalid-focus-hover
  --mod-numberfield-border-color-invalid-hover
  --mod-numberfield-border-color-invalid-keyboard-focus
  --mod-numberfield-button-inline-offset
  --mod-numberfield-font-family
  --mod-numberfield-font-size
  --mod-numberfield-font-style
  --mod-numberfield-font-weight
  --mod-numberfield-hidden-stepper-min-inline-size
  --mod-numberfield-inline-size (renamed from --mod-stepper-width)
  --mod-numberfield-label-to-field
  --mod-numberfield-line-height
  --mod-numberfield-min-inline-size
  --mod-numberfield-spacing-block-end-edge-to-text
  --mod-numberfield-spacing-block-start-edge-to-text
  --mod-numberfield-spacing-field-to-helptext

@spectrum-css/[email protected]

Patch Changes

• #3687 53d1e5e Thanks @marissahuysentruyt! - ### 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.

@spectrum-css/[email protected]

Minor Changes

• #3656 911c390 Thanks @aramos-adobe! - #### Including the touch action rule for draggable content

  The slider, color slider, color area, color wheel, color handle all deserve to have their touch-action property managed so that trying to set the value of those interfaces doesn't cause page scrolling in touch context.

  Adding touch-action: none to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.

  These components also include user-select: none to prevent selection or highlighting of any text elements.

@spectrum-css/[email protected]

Major Changes

• #3627 888e63d Thanks @cdransf!

Spectrum 2 migration

This migrates the rating component to S2. Custom properties have been remapped and added per the design specification.

Additions

The medium component variation is the default and a t-shirt size medium variation has been added.

A tooltip may be displayed to a user indicating whether interacting with the component will clear or edit the rating. A control and documentation example have been added.

A rating may have a partially filled star. The width and fill of this star is controlled by adding .is-partial to the parent span with classes of spectrum-Rating-icon and is-selected and then setting --mod-rating-icon-fill to the necessary fill percentage (e.g. 50%).

New mods

--mod-rating-width
--mod-rating-height
--mod-rating-bottom-to-content-area
--mod-rating-edge-to-content-area
--mod-rating-top-to-content-area
--mod-rating-icon-fill

Removed mods

--mod-rating-icon-spacing-vertical-top
--mod-rating-icon-count
--mod-rating-indicator-border-radius
--mod-rating-indicator-height
--mod-rating-icon-color-key-focus

New custom properties

--spectrum-rating-width
--spectrum-component-size-difference-down
--spectrum-component-size-minimum-perspective-down
--spectrum-corner-radius-medium-size-medium
--spectrum-corner-radius-medium-size-small
--spectrum-neutral-content-color-default
--spectrum-neutral-content-color-down
--spectrum-neutral-content-color-hover
--spectrum-spacing-75
--spectrum-workflow-icon-size-75

Removed custom properties

--spectrum-rating-indicator-width
--spectrum-rating-icon-color-key-focus
--spectrum-rating-icon-spacing-vertical-top
--spectrum-rating-indicator-height
--spectrum-rating-indicator-border-radius
--spectrum-accent-content-color-key-focus
--spectrum-border-width-200
--spectrum-component-top-to-workflow-icon-100
--spectrum-corner-radius-100
--spectrum-neutral-subdued-content-color-default
--spectrum-neutral-subdued-content-color-down
--spectrum-neutral-subdued-content-color-hover
--spectrum-neutral-subdued-content-color-key-focus

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [d47295a, f0d187f, 1cdfcbf, 1b33315]:
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]