Releases: adobe/spectrum-tokens
S2 Foundations: Colors
Major Changes
- S2 foundation color changes
Token Diff
Tokens Added (242):
accent-color-100
accent-color-1000
accent-color-1100
accent-color-1200
accent-color-1300
accent-color-1400
accent-color-1500
accent-color-1600
accent-color-200
accent-color-300
accent-color-400
accent-color-500
accent-color-600
accent-color-700
accent-color-800
accent-color-900
accent-content-color-default
accent-content-color-hover
accent-content-color-key-focus
accent-content-color-selected
background-elevated-color
background-pasteboard-color
blue-1500
blue-1600
border-width-100
brown-100
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-background-color-default
brown-visual-color
celery-1500
celery-1600
chartreuse-1500
chartreuse-1600
checkbox-control-size-extra-large
checkbox-control-size-large
checkbox-control-size-medium
checkbox-control-size-small
checkbox-top-to-control-extra-large
checkbox-top-to-control-large
checkbox-top-to-control-medium
checkbox-top-to-control-small
cinnamon-100
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-background-color-default
cinnamon-visual-color
color-area-border-rounding
color-area-border-width
corner-radius-100
corner-radius-200
corner-radius-75
cyan-1500
cyan-1600
drop-shadow-blur
drop-shadow-color-100
drop-shadow-color-200
drop-shadow-elevated-color
drop-shadow-emphasized-default-color
drop-shadow-emphasized-hover-color
drop-shadow-x
drop-shadow-y
fuchsia-1500
fuchsia-1600
gray-1000
gray-25
green-1500
green-1600
heading-cjk-font-weight
heading-sans-serif-emphasized-font-weight
heading-sans-serif-font-weight
heading-serif-emphasized-font-weight
heading-serif-font-weight
in-field-button-edge-to-fill
in-field-button-fill-stacked-inner-border-rounding
in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
in-field-button-inner-edge-to-disclosure-icon-stacked-large
in-field-button-inner-edge-to-disclosure-icon-stacked-medium
in-field-button-inner-edge-to-disclosure-icon-stacked-small
in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
in-field-button-outer-edge-to-disclosure-icon-stacked-large
in-field-button-outer-edge-to-disclosure-icon-stacked-medium
in-field-button-stacked-inner-edge-to-fill
indigo-1500
indigo-1600
informative-color-1500
informative-color-1600
magenta-1500
magenta-1600
negative-color-1500
negative-color-1600
negative-subdued-background-color-default
negative-subdued-background-color-down
negative-subdued-background-color-hover
negative-subdued-background-color-key-focus
neutral-background-color-selected-default
neutral-background-color-selected-down
neutral-background-color-selected-hover
neutral-background-color-selected-key-focus
notice-color-1500
notice-color-1600
orange-1500
orange-1600
picker-border-width
pink-100
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-background-color-default
pink-visual-color
positive-color-1500
positive-color-1600
purple-1500
purple-1600
radio-button-control-size-extra-large
radio-button-control-size-large
radio-button-control-size-medium
radio-button-control-size-small
radio-button-top-to-control-extra-large
radio-button-top-to-control-large
radio-button-top-to-control-medium
radio-button-top-to-control-small
red-1500
red-1600
seafoam-1500
seafoam-1600
silver-100
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-background-color-default
silver-visual-color
slider-bottom-to-handle-extra-large
slider-bottom-to-handle-large
slider-bottom-to-handle-medium
slider-bottom-to-handle-small
slider-control-height-extra-large
slider-control-height-large
slider-control-height-medium
slider-control-height-small
slider-handle-border-width-down-extra-large
slider-handle-border-width-down-large
slider-handle-border-width-down-medium
slider-handle-border-width-down-small
slider-handle-gap
slider-handle-size-extra-large
slider-handle-size-large
slider-handle-size-medium
slider-handle-size-small
slider-track-thickness
switch-control-height-extra-large
switch-control-height-large
switch-control-height-medium
switch-control-height-small
switch-control-width-extra-large
switch-control-width-large
switch-control-width-medium
switch-control-width-small
switch-top-to-control-extra-large
switch-top-to-control-large
switch-top-to-control-medium
switch-top-to-control-small
table-selected-row-background-color-non-emphasized
title-color
transparent-black-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-white-1000
transparent-white-25
transparent-white-50
transparent-white-75
turquoise-100
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-background-color-default
turquoise-visual-color
yellow-1500
yellow-1600
Tokens Updated (388):
accent-background-color-default
accent-background-color-down
accent-background-color-hover
accent-background-color-key-focus
accent-content-color-down
accent-visual-color
background-base-color
background-layer-1-color
background-layer-2-color
blue-100
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-background-color-default
blue-visual-color
body-color
card-selection-background-color
celery-100
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-background-color-default
celery-visual-color
chartreuse-100
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-background-color-default
chartreuse-visual-color
coach-mark-pagination-color
code-color
color-area-border-color
color-handle-drop-shadow-color
color-loupe-drop-shadow-color
color-loupe-inner-border
color-slider-border-color
cyan-100
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-background-color-default
cyan-visual-color
detail-color
disabled-background-color
disabled-border-color
disabled-content-color
disabled-static-black-background-color
disabled-static-black-border-color
disabled-static-black-content-color
disabled-static-white-background-color
disabled-static-white-border-color
disabled-static-white-content-color
drop-shadow-color
drop-zone-background-color
floating-action-button-drop-shadow-color
floating-action-button-shadow-color
focus-indicator-color
fuchsia-100
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-background-color-default
fuchsia-visual-color
gray-100
gray-200
gray-300
gray-400
gray-50
gray-500
gray-600
-...
@adobe/[email protected]
Minor Changes
-
#334
4d28593
Thanks @nabuhasan! - S2 Popover tokens updateToken Diff
Tokens added (3):
popover-border-color
popover-border-opacity
popover-edge-to-content-area
Newly deprecated token (1):
popover-top-to-content-area
@adobe/[email protected]
Minor Changes
-
#331
0bbfedb
Thanks @nabuhasan! - S2 Menu token updatesToken Diff
Tokens added (23):
link-out-icon-size-100
link-out-icon-size-200
link-out-icon-size-75
menu-item-background-color-default
menu-item-background-color-disabled
menu-item-background-color-down
menu-item-background-color-hover
menu-item-background-color-keyboard-focus
menu-item-background-opacity
menu-item-label-to-description
menu-item-label-to-description-extra-large
menu-item-label-to-description-large
menu-item-label-to-description-medium
menu-item-label-to-description-small
menu-item-top-to-thumbnail-extra-large
menu-item-top-to-thumbnail-large
menu-item-top-to-thumbnail-medium
menu-item-top-to-thumbnail-small
menu-section-header-to-description-extra-large
menu-section-header-to-description-large
menu-section-header-to-description-medium
menu-section-header-to-description-small
text-to-visual-400
Token values updated (1):
menu-item-section-divider-height
@adobe/[email protected]
Minor Changes
-
#325
095248e
Thanks @mrcjhicks! - Added semantic aliases used by in-line alert.Token Diff
Tokens added (5):
informative-subtle-background-color-default
negative-subtle-background-color-default
neutral-subtle-background-color-default
notice-subtle-background-color-default
positive-subtle-background-color-default
@adobe/[email protected]
@adobe/[email protected]
S2 Foundations Snapshot Release (0.0.0-s2-foundations-20240422210545)
A snapshot release of the S2 global foundation changes.
Token Diff
Tokens added (264):
accent-color-100
accent-color-1000
accent-color-1100
accent-color-1200
accent-color-1300
accent-color-1400
accent-color-1500
accent-color-1600
accent-color-200
accent-color-300
accent-color-400
accent-color-500
accent-color-600
accent-color-700
accent-color-800
accent-color-900
accent-content-color-default
accent-content-color-hover
accent-content-color-key-focus
accent-content-color-selected
accordion-disclosure-indicator-to-text
accordion-edge-to-disclosure-indicator
accordion-edge-to-text
accordion-focus-indicator-gap
accordion-top-to-text-compact-medium
accordion-top-to-text-compact-small
action-button-edge-to-hold-icon-extra-small
action-button-edge-to-hold-icon-small
asterisk-icon-size-75
background-elevated-color
background-pasteboard-color
blue-1500
blue-1600
border-width-100
brown-100
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
celery-1500
celery-1600
chartreuse-1500
chartreuse-1600
checkbox-control-size-extra-large
checkbox-control-size-large
checkbox-control-size-medium
checkbox-control-size-small
checkbox-top-to-control-extra-large
checkbox-top-to-control-large
checkbox-top-to-control-medium
checkbox-top-to-control-small
cinnamon-100
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
color-area-border-rounding
color-area-border-width
component-size-difference-down
component-size-minimum-perspective-down
component-size-width-ratio-down
corner-radius-0
corner-radius-100
corner-radius-1000
corner-radius-200
corner-radius-300
corner-radius-400
corner-radius-500
corner-radius-600
corner-radius-700
corner-radius-75
corner-radius-800
corner-radius-extra-large-default
corner-radius-full
corner-radius-large-default
corner-radius-medium-default
corner-radius-medium-size-extra-large
corner-radius-medium-size-extra-small
corner-radius-medium-size-large
corner-radius-medium-size-medium
corner-radius-medium-size-small
corner-radius-none
corner-radius-small-default
corner-radius-small-size-extra-large
corner-radius-small-size-large
corner-radius-small-size-medium
corner-radius-small-size-small
cyan-1500
cyan-1600
drop-shadow-blur
drop-shadow-x
drop-shadow-y
field-label-top-margin-small
fuchsia-1500
fuchsia-1600
gray-1000
gray-25
green-1500
green-1600
heading-cjk-font-weight
heading-sans-serif-emphasized-font-weight
heading-sans-serif-font-weight
heading-serif-emphasized-font-weight
heading-serif-font-weight
help-text-top-to-workflow-icon-extra-large
help-text-top-to-workflow-icon-large
help-text-top-to-workflow-icon-medium
help-text-top-to-workflow-icon-small
in-field-button-edge-to-fill
in-field-button-fill-stacked-inner-border-rounding
in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large
in-field-button-inner-edge-to-disclosure-icon-stacked-large
in-field-button-inner-edge-to-disclosure-icon-stacked-medium
in-field-button-inner-edge-to-disclosure-icon-stacked-small
in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
in-field-button-outer-edge-to-disclosure-icon-stacked-large
in-field-button-outer-edge-to-disclosure-icon-stacked-medium
in-field-button-stacked-inner-edge-to-fill
indigo-1500
indigo-1600
informative-color-1500
informative-color-1600
magenta-1500
magenta-1600
negative-color-1500
negative-color-1600
neutral-background-color-selected-default
neutral-background-color-selected-down
neutral-background-color-selected-hover
neutral-background-color-selected-key-focus
notice-color-1500
notice-color-1600
orange-1500
orange-1600
picker-border-width
pink-100
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
positive-color-1500
positive-color-1600
purple-1500
purple-1600
radio-button-control-size-extra-large
radio-button-control-size-large
radio-button-control-size-medium
radio-button-control-size-small
radio-button-top-to-control-extra-large
radio-button-top-to-control-large
radio-button-top-to-control-medium
radio-button-top-to-control-small
red-1500
red-1600
seafoam-1500
seafoam-1600
silver-100
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
slider-bottom-to-handle-extra-large
slider-bottom-to-handle-large
slider-bottom-to-handle-medium
slider-bottom-to-handle-small
slider-control-height-extra-large
slider-control-height-large
slider-control-height-medium
slider-control-height-small
slider-handle-border-width-down-extra-large
slider-handle-border-width-down-large
slider-handle-border-width-down-medium
slider-handle-border-width-down-small
slider-handle-gap
slider-handle-size-extra-large
slider-handle-size-large
slider-handle-size-medium
slider-handle-size-small
slider-track-thickness
status-light-dot-size-small
switch-control-height-extra-large
switch-control-height-large
switch-control-height-medium
switch-control-height-small
switch-control-width-extra-large
switch-control-width-large
switch-control-width-medium
switch-control-width-small
switch-top-to-control-extra-large
switch-top-to-control-large
switch-top-to-control-medium
switch-top-to-control-small
table-edge-to-content
table-selected-row-background-color-non-emphasized
transparent-black-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-white-1000
transparent-white-25
transparent-white-50
transparent-white-75
turquoise-100
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
yellow-1500
yellow-1600
Token values updated (408):
accent-background-color-default
accent-background-color-down
accent-background-color-hover
accent-background-color-key-focus
accent-content-color-down
accent-visual-color
background-base-color
background-layer-1-color
background-layer-2-color
blue-100
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-background-color-default
blue-visual-color
body-color
card-selection-background-color
celery-100
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-background-color-default
celery-visual-color
chartreuse-100
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-background-color-default
chartreuse-visual-color
coach-mark-pagination-color
code-color
color-area-border-color
color-handle-drop-shadow-color
color-loupe-drop-shadow-color
color-loupe-inner-border
color-slider-border-color
component-edge-to-visual-only-100
component-edge-to-visual-only-200
component-edge-to-visual-only-300
component-edge-to-visual-only-50
component-edge-to-visual-only-75
component-top-to-workflow-icon-100
component-top-to-workflow-icon-200
component-top-to-workflow-icon-300
component-top-to-workflow-icon-50
component-top-to-workflow-icon-75
cyan-100
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-background-color-default
cyan-visual-color
detail-color
disabled-background-color
disabled-border-color
disabled-content-color
disabled-static-black-background-color
disabled-static-black-border-color
disabled-static-black-content-color
disabled-static-white-background-color
disabled-static-white-border-color
disabled-static-white-content-color
drop-shadow-color
drop-zone-background-color
floating-action-button-drop-shadow-color
- `floating-action-bu...
@adobe/[email protected]
Minor Changes
-
#321
e392c49
Thanks @mrcjhicks! - Added new Standard dialog, status light, and updated alert-banner-top-to-workflow-icon tokensToken Diff
Tokens added (10):
standard-dialog-body-font-size
standard-dialog-maximum-width-large
standard-dialog-maximum-width-medium
standard-dialog-maximum-width-small
standard-dialog-minimum-width
standard-dialog-title-font-size
status-light-text-to-visual-100
status-light-text-to-visual-200
status-light-text-to-visual-300
status-light-text-to-visual-75
Token values updated (10):
alert-banner-to-top-workflow-icon
alert-banner-top-to-workflow-icon
status-light-dot-size-extra-large
status-light-dot-size-large
status-light-dot-size-medium
status-light-top-to-dot-extra-large
status-light-top-to-dot-large
status-light-top-to-dot-medium
status-light-top-to-dot-small
status-light-dot-size-small
@adobe/[email protected]
Minor Changes
-
#319
5f962fc
Thanks @mrcjhicks! - Updated values for component pill edge to visual only tokens for both desktop and mobile.These values are updated based on the new workflow icon size.
Token Diff
Token values updated (4):
component-pill-edge-to-visual-only-100
component-pill-edge-to-visual-only-200
component-pill-edge-to-visual-only-300
component-pill-edge-to-visual-only-75
-
#316
664ab0b
Thanks @mrcjhicks! - S2 Color loupe tokens update (color-only)Token Diff
Newly deprecated tokens (2):
color-loupe-drop-shadow-color
drop-shadow-color
@adobe/[email protected]
Patch Changes
- 1150331: Removed duplicate tokens from src files.