feat(menu): spectrum 2 migration

.changeset/strong-pianos-work.md

@@ -0,0 +1,31 @@
+---
+"@spectrum-css/menu": major
+---
+
+### Spectrum 2 migration
+
+Menu now uses Spectrum 2 tokens and specifications.
+
+Removes custom menu item background color tokens: `@adobe/spectrum-tokens` has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from `@adobe/spectrum-tokens` have been removed.
+
+In addition to other small token and minor style changes, there were several new features that were added to this version of menu, including:
+
+- A thumbnail can now be added instead of an icon
+- A section description can now be included below the menu section heading
+- The actions area previously held action switches for multi-select, and in this version, an external link action icon can be included in that area
+
+### New mods
+
+- `--mod-menu-item-linkout-icon-height`
+- `--mod-menu-item-linkout-icon-width`
+- `--mod-menu-item-thumbnail-height`
+- `--mod-menu-item-thumbnail-opacity-disabled`
+- `--mod-menu-item-thumbnail-to-label`
+- `--mod-menu-item-thumbnail-width`
+- `--mod-menu-item-top-to-thumbnail`
+- `--mod-menu-section-description-color`
+- `--mod-menu-section-description-font-size`
+- `--mod-menu-section-description-font-weight`
+- `--mod-menu-section-description-line-height`
+- `--mod-menu-section-description-line-height-cjk`
+- `--mod-menu-section-header-to-description`

components/colorhandle/index.css

@@ -25,12 +25,12 @@
 .spectrum-ColorHandle {
 	/* outer border as box shadow on the colorhandle */
 	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
-	--spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
+	--spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
 	--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
 
 	/* inner border as inset boxshadow on the colorhandle-inner */
 	/* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
-	--spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
+	--spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
 
 	/* @passthrough -- opacity checkerboard customization */
 	--mod-opacity-checkerboard-position: 50%;

components/colorslider/index.css

@@ -16,7 +16,7 @@
 	--spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width);
 
 	/* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
+	--spectrum-color-slider-border-color-default: rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
 
 	/* @passthrough -- settings for nested color handle */
 	--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);

components/colorwheel/index.css

@@ -20,7 +20,7 @@
 	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
 
 	--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
-	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
+	--spectrum-colorwheel-border-color: rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
 
 	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
 	--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);

components/menu/dist/metadata.json

@@ -12,16 +12,17 @@
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus",
-    ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover",
     ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open",
     ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox",
     ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch",
+    ".spectrum-Menu .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout",
     ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox",
     ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch",
     ".spectrum-Menu .spectrum-Menu-itemIcon",
     ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon",
-    ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
+    ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)",
+    ".spectrum-Menu .spectrum-Menu-linkout",
     ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)",
     ".spectrum-Menu-back",
     ".spectrum-Menu-back .spectrum-Menu-sectionHeading",
@@ -60,10 +61,10 @@
     ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
     ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
     ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
-    ".spectrum-Menu-item.is-disabled",
     ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
     ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
     ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail",
     ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
     ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item.is-disabled:hover",
@@ -73,6 +74,7 @@
     ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
     ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item.is-focused",
+    ".spectrum-Menu-item.is-focused .spectrum-Menu-linkout",
     ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark",
     ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron",
     ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription",
@@ -81,6 +83,7 @@
     ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue",
     ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item:active",
+    ".spectrum-Menu-item:active .spectrum-Menu-linkout",
     ".spectrum-Menu-item:active > .spectrum-Menu-checkmark",
     ".spectrum-Menu-item:active > .spectrum-Menu-chevron",
     ".spectrum-Menu-item:active > .spectrum-Menu-itemDescription",
@@ -89,6 +92,7 @@
     ".spectrum-Menu-item:active > .spectrum-Menu-itemValue",
     ".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item:focus",
+    ".spectrum-Menu-item:focus .spectrum-Menu-linkout",
     ".spectrum-Menu-item:focus > .spectrum-Menu-checkmark",
     ".spectrum-Menu-item:focus > .spectrum-Menu-chevron",
     ".spectrum-Menu-item:focus > .spectrum-Menu-itemDescription",
@@ -97,7 +101,17 @@
     ".spectrum-Menu-item:focus > .spectrum-Menu-itemValue",
     ".spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item:focus-visible",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-checkmark",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemActions",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemCheckbox",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemValue",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) .spectrum-Menu-itemThumbnail",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox",
+    ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription",
     ".spectrum-Menu-item:hover",
+    ".spectrum-Menu-item:hover .spectrum-Menu-linkout",
     ".spectrum-Menu-item:hover > .spectrum-Menu-checkmark",
     ".spectrum-Menu-item:hover > .spectrum-Menu-chevron",
     ".spectrum-Menu-item:hover > .spectrum-Menu-itemDescription",
