@adobe/[email protected]

Minor Changes

• #409 a61060a Thanks @mrcjhicks! - Token changes for CJK typography improvements.

  Updated S1 tokens - typography, foundations

  Design Motivation

  The S1 type token changes fix some minor issues with CJK font-sizing, font-weight, and removes the added letter-spacing (since we got feedback this was unnecessary and both latin and CJK characters look too spaced out with the current letter-spacing applied).

  Token Diff

  Tokens added (13):

  • body-cjk-size-l
  • body-cjk-size-m
  • body-cjk-size-s
  • body-cjk-size-xl
  • body-cjk-size-xs
  • body-cjk-size-xxl
  • body-cjk-size-xxxl
  • detail-cjk-size-l
  • detail-cjk-size-m
  • detail-cjk-size-s
  • detail-cjk-size-xl
  • font-size-25
  • letter-spacing

  Token values updated (14):

  • body-cjk-strong-emphasized-font-weight
  • body-cjk-strong-font-weight
  • cjk-letter-spacing
  • detail-cjk-emphasized-font-weight
  • detail-cjk-strong-emphasized-font-weight
  • detail-cjk-strong-font-weight
  • drop-zone-cjk-title-size
  • heading-cjk-heavy-font-weight
  • heading-cjk-size-s
  • heading-cjk-size-xs
  • heading-cjk-size-xxl
  • heading-cjk-size-xxs
  • heading-cjk-size-xxxl
  • illustrated-message-cjk-title-size

@adobe/[email protected]

Minor Changes

• #407 c186fb8 Thanks @GarthDB! - Replaced --test with --local to make it easier to compare released changes with a local branch'

@adobe/[email protected]

Updating to the latest S2 colors

Token Diff

Tokens added (34):

• accent-subtle-background-color-default
• blue-subtle-background-color-default
• brown-subtle-background-color-default
• celery-subtle-background-color-default
• chartreuse-subtle-background-color-default
• cinnamon-subtle-background-color-default
• cyan-subtle-background-color-default
• drop-shadow-color-300
• drop-shadow-dragged-color
• fuchsia-subtle-background-color-default
• gray-subtle-background-color-default
• green-subtle-background-color-default
• indigo-subtle-background-color-default
• informative-subtle-background-color-default
• magenta-subtle-background-color-default
• negative-subtle-background-color-default
• neutral-subtle-background-color-default
• notice-subtle-background-color-default
• orange-subtle-background-color-default
• pink-subtle-background-color-default
• positive-subtle-background-color-default
• purple-subtle-background-color-default
• red-subtle-background-color-default
• seafoam-subtle-background-color-default
• silver-subtle-background-color-default
• 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
• turquoise-subtle-background-color-default
• yellow-subtle-background-color-default

Token values updated (34):

• accent-background-color-default
• accent-background-color-down
• accent-background-color-hover
• accent-background-color-key-focus
• blue-background-color-default
• brown-background-color-default
• cinnamon-background-color-default
• cyan-background-color-default
• fuchsia-background-color-default
• green-background-color-default
• indigo-background-color-default
• informative-background-color-default
• informative-background-color-down
• informative-background-color-hover
• informative-background-color-key-focus
• magenta-background-color-default
• negative-background-color-default
• negative-background-color-down
• negative-background-color-hover
• negative-background-color-key-focus
• negative-visual-color
• notice-visual-color
• pink-background-color-default
• positive-background-color-default
• positive-background-color-down
• positive-background-color-hover
• positive-background-color-key-focus
• positive-visual-color
• purple-background-color-default
• red-background-color-default
• seafoam-background-color-default
• silver-background-color-default
• table-selected-row-background-color
• turquoise-background-color-default

@adobe/[email protected]

Minor Changes

• #396 4fcfe5b Thanks @larz0! - Added brand new tokens for the S2 Standard Panel:

  Design Motivation

  Added tokens needed for the new S2 standard panel component.

  Token Diff

  Tokens Added (12):

  • standard-panel-width
  • standard-panel-minimum-width
  • standard-panel-maximum-width
  • standard-panel-top-to-close-button-compact
  • standard-panel-top-to-close-button-regular
  • standard-panel-top-to-close-button-spacious
  • standard-panel-edge-to-close-button-compact
  • standard-panel-edge-to-close-button-regular
  • standard-panel-edge-to-close-button-spacious
  • standard-panel-title-font-size
  • standard-panel-gripper-color
  • standard-panel-gripper-color-drag

@adobe/[email protected]

Patch Changes

• #394 71b38bd Thanks @GarthDB! - Fixed author

@adobe/[email protected]

Major Changes

• #344 8a021e0 Thanks @shirlsli! - Initial release of the token diff generator library and cli

