Skip to content

Releases: adobe/spectrum-tokens

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

24 Oct 16:47
@GarthDB GarthDB
@adobe/spectrum-tokens@13.0.0-beta.51
025b6b2
Compare
Choose a tag to compare
@adobe/spectrum-tokens@13.0.0-beta.51 Pre-release
Pre-release

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%
Loading

@adobe/spectrum-tokens@0.0.0-s2-foundations-20241021172855

21 Oct 17:44
@GarthDB GarthDB
@adobe/spectrum-tokens@0.0.0-s2-foundations-20241021172855
7b5c104
Compare
Choose a tag to compare
@adobe/spectrum-tokens@0.0.0-s2-foundations-20241021172855 Pre-release
Pre-release

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
Loading

@adobe/token-diff-generator@1.2.0

10 Oct 03:07
@GarthDB GarthDB
@adobe/token-diff-generator@1.2.0
39272cb
Compare
Choose a tag to compare
@adobe/token-diff-generator@1.2.0

Minor Changes

Loading

@adobe/token-diff-generator@1.1.2

09 Oct 23:40
@GarthDB GarthDB
@adobe/token-diff-generator@1.1.2
2cb956f
Compare
Choose a tag to compare
@adobe/token-diff-generator@1.1.2

Patch Changes

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

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

08 Oct 19:00
@GarthDB GarthDB
@adobe/spectrum-tokens@13.0.0-beta.50
c1c48e1
Compare
Choose a tag to compare
@adobe/spectrum-tokens@13.0.0-beta.50 Pre-release
Pre-release

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
Loading

@adobe/token-diff-generator@1.1.1

07 Oct 19:38
@GarthDB GarthDB
@adobe/token-diff-generator@1.1.1
1f153f0
Compare
Choose a tag to compare
@adobe/token-diff-generator@1.1.1

Patch Changes

Loading

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

04 Oct 18:31
@GarthDB GarthDB
@adobe/spectrum-tokens@13.0.0-beta.49
9d055db
Compare
Choose a tag to compare
@adobe/spectrum-tokens@13.0.0-beta.49 Pre-release
Pre-release

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
Loading

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

03 Oct 22:53
@GarthDB GarthDB
@adobe/spectrum-tokens@13.0.0-beta.48
3a26b17
Compare
Choose a tag to compare
@adobe/spectrum-tokens@13.0.0-beta.48 Pre-release
Pre-release

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
Loading

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

03 Oct 21:53
@GarthDB GarthDB
@adobe/spectrum-tokens@13.0.0-beta.47
7406098
Compare
Choose a tag to compare
@adobe/spectrum-tokens@13.0.0-beta.47 Pre-release
Pre-release

