@adobe/[email protected]

Minor Changes

• #482 5602504 Thanks @larz0 and @PaliwalSparsh! - Added tokens for S2 cards

  Design Motivation

  These tokens are required for the implementation of card components

  Token Diff

  Tokens Changed (64)

  main | tokens-sync/patch-spectrum2-from-main

  ---

  Added (61)

  • card-edge-to-content-compact-extra-small
  • card-edge-to-content-default-extra-small
  • card-edge-to-content-spacious-extra-small
  • card-edge-to-content-compact-small
  • card-edge-to-content-default-small
  • card-edge-to-content-spacious-small
  • card-edge-to-content-compact-medium
  • card-edge-to-content-default-medium
  • card-edge-to-content-spacious-medium
  • card-edge-to-content-compact-large
  • card-edge-to-content-default-large
  • card-edge-to-content-spacious-large
  • card-edge-to-content-compact-extra-large
  • card-edge-to-content-default-extra-large
  • card-edge-to-content-spacious-extra-large
  • card-header-to-description
  • card-description-to-footer
  • card-selection-background-size-small
  • card-selection-background-size-medium
  • card-selection-background-size-large
  • card-selection-background-size-extra-large
  • card-minimum-width-extra-small
  • card-minimum-width-small
  • card-minimum-width-medium
  • card-minimum-width-large
  • card-minimum-width-extra-large
  • card-default-width-extra-small
  • card-default-width-small
  • card-default-width-medium
  • card-default-width-large
  • card-default-width-extra-large
  • card-maximum-width-extra-small
  • card-maximum-width-small
  • card-maximum-width-medium
  • card-maximum-width-large
  • card-maximum-width-extra-large
  • card-minimum-height-extra-small
  • card-minimum-height-small
  • card-minimum-height-medium
  • card-minimum-height-large
  • card-minimum-height-extra-large
  • collection-card-minimum-height-extra-small
  • collection-card-minimum-height-small
  • collection-card-minimum-height-medium
  • collection-card-minimum-height-large
  • collection-card-minimum-height-extra-large
  • collection-card-minimum-height-hero-extra-small
  • collection-card-minimum-height-hero-small
  • collection-card-minimum-height-hero-medium
  • collection-card-minimum-height-hero-large
  • collection-card-minimum-height-hero-extra-large
  • user-card-minimum-height-small
  • user-card-minimum-height-medium
  • user-card-minimum-height-large
  • user-card-minimum-height-extra-large
  • user-card-minimum-height-title-below-small
  • user-card-minimum-height-title-below-medium
  • user-card-minimum-height-title-below-large
  • user-card-minimum-height-title-below-extra-large
  • card-background-well-color
  • card-background-loading-color

  Updated (3)

  Added Properties (1)

  • card-selection-background-color
    • light.schema: alias.json
    • light.value: transparent-white-600
    • light.uuid: 622c6e86-dea6-416d-9f13-bb6ef112d3cb
    • dark.schema: alias.json
    • dark.value: transparent-black-600
    • dark.uuid: 81c0608b-c977-490e-b8d7-830d0676fdad
  Deleted Properties (1)

  • card-selection-background-color
    • value: gray-100
    • uuid: 622c6e86-dea6-416d-9f13-bb6ef112d3cb
  Updated Properties (1)

  • card-selection-background-color
    • schema: alias.json -> color-set.json

Composite token proof of concept (s2 drop shadow)

New composite token type for drop shadow

Token Diff

Tokens Changed (3)
main | snapshot-s2-composite-drop-shadow

---

Added (3)

• drop-shadow-emphasized-default-ambient
• drop-shadow-emphasized-default-transition
• drop-shadow-emphasized-default-transition-key

Example composite token JSON

  "drop-shadow-emphasized-default-transition-key": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
    "sets": {
      "light": {
        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/drop-shadow.json",
        "value": {
          "x": "0px",
          "y": "0px",
          "blur": "1px",
          "spread": "0px",
          "color": "rgba(0,0,0,0.08)"
        },
        "uuid": "3b089e74-5396-4f13-a6bf-d9eda8e3040c"
      },
      "dark": {
        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/drop-shadow.json",
        "value": {
          "x": "0px",
          "y": "0px",
          "blur": "1px",
          "spread": "0px",
          "color": "rgba(0,0,0,0.2)"
        },
        "uuid": "dd8f9556-49d3-4318-ae25-78bc1bc6c99a"
      }
    }
  }

Spectrum 2

Major Changes

GA of Spectrum 2 data. Discussions of the merge plan can be found at the following links:

- [S2 GA release plan and S1 future support plan](https://github.com/adobe/spectrum-tokens/discussions/473)
- [Spectrum, S2, S2-foundations updated merge plan](https://github.com/adobe/spectrum-tokens/discussions/465)
- [Spectrum Tokens 12.x.x to Spectrum 2 migration proposal](https://github.com/adobe/spectrum-tokens/discussions/338)

Design Motivation

See https://s2.spectrum.adobe.com/ for more information.

Spectrum 2 is what’s next. It’s more than just a design refresh: it’s a set of adaptable resources for making experiences feel contextual, cohesive, and performant. It’s based on real-world situations. It places people’s needs first. It delivers what’s needed, when it’s needed. It’s constantly adapting. And most importantly: it belongs to everyone.

Token Diff

The full token diff can be found at diff

@adobe/[email protected]

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/[email protected]

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/[email protected]

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/[email protected]

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/[email protected]

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/[email protected]

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/[email protected]

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