@adobe/spectrum-tokens@13.0.0-beta.35

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

S2 Foundations: Colors

Major Changes

• S2 foundation color changes

Token Diff

Tokens Added (242):

• accent-color-100
• accent-color-1000
• accent-color-1100
• accent-color-1200
• accent-color-1300
• accent-color-1400
• accent-color-1500
• accent-color-1600
• accent-color-200
• accent-color-300
• accent-color-400
• accent-color-500
• accent-color-600
• accent-color-700
• accent-color-800
• accent-color-900
• accent-content-color-default
• accent-content-color-hover
• accent-content-color-key-focus
• accent-content-color-selected
• background-elevated-color
• background-pasteboard-color
• blue-1500
• blue-1600
• border-width-100
• brown-100
• brown-1000
• brown-1100
• brown-1200
• brown-1300
• brown-1400
• brown-1500
• brown-1600
• brown-200
• brown-300
• brown-400
• brown-500
• brown-600
• brown-700
• brown-800
• brown-900
• brown-background-color-default
• brown-visual-color
• celery-1500
• celery-1600
• chartreuse-1500
• chartreuse-1600
• checkbox-control-size-extra-large
• checkbox-control-size-large
• checkbox-control-size-medium
• checkbox-control-size-small
• checkbox-top-to-control-extra-large
• checkbox-top-to-control-large
• checkbox-top-to-control-medium
• checkbox-top-to-control-small
• cinnamon-100
• cinnamon-1000
• cinnamon-1100
• cinnamon-1200
• cinnamon-1300
• cinnamon-1400
• cinnamon-1500
• cinnamon-1600
• cinnamon-200
• cinnamon-300
• cinnamon-400
• cinnamon-500
• cinnamon-600
• cinnamon-700
• cinnamon-800
• cinnamon-900
• cinnamon-background-color-default
• cinnamon-visual-color
• color-area-border-rounding
• color-area-border-width
• corner-radius-100
• corner-radius-200
• corner-radius-75
• cyan-1500
• cyan-1600
• drop-shadow-blur
• drop-shadow-color-100
• drop-shadow-color-200
• drop-shadow-elevated-color
• drop-shadow-emphasized-default-color
• drop-shadow-emphasized-hover-color
• drop-shadow-x
• drop-shadow-y
• fuchsia-1500
• fuchsia-1600
• gray-1000
• gray-25
• green-1500
• green-1600
• heading-cjk-font-weight
• heading-sans-serif-emphasized-font-weight
• heading-sans-serif-font-weight
• heading-serif-emphasized-font-weight
• heading-serif-font-weight
• in-field-button-edge-to-fill
• in-field-button-fill-stacked-inner-border-rounding
• in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
• in-field-button-inner-edge-to-disclosure-icon-stacked-large
• in-field-button-inner-edge-to-disclosure-icon-stacked-medium
• in-field-button-inner-edge-to-disclosure-icon-stacked-small
• in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
• in-field-button-outer-edge-to-disclosure-icon-stacked-large
• in-field-button-outer-edge-to-disclosure-icon-stacked-medium
• in-field-button-stacked-inner-edge-to-fill
• indigo-1500
• indigo-1600
• informative-color-1500
• informative-color-1600
• magenta-1500
• magenta-1600
• negative-color-1500
• negative-color-1600
• negative-subdued-background-color-default
• negative-subdued-background-color-down
• negative-subdued-background-color-hover
• negative-subdued-background-color-key-focus
• neutral-background-color-selected-default
• neutral-background-color-selected-down
• neutral-background-color-selected-hover
• neutral-background-color-selected-key-focus
• notice-color-1500
• notice-color-1600
• orange-1500
• orange-1600
• picker-border-width
• pink-100
• pink-1000
• pink-1100
• pink-1200
• pink-1300
• pink-1400
• pink-1500
• pink-1600
• pink-200
• pink-300
• pink-400
• pink-500
• pink-600
• pink-700
• pink-800
• pink-900
• pink-background-color-default
• pink-visual-color
• positive-color-1500
• positive-color-1600
• purple-1500
• purple-1600
• radio-button-control-size-extra-large
• radio-button-control-size-large
• radio-button-control-size-medium
• radio-button-control-size-small
• radio-button-top-to-control-extra-large
• radio-button-top-to-control-large
• radio-button-top-to-control-medium
• radio-button-top-to-control-small
• red-1500
• red-1600
• seafoam-1500
• seafoam-1600
• silver-100
• silver-1000
• silver-1100
• silver-1200
• silver-1300
• silver-1400
• silver-1500
• silver-1600
• silver-200
• silver-300
• silver-400
• silver-500
• silver-600
• silver-700
• silver-800
• silver-900
• silver-background-color-default
• silver-visual-color
• slider-bottom-to-handle-extra-large
• slider-bottom-to-handle-large
• slider-bottom-to-handle-medium
• slider-bottom-to-handle-small
• slider-control-height-extra-large
• slider-control-height-large
• slider-control-height-medium
• slider-control-height-small
• slider-handle-border-width-down-extra-large
• slider-handle-border-width-down-large
• slider-handle-border-width-down-medium
• slider-handle-border-width-down-small
• slider-handle-gap
• slider-handle-size-extra-large
• slider-handle-size-large
• slider-handle-size-medium
• slider-handle-size-small
• slider-track-thickness
• 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
• switch-top-to-control-extra-large
• switch-top-to-control-large
• switch-top-to-control-medium
• switch-top-to-control-small
• table-selected-row-background-color-non-emphasized
• title-color
• transparent-black-1000
• transparent-black-25
• transparent-black-50
• transparent-black-75
• transparent-white-1000
• transparent-white-25
• transparent-white-50
• transparent-white-75
• turquoise-100
• turquoise-1000
• turquoise-1100
• turquoise-1200
• turquoise-1300
• turquoise-1400
• turquoise-1500
• turquoise-1600
• turquoise-200
• turquoise-300
• turquoise-400
• turquoise-500
• turquoise-600
• turquoise-700
• turquoise-800
• turquoise-900
• turquoise-background-color-default
• turquoise-visual-color
• yellow-1500
• yellow-1600

