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

Minor Changes

• #470 8de8921 Thanks @larz0! - Added action bar border color.

  Design Motivation

  Similar to the issues reported for popovers (SDS-14251), there isn't sufficient visual contrast of action bars on top of backgrounds in dark theme when used on background-color-layer-2.

  The solution to this issue in both popovers and action bars should be the same (Popover update has been merged)

  This issue was originally reported by the React team. Attached reference images from their implementation, one without border and one with border that matches the current popover border in dark.

  Token Diff

  Tokens added (7):

  • action-bar-border-color

@adobe/spectrum-tokens@12.28.0

Minor Changes

• #468 1b5b205 Thanks @larz0! - Added static colors (for premium gradients) to light, dark, darkest, and wireframe themes.

  Design Motivation

  The Firefly team is looking to add these for usage, and the team agreed that it would be better to have these tokens available then for the team to create their own custom tokens.

  Token Diff

  Tokens added (10):

  • 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

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

Minor Changes

• #466 53ac0c8 Thanks @larz0! - Updated popover border colors:

  popover-border-color: transparent-white-25 (light theme)
  popover-border-color: gray-400 (dark theme)

  Design Motivation

  We've received feedback from Adobe Concept (Kelly Hurlburt) that 1px gray-200 border in dark theme doesn't provide sufficient visual contrast when used on background-color-layer-2.

  Token Diff

  Updated (1)

  popover-border-color:

  • schema: alias.json -> color-set.json
  • value: gray-200 ->
    • light.value: transparent-white-25
    • dark.value: gray-400

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

Minor Changes

• #463 1ae8051 Thanks @mrcjhicks! - Added a component-size-maximum-perspective-down token, which defines that components larger than 96px would appear to scale down more.

  Design Motivation

  This token is used in larger components that support a down state that scales, like the select box.

  Token Diff

  Added (1)

  • component-size-maximum-perspective-down

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

Minor Changes

• #461 2f90bff Thanks @mrcjhicks! - Added two new tokens for color wheel border. One for color and one for opacity.

  Token Diff

  Added (2)

  • color-wheel-border-opacity
  • color-wheel-border-color

@adobe/token-diff-generator@1.3.0

Minor Changes

• #443 b371af5 Thanks @mrcjhicks! - Format and output command line options added.

  Options:
    -otv, --old-token-version <oldVersion>  indicates which github tag to pull old tokens from
    -ntv, --new-token-version <newVersion>  indicates which github tag to pull new tokens from
    -otb, --old-token-branch <oldBranch>    indicates which branch to fetch old token data from
    -ntb, --new-token-branch <newBranch>    indicates which branch to fetch updated token data from
    -tn, --token-names <tokens...>          indicates specific tokens to compare
    -l, --local <path>                      indicates to compare to local data
    -r, --repo <name>                       github repository to target
    -gak, --githubAPIKey <key>              github api key to use
    -f, --format <format>                   cli (default) or markdown
    -o, --output <path>                     file path to store diff output
    -d, --debug <path>                      file path to store diff json
    -h, --help                              display help for command
  

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

Minor Changes

• #457 a923472 Thanks @mrcjhicks! - ## Design Motivation

  • Updated desktop and mobile values for checkbox-control-size-[size] and checkbox-top-to-control-[size] tokens
  • Made token changes required for the S2 action bar update

  Tokens Diff

  Tokens Changed (10)

  Added (2)

  • action-bar-minimum-width
  • action-bar-label-to-action-group-area

  Updated (8)

  Updated Properties (8)

  • checkbox-control-size-small
    • desktop.value: 12px -> 14px
    • mobile.value: 16px -> 18px
  • checkbox-control-size-medium
    • desktop.value: 14px -> 16px
    • mobile.value: 18px -> 20px
  • checkbox-control-size-large
    • desktop.value: 16px -> 18px
    • mobile.value: 20px -> 22px
  • checkbox-control-size-extra-large
    • desktop.value: 18px -> 20px
    • mobile.value: 22px -> 26px
  • checkbox-top-to-control-small
    • desktop.value: 6px -> 5px
    • mobile.value: 7px -> 6px
  • checkbox-top-to-control-medium
    • desktop.value: 9px -> 8px
    • mobile.value: 11px -> 10px
  • checkbox-top-to-control-large
    • desktop.value: 12px -> 11px
    • mobile.value: 15px -> 14px
  • checkbox-top-to-control-extra-large
    • desktop.value: 15px -> 14px
    • mobile.value: 19px -> 17px

0.0.0-s2-foundations-20241121221506

S2 Foundations non-gray-800 colors update

Token Diff

Tokens Changed (18)

0.0.0-s2-foundations-20241021172855 -> tokens-sync/patch-foundations-from-main

Token Name	Original Value	New Value
blue-800 (sets.dark.value)	rgb(69, 110, 254)	rgb(64, 105, 253)
red-800 (sets.dark.value)	rgb(230, 54, 35)	rgb(223, 52, 34)
orange-800 (sets.dark.value)	rgb(205, 86, 0)	rgb(199, 82, 0)
yellow-800 (sets.dark.value)	rgb(169, 110, 0)	rgb(164, 106, 0)
chartreuse-800 (sets.dark.value)	rgb(109, 131, 0)	rgb(106, 127, 0)
celery-800 (sets.dark.value)	rgb(69, 138, 19)	rgb(66, 134, 18)
green-800 (sets.dark.value)	rgb(6, 140, 82)	rgb(6, 136, 80)
seafoam-800 (sets.dark.value)	rgb(8, 138, 116)	rgb(8, 134, 112)
cyan-800 (sets.dark.value)	rgb(15, 128, 194)	rgb(13, 125, 186)
indigo-800 (sets.dark.value)	rgb(119, 97, 252)	rgb(116, 91, 252)
purple-800 (sets.dark.value)	rgb(161, 84, 229)	rgb(157, 78, 228)
fuchsia-800 (sets.dark.value)	rgb(192, 64, 212)	rgb(186, 60, 206)
magenta-800 (sets.dark.value)	rgb(231, 41, 105)	rgb(224, 38, 101)
pink-800 (sets.dark.value)	rgb(220, 47, 156)	rgb(213, 45, 151)
turquoise-800 (sets.dark.value)	rgb(9, 135, 147)	rgb(9, 131, 142)
brown-800 (sets.dark.value)	rgb(148, 118, 73)	rgb(143, 114, 69)
silver-800 (sets.dark.value)	rgb(123, 123, 123)	rgb(118, 118, 118)
cinnamon-800 (sets.dark.value)	rgb(179, 103, 64)	rgb(176, 98, 59)

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

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/spectrum-tokens@13.0.0-beta.52

Patch Changes

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

  Token Diff

  Updated Token (1):

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