Minor Changes

  • 75a573b Thanks @GarthDB! - S2 subtle and visual colors update
    Updated S2 Table tokens

    Tokens added (42):
    • illustrated-message-maximum-width
    • side-focus-indicator
    • table-row-bottom-to-text-extra-large
    • table-row-bottom-to-text-extra-large-regular
    • table-row-bottom-to-text-large
    • table-row-bottom-to-text-large-regular
    • table-row-bottom-to-text-medium
    • table-row-bottom-to-text-medium-regular
    • table-row-bottom-to-text-small
    • table-row-bottom-to-text-small-regular
    • table-row-checkbox-to-top-extra-large
    • table-row-checkbox-to-top-extra-large-regular
    • table-row-checkbox-to-top-large
    • table-row-checkbox-to-top-large-regular
    • table-row-checkbox-to-top-medium
    • table-row-checkbox-to-top-medium-regular
    • table-row-checkbox-to-top-small
    • table-row-checkbox-to-top-small-regular
    • table-row-height-extra-large
    • table-row-height-extra-large-regular
    • table-row-height-large
    • table-row-height-large-regular
    • table-row-height-medium
    • table-row-height-medium-regular
    • table-row-height-small
    • table-row-height-small-regular
    • table-row-top-to-text-extra-large
    • table-row-top-to-text-extra-large-regular
    • table-row-top-to-text-large
    • table-row-top-to-text-large-regular
    • table-row-top-to-text-medium
    • table-row-top-to-text-medium-regular
    • table-row-top-to-text-small
    • table-row-top-to-text-small-regular
    • table-thumbnail-to-top-minimum-extra-large
    • table-thumbnail-to-top-minimum-extra-large-regular
    • table-thumbnail-to-top-minimum-large
    • table-thumbnail-to-top-minimum-large-regular
    • table-thumbnail-to-top-minimum-medium
    • table-thumbnail-to-top-minimum-medium-regular
    • table-thumbnail-to-top-minimum-small
    • table-thumbnail-to-top-minimum-small-regular
    Tokens updated (101):
    • informative-subtle-background-color-default
      • light: blue-200 -> informative-color-200
      • dark: blue-200 -> informative-color-300
    • positive-subtle-background-color-default
      • light: green-200 -> positive-color-200
      • dark: green-200 -> positive-color-300
    • notice-subtle-background-color-default
      • light: orange-200 -> notice-color-200
      • dark: orange-200 -> notice-color-300
    • negative-subtle-background-color-default
      • light: red-200 -> negative-color-200
      • dark: red-200 -> negative-color-300
    • table-column-header-row-top-to-text-medium
      • desktop: 7px -> 6px
    • table-row-height-small-regular
      • desktop: 32px -> table-row-height-small
      • mobile: 40px -> table-row-height-small
    • table-row-height-medium-regular
      • desktop: 40px -> table-row-height-medium
      • mobile: 50px -> table-row-height-medium
    • table-row-height-large-regular
      • desktop: 48px -> table-row-height-large
      • mobile: 60px -> table-row-height-large
    • table-row-height-extra-large-regular
      • desktop: 56px -> table-row-height-extra-large
      • mobile: 70px -> table-row-height-extra-large
    • table-row-top-to-text-small-regular
      • desktop: 8px -> table-row-top-to-text-small
      • mobile: 10px -> table-row-top-to-text-small
    • table-row-top-to-text-medium-regular
      • desktop: 11px -> table-row-top-to-text-medium
      • mobile: 14px -> table-row-top-to-text-medium
    • table-row-top-to-text-large-regular
      • desktop: 14px -> table-row-top-to-text-large
      • mobile: 18px -> table-row-top-to-text-large
    • table-row-top-to-text-extra-large-regular
      • desktop: 17px -> table-row-top-to-text-extra-large
      • mobile: 21px -> table-row-top-to-text-extra-large
    • table-row-bottom-to-text-small-regular
      • desktop: 9px -> table-row-bottom-to-text-small
      • mobile: 11px -> table-row-bottom-to-text-small
    • table-row-bottom-to-text-medium-regular
      • desktop: 12px -> table-row-bottom-to-text-medium
      • mobile: 15px -> table-row-bottom-to-text-medium
    • table-row-bottom-to-text-large-regular
      • desktop: 14px -> table-row-bottom-to-text-large
      • mobile: 18px -> table-row-bottom-to-text-large
    • table-row-bottom-to-text-extra-large-regular
      • desktop: 17px -> table-row-bottom-to-text-extra-large
      • mobile: 22px -> table-row-bottom-to-text-extra-large
    • table-row-top-to-text-medium-spacious
      • mobile: 18px -> 16px
    • table-header-row-checkbox-to-top-medium
      • desktop: 9px -> 8px
      • mobile: 13px -> 11px
    • table-row-checkbox-to-top-small-regular
      • desktop: 10px -> table-row-checkbox-to-top-small
      • mobile: 14px -> table-row-checkbox-to-top-small
    • table-row-checkbox-to-top-medium-compact
      • desktop: 9px -> 8px
      • mobile: 13px -> 11px
    • table-row-checkbox-to-top-medium-regular
      • desktop: 13px -> table-row-checkbox-to-top-medium
      • mobile: 18px -> table-row-checkbox-to-top-medium
    • table-row-checkbox-to-top-medium-spacious
      • desktop: 17px -> 16px
      • mobile: 23px -> 21px
    • table-row-checkbox-to-top-large-regular
      • desktop: 16px -> table-row-checkbox-to-top-large
      • mobile: 22px -> table-row-checkbox-to-top-large
    • table-row-checkbox-to-top-extra-large-regular
      • desktop: 19px -> table-row-checkbox-to-top-extra-large
      • mobile: 26px -> table-row-checkbox-to-top-extra-large
    • table-thumbnail-to-top-minimum-small-regular
      • desktop: 5px -> table-thumbnail-to-top-minimum-small
      • mobile: 6px -> table-thumbnail-to-top-minimum-small
    • table-thumbnail-to-top-minimum-medium-regular
      • desktop: 7px -> table-thumbnail-to-top-minimum-medium
      • mobile: 9px -> table-thumbnail-to-top-minimum-medium
    • table-thumbnail-to-top-minimum-large-regular
      • desktop: 8px -> table-thumbnail-to-top-minimum-large
      • mobile: 10px -> table-thumbnail-to-top-minimum-large
    • table-thumbnail-to-top-minimum-extra-large-regular
      • desktop: 8px -> table-thumbnail-to-top-minimum-extra-large
      • mobile: 10px -> table-thumbnail-to-top-minimum-extra-large
    • blue-800
      • dark: rgb(69, 110, 254) -> rgb(64, 105, 253)
    • red-800
      • dark: rgb(230, 54, 35) -> rgb(223, 52, 34)
    • orange-800
      • dark: rgb(205, 86, 0) -> rgb(199, 82, 0)
    • yellow-800
      • dark: rgb(169, 110, 0) -> rgb(164, 106, 0)
    • chartreuse-800
      • dark: rgb(109, 131, 0) -> rgb(106, 127, 0)
    • celery-800
      • dark: rgb(69, 138, 19) -> rgb(66, 134, 18)
    • green-800
      • dark: rgb(6, 140, 82) -> rgb(6, 136, 80)
    • seafoam-800
      • dark: rgb(8, 138, 116) -> rgb(8, 134, 112)
    • cyan-800
      • dark: rgb(15, 128, 194) -> rgb(13, 125, 186)
    • indigo-800
      • dark: rgb(119, 97, 252) -> rgb(116, 91, 252)
    • purple-800
      • dark: rgb(161, 84, 229) -> rgb(157, 78, 228)
    • fuchsia-800
      • dark: rgb(192, 64, 212) -> rgb(186, 60, 206)
    • magenta-800
      • dark: rgb(231, 41, 105) -> rgb(224, 38, 101)
    • pink-800
      • dark: rgb(220, 47, 156) -> rgb(213, 45, 151)
    • turquoise-800
      • dark: rgb(9, 135, 147) -> rgb(9, 131, 142)
    • brown-800
      • dark: rgb(148, 118, 73) -> rgb(143, 114, 69)
    • silver-800
      • dark: rgb(123, 123, 123) -> rgb(118, 118, 118)
    • cinnamon-800
      • dark: rgb(179, 103, 64) -> rgb(176, 98, 59)
    • accent-background-color-default
      • dark: accent-color-700 -> accent-color-800
    • accent-background-color-hover
      • dark: accent-color-600 -> accent-color-700
    • accent-background-color-down
      • dark: accent-color-600 -> accent-color-700
    • accent-background-color-key-focus
      • dark: accent-color-600 -> accent-color-700
    • informative-background-color-default
      • dark: informative-color-700 -> informative-color-800
    • informative-background-color-hover
      • dark: informative-color-600 -> informative-color-700
    • informative-background-color-down
      • dark: informative-color-600 -> informative-color-700
    • informative-background-color-key-focus
      • dark: informative-color-600 -> informative-color-700
    • negative-background-color-default
      • dark: negative-color-700 -> negative-color-800
    • negative-background-color-hover
      • dark: negative-color-600 -> negative-color-700
    • negative-background-color-down
      • dark: negative-color-600 -> negative-color-700
    • negative-background-color-key-focus
      • dark: negative-color-600 -> negative-color-700
    • positive-background-color-default
      • dark: positive-color-700 -> positive-color-800
    • positive-background-color-hover
      • dark: positive-color-600 -> positive-color-700
    • `...
Read more
Loading

@adobe/spectrum-tokens@12.27.0

04 Sep 05:28
@GarthDB GarthDB
@adobe/spectrum-tokens@12.27.0
41b962e
Compare
Choose a tag to compare
@adobe/spectrum-tokens@12.27.0

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
Loading