Tokens Updated (388):

• accent-background-color-default
• accent-background-color-down
• accent-background-color-hover
• accent-background-color-key-focus
• accent-content-color-down
• accent-visual-color
• background-base-color
• background-layer-1-color
• background-layer-2-color
• blue-100
• blue-1000
• blue-1100
• blue-1200
• blue-1300
• blue-1400
• blue-200
• blue-300
• blue-400
• blue-500
• blue-600
• blue-700
• blue-800
• blue-900
• blue-background-color-default
• blue-visual-color
• body-color
• card-selection-background-color
• celery-100
• celery-1000
• celery-1100
• celery-1200
• celery-1300
• celery-1400
• celery-200
• celery-300
• celery-400
• celery-500
• celery-600
• celery-700
• celery-800
• celery-900
• celery-background-color-default
• celery-visual-color
• chartreuse-100
• chartreuse-1000
• chartreuse-1100
• chartreuse-1200
• chartreuse-1300
• chartreuse-1400
• chartreuse-200
• chartreuse-300
• chartreuse-400
• chartreuse-500
• chartreuse-600
• chartreuse-700
• chartreuse-800
• chartreuse-900
• chartreuse-background-color-default
• chartreuse-visual-color
• coach-mark-pagination-color
• code-color
• color-area-border-color
• color-handle-drop-shadow-color
• color-loupe-drop-shadow-color
• color-loupe-inner-border
• color-slider-border-color
• cyan-100
• cyan-1000
• cyan-1100
• cyan-1200
• cyan-1300
• cyan-1400
• cyan-200
• cyan-300
• cyan-400
• cyan-500
• cyan-600
• cyan-700
• cyan-800
• cyan-900
• cyan-background-color-default
• cyan-visual-color
• detail-color
• disabled-background-color
• disabled-border-color
• disabled-content-color
• disabled-static-black-background-color
• disabled-static-black-border-color
• disabled-static-black-content-color
• disabled-static-white-background-color
• disabled-static-white-border-color
• disabled-static-white-content-color
• drop-shadow-color
• drop-zone-background-color
• floating-action-button-drop-shadow-color
• floating-action-button-shadow-color
• focus-indicator-color
• fuchsia-100
• fuchsia-1000
• fuchsia-1100
• fuchsia-1200
• fuchsia-1300
• fuchsia-1400
• fuchsia-200
• fuchsia-300
• fuchsia-400
• fuchsia-500
• fuchsia-600
• fuchsia-700
• fuchsia-800
• fuchsia-900
• fuchsia-background-color-default
• fuchsia-visual-color
• gray-100
• gray-200
• gray-300
• gray-400
• gray-50
• gray-500
• gray-600
  -...