@@ -110,11 +124,12 @@
     ".spectrum-Menu-itemLabel",
     ".spectrum-Menu-itemLabel--truncate",
     ".spectrum-Menu-itemSelection",
+    ".spectrum-Menu-itemThumbnail",
     ".spectrum-Menu-itemValue",
-    ".spectrum-Menu-item[aria-disabled=\"true\"]",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover",
@@ -123,6 +138,7 @@
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel",
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue",
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading",
+    ".spectrum-Menu-sectionDescription",
     ".spectrum-Menu-sectionHeading",
     ".spectrum-Menu.is-selectable .spectrum-Menu-item",
     ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
@@ -131,11 +147,9 @@
     ".spectrum-Menu.spectrum-Menu--sizeL",
     ".spectrum-Menu.spectrum-Menu--sizeS",
     ".spectrum-Menu.spectrum-Menu--sizeXL",
-    ".spectrum-Menu:dir(rtl)",
     ".spectrum-Menu:lang(ja)",
     ".spectrum-Menu:lang(ko)",
     ".spectrum-Menu:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Menu",
     "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron"
   ],
   "modifiers": [
@@ -195,17 +209,29 @@
     "--mod-menu-item-label-text-to-visual",
     "--mod-menu-item-label-to-description-spacing",
     "--mod-menu-item-label-to-value-area-min-spacing",
+    "--mod-menu-item-linkout-icon-height",
+    "--mod-menu-item-linkout-icon-width",
     "--mod-menu-item-min-height",
     "--mod-menu-item-selectable-edge-to-text-not-selected",
     "--mod-menu-item-text-to-control",
+    "--mod-menu-item-thumbnail-height",
+    "--mod-menu-item-thumbnail-opacity-disabled",
+    "--mod-menu-item-thumbnail-to-label",
+    "--mod-menu-item-thumbnail-width",
     "--mod-menu-item-top-edge-to-text",
     "--mod-menu-item-top-to-action",
     "--mod-menu-item-top-to-checkbox",
     "--mod-menu-item-top-to-checkmark",
+    "--mod-menu-item-top-to-thumbnail",
     "--mod-menu-item-value-color-default",
     "--mod-menu-item-value-color-down",
     "--mod-menu-item-value-color-focus",
     "--mod-menu-item-value-color-hover",
+    "--mod-menu-section-description-color",
+    "--mod-menu-section-description-font-size",
+    "--mod-menu-section-description-font-weight",
+    "--mod-menu-section-description-line-height",
+    "--mod-menu-section-description-line-height-cjk",
     "--mod-menu-section-divider-margin-block",
     "--mod-menu-section-header-bottom-edge-to-text",
     "--mod-menu-section-header-color",
@@ -214,6 +240,7 @@
     "--mod-menu-section-header-line-height",
     "--mod-menu-section-header-line-height-cjk",
     "--mod-menu-section-header-min-width",
+    "--mod-menu-section-header-to-description",
     "--mod-menu-section-header-top-edge-to-text"
   ],
   "component": [
@@ -234,7 +261,7 @@
     "--spectrum-menu-item-background-color-default",
     "--spectrum-menu-item-background-color-down",
     "--spectrum-menu-item-background-color-hover",
-    "--spectrum-menu-item-background-color-key-focus",
+    "--spectrum-menu-item-background-color-keyboard-focus",
     "--spectrum-menu-item-bottom-edge-to-text",
     "--spectrum-menu-item-checkmark-height",
     "--spectrum-menu-item-checkmark-height-extra-large",
@@ -256,14 +283,12 @@
     "--spectrum-menu-item-description-font-size",
     "--spectrum-menu-item-description-line-height",
     "--spectrum-menu-item-description-line-height-cjk",
-    "--spectrum-menu-item-focus-indicator-border-width",
     "--spectrum-menu-item-focus-indicator-color",
     "--spectrum-menu-item-focus-indicator-color-default",
-    "--spectrum-menu-item-focus-indicator-direction-scalar",
     "--spectrum-menu-item-focus-indicator-offset",
     "--spectrum-menu-item-focus-indicator-outline-style",
-    "--spectrum-menu-item-focus-indicator-shadow",
     "--spectrum-menu-item-focus-indicator-width",
+    "--spectrum-menu-item-focus-margin",
     "--spectrum-menu-item-icon-height",
     "--spectrum-menu-item-icon-width",
     "--spectrum-menu-item-label-content-color-default",
@@ -282,17 +307,25 @@
     "--spectrum-menu-item-label-line-height-cjk",
     "--spectrum-menu-item-label-text-to-visual",
     "--spectrum-menu-item-label-to-description",
-    "--spectrum-menu-item-label-to-description-spacing",
+    "--spectrum-menu-item-label-to-description-extra-large",
+    "--spectrum-menu-item-label-to-description-large",
+    "--spectrum-menu-item-label-to-description-medium",
+    "--spectrum-menu-item-label-to-description-small",
     "--spectrum-menu-item-label-to-value-area-min-spacing",
+    "--spectrum-menu-item-linkout-icon-height",
+    "--spectrum-menu-item-linkout-icon-width",
     "--spectrum-menu-item-min-height",
     "--spectrum-menu-item-section-divider-height",
     "--spectrum-menu-item-selectable-edge-to-text-not-selected",
     "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large",
     "--spectrum-menu-item-selectable-edge-to-text-not-selected-large",
     "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium",
     "--spectrum-menu-item-selectable-edge-to-text-not-selected-small",
-    "--spectrum-menu-item-spacing-multiplier",
     "--spectrum-menu-item-text-to-control",
+    "--spectrum-menu-item-thumbnail-height",
+    "--spectrum-menu-item-thumbnail-opacity-disabled",
+    "--spectrum-menu-item-thumbnail-to-label",
+    "--spectrum-menu-item-thumbnail-width",
     "--spectrum-menu-item-top-edge-to-text",
     "--spectrum-menu-item-top-to-action",
     "--spectrum-menu-item-top-to-checkbox",
@@ -301,24 +334,37 @@
     "--spectrum-menu-item-top-to-selected-icon-large",
     "--spectrum-menu-item-top-to-selected-icon-medium",
     "--spectrum-menu-item-top-to-selected-icon-small",
+    "--spectrum-menu-item-top-to-thumbnail",
+    "--spectrum-menu-item-top-to-thumbnail-extra-large",
+    "--spectrum-menu-item-top-to-thumbnail-large",
+    "--spectrum-menu-item-top-to-thumbnail-medium",
+    "--spectrum-menu-item-top-to-thumbnail-small",
     "--spectrum-menu-item-value-color-default",
     "--spectrum-menu-item-value-color-down",
     "--spectrum-menu-item-value-color-focus",
     "--spectrum-menu-item-value-color-hover",
+    "--spectrum-menu-section-description-color",
+    "--spectrum-menu-section-description-font-size",
+    "--spectrum-menu-section-description-font-weight",
+    "--spectrum-menu-section-description-line-height",
+    "--spectrum-menu-section-description-line-height-cjk",
     "--spectrum-menu-section-header-color",
     "--spectrum-menu-section-header-font-size",
     "--spectrum-menu-section-header-font-weight",
     "--spectrum-menu-section-header-line-height",
     "--spectrum-menu-section-header-line-height-cjk",
-    "--spectrum-menu-section-header-min-width"
+    "--spectrum-menu-section-header-min-width",
+    "--spectrum-menu-section-header-to-description",
+    "--spectrum-menu-section-header-to-description-extra-large",
+    "--spectrum-menu-section-header-to-description-large",
+    "--spectrum-menu-section-header-to-description-medium",
+    "--spectrum-menu-section-header-to-description-small"
   ],
   "global": [
     "--spectrum-accent-color-1000",
     "--spectrum-accent-color-1100",
     "--spectrum-accent-color-900",
-    "--spectrum-blue-800",
     "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
     "--spectrum-cjk-line-height-100",
     "--spectrum-component-bottom-to-text-100",
     "--spectrum-component-bottom-to-text-200",
@@ -332,24 +378,34 @@
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-width-ratio-down",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-400",
+    "--spectrum-corner-radius-500",
+    "--spectrum-corner-radius-600",
+    "--spectrum-corner-radius-700",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-medium",
     "--spectrum-divider-thickness-small",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
     "--spectrum-focus-indicator-color",
+    "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-50",
     "--spectrum-font-size-75",
-    "--spectrum-gray-1000-rgb",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
+    "--spectrum-link-out-icon-size-100",
+    "--spectrum-link-out-icon-size-200",
+    "--spectrum-link-out-icon-size-75",
     "--spectrum-navigational-indicator-top-to-back-icon-extra-large",
     "--spectrum-navigational-indicator-top-to-back-icon-large",
     "--spectrum-navigational-indicator-top-to-back-icon-medium",
@@ -362,6 +418,7 @@
     "--spectrum-neutral-subdued-content-color-down",
     "--spectrum-neutral-subdued-content-color-hover",
     "--spectrum-neutral-subdued-content-color-key-focus",
+    "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
     "--spectrum-spacing-50",
     "--spectrum-text-to-control-100",
@@ -371,8 +428,12 @@
     "--spectrum-text-to-visual-100",
     "--spectrum-text-to-visual-200",
     "--spectrum-text-to-visual-300",
+    "--spectrum-text-to-visual-400",
     "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-200-opacity",
+    "--spectrum-thumbnail-size-500",
+    "--spectrum-thumbnail-size-700",
+    "--spectrum-thumbnail-size-800",
+    "--spectrum-thumbnail-size-900",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",