@adobe/[email protected]

Minor Changes

• #375 6e3be6d Thanks @mrcjhicks! - - Updated thumbnail size tokens and added new tokens

  • Updated S2 Action bar tokens

  Design Motivation

  Thumbnail: updated sizes in order for opacity checkerboards to translate better in implementation.

  ⚠️ Important note: Accepting updates from this release will update the thumbnail sizes. The change in size is no more than 4 px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size:

  Former thumbnail size	Available thumbnail size
  size 50 (16 x 16)	size 50 (16 x 16)
  size 75 (18 x 18)	size 75 (20 x 20)
  size 100 (20 x 20)	size 75 (20 x 20)
  size 200 (22 x 22)	size 100 (24 x 24)
  size 300 (26 x 26)	size 200 (28 x 28)
  size 400 (28 x 28)	size 200 (28 x 28)
  size 500 (32 x 32)	size 300 (32 x 32)
  size 600 (36 x 36)	size 400 (36 x 36)
  size 700 (40 x 40)	size 500 (40 x 40)
  size 800 (44 x 44)	size 600 (44 x 44)
  size 900 (50 x 50)	size 700 (48 x 48) or size 800 (52 x 52)
  size 1000 (56 x 56)	size 900 (56 x 56)
  --	size 1000 (64 x 64)

  Action bar: Updated S2 action bar (non-color) in respective desktop and mobile layout sets.

  Token Diff

  Tokens added (8):

  • action-bar-top-to-content-area
  • action-bar-bottom-to-content-area
  • action-bar-edge-to-content-area
  • action-bar-close-button-to-counter
  • action-bar-counter-font-size
  • thumbnail-opacity-checkerboard-square-size
  • thumbnail-corner-radius
  • text-to-control-50

  Tokens updated (2):

  • action-bar-height
  • action-bar-top-to-item-counter

  Token values updated (11):

  • thumbnail-size-75
    • desktop: 18px -> 20px
    • mobile: 22px -> 24px
  • thumbnail-size-100
    • desktop: 20px -> 24px
    • mobile: 26px -> 28px
  • thumbnail-size-200
    • desktop: 22px -> 28px
    • mobile: 28px -> 32px
  • thumbnail-size-300
    • desktop: 26px -> 32px
    • mobile: 32px -> 36px
  • thumbnail-size-400
    • desktop: 28px -> 36px
    • mobile: 36px -> 40px
  • thumbnail-size-500
    • desktop: 32px -> 40px
    • mobile: 40px -> 44px
  • thumbnail-size-600
    • desktop: 36px -> 44px
    • mobile: 46px -> 48px
  • thumbnail-size-700
    • desktop: 40px -> 48px
    • mobile: 50px -> 52px
  • thumbnail-size-800
    • desktop: 44px -> 52px
    • mobile: 55px -> 56px
  • thumbnail-size-900
    • desktop: 50px -> 56px
    • mobile: 62px -> 64px
  • thumbnail-size-1000
    • desktop: 56px -> 64px
    • mobile: 70px -> 72px

@adobe/[email protected]

Minor Changes

• #373 e04bddf Thanks @nabuhasan!

• adobe/spectrum-tokens-studio-data#147 Updated S2 accordion tokens (non-color) in respective desktop and mobile layout sets