@adobe/spectrum-tokens@13.0.0-beta.34

Minor Changes

• #334 4d28593 Thanks @nabuhasan! - S2 Popover tokens update

  Token Diff

  Tokens added (3):

  • popover-border-color
  • popover-border-opacity
  • popover-edge-to-content-area

  Newly deprecated token (1):

  • popover-top-to-content-area

@adobe/spectrum-tokens@13.0.0-beta.33

Minor Changes

• #331 0bbfedb Thanks @nabuhasan! - S2 Menu token updates

  Token Diff

  Tokens added (23):

  • link-out-icon-size-100
  • link-out-icon-size-200
  • link-out-icon-size-75
  • menu-item-background-color-default
  • menu-item-background-color-disabled
  • menu-item-background-color-down
  • menu-item-background-color-hover
  • menu-item-background-color-keyboard-focus
  • menu-item-background-opacity
  • menu-item-label-to-description
  • menu-item-label-to-description-extra-large
  • menu-item-label-to-description-large
  • menu-item-label-to-description-medium
  • menu-item-label-to-description-small
  • menu-item-top-to-thumbnail-extra-large
  • menu-item-top-to-thumbnail-large
  • menu-item-top-to-thumbnail-medium
  • menu-item-top-to-thumbnail-small
  • menu-section-header-to-description-extra-large
  • menu-section-header-to-description-large
  • menu-section-header-to-description-medium
  • menu-section-header-to-description-small
  • text-to-visual-400

  Token values updated (1):

  • menu-item-section-divider-height

@adobe/spectrum-tokens@13.0.0-beta.32

Minor Changes

• #325 095248e Thanks @mrcjhicks! - Added semantic aliases used by in-line alert.

  Token Diff

  Tokens added (5):

  • informative-subtle-background-color-default
  • negative-subtle-background-color-default
  • neutral-subtle-background-color-default
  • notice-subtle-background-color-default
  • positive-subtle-background-color-default

@adobe/spectrum-tokens@12.25.0

Minor Changes

• 413ef5a Thanks @GarthDB! - Added private metadata to global tokens.

@adobe/spectrum-tokens@13.0.0-beta.31

Minor Changes

• #327 3caa31d Thanks @GarthDB! - Added private metadata to global tokens.

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

A snapshot release of the S2 global foundation changes.

Token Diff

Tokens added (264):

