@adobe/[email protected]

Minor Changes

• #446 dbc5398 Thanks @PaliwalSparsh! - Added S2 Treeview tokens

  Token Diff

  Tokens added (27):

  • tree-view-disclosure-indicator-height
  • tree-view-disclosure-indicator-width
  • tree-view-minimum-height
  • tree-view-minimum-width
  • tree-view-bottom-to-label
  • tree-view-drag-handle-to-checkbox
  • tree-view-edge-to-checkbox
  • tree-view-edge-to-drag-handle
  • tree-view-end-edge-to-action-area
  • tree-view-header-to-item
  • tree-view-item-to-header
  • tree-view-item-to-item
  • tree-view-item-to-item-detached
  • tree-view-label-to-action-area
  • tree-view-level-increment
  • tree-view-minimum-top-to-context-area
  • tree-view-top-to-action-button
  • tree-view-top-to-checkbox
  • tree-view-top-to-disclosure-indicator
  • tree-view-top-to-drag-handle
  • tree-view-top-to-label
  • tree-view-selected-row-background-opacity-emphasized
  • tree-view-selected-row-background-opacity-emphasized-hover
  • tree-view-row-background-hover
  • tree-view-selected-row-background-color-emphasized
  • tree-view-selected-row-background-default
  • tree-view-selected-row-background-hover

@adobe/[email protected]

Patch Changes

• #444 51904cd Thanks @marissahuysentruyt! - fixing a typo with takeover-dialog-height

  Token Diff

  Updated Token (1):

  • takeover-dialog-height: 1.00% -> 100%

@adobe/[email protected]

Patch Changes

• #441 89949e4 Thanks @GarthDB! - Change takeover dialog dimensions to use percentages which were previously converted to ems by mistake.

  Token Diff

  Updated Tokens (2):

  • takeover-dialog-height: 1.00em -> 1.00%
  • takeover-dialog-width: 1.00em -> 1.00%

@adobe/[email protected]

Changed corner rounding to match a simplified s2 strategy

Token Diff

Newly Deprecated Tokens (21):

• corner-radius-300
• corner-radius-400
• corner-radius-500
• corner-radius-600
• corner-radius-700
• corner-radius-800
• corner-radius-1000
• corner-radius-small-default
• corner-radius-medium-default
• corner-radius-large-default
• corner-radius-extra-large-default
• corner-radius-full
• corner-radius-small-size-small
• corner-radius-small-size-medium
• corner-radius-small-size-large
• corner-radius-small-size-extra-large
• 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

Updated Tokens (3):

• corner-radius-75: 3px -> 4px
• corner-radius-100: 4px -> 8px
• corner-radius-200: 5px -> 10px

@adobe/[email protected]

Minor Changes

• 254ba19 Thanks @GarthDB! - minor fixes to diff tool comparisons

@adobe/[email protected]

Patch Changes

• #430 fccd972 Thanks @GarthDB! - Fix version number in cli using a prepare script in the package.json file

@adobe/[email protected]

Minor Changes

• #425 91f4536 Thanks @mrcjhicks! - Adding S2 tokens for number field and takeover dialog components.

  Token Diff

  Tokens added (16):

  • in-field-stepper-to-end-extra-large
  • in-field-stepper-to-end-large
  • in-field-stepper-to-end-medium
  • in-field-stepper-to-end-small
  • number-field-minimum-width-multiplier
  • number-field-visual-to-in-field-stepper-extra-large
  • number-field-visual-to-in-field-stepper-large
  • number-field-visual-to-in-field-stepper-medium
  • number-field-visual-to-in-field-stepper-small
  • number-field-with-stepper-minimum-width-extra-large
  • number-field-with-stepper-minimum-width-large
  • number-field-with-stepper-minimum-width-medium
  • number-field-with-stepper-minimum-width-small
  • takeover-dialog-height
  • takeover-dialog-width
  • window-to-edge

@adobe/[email protected]

Patch Changes

• #423 9a36be0 Thanks @GarthDB! - Fixed issue when version number was hardcoded.

@adobe/[email protected]

Minor Changes