• adobe/spectrum-tokens-studio-data#146 Added S2 meter tokens, including both color and non-color.

  Design Motivation

  • Accordion component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing content-area-edge-to-content tokens enhances inclusivity for various design patterns. For more information, view Jira ticket.
  • Meter component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing static tokens enables us to standardize the use of tokens across various components with indicators and tracks. This includes progress bars, progress circles, and potentially sliders in the future. For more information, view Jira ticket.

  Token Diff

  Tokens added (18):

  • accordion-content-area-edge-to-content-extra-large
  • accordion-content-area-edge-to-content-large
  • accordion-content-area-edge-to-content-medium
  • accordion-content-area-edge-to-content-small
  • accordion-disclosure-indicator-to-text-extra-large
  • accordion-disclosure-indicator-to-text-large
  • accordion-disclosure-indicator-to-text-medium
  • accordion-disclosure-indicator-to-text-small
  • accordion-item-to-divider
  • meter-thickness-extra-large
  • meter-thickness-medium
  • static-black-text-color
  • static-black-track-color
  • static-black-track-indicator-color
  • static-white-text-color
  • static-white-track-color
  • static-white-track-indicator-color
  • track-color

  Newly deprecated tokens (2):

  • accordion-edge-to-disclosure-indicator
  • accordion-disclosure-indicator-to-text

  Tokens updated (1):

  • meter-thickness-large

@adobe/[email protected]

Minor Changes

• #364 f96ffca Thanks @mrcjhicks! - Added coach-indicator s2 tokens

  Token Diff

  Tokens added (8):

  • coach-indicator-collapsed-gap
  • coach-indicator-collapsed-ring-rounding-increment
  • coach-indicator-collapsed-ring-thickness
  • coach-indicator-color
  • coach-indicator-expanded-gap
  • coach-indicator-expanded-ring-rounding-increment
  • coach-indicator-expanded-ring-thickness
  • coach-indicator-opacity

S2 Foundations Snapshot Release (00.0.0-s2-foundations-20240628172417)

Icon sizing and icon spacing updated for S2 foundations.

Token Diff

Tokens added (1):

• text-to-visual-400

Token values updated (38):

• component-edge-to-text-200: mobile: 19px => 18px
• component-edge-to-text-300: desktop: 18px => 17px
• component-edge-to-text-50: mobile: 10px => 11px
• component-edge-to-text-75:
  • desktop: 9px => 10px
  • mobile: 11px => 13px
• component-edge-to-visual-200: mobile: 16px => 15px
• component-edge-to-visual-300:
  • desktop: 15px => 14px
  • mobile: 19px => 20px
• component-edge-to-visual-50:
  • desktop: 6px => 7px
  • mobile: 7px => 9px
• component-edge-to-visual-75:
  • desktop: 7px => 8px
  • mobile: 9px => 11px
• component-edge-to-visual-only-100:
  • desktop: 7px => 6px
  • mobile: 9px => 8px
• component-edge-to-visual-only-200:
  • desktop: 10px => 9px
  • mobile: 13px => 11px
• component-edge-to-visual-only-300:
  • desktop: 13px => 11px
  • mobile: 16px => 15px
• component-edge-to-visual-only-50: mobile: 4px => 5px
• component-edge-to-visual-only-75: mobile: 5px => 6px
• component-pill-edge-to-text-200: mobile: 25px => 24px
• component-pill-edge-to-text-300: desktop: 24px => 23px
• component-pill-edge-to-text-75:
  • desktop: 12px => 13px
  • mobile: 15px => 17px
• component-pill-edge-to-visual-200: mobile: 22px => 21px
• component-pill-edge-to-visual-300:
  • desktop: 21px => 20px
  • mobile: 27px => 28px
• component-pill-edge-to-visual-75:
  • desktop: 10px => 11px
  • mobile: 13px => 15px
• component-pill-edge-to-visual-only-100:
  • desktop: 7px => 6px
  • mobile: 9px => 8px
• component-pill-edge-to-visual-only-200:
  • desktop: 10px => 9px
  • mobile: 13px => 11px
• component-pill-edge-to-visual-only-300:
  • desktop: 13px => 11px
  • mobile: 16px => 15px
• component-pill-edge-to-visual-only-75: mobile: 5px => 6px
• component-top-to-workflow-icon-100:
  • desktop: 7px => 6px
  • mobile: 9px => 8px
• component-top-to-workflow-icon-200:
  • desktop: 10px => 9px
  • mobile: 13px => 11px
• component-top-to-workflow-icon-300:
  • desktop: 13px => 11px
  • mobile: 16px => 15px
