@adobe/[email protected]

Minor Changes

• 940bd78: Updated background aliases in dark theme; added new non-semantic colors

  Design Motivation

  The existing background colors were updated for better consistency across semantic and non-semantic variants of the Badge component. The colors also introduce some general improved contrast in dark theme across other components using these aliases.
  The new non-semantic visual and background colors were added because new hues were introduced. These colors will be used in status light and badge components, respectively.

  Token Diff

  Tokens added (10):

  • brown-background-color-default
  • brown-visual-color
  • cinnamon-background-color-default
  • cinnamon-visual-color
  • pink-background-color-default
  • pink-visual-color
  • silver-background-color-default
  • silver-visual-color
  • turquoise-background-color-default
  • turquoise-visual-color

  Token values updated (27):

  • accent-background-color-default
  • accent-background-color-down
  • accent-background-color-hover
  • accent-background-color-key-focus
  • celery-background-color-default
  • chartreuse-background-color-default
  • gray-background-color-default
  • informative-background-color-default
  • informative-background-color-down
  • informative-background-color-hover
  • informative-background-color-key-focus
  • negative-background-color-default
  • negative-background-color-down
  • negative-background-color-hover
  • negative-background-color-key-focus
  • neutral-subdued-background-color-default
  • neutral-subdued-background-color-down
  • neutral-subdued-background-color-hover
  • neutral-subdued-background-color-key-focus
  • notice-background-color-default
  • orange-background-color-default
  • positive-background-color-default
  • positive-background-color-down
  • positive-background-color-hover
  • positive-background-color-key-focus
  • table-selected-row-background-color
  • yellow-background-color-default

@adobe/[email protected]

Minor Changes

• 9072ae7: color-slider-border-color token was updated to reference gray-1000 instead of gray-900 in both light and dark themes.

• 912e307: Updated color-slider-border-rounding token to use 7px instead of 4px in desktop only.
  This token value update is the same value used by alias token: corner-radius-medium-size-small.

  Design Motivation

  S2 color slider design changes.

  Token Diff

  Token values updated (2):

  • color-slider-border-color
  • color-slider-border-rounding

@adobe/[email protected]

Minor Changes

• 80a3fec: New non-color tokens for S2 tag component added to both desktop and mobile layout.component sets.

  Design Motivation

  New values for tag component for S2.

  Token Diff

  Tokens added (9):

  • tag-edge-to-clear-icon-large
  • tag-edge-to-clear-icon-medium
  • tag-edge-to-clear-icon-small
  • tag-label-clear-icon-large
  • tag-label-to-clear-icon-large
  • tag-label-to-clear-icon-medium
  • tag-label-to-clear-icon-small
  • tag-maximum-width-multiplier
  • tag-minimum-width-multiplier

@adobe/[email protected]

Minor Changes

• c7c1d81: Added new semantic color aliases to Tokens Studio, in the S2 color tokens, alias sets for both light and dark themes.

• 4b78009: Updated values and added new tokens for Switch.

  Design Motivation

  New negative-subdued background tokens were needed for negative and not selected tag components.

  Added new tokens: switch-handle-size-_ and switch-handle-selected-size-_ for both desktop and mobile.
  Update token values on: switch-control-width-_ and switch-control-height-_ for both desktop and mobile.

  The design for Switch in S2 has changed and now has a border when it's not selected. New handle sizes are added and control sizes have been updated.

  Token Diff

  Tokens added (12):

  • negative-subdued-background-color-default
  • negative-subdued-background-color-down
  • negative-subdued-background-color-hover
  • negative-subdued-background-color-key-focus
  • switch-handle-selected-size-extra-large
  • switch-handle-selected-size-large
  • switch-handle-selected-size-medium
  • switch-handle-selected-size-small
  • switch-handle-size-extra-large
  • switch-handle-size-large
  • switch-handle-size-medium
  • switch-handle-size-small

  Token values updated (8):

  • switch-control-height-extra-large
  • switch-control-height-large
  • switch-control-height-medium
  • switch-control-height-small
  • switch-control-width-extra-large
  • switch-control-width-large
  • switch-control-width-medium
  • switch-control-width-small

@adobe/[email protected]

Minor Changes

