@spectrum-css/tokens@14.0.0-next.11

Patch Changes

• #3456 b9aeb20 Thanks @cdransf! - Uses the latest releases from Spectrum Tokens (13.0.0-beta.55)

@spectrum-css/preview@11.0.1-next.1

Patch Changes

• Updated dependencies [b9aeb20]:
  • @spectrum-css/tokens@14.0.0-next.11

@spectrum-css/alertbanner@3.0.0-next.0

Major Changes

• #2652 aa2a196 Thanks @jawinn! - #### Spectrum 2 migration

  Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.

  The following changes have been made to the mod custom properties:

  • --mod-alert-banner-size was renamed to --mod-alert-banner-inline-size
  • --mod-alert-banner-neutral-background was previously misspelled. The mod --mod-alert-banner-background was also added, which will take precendence over the variant background mods.
  • --mod-alert-banner-top-text was renamed to --mod-alert-banner-top-to-text
  • --mod-alert-banner-top-icon was renamed to --mod-alert-banner-top-to-icon
  • --mod-alert-banner-bottom-text was renamed to --mod-alert-banner-bottom-to-text
  • --mod-alert-banner-start-edge was renamed to --mod-alert-banner-inline-start-to-content
  • --mod-alert-banner-edge-to-button was renamed to --mod-alert-banner-block-edge-to-button
  • The spacing on either side of the close button is now controlled by two separate mods; --mod-alert-banner-close-button-to-inline-end and --mod-alert-banner-close-button-to-content. The previous --mod-alert-banner-close-button-spacing has been removed.
  • A new mod --mod-alert-banner-inline-end-to-content was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button.

Patch Changes

• Updated dependencies [b9aeb20]:
  • @spectrum-css/tokens@14.0.0-next.11

@spectrum-css/swatch@6.4.1

Patch Changes

• #3441 dc1f06e Thanks @castastrophe! - Allow --spectrum-picked-color to pass in gradient values to swatch [CSS-204]

@spectrum-css/underlay@4.1.1-next.0

Patch Changes

• #2860 bd934cc Thanks @marissahuysentruyt! - 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.

• Updated dependencies [bd934cc]:

  • @spectrum-css/tokens@14.0.0-next.10

@spectrum-css/treeview@11.0.0-next.0

Patch Changes

• Updated dependencies [bd934cc, 2c62239, eda9897]:
  • @spectrum-css/tokens@14.0.0-next.10
  • @spectrum-css/thumbnail@7.0.0-next.0

@spectrum-css/tray@4.0.0-next.0

Patch Changes

• Updated dependencies [bd934cc, bd934cc]:
  • @spectrum-css/tokens@14.0.0-next.10
  • @spectrum-css/dialog@11.0.0-next.0
  • @spectrum-css/modal@5.1.1-next.0

@spectrum-css/tokens@14.0.0-next.10

Patch Changes

• #2860 bd934cc Thanks @marissahuysentruyt! - Adds --spectrum-standard-dialog-spacing-edge-to-content to properly adjust the spacing for desktop/mobile dialog styles.

@spectrum-css/thumbnail@7.0.0-next.0

Minor Changes

• #3367 2c62239 Thanks @cdransf! - Replaces corner-radius-75 with thumbnail-corner-radius.

• #3394 eda9897 Thanks @cdransf! - # thumbnail-opacity-checkerboard S2 migration

  Adds thumbnail specific thumbnail-opacity-checkerboard-square-size token aliased to --spectrum-opacity-checkerboard-size. This impacts the display of the opacity-checkerboard when used within the thumbnail component.

  This also corrects an issue with a token name in the thumbnail component by renaming --spectrum-thumbnail-border-color-opacity to --spectrum-thumbnail-border-opacity.

Patch Changes

• Updated dependencies [bd934cc, eda9897]:
  • @spectrum-css/tokens@14.0.0-next.10
  • @spectrum-css/opacitycheckerboard@3.0.0-next.0

@spectrum-css/taggroup@6.0.0-next.0

Patch Changes

• Updated dependencies [bd934cc]:
  • @spectrum-css/tokens@14.0.0-next.10
  • @spectrum-css/tag@10.0.0-next.0