• component-top-to-workflow-icon-50: mobile: 4px => 5px
• component-top-to-workflow-icon-75: mobile: 5px => 6px
• text-to-visual-100:
  • desktop: 8px => 6px
  • mobile: 10px => 8px
• text-to-visual-200:
  • desktop: 9px => 7px
  • mobile: 11px => 9px
• text-to-visual-300:
  • desktop: 10px => 8px
  • mobile: 13px => 10px
• text-to-visual-50:
  • desktop: 6px => 5px
  • mobile: 8px => 7px
• text-to-visual-75:
  • desktop: 7px => 5px
  • mobile: 9px => 7px
• workflow-icon-size-100:
  • desktop: 18px => 20px
  • mobile: 22px => 24px
• workflow-icon-size-200:
  • desktop: 20px => 22px
  • mobile: 24px => 28px
• workflow-icon-size-300:
  • desktop: 22px => 26px
  • mobile: 28px => 30px
• workflow-icon-size-50: mobile: 18px => 16px
• workflow-icon-size-75: mobile: 20px => 18px

@adobe/[email protected]

Minor Changes

• #360 f73a0b4 Thanks @mrcjhicks! - - Fixed token type from Sizing to Font size for contextual-help-body-size and contextual-help-title-size

  • Renamed tokens by deprecating previous ones and creating new ones, with font in the token name
    Updated value of contextual-help-title-font-size

  Marked the the following tokens in Tokens Studio for deprecation:

  • negative-subdued-background-color-default ( --> points to negative-subtle-background-color-default)
  • negative-subdued-background-color-hover
  • negative-subdued-background-color-down
  • negative-subdued-background-color-key-focus

  Design motivation

  • The updated type sorts them correctly in the Tokens Studio data
  • The updated value reflects the latest design for Spectrum 2, using the new title style instead of heading
  • The negative-subdued tokens were deprecated because the tag "error" variant has been deprecated and are no longer needed in the system. A new "subtle" token has been added for the in-line alert use case.

  Token diff

  Tokens added (2):

  • contextual-help-body-font-size
  • contextual-help-title-font-size

  Newly deprecated Tokens (6):

  • contextual-help-body-size
  • contextual-help-title-size
  • negative-subdued-background-color-default
  • negative-subdued-background-color-hover
  • negative-subdued-background-color-down
  • negative-subdued-background-color-key-focus

@adobe/[email protected]

Minor Changes