• f004b0c: The tokens listed in the diff below had identical values between sets and so were merged to single values to simplify the data.

  Token Diff

  Tokens values updated (46):

  • accordion-disclosure-indicator-to-text
  • accordion-edge-to-disclosure-indicator
  • accordion-edge-to-text
  • accordion-focus-indicator-gap
  • accordion-top-to-text-compact-medium
  • accordion-top-to-text-compact-small
  • action-button-edge-to-hold-icon-extra-small
  • action-button-edge-to-hold-icon-small
  • asterisk-icon-size-75
  • background-base-color
  • background-layer-1-color
  • color-area-border-rounding
  • corner-radius-0
  • corner-radius-100
  • corner-radius-1000
  • corner-radius-200
  • corner-radius-300
  • corner-radius-400
  • corner-radius-500
  • corner-radius-600
  • corner-radius-700
  • corner-radius-75
  • 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
  • drop-shadow-x
  • field-label-top-margin-extra-large
  • field-label-top-margin-large
  • field-label-top-margin-medium
  • field-label-top-margin-small
  • gray-background-color-default
  • status-light-dot-size-small
  • table-edge-to-content

@adobe/[email protected]

Minor Changes

• 4208725: The 14 tokens listed in the diff below had identical values between sets and so were merged to single values to simplify the data.

  Token Diff

  Tokens values update (14):

  • accordion-disclosure-indicator-to-text
  • accordion-edge-to-disclosure-indicator
  • accordion-edge-to-text
  • accordion-focus-indicator-gap
  • accordion-top-to-text-compact-medium
  • accordion-top-to-text-compact-small
  • action-button-edge-to-hold-icon-extra-small
  • action-button-edge-to-hold-icon-small
  • asterisk-icon-size-75
  • corner-radius-75
  • drop-shadow-x
  • field-label-top-margin-small
  • status-light-dot-size-small
  • table-edge-to-content

@adobe/[email protected]

Minor Changes

• ef600c4: updated tooltip component in Spectrum 2

Design Motivation

• The updated tooltip component in Spectrum 2 has a larger, slightly rounded tip
• Added tokens for horizontal and vertical orientation

Tokens Diff

Tokens added (3):

• divider-horizontal-minimum-width
• divider-vertical-minimum-height
• tooltip-tip-corner-radius

Token values updated (2):

• tooltip-tip-height
• tooltip-tip-width

@adobe/[email protected]

Minor Changes

• c87d743: Updates to spacing tokens for the S2 field label component include:

  Token: field-label-top-to-asterisk-[medium, large, extra-large]. Only value for extra-large token required updating in the desktop scale. All other sizes presented accurate values.

  Token: field-label-top-margin-[medium, large, extra-large]. All values were updated to reflect 0px for both desktop and mobile scales

  Design Motivation

  These changes occurred as a result of updates to the field label component for S2.

  Token Diff

  Token values updated (4):

  • field-label-top-margin-extra-large
  • field-label-top-margin-large
  • field-label-top-margin-medium
  • field-label-top-to-asterisk-extra-large

  Schema Diff

  Adds missing schema information for corner-radius-1000. Also added schemas/token-types/multiplier.json to the scale-set schema.

@adobe/[email protected]

Minor Changes

• 3c6303a: Updated text-to-visual-300 mobile value from 11px to 10px.
• 6579966: existing corner-radius tokens, adding net-new global corner radius tokens, and introducing new alias names that point to these global values.

Design Motivation

More on Spectrum 2 rounding: https://s2.spectrum.corp.adobe.com/page/object-styles/#rounding

In Spectrum 2, rounding also applies to the different t-shirt sized components and varies based on a Major Second logarithmic scale, rounded to whole numbers to avoid using half-pixels. This allows for components to retain a consistent and identifiable shape at all sizes. Because of this there are now component size specific tokens like corner-radius-small-size-medium or corner-radius-medium-size-extra-large to help us keep track of the nuance within t-shirt sizes.

Token Diff

Tokens added (23):

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

Token values updated (4):

• corner-radius-75
• corner-radius-100
• corner-radius-200
• text-to-visual-300

@adobe/[email protected]

Minor Changes

• 23d9085: Updated desktop and mobile values for component-edge-to-visual-only tokens.

• c5430b7: Updated help-text-top-to-workflow-icon-_ token values to point to component-top-to-workflow-icon-_ tokens

  Spacing changed due to new workflow icon sizes.

  Token Diff

  Token values updated (5):

  • component-edge-to-visual-only-100
  • component-edge-to-visual-only-200
  • component-edge-to-visual-only-300
  • component-edge-to-visual-only-50
  • component-edge-to-visual-only-75

  Newly deprecated tokens (4):

  • help-text-top-to-workflow-icon-extra-large: use component-edge-to-visual-only-300
  • help-text-top-to-workflow-icon-large: use component-edge-to-visual-only-200
  • help-text-top-to-workflow-icon-medium: use component-edge-to-visual-only-100
  • help-text-top-to-workflow-icon-small: use component-edge-to-visual-only-75