@adobe/[email protected]

Minor Changes

• #390 cc9c304 Thanks @lynnhao! - Updated code tokens for S2

  Design Motivation

  These code token updates include some fixes to CJK font-weights to match the Latin font-weights when possible. We added CJK size tokens for consistency with other typography style tokens. Note that the new CJK size tokens currently point to the default code font-size tokens since Source Code Pro handles Latin and CJK sizing comparably.

  Token Diff

  Tokens added (5):

  • code-cjk-size-l
  • code-cjk-size-m
  • code-cjk-size-s
  • code-cjk-size-xl
  • code-cjk-size-xs

  Token values updated (2):

  • code-cjk-strong-emphasized-font-weight
  • code-cjk-strong-font-weight

@adobe/[email protected]

Minor Changes

• #388 58425e6 Thanks @lynnhao! - Updated avatar and avatar group tokens

  Description

  • Updated avatar size tokens, including all sizes from 75 to 700
  • Added new avatar size tokens, from 800 to 1500
  • Added new avatar border thickness and color tokens
  • Added avatar group size tokens, from 50 to 500
  • Added avatar group spacing tokens, from 50 to 500

  Motivation and context

  • Avatar: added new sizes and updated existing sizes to better match other components and work across a variety of use cases.
    • ⚠️ Important note: Accepting updates from this release will update the avatar sizes. The largest change in size is 8px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size:

  Former avatar size	Available avatar size
  size 50 (16 x 16)	size 50 (16 x 16)
  size 75 (18 x 18)	size 50 (16 x 16) or size 75 (20 x 20)
  size 100 (20 x 20)	size 75 (20 x 20)
  size 200 (22 x 22)	size 75 (20 x 20) or size 100 (24 x 24)
  size 300 (26 x 26)	size 100 (24 x 24) or 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 600 (44 x 44)
  --	size 700 (48 x 48)
  --	size 800 (52 x 52)
  --	size 900 (56 x 56)
  --	size 1000 (64 x 64)
  --	size 1100 (72 x 72)
  --	size 1200 (80 x 80)
  --	size 1300 (88 x 88)
  --	size 1400 (96 x 96)
  --	size 1500 (104 x 104)

  Token Diff

  Tokens added (24):

  • avatar-border-color
  • avatar-border-width
  • avatar-group-size-100
  • avatar-group-size-200
  • avatar-group-size-300
  • avatar-group-size-400
  • avatar-group-size-50
  • avatar-group-size-500
  • avatar-group-size-75
  • avatar-size-1000
  • avatar-size-1100
  • avatar-size-1200
  • avatar-size-1300
  • avatar-size-1400
  • avatar-size-1500
  • avatar-size-800
  • avatar-size-900
  • avatar-to-avatar-100
  • avatar-to-avatar-200
  • avatar-to-avatar-300
  • avatar-to-avatar-400
  • avatar-to-avatar-50
  • avatar-to-avatar-500
  • avatar-to-avatar-75

  Token values updated (8):

  • avatar-size-100
  • avatar-size-200
  • avatar-size-300
  • avatar-size-400
  • avatar-size-500
  • avatar-size-600
  • avatar-size-700
  • avatar-size-75

@adobe/[email protected]

Minor Changes

• #384 681b4b0 Thanks @mrcjhicks! - Added dragged drop shadow tokens that point to new 300 global drop shadow tokens

  Design Motivation

  These are new foundational drop shadow tokens that represent a higher elevation when items are dragged. The more prominent shadow also brings more visual focus to the dragged item. They will be used in the standard panel "dragged" state, as well as in future component updates, to be determined.

  Token Diff

  Tokens added (8):

  • drop-shadow-blur-300
  • drop-shadow-color-300
  • drop-shadow-dragged-blur
  • drop-shadow-dragged-color
  • drop-shadow-dragged-x
  • drop-shadow-dragged-y
  • drop-shadow-x-300
  • drop-shadow-y-300

@adobe/[email protected]

Minor Changes

• #382 2af3850 Thanks @nabuhasan! - Updated S2 swatch tokens and added swatch-group tokens in S2 Color and S2 Non-color data sets, respectively.

  Design Motivation

  Swatch and swatch group components are being formalized as Spectrum 2 components. These tokens define the design data needed for implementation. Changes include updated corner rounding, colors and spacing for spacious density.

  For more information, view Jira ticket.

  Token Diff

  Tokens added (3):

  • swatch-group-spacing-spacious
  • swatch-group-border-opacity
  • swatch-group-border-color

  Tokens values updated (3):

  • swatch-border-color: gray-900 -> gray-1000
  • swatch-border-opacity: 0.51 -> 0.42
  • swatch-disabled-icon-border-opacity: 0.51 -> 0.42