• #355 783a200 Thanks @mrcjhicks! - Updated tokens according to updated token spec for Spectrum 2, including new and deprecated tokens

  Design Motivation

  Change 1: Updated terminology to align with t-shirt sizes

  Previously in S1, the breadcrumb variants were default, compact, and multiline. However, in S2, we have aligned breadcrumb to t-shirt sizes, resulting in the following changes:

  • Breadcrumbs (default) -> Breadcrumbs (L)
  • Breadcrumbs (compact) -> Breadcrumbs (M)
  • Breadcrumbs (multiline) -> Breadcrumbs (multiline)

  Change 2: Updated truncated menu button sizes and spacing

  Other structural changes

  • In S1 all variants used M sized action button – now we use S, M, L sized action buttons for respective sizes.
  • In S1 all variants had same spacing 8px around chevron, now we use different spacings for all the three variants

  Token Diff

  Tokens added (11):

  • breadcrumbs-separator-to-bottom-text-multiline
  • breadcrumbs-start-edge-to-text-large
  • breadcrumbs-start-edge-to-text-medium
  • breadcrumbs-start-edge-to-text-multiline
  • breadcrumbs-top-to-separator-large
  • breadcrumbs-top-to-separator-medium
  • breadcrumbs-top-to-separator-multiline
  • breadcrumbs-truncated-menu-to-separator
  • breadcrumbs-text-to-separator-large
  • breadcrumbs-text-to-separator-medium
  • breadcrumbs-text-to-separator-multiline

  Newly deprecated tokens (13):

  • breadcrumbs-height
  • breadcrumbs-height-compact
  • breadcrumbs-top-to-text
  • breadcrumbs-top-to-text-compact
  • breadcrumbs-bottom-to-text
  • breadcrumbs-bottom-to-text-compact
  • breadcrumbs-start-edge-to-text
  • breadcrumbs-top-to-separator-icon
  • breadcrumbs-top-to-separator-icon-compact
  • breadcrumbs-top-to-separator-icon-multiline
  • breadcrumbs-separator-icon-to-bottom-text-multiline
  • breadcrumbs-truncated-menu-to-separator-icon
  • breadcrumbs-top-to-truncated-menu-compact

  Token values updated (20):

  • breadcrumbs-top-to-separator-icon-multiline
  • breadcrumbs-top-to-text-multiline
  • breadcrumbs-bottom-to-text-multiline
  • breadcrumbs-height-multiline
  • breadcrumbs-top-to-separator-icon-multiline
  • breadcrumbs-top-to-text-multiline
  • breadcrumbs-height
  • breadcrumbs-height-compact
  • breadcrumbs-truncated-menu-to-separator-icon
  • breadcrumbs-truncated-menu-to-bottom-text
  • breadcrumbs-bottom-to-text
  • breadcrumbs-bottom-to-text-compact
  • breadcrumbs-separator-icon-to-bottom-text-multiline
  • breadcrumbs-start-edge-to-text
  • breadcrumbs-top-to-separator-icon
  • breadcrumbs-top-to-separator-icon-compact
  • breadcrumbs-top-to-text
  • breadcrumbs-top-to-text-compact
  • breadcrumbs-top-to-truncated-menu
  • breadcrumbs-top-to-truncated-menu-compact

@adobe/[email protected]

Minor Changes

• #345 fe4c707 Thanks @GarthDB! - Added UUIDs to the base of set tokens.

S2 Foundations Snapshot Release (0.0.0-s2-foundations-20240603231133)

Minor Changes

• #341 56f9ed8 Thanks @GarthDB! - Adding corner rounding

  Design Motivation

  This change adds a set of corner rounding tokens to the Spectrum design system. These changes are documented on the S2 website.

  Token Diff

  Tokens added (22):

  • corner-radius-0
  • corner-radius-1000
  • corner-radius-300
  • corner-radius-400
  • corner-radius-500
  • corner-radius-600
  • corner-radius-700
  • corner-radius-800
  • corner-radius-extra-large-default
  • corner-radius-full
  • corner-radius-large-default
  • corner-radius-medium-default
  • corner-radius-medium-size-extra-large
  • corner-radius-medium-size-extra-small
  • corner-radius-medium-size-large
  • corner-radius-medium-size-medium
  • corner-radius-medium-size-small
  • corner-radius-none
  • corner-radius-small-default
  • corner-radius-small-size-extra-large
  • corner-radius-small-size-large
  • corner-radius-small-size-medium
  • corner-radius-small-size-small

  Token values updated (5):

  • color-area-border-rounding
  • color-slider-border-rounding
  • corner-radius-75
  • corner-radius-100
  • corner-radius-200

@adobe/[email protected]

Minor Changes