• accent-color-100
• accent-color-1000
• accent-color-1100
• accent-color-1200
• accent-color-1300
• accent-color-1400
• accent-color-1500
• accent-color-1600
• accent-color-200
• accent-color-300
• accent-color-400
• accent-color-500
• accent-color-600
• accent-color-700
• accent-color-800
• accent-color-900
• accent-content-color-default
• accent-content-color-hover
• accent-content-color-key-focus
• accent-content-color-selected
• 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-elevated-color
• background-pasteboard-color
• blue-1500
• blue-1600
• border-width-100
• brown-100
• brown-1000
• brown-1100
• brown-1200
• brown-1300
• brown-1400
• brown-1500
• brown-1600
• brown-200
• brown-300
• brown-400
• brown-500
• brown-600
• brown-700
• brown-800
• brown-900
• celery-1500
• celery-1600
• chartreuse-1500
• chartreuse-1600
• checkbox-control-size-extra-large
• checkbox-control-size-large
• checkbox-control-size-medium
• checkbox-control-size-small
• checkbox-top-to-control-extra-large
• checkbox-top-to-control-large
• checkbox-top-to-control-medium
• checkbox-top-to-control-small
• cinnamon-100
• cinnamon-1000
• cinnamon-1100
• cinnamon-1200
• cinnamon-1300
• cinnamon-1400
• cinnamon-1500
• cinnamon-1600
• cinnamon-200
• cinnamon-300
• cinnamon-400
• cinnamon-500
• cinnamon-600
• cinnamon-700
• cinnamon-800
• cinnamon-900
• color-area-border-rounding
• color-area-border-width
• component-size-difference-down
• component-size-minimum-perspective-down
• component-size-width-ratio-down
• 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
• cyan-1500
• cyan-1600
• drop-shadow-blur
• drop-shadow-x
• drop-shadow-y
• field-label-top-margin-small
• fuchsia-1500
• fuchsia-1600
• gray-1000
• gray-25
• green-1500
• green-1600
• heading-cjk-font-weight
• heading-sans-serif-emphasized-font-weight
• heading-sans-serif-font-weight
• heading-serif-emphasized-font-weight
• heading-serif-font-weight
• help-text-top-to-workflow-icon-extra-large
• help-text-top-to-workflow-icon-large
• help-text-top-to-workflow-icon-medium
• help-text-top-to-workflow-icon-small
• in-field-button-edge-to-fill
• in-field-button-fill-stacked-inner-border-rounding
• in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
• in-field-button-inner-edge-to-disclosure-icon-stacked-large
• in-field-button-inner-edge-to-disclosure-icon-stacked-medium
• in-field-button-inner-edge-to-disclosure-icon-stacked-small
• in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
• in-field-button-outer-edge-to-disclosure-icon-stacked-large
• in-field-button-outer-edge-to-disclosure-icon-stacked-medium
• in-field-button-stacked-inner-edge-to-fill
• indigo-1500
• indigo-1600
• informative-color-1500
• informative-color-1600
• magenta-1500
• magenta-1600
• negative-color-1500
• negative-color-1600
• neutral-background-color-selected-default
• neutral-background-color-selected-down
• neutral-background-color-selected-hover
• neutral-background-color-selected-key-focus
• notice-color-1500
• notice-color-1600
• orange-1500
• orange-1600
• picker-border-width
• pink-100
• pink-1000
• pink-1100
• pink-1200
• pink-1300
• pink-1400
• pink-1500
• pink-1600
• pink-200
• pink-300
• pink-400
• pink-500
• pink-600
• pink-700
• pink-800
• pink-900
• positive-color-1500
• positive-color-1600
• purple-1500
• purple-1600
• radio-button-control-size-extra-large
• radio-button-control-size-large
• radio-button-control-size-medium
• radio-button-control-size-small
• radio-button-top-to-control-extra-large
• radio-button-top-to-control-large
• radio-button-top-to-control-medium
• radio-button-top-to-control-small
• red-1500
• red-1600
• seafoam-1500
• seafoam-1600
• silver-100
• silver-1000
• silver-1100
• silver-1200
• silver-1300
• silver-1400
• silver-1500
• silver-1600
• silver-200
• silver-300
• silver-400
• silver-500
• silver-600
• silver-700
• silver-800
• silver-900
• slider-bottom-to-handle-extra-large
• slider-bottom-to-handle-large
• slider-bottom-to-handle-medium
• slider-bottom-to-handle-small
• slider-control-height-extra-large
• slider-control-height-large
• slider-control-height-medium
• slider-control-height-small
• slider-handle-border-width-down-extra-large
• slider-handle-border-width-down-large
• slider-handle-border-width-down-medium
• slider-handle-border-width-down-small
• slider-handle-gap
• slider-handle-size-extra-large
• slider-handle-size-large
• slider-handle-size-medium
• slider-handle-size-small
• slider-track-thickness
• status-light-dot-size-small
• 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
• switch-top-to-control-extra-large
• switch-top-to-control-large
• switch-top-to-control-medium
• switch-top-to-control-small
• table-edge-to-content
• table-selected-row-background-color-non-emphasized
• transparent-black-1000
• transparent-black-25
• transparent-black-50
• transparent-black-75
• transparent-white-1000
• transparent-white-25
• transparent-white-50
• transparent-white-75
• turquoise-100
• turquoise-1000
• turquoise-1100
• turquoise-1200
• turquoise-1300
• turquoise-1400
• turquoise-1500
• turquoise-1600
• turquoise-200
• turquoise-300
• turquoise-400
• turquoise-500
• turquoise-600
• turquoise-700
• turquoise-800
• turquoise-900
• yellow-1500
• yellow-1600

