UNPKG

@adobe/spectrum-tokens

Version:
1,260 lines (1,026 loc) 135 kB
# @adobe/spectrum-tokens ## 13.0.0-beta.56 ### Minor Changes - [#463](https://github.com/adobe/spectrum-tokens/pull/463) [`1ae8051`](https://github.com/adobe/spectrum-tokens/commit/1ae80516c48b70b87a8cd81cde75af8755188d45) Thanks [@mrcjhicks](https://github.com/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 <details open><summary>Added (1)</summary> - `component-size-maximum-perspective-down` </details> ## 13.0.0-beta.55 ### Minor Changes - [#461](https://github.com/adobe/spectrum-tokens/pull/461) [`2f90bff`](https://github.com/adobe/spectrum-tokens/commit/2f90bffe5c0dc0a4cc6811eb104e0984d8714d53) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added two new tokens for color wheel border. One for color and one for opacity. ## Token Diff <details open><summary>Added (2)</summary> - `color-wheel-border-opacity` - `color-wheel-border-color` </details> ## 13.0.0-beta.54 ### Minor Changes - [#457](https://github.com/adobe/spectrum-tokens/pull/457) [`a923472`](https://github.com/adobe/spectrum-tokens/commit/a923472e8daf52e710471467131baf3b5ae4d8da) Thanks [@mrcjhicks](https://github.com/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)** <details open><summary>Added (2)</summary> - `action-bar-minimum-width` - `action-bar-label-to-action-group-area` </details> Updated (8) <details open><summary>Updated Properties (8)</summary> - `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` </details> ## 13.0.0-beta.53 ### Minor Changes - [#446](https://github.com/adobe/spectrum-tokens/pull/446) [`dbc5398`](https://github.com/adobe/spectrum-tokens/commit/dbc53986b64200e1e9a727f15a7ed5d83926eb6b) Thanks [@PaliwalSparsh](https://github.com/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` ## 13.0.0-beta.52 ### Patch Changes - [#444](https://github.com/adobe/spectrum-tokens/pull/444) [`51904cd`](https://github.com/adobe/spectrum-tokens/commit/51904cdabfcb165a560c58664c8bc75be601f28b) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - fixing a typo with takeover-dialog-height ## Token Diff **Updated Token (1):** - `takeover-dialog-height`: `1.00%` -> `100%` ## 13.0.0-beta.51 ### Patch Changes - [#441](https://github.com/adobe/spectrum-tokens/pull/441) [`89949e4`](https://github.com/adobe/spectrum-tokens/commit/89949e4d0008baacec05359a83620fa45e35cf5e) Thanks [@GarthDB](https://github.com/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` -> `100%` ## 13.0.0-beta.50 ### Minor Changes - [#425](https://github.com/adobe/spectrum-tokens/pull/425) [`91f4536`](https://github.com/adobe/spectrum-tokens/commit/91f4536a416cf6c9e5b0b423bf3ead3233e808fc) Thanks [@mrcjhicks](https://github.com/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` ## 13.0.0-beta.49 ### Minor Changes - [#418](https://github.com/adobe/spectrum-tokens/pull/418) [`45ed87b`](https://github.com/adobe/spectrum-tokens/commit/45ed87b43af53370f74fc46c545b4c13005f381c) Thanks [@mrcjhicks](https://github.com/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](https://github.com/adobe/spectrum-tokens/pull/422) [`4673d13`](https://github.com/adobe/spectrum-tokens/commit/4673d1383602d81484ae346dd278a28a26f5d91b) Thanks [@GarthDB](https://github.com/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` ## 13.0.0-beta.48 ### Minor Changes - [#415](https://github.com/adobe/spectrum-tokens/pull/415) [`caca973`](https://github.com/adobe/spectrum-tokens/commit/caca973300d34fc688fb828633b1da2ba8284990) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - 1. New typography tokens: - Letter spacing, text-align, cjk 1. New gradient stop tokens 1. New component tokens for bar panel, rating, segmented control, slider, select box 1. New static color tokens _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` ## 13.0.0-beta.47 ### Minor Changes - [`75a573b`](https://github.com/adobe/spectrum-tokens/commit/75a573bcbb7b71ecdf5f246682755de24dae5afc) Thanks [@GarthDB](https://github.com/GarthDB)! - S2 subtle and visual colors update Updated S2 Table tokens <details><summary>Tokens added (42):</summary> - `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` </details> <details><summary>Tokens updated (101):</summary> - `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` - `positive-background-color-down` - dark: `positive-color-600` -> `positive-color-700` - `positive-background-color-key-focus` - dark: `positive-color-600` -> `positive-color-700` - `red-background-color-default` - dark: `red-700` -> `red-800` - `green-background-color-default` - dark: `green-700` -> `green-800` - `seafoam-background-color-default` - dark: `seafoam-700` -> `seafoam-800` - `cyan-background-color-default` - dark: `cyan-700` -> `cyan-800` - `blue-background-color-default` - dark: `blue-700` -> `blue-800` - `indigo-background-color-default` - dark: `indigo-700` -> `indigo-800` - `purple-background-color-default` - dark: `purple-700` -> `purple-800` - `fuchsia-background-color-default` - dark: `fuchsia-700` -> `fuchsia-800` - `magenta-background-color-default` - dark: `magenta-700` -> `magenta-800` - `negative-visual-color` - dark: `negative-color-700` -> `negative-color-900` - `notice-visual-color` - light: `notice-color-700` -> `notice-color-800` - `positive-visual-color` - light: `positive-color-700` -> `positive-color-800` - dark: `positive-color-800` -> `positive-color-900` - `brown-background-color-default` - dark: `brown-700` -> `brown-800` - `cinnamon-background-color-default` - dark: `cinnamon-700` -> `cinnamon-800` - `pink-background-color-default` - dark: `pink-700` -> `pink-800` - `silver-background-color-default` - dark: `silver-700` -> `silver-800` - `turquoise-background-color-default` - dark: `turquoise-700` -> `turquoise-800` - `neutral-subtle-background-color-default` - light: `gray-100` -> `gray-100` - dark: `gray-100` -> `gray-300` - `accent-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `accent-color-200` - dark: `rgba(0, 0, 0, 0.6)` -> `accent-color-300` - `gray-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `gray-100` - dark: `rgba(0, 0, 0, 0.6)` -> `gray-300` - `blue-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `blue-200` - dark: `rgba(0, 0, 0, 0.6)` -> `blue-300` - `green-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `green-200` - dark: `rgba(0, 0, 0, 0.6)` -> `green-300` - `orange-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `orange-200` - dark: `rgba(0, 0, 0, 0.6)` -> `orange-300` - `red-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `red-200` - dark: `rgba(0, 0, 0, 0.6)` -> `red-300` - `brown-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `brown-200` - dark: `rgba(0, 0, 0, 0.6)` -> `brown-300` - `cinnamon-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `cinnamon-200` - dark: `rgba(0, 0, 0, 0.6)` -> `cinnamon-300` - `celery-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `celery-200` - dark: `rgba(0, 0, 0, 0.6)` -> `celery-300` - `chartreuse-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `chartreuse-200` - dark: `rgba(0, 0, 0, 0.6)` -> `chartreuse-300` - `cyan-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `cyan-200` - dark: `rgba(0, 0, 0, 0.6)` -> `cyan-300` - `fuchsia-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `fuchsia-200` - dark: `rgba(0, 0, 0, 0.6)` -> `fuchsia-300` - `indigo-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `indigo-200` - dark: `rgba(0, 0, 0, 0.6)` -> `indigo-300` - `magenta-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `magenta-200` - dark: `rgba(0, 0, 0, 0.6)` -> `magenta-300` - `pink-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `pink-200` - dark: `rgba(0, 0, 0, 0.6)` -> `pink-300` - `purple-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `purple-200` - dark: `rgba(0, 0, 0, 0.6)` -> `purple-300` - `seafoam-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `seafoam-200` - dark: `rgba(0, 0, 0, 0.6)` -> `seafoam-300` - `silver-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `silver-200` - dark: `rgba(0, 0, 0, 0.6)` -> `silver-300` - `turquoise-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `turquoise-200` - dark: `rgba(0, 0, 0, 0.6)` -> `turquoise-300` - `yellow-subtle-background-color-default` - light: `rgba(0, 0, 0, 0.2)` -> `yellow-200` - dark: `rgba(0, 0, 0, 0.6)` -> `yellow-300` </details> ## 13.0.0-beta.46 ### Minor Changes - [#396](https://github.com/adobe/spectrum-tokens/pull/396) [`4fcfe5b`](https://github.com/adobe/spectrum-tokens/commit/4fcfe5bd83214a7ca3644646bbf0f38802a20f43) Thanks [@larz0](https://github.com/larz0)! - Added brand new tokens for the S2 Standard Panel: ## Design Motivation Added tokens needed for the new S2 standard panel component. ## Token Diff _Tokens Added (12):_ - `standard-panel-width` - `standard-panel-minimum-width` - `standard-panel-maximum-width` - `standard-panel-top-to-close-button-compact` - `standard-panel-top-to-close-button-regular` - `standard-panel-top-to-close-button-spacious` - `standard-panel-edge-to-close-button-compact` - `standard-panel-edge-to-close-button-regular` - `standard-panel-edge-to-close-button-spacious` - `standard-panel-title-font-size` - `standard-panel-gripper-color` - `standard-panel-gripper-color-drag` ## 13.0.0-beta.45 ### Minor Changes - [#390](https://github.com/adobe/spectrum-tokens/pull/390) [`cc9c304`](https://github.com/adobe/spectrum-tokens/commit/cc9c3048893058c3f01d6f1ce4688d8ab3716397) Thanks [@lynnhao](https://github.com/lynnhao)! - Updated code tokens for S2 ## Design Motivation These code token updates include some fixes to CJK font-weights to match the Latin font-weights when possible. We added CJK size tokens for consistency with other typography style tokens. Note that the new CJK size tokens currently point to the default code font-size tokens since Source Code Pro handles Latin and CJK sizing comparably. ## Token Diff _Tokens added (5):_ - `code-cjk-size-l` - `code-cjk-size-m` - `code-cjk-size-s` - `code-cjk-size-xl` - `code-cjk-size-xs` _Token values updated (2):_ - `code-cjk-strong-emphasized-font-weight` - `code-cjk-strong-font-weight` ## 13.0.0-beta.44 ### Minor Changes - [#388](https://github.com/adobe/spectrum-tokens/pull/388) [`58425e6`](https://github.com/adobe/spectrum-tokens/commit/58425e67b2d4cbd716205d4d502cc823245811fe) Thanks [@lynnhao](https://github.com/lynnhao)! - Updated avatar and avatar group tokens ## Description - Updated avatar size tokens, including all sizes from `75` to `700` - Added new avatar size tokens, from `800` to `1500` - Added new avatar border thickness and color tokens - Added avatar group size tokens, from `50` to `500` - Added avatar group spacing tokens, from `50` to `500` ## Motivation and context - Avatar: added new sizes and updated existing sizes to better match other components and work across a variety of use cases. - ⚠️ Important note: Accepting updates from this release will update the avatar sizes. The largest change in size is 8px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size: | Former avatar size | Available avatar size | | :----------------- | :--------------------------------------- | | size 50 (16 x 16) | size 50 (16 x 16) | | size 75 (18 x 18) | size 50 (16 x 16) or size 75 (20 x 20) | | size 100 (20 x 20) | size 75 (20 x 20) | | size 200 (22 x 22) | size 75 (20 x 20) or size 100 (24 x 24) | | size 300 (26 x 26) | size 100 (24 x 24) or size 200 (28 x 28) | | size 400 (28 x 28) | size 200 (28 x 28) | | size 500 (32 x 32) | size 300 (32 x 32) | | size 600 (36 x 36) | size 400 (36 x 36) | | size 700 (40 x 40) | size 500 (40 x 40) | | -- | size 600 (44 x 44) | | -- | size 700 (48 x 48) | | -- | size 800 (52 x 52) | | -- | size 900 (56 x 56) | | -- | size 1000 (64 x 64) | | -- | size 1100 (72 x 72) | | -- | size 1200 (80 x 80) | | -- | size 1300 (88 x 88) | | -- | size 1400 (96 x 96) | | -- | size 1500 (104 x 104) | ## Token Diff _Tokens added (24):_ - `avatar-border-color` - `avatar-border-width` - `avatar-group-size-100` - `avatar-group-size-200` - `avatar-group-size-300` - `avatar-group-size-400` - `avatar-group-size-50` - `avatar-group-size-500` - `avatar-group-size-75` - `avatar-size-1000` - `avatar-size-1100` - `avatar-size-1200` - `avatar-size-1300` - `avatar-size-1400` - `avatar-size-1500` - `avatar-size-800` - `avatar-size-900` - `avatar-to-avatar-100` - `avatar-to-avatar-200` - `avatar-to-avatar-300` - `avatar-to-avatar-400` - `avatar-to-avatar-50` - `avatar-to-avatar-500` - `avatar-to-avatar-75` _Token values updated (8):_ - `avatar-size-100` - `avatar-size-200` - `avatar-size-300` - `avatar-size-400` - `avatar-size-500` - `avatar-size-600` - `avatar-size-700` - `avatar-size-75` ## 13.0.0-beta.43 ### Minor Changes - [#384](https://github.com/adobe/spectrum-tokens/pull/384) [`681b4b0`](https://github.com/adobe/spectrum-tokens/commit/681b4b0094d31bae4c9b1b095fa59d6448c26cab) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added dragged drop shadow tokens that point to new 300 global drop shadow tokens ## Design Motivation These are new foundational drop shadow tokens that represent a higher elevation when items are dragged. The more prominent shadow also brings more visual focus to the dragged item. They will be used in the standard panel "dragged" state, as well as in future component updates, to be determined. ## Token Diff _Tokens added (8):_ - `drop-shadow-blur-300` - `drop-shadow-color-300` - `drop-shadow-dragged-blur` - `drop-shadow-dragged-color` - `drop-shadow-dragged-x` - `drop-shadow-dragged-y` - `drop-shadow-x-300` - `drop-shadow-y-300` ## 13.0.0-beta.42 ### Minor Changes - [#382](https://github.com/adobe/spectrum-tokens/pull/382) [`2af3850`](https://github.com/adobe/spectrum-tokens/commit/2af3850a554812fd9c1b3e6fd902a746c9ac42c7) Thanks [@nabuhasan](https://github.com/nabuhasan)! - Updated S2 swatch tokens and added swatch-group tokens in S2 Color and S2 Non-color data sets, respectively. ## Design Motivation Swatch and swatch group components are being formalized as Spectrum 2 components. These tokens define the design data needed for implementation. Changes include updated corner rounding, colors and spacing for spacious density. For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13497). ## Token Diff _Tokens added (3):_ - `swatch-group-spacing-spacious` - `swatch-group-border-opacity` - `swatch-group-border-color` _Tokens values updated (3):_ - `swatch-border-color`: `gray-900` -> `gray-1000` - `swatch-border-opacity`: `0.51` -> `0.42` - `swatch-disabled-icon-border-opacity`: `0.51` -> `0.42` ## 13.0.0-beta.41 ### Minor Changes - [#375](https://github.com/adobe/spectrum-tokens/pull/375) [`6e3be6d`](https://github.com/adobe/spectrum-tokens/commit/6e3be6d8a458efa1752a8dd1360f03fa83f84c37) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - [Updated thumbnail size tokens and added new tokens](https://github.com/adobe/spectrum-tokens-studio-data/pull/144) - [Updated S2 Action bar tokens](https://github.com/adobe/spectrum-tokens-studio-data/pull/149) ## Design Motivation Thumbnail: updated sizes in order for opacity checkerboards to translate better in implementation. ⚠️ Important note: Accepting updates from this release will update the thumbnail sizes. The change in size is no more than 4 px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size: | Former thumbnail size | Available thumbnail size | | :-------------------- | :--------------------------------------- | | size 50 (16 x 16) | size 50 (16 x 16) | | size 75 (18 x 18) | size 75 (20 x 20) | | size 100 (20 x 20) | size 75 (20 x 20) | | size 200 (22 x 22) | size 100 (24 x 24) | | size 300 (26 x 26) | size 200 (28 x 28) | | size 400 (28 x 28) | size 200 (28 x 28) | | size 500 (32 x 32) | size 300 (32 x 32) | | size 600 (36 x 36) | size 400 (36 x 36) | | size 700 (40 x 40) | size 500 (40 x 40) | | size 800 (44 x 44) | size 600 (44 x 44) | | size 900 (50 x 50) | size 700 (48 x 48) or size 800 (52 x 52) | | size 1000 (56 x 56) | size 900 (56 x 56) | | -- | size 1000 (64 x 64) | Action bar: Updated S2 action bar (non-color) in respective desktop and mobile layout sets. ## Token Diff _Tokens added (8):_ - `action-bar-top-to-content-area` - `action-bar-bottom-to-content-area` - `action-bar-edge-to-content-area` - `action-bar-close-button-to-counter` - `action-bar-counter-font-size` - `thumbnail-opacity-checkerboard-square-size` - `thumbnail-corner-radius` - `text-to-control-50` _Tokens updated (2):_ - `action-bar-height` - `action-bar-top-to-item-counter` _Token values updated (11):_ - `thumbnail-size-75` - `desktop`: `18px` -> `20px` - `mobile`: `22px` -> `24px` - `thumbnail-size-100` - `desktop`: `20px` -> `24px` - `mobile`: `26px` -> `28px` - `thumbnail-size-200` - `desktop`: `22px` -> `28px` - `mobile`: `28px` -> `32px` - `thumbnail-size-300` - `desktop`: `26px` -> `32px` - `mobile`: `32px` -> `36px` - `thumbnail-size-400` - `desktop`: `28px` -> `36px` - `mobile`: `36px` -> `40px` - `thumbnail-size-500` - `desktop`: `32px` -> `40px` - `mobile`: `40px` -> `44px` - `thumbnail-size-600` - `desktop`: `36px` -> `44px` - `mobile`: `46px` -> `48px` - `thumbnail-size-700` - `desktop`: `40px` -> `48px` - `mobile`: `50px` -> `52px` - `thumbnail-size-800` - `desktop`: `44px` -> `52px` - `mobile`: `55px` -> `56px` - `thumbnail-size-900` - `desktop`: `50px` -> `56px` - `mobile`: `62px` -> `64px` - `thumbnail-size-1000` - `desktop`: `56px` -> `64px` - `mobile`: `70px` -> `72px` ## 13.0.0-beta.40 ### Minor Changes - [#373](https://github.com/adobe/spectrum-tokens/pull/373) [`e04bddf`](https://github.com/adobe/spectrum-tokens/commit/e04bddf65549c87cd314b54966fe066ae649b7f7) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - Updated S2 accordion tokens (non-color) in respective desktop and mobile layout sets - Added S2 meter tokens, including both color and non-color. ## Design Motivation - Accordion component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing content-area-edge-to-content tokens enhances inclusivity for various design patterns. For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13435). - Meter component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing static tokens enables us to standardize the use of tokens across various components with indicators and tracks. This includes progress bars, progress circles, and potentially sliders in the future. For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13414). ## Token Diff _Tokens added (18):_ - `accordion-content-area-edge-to-content-extra-large` - `accordion-content-area-edge-to-content-large` - `accordion-content-area-edge-to-content-medium` - `accordion-content-area-edge-to-content-small` - `accordion-disclosure-indicator-to-text-extra-large` - `accordion-disclosure-indicator-to-text-large` - `accordion-disclosure-indicator-to-text-medium` - `accordion-disclosure-indicator-to-text-small` - `accordion-item-to-divider` - `meter-thickness-extra-large` - `meter-thickness-medium` - `static-black-text-color` - `static-black-track-color` - `static-black-track-indicator-color` - `static-white-text-color` - `static-white-track-color` - `static-white-track-indicator-color` - `track-color` _Newly deprecated tokens (2):_ - `accordion-edge-to-disclosure-indicator` - `accordion-disclosure-indicator-to-text` _Tokens updated (1):_ - `meter-thickness-large` ## 13.0.0-beta.39 ### Minor Changes - [#364](https://github.com/adobe/spectrum-tokens/pull/364) [`f96ffca`](https://github.com/adobe/spectrum-tokens/commit/f96ffca4990547f8ddc8341d141e0edc65b872d9) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added coach-indicator s2 tokens ## Token Diff _Tokens added (8):_ - `coach-indicator-collapsed-gap` - `coach-indicator-collapsed-ring-rounding-increment` - `coach-indicator-collapsed-ring-thickness` - `coach-indicator-color` - `coach-indicator-expanded-gap` - `coach-indicator-expanded-ring-rounding-increment` - `coach-indicator-expanded-ring-thickness` - `coach-indicator-opacity` ## 13.0.0-beta.38 ### Minor Changes - [#360](https://github.com/adobe/spectrum-tokens/pull/360) [`f73a0b4`](https://github.com/adobe/spectrum-tokens/commit/f73a0b40464f1c73f2d9e8f6cf97da926e392ac7) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - Fixed token type from Sizing to Font size for contextual-help-body-size and `contextual-help-title-size` - Renamed tokens by deprecating previous ones and creating new ones, with font in the token name Updated value of `contextual-help-title-font-size` Marked the the following tokens in Tokens Studio for deprecation: - `negative-subdued-background-color-default` ( --> points to `negative-subtle-background-color-default`) - `negative-subdued-background-color-hover` - `negative-subdued-background-color-down` - `negative-subdued-background-color-key-focus` ## Design motivation - The updated type sorts them correctly in the Tokens Studio data - The updated value reflects the latest design for Spectrum 2, using the new title style instead of heading - The negative-subdued tokens were deprecated because the tag "error" variant has been deprecated and are no longer needed in the system. A new "subtle" token has been added for the in-line alert use case. ## Token diff _Tokens added (2):_ - `contextual-help-body-font-size` - `contextual-help-title-font-size` _Newly deprecated Tokens (6):_ - `contextual-help-body-size` - `contextual-help-title-size` - `negative-subdued-background-color-default` - `negative-subdued-background-color-hover` - `negative-subdued-background-color-down` - `negative-subdued-background-color-key-focus` ## 13.0.0-beta.37 ### Minor Changes - [#355](https://github.com/adobe/spectrum-tokens/pull/355) [`783a200`](https://github.com/adobe/spectrum-tokens/commit/783a200983efa8e1f2cc31fd40ac3ed7298bb312) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Updated tokens according to updated token spec for Spectrum 2, including new and deprecated tokens ## Design Motivation ### Change 1: Updated terminology to align with t-shirt sizes Previously in S1, the breadcrumb variants were default, compact, and multiline. However, in S2, we have aligned breadcrumb to t-shirt sizes, resulting in the following changes: - Breadcrumbs (default) -> Breadcrumbs (L) - Breadcrumbs (compact) -> Breadcrumbs (M) - Breadcrumbs (multiline) -> Breadcrumbs (multiline) ### Change 2: Updated truncated menu button sizes and spacing Other structural changes - In S1 all variants used M sized action button – now we use S, M, L sized action buttons for respective sizes. - In S1 all variants had same spacing 8px around chevron, now we use different spacings for all the three variants ## Token Diff _Tokens added (11):_ - `breadcrumbs-separator-to-bottom-text-multiline` - `breadcrumbs-start-edge-to-text-large` - `breadcrumbs-start-edge-to-text-medium` - `breadcrumbs-start-edge-to-text-multiline` - `breadcrumbs-top-to-separator-large` - `breadcrumbs-top-to-separator-medium` - `breadcrumbs-top-to-separator-multiline` - `breadcrumbs-truncated-menu-to-separator` - `breadcrumbs-text-to-separator-large` - `breadcrumbs-text-to-separator-medium` - `breadcrumbs-text-to-separator-multiline` _Newly deprecated tokens (13):_ - `breadcrumbs-height` - `breadcrumbs-height-compact` - `breadcrumbs-top-to-text` - `breadcrumbs-top-to-text-compact` - `breadcrumbs-bottom-to-text` - `breadcrumbs-bottom-to-text-compact` - `breadcrumbs-start-edge-to-text` - `breadcrumbs-top-to-separator-icon` - `breadcrumbs-top-to-separator-icon-compact` - `breadcrumbs-top-to-separator-icon-multiline` - `breadcrumbs-separator-icon-to-bottom-text-multiline` - `breadcrumbs-truncated-menu-to-separator-icon` - `breadcrumbs-top-to-truncated-menu-compact` _Token values updated (20):_ - `breadcrumbs-top-to-separator-icon-multiline` - `breadcrumbs-top-to-text-multiline` - `breadcrumbs-bottom-to-text-multiline` - `breadcrumbs-height-multiline` - `breadcrumbs-top-to-separator-icon-multiline` - `breadcrumbs-top-to-text-multiline` - `breadcrumbs-height` - `breadcrumbs-height-compact` - `breadcrumbs-truncated-menu-to-separator-icon` - `breadcrumbs-truncated-menu-to-bottom-text` - `breadcrumbs-bottom-to-text` - `breadcrumbs-bottom-to-text-compact` - `breadcrumbs-separator-icon-to-bottom-text-multiline` - `breadcrumbs-start-edge-to-text` - `breadcrumbs-top-to-separator-icon` - `breadcrumbs-top-to-separator-icon-compact` - `breadcrumbs-top-to-text` - `breadcrumbs-top-to-text-compact` - `breadcrumbs-top-to-truncated-menu` - `breadcrumbs-top-to-truncated-menu-compact` ## 13.0.0-beta.36 ### Minor Changes - [#342](https://github.com/adobe/spectrum-tokens/pull/342) [`9da9532`](https://github.com/adobe/spectrum-tokens/commit/9da9532f1915070d289f7cce6f4e562c2565f889) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Newly defined S2 Icon colors by the Icons team were incorporated into our system. This includes updates to existing colors and new color additions. More details on icon colors can be found [in this document](https://paper.dropbox.com/doc/S2-Icon-colors-May-update--CPQCbAN3uvmfSCYV5UekAgYkAg-BqbGyRAAL87Ehoqm9WrCB) and [this Figma file](https://www.figma.com/design/KRqwJWgLuW4R7HwFUzKWiB/S2-Icon-color?node-id=0%3A1&t=jRZwm9gOH4dyLwL7-1). ## Design motivation Icons team defined new S2 color tokens needed for their iconography assets. ## Token diff _Tokens added (78):_ - `icon-color-blue-background` - `icon-color-blue-primary-down` - `icon-color-blue-primary-hover` - `icon-color-brown-background` - `icon-color-brown-primary-default` - `icon-color-brown-primary-down` - `icon-color-brown-primary-hover` - `icon-color-celery-background` - `icon-color-celery-primary-default` - `icon-color-celery-primary-down` - `icon-color-celery-primary-hover` - `icon-color-chartreuse-background` - `icon-color-chartreuse-primary-default` - `icon-color-chartreuse-primary-down` - `icon-color-chartreuse-primary-hover` - `icon-color-cinnamon-background` - `icon-color-cinnamon-primary-default` - `icon-color-cinnamon-primary-down` - `icon-color-cinnamon-primary-hover` - `icon-color-cyan-background` - `icon-color-cyan-primary-default` - `icon-color-cyan-primary-down` - `icon-color-cyan-primary-hover` - `icon-color-disabled-primary` - `icon-color-emphasized-background` - `icon-color-fuchsia-background` - `icon-color-fuchsia-primary-default` - `icon-color-fuchsia-primary-down` - `icon-color-fuchsia-primary-hover` - `icon-color-green-background` - `icon-color-green-primary-down` - `icon-color-green-primary-hover` - `icon-color-indigo-background` - `icon-color-indigo-primary-default` - `icon-color-indigo-primary-down` - `icon-color-indigo-primary-hover` - `icon-color-informative` - `icon-color-inverse-background` - `icon-color-magenta-background` - `icon-color-magenta-primary-default` - `icon-color-magenta-primary-down` - `icon-color-magenta-primary-hover` - `icon-color-negative` - `icon-color-neutral` - `icon-color-notice` - `icon-color-orange-background` - `icon-color-orange-primary-default` - `icon-color-orange-primary-down` - `icon-color-orange-primary-hover` - `icon-color-pink-background` - `icon-color-pink-primary-default` - `icon-color-pink-primary-down` - `icon-color-pink-primary-hover` - `icon-color-positive` - `icon-color-primary-down` - `icon-color-primary-hover` - `icon-color-purple-background` - `icon-color-purple-primary-default` - `icon-color-purple-primary-down` - `icon-color-purple-primary-hover` - `icon-color-red-background` - `icon-color-red-primary-down` - `icon-color-red-primary-hover` - `icon-color-seafoam-background` - `icon-color-seafoam-primary-default` - `icon-color-seafoam-primary-down` - `icon-color-seafoam-primary-hover` - `icon-color-silver-background` - `icon-color-silver-primary-default` - `icon-color-silver-primary-down` - `icon-color-silver-primary-hover` - `icon-color-turquoise-background` - `icon-color-turquoise-primary-default` - `icon-color-turquoise-primary-down` - `icon-color-turquoise-primary-hover` - `icon-color-yellow-background` - `icon-color-yellow-primary-down` - `icon-color-yellow-primary-hover` ## 13.0.0-beta.35 ### Minor Changes - [#337](https://github.com/adobe/spectrum-tokens/pull/337) [`df2ab7e`](https://github.com/adobe/spectrum-tokens/commit/df2ab7ed77d385593342a3ced7bfded94bd8af8e) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Updated illustrated message and drop zone tokens ## Design Motivation - The previous tokens had the incorrect types. By fixing the type, they can reference the updated tokens that are replacing them. - Illustrated message now has three sizes (S, M, L) in Spectrum 2 to cover a wider range of use cases - Component font size tokens now specify font in the token name ## Token Diff _Tokens added (12):_ - `drop-zone-body-font-size` - `drop-zone-cjk-title-font-size` - `drop-zone-title-font-size` - `illustrated-message-large-body-font-size` - `illustrated-message-large-cjk-title-font-size` - `illustrated-message-large-title-font-size` - `illustrated-message-medium-body-font-size` - `illustrated-message-medium-cjk-title-font-size` - `illustrated-message-medium-title-font-size` - `illustrated-message-small-body-font-size` - `illustrated-message-small-cjk-title-font-size` - `illustrated-message-small-title-font-size` _Newly deprecated tokens (6):_ - `drop-zone-body-size` - `drop-zone-cjk-title-size` - `drop-zone-title-size` - `illustrated-message-body-size` - `illustrated-message-cjk-title-size` - `illustrated-message-title-size` _Token value updated (1):_ - `drop-zone-border-dash-gap` ## 13.0.0-beta.34 ### Minor Changes - [#334](https://github.com/adobe/spectrum-tokens/pull/334) [`4d28593`](https://github.com/adobe/spectrum-tokens/commit/4d28593c9d34414d72d78a1cc6c480d9ffdf82ce) Thanks [@nabuhasan](https://github.com/nabuhasan)! - S2 Popover tokens update ## Token Diff _Tokens added (3):_ - `popover-border-color` - `popover-border-opacity` - `popover-edge-to-content-area` _Newly deprecated token (1):_ - `popover-top-to-content-area` ## 13.0.0-beta.33 ### Minor Changes - [#331](https://github.com/adobe/spectrum-tokens/pull/331) [`0bbfedb`](https://github.com/adobe/spectrum-tokens/commit/0bbfedb9dbb63fdd5b20e91f65b3f958a833313b) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - S2 Menu token updates ## Token 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