• #342 9da9532 Thanks @mrcjhicks! - Newly defined S2 Icon colors by the Icons team were incorporated into our system. This includes updates to existing colors and new color additions. More details on icon colors can be found in this document and this Figma file.

  Design motivation

  Icons team defined new S2 color tokens needed for their iconography assets.

  Token diff

  Tokens added (78):

  • icon-color-blue-background
  • icon-color-blue-primary-down
  • icon-color-blue-primary-hover
  • icon-color-brown-background
  • icon-color-brown-primary-default
  • icon-color-brown-primary-down
  • icon-color-brown-primary-hover
  • icon-color-celery-background
  • icon-color-celery-primary-default
  • icon-color-celery-primary-down
  • icon-color-celery-primary-hover
  • icon-color-chartreuse-background
  • icon-color-chartreuse-primary-default
  • icon-color-chartreuse-primary-down
  • icon-color-chartreuse-primary-hover
  • icon-color-cinnamon-background
  • icon-color-cinnamon-primary-default
  • icon-color-cinnamon-primary-down
  • icon-color-cinnamon-primary-hover
  • icon-color-cyan-background
  • icon-color-cyan-primary-default
  • icon-color-cyan-primary-down
  • icon-color-cyan-primary-hover
  • icon-color-disabled-primary
  • icon-color-emphasized-background
  • icon-color-fuchsia-background
  • icon-color-fuchsia-primary-default
  • icon-color-fuchsia-primary-down
  • icon-color-fuchsia-primary-hover
  • icon-color-green-background
  • icon-color-green-primary-down
  • icon-color-green-primary-hover
  • icon-color-indigo-background
  • icon-color-indigo-primary-default
  • icon-color-indigo-primary-down
  • icon-color-indigo-primary-hover
  • icon-color-informative
  • icon-color-inverse-background
  • icon-color-magenta-background
  • icon-color-magenta-primary-default
  • icon-color-magenta-primary-down
  • icon-color-magenta-primary-hover
  • icon-color-negative
  • icon-color-neutral
  • icon-color-notice
  • icon-color-orange-background
  • icon-color-orange-primary-default
  • icon-color-orange-primary-down
  • icon-color-orange-primary-hover
  • icon-color-pink-background
  • icon-color-pink-primary-default
  • icon-color-pink-primary-down
  • icon-color-pink-primary-hover
  • icon-color-positive
  • icon-color-primary-down
  • icon-color-primary-hover
  • icon-color-purple-background
  • icon-color-purple-primary-default
  • icon-color-purple-primary-down
  • icon-color-purple-primary-hover
  • icon-color-red-background
  • icon-color-red-primary-down
  • icon-color-red-primary-hover
  • icon-color-seafoam-background
  • icon-color-seafoam-primary-default
  • icon-color-seafoam-primary-down
  • icon-color-seafoam-primary-hover
  • icon-color-silver-background
  • icon-color-silver-primary-default
  • icon-color-silver-primary-down
  • icon-color-silver-primary-hover
  • icon-color-turquoise-background
  • icon-color-turquoise-primary-default
  • icon-color-turquoise-primary-down
  • icon-color-turquoise-primary-hover
  • icon-color-yellow-background
  • icon-color-yellow-primary-down
  • icon-color-yellow-primary-hover

@adobe/[email protected]

Minor Changes

• #337 df2ab7e Thanks @mrcjhicks! - Updated illustrated message and drop zone tokens

  Design Motivation

  • The previous tokens had the incorrect types. By fixing the type, they can reference the updated tokens that are replacing them.
  • Illustrated message now has three sizes (S, M, L) in Spectrum 2 to cover a wider range of use cases
  • Component font size tokens now specify font in the token name

  Token Diff

  Tokens added (12):

  • drop-zone-body-font-size
  • drop-zone-cjk-title-font-size
  • drop-zone-title-font-size
  • illustrated-message-large-body-font-size
  • illustrated-message-large-cjk-title-font-size
  • illustrated-message-large-title-font-size
  • illustrated-message-medium-body-font-size
  • illustrated-message-medium-cjk-title-font-size
  • illustrated-message-medium-title-font-size
  • illustrated-message-small-body-font-size
  • illustrated-message-small-cjk-title-font-size
  • illustrated-message-small-title-font-size

  Newly deprecated tokens (6):

  • drop-zone-body-size
  • drop-zone-cjk-title-size
  • drop-zone-title-size
  • illustrated-message-body-size
  • illustrated-message-cjk-title-size
  • illustrated-message-title-size

  Token value updated (1):

  • drop-zone-border-dash-gap