Token values updated (408):

• accent-background-color-default
• accent-background-color-down
• accent-background-color-hover
• accent-background-color-key-focus
• accent-content-color-down
• accent-visual-color
• background-base-color
• background-layer-1-color
• background-layer-2-color
• blue-100
• blue-1000
• blue-1100
• blue-1200
• blue-1300
• blue-1400
• blue-200
• blue-300
• blue-400
• blue-500
• blue-600
• blue-700
• blue-800
• blue-900
• blue-background-color-default
• blue-visual-color
• body-color
• card-selection-background-color
• celery-100
• celery-1000
• celery-1100
• celery-1200
• celery-1300
• celery-1400
• celery-200
• celery-300
• celery-400
• celery-500
• celery-600
• celery-700
• celery-800
• celery-900
• celery-background-color-default
• celery-visual-color
• chartreuse-100
• chartreuse-1000
• chartreuse-1100
• chartreuse-1200
• chartreuse-1300
• chartreuse-1400
• chartreuse-200
• chartreuse-300
• chartreuse-400
• chartreuse-500
• chartreuse-600
• chartreuse-700
• chartreuse-800
• chartreuse-900
• chartreuse-background-color-default
• chartreuse-visual-color
• coach-mark-pagination-color
• code-color
• color-area-border-color
• color-handle-drop-shadow-color
• color-loupe-drop-shadow-color
• color-loupe-inner-border
• color-slider-border-color
• 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
• component-top-to-workflow-icon-100
• component-top-to-workflow-icon-200
• component-top-to-workflow-icon-300
• component-top-to-workflow-icon-50
• component-top-to-workflow-icon-75
• cyan-100
• cyan-1000
• cyan-1100
• cyan-1200
• cyan-1300
• cyan-1400
• cyan-200
• cyan-300
• cyan-400
• cyan-500
• cyan-600
• cyan-700
• cyan-800
• cyan-900
• cyan-background-color-default
• cyan-visual-color
• detail-color
• disabled-background-color
• disabled-border-color
• disabled-content-color
• disabled-static-black-background-color
• disabled-static-black-border-color
• disabled-static-black-content-color
• disabled-static-white-background-color
• disabled-static-white-border-color
• disabled-static-white-content-color
• drop-shadow-color
• drop-zone-background-color
• floating-action-button-drop-shadow-color
• `floating-action-bu...

@adobe/spectrum-tokens@13.0.0-beta.30

Minor Changes

• #321 e392c49 Thanks @mrcjhicks! - Added new Standard dialog, status light, and updated alert-banner-top-to-workflow-icon tokens

  Token Diff

  Tokens added (10):

  • standard-dialog-body-font-size
  • standard-dialog-maximum-width-large
  • standard-dialog-maximum-width-medium
  • standard-dialog-maximum-width-small
  • standard-dialog-minimum-width
  • standard-dialog-title-font-size
  • status-light-text-to-visual-100
  • status-light-text-to-visual-200
  • status-light-text-to-visual-300
  • status-light-text-to-visual-75

  Token values updated (10):

  • alert-banner-to-top-workflow-icon
  • alert-banner-top-to-workflow-icon
  • status-light-dot-size-extra-large
  • status-light-dot-size-large
  • status-light-dot-size-medium
  • status-light-top-to-dot-extra-large
  • status-light-top-to-dot-large
  • status-light-top-to-dot-medium
  • status-light-top-to-dot-small
  • status-light-dot-size-small

@adobe/spectrum-tokens@13.0.0-beta.29

Minor Changes

• #319 5f962fc Thanks @mrcjhicks! - Updated values for component pill edge to visual only tokens for both desktop and mobile.

  These values are updated based on the new workflow icon size.

  Token Diff

  Token values updated (4):

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

• #316 664ab0b Thanks @mrcjhicks! - S2 Color loupe tokens update (color-only)

  Token Diff

  Newly deprecated tokens (2):

  • color-loupe-drop-shadow-color
  • drop-shadow-color