• #418 45ed87b Thanks @mrcjhicks!

  Design Motivation

  Made the following changes to component typography tokens for both mobile and desktop.

  Token Diff

  Tokens added (2):

  • heading-cjk-size-xxxxl
  • heading-size-xxxxl

  Tokens changed (7):

  • heading-sans-serif-font-weight: bold-font-weight -> extra-bold-font-weight
  • heading-cjk-heavy-font-weight: black-font-weight -> extra-bold-font-weight
  • heading-sans-serif-emphasized-font-weight: bold-font-weight -> extra-bold-font-weight
  • heading-size-s: font-size-300 -> font-size-400
  • heading-size-xs: font-size-200 -> font-size-300
  • heading-cjk-size-xxxl: font-size-1300 -> font-size-1200
  • heading-cjk-size-xxl: font-size-900 -> font-size-1000

• #422 4673d13 Thanks @GarthDB! - Added tokens for s2 detail typography

  New tokens (6)

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

  Updated token values (13)

  • detail-sans-serif-font-weight: bold-font-weight -> medium-font-weight
  • detail-serif-font-weight: bold-font-weight -> medium-font-weight
  • detail-cjk-font-weight: extra-bold-font-weight -> bold-font-weight
  • detail-cjk-strong-font-weight: black-font-weight -> extra-bold-font-weight
  • detail-sans-serif-emphasized-font-weight: bold-font-weight -> regular-font-weight
  • detail-serif-emphasized-font-weight: bold-font-weight -> medium-font-weight
  • detail-cjk-emphasized-font-weight: black-font-weight -> extra-bold-font-weight
  • detail-cjk-strong-emphasized-font-weight: black-font-weight -> extra-bold-font-weight
  • detail-size-xl: font-size-200 -> font-size-300
  • detail-size-l: font-size-100 -> font-size-200
  • detail-size-m: font-size-75 -> font-size-100
  • detail-size-s: font-size-50 -> font-size-75
  • detail-color: gray-900 -> gray-600

@adobe/[email protected]

Minor Changes

• #415 caca973
• New typography tokens:
  • Letter spacing, text-align, cjk
• New gradient stop tokens
• New component tokens for bar panel, rating, segmented control, slider, select box
• New static color tokens

Token Diff

Tokens added (51):

• letter-spacing
• text-align-start
• text-align-center
• text-align-end
• body-size-xxs
• body-cjk-size-xxxl
• body-cjk-size-xxl
• body-cjk-size-xl
• body-cjk-size-l
• body-cjk-size-m
• body-cjk-size-s
• body-cjk-size-xs
• body-cjk-size-xxs
• gradient-stop-1-genai
• gradient-stop-2-genai
• gradient-stop-3-genai
• gradient-stop-1-premium
• gradient-stop-2-premium
• gradient-stop-3-premium
• bar-panel-width
• bar-panel-minimum-width
• bar-panel-maximum-width
• bar-panel-spacing-extra-spacious
• rating-top-to-content-area-small
• rating-bottom-to-content-area-small
• rating-edge-to-content-area-small
• rating-top-to-content-area-medium
• rating-bottom-to-content-area-medium
• rating-edge-to-content-area-medium
• rating-width-small
• rating-height-small
• rating-width-medium
• rating-height-medium
• segmented-control-selection-border-width
• slider-handle-precision-width
• slider-track-height-medium
• slider-track-height-large
• segmented-control-item-height
• static-blue-900
• static-blue-1000
• static-fuchsia-900
• static-fuchsia-1000
• static-indigo-900
• static-indigo-1000
• static-magenta-900
• static-magenta-1000
• static-red-900
• static-red-1000
• bar-panel-gripper-color
• bar-panel-gripper-color-drag
• select-box-selected-border-color

Token values updated (9):

• font-size-1200
  • desktop: 50px -> 51px
• font-size-1300
  • desktop: 60px -> 58px
• cjk-letter-spacing: 0.05em -> letter-spacing
• body-cjk-strong-font-weight: black-font-weight -> extra-bold-font-weight
• body-cjk-strong-emphasized-font-weight: black-font-weight -> extra-bold-font-weight
• slider-control-to-field-label-small
  • desktop: 5px -> -4px
  • mobile: 6px -> -8px
• slider-control-to-field-label-medium
  • desktop: 8px -> -12px
  • mobile: 10px -> -16px
• slider-control-to-field-label-large
  • desktop: 11px -> -16px
  • mobile: 14px -> -20px
• slider-control-to-field-label-extra-large
  • desktop: 14px -> -20px
  • mobile: 17px -> -28px