feat(tabs): migrate to spectrum 2 (#4003)

Author: rise-erpelding

.changeset/fresh-kings-slide.md

@@ -0,0 +1,47 @@
+---
+"@spectrum-css/tabs": major
+---
+
+Tab has now been migrated to Spectrum 2. This migration brings with it several major changes:
+
+- Emphasized variant has been removed
+- The divider line has been removed and all variants now resemble what was formerly the quiet variant
+- Removal of t-shirt sizes (only one size is available)
+- Updated high contrast styles
+- The focus indicator's size has changed to accommodate the selection indicator inside of the focus outline
+
+Overflow and vertical variants, aside from what applies from the notes above, remain mostly unchanged and currently are not fully supported in S2. One exception: a bug fix was made to allow density variants to be visible in the overflow variant (previously, the overflow variant was identical for both densities).
+
+A full list of added and removed mods can be found below. However, please note the following mod name changes:
+
+- --mod-tabs-divider-size is now --mod-tabs-selection-indicator-thickness
+- --mod-tabs-divider-border-radius is now --mod-tabs-selection-indicator-border-radius
+
+Removed mods
+
+- "--mod-tabs-color-hover-emphasized"
+- "--mod-tabs-color-key-focus-emphasized"
+- "--mod-tabs-color-selected-emphasized"
+- "--mod-tabs-divider-background-color"
+- "--mod-tabs-divider-border-radius"
+- "--mod-tabs-divider-size"
+- "--mod-tabs-item-vertical-spacing"
+- "--mod-tabs-list-background-direction"
+- "--mod-tabs-list-background-direction-vertical"
+- "--mod-tabs-list-background-direction-vertical-right"
+- "--mod-tabs-selection-indicator-color-emphasized"
+- "--mod-tabs-start-to-item-quiet"
+
+Added mods
+
+- "--mod-tabs-color-selected-hover"
+- "--mod-tabs-color-selected-key-focus"
+- "--mod-tabs-item-border-radius"
+- "--mod-tabs-item-horizontal-spacing-compact"
+- "--mod-tabs-label-to-selection-indicator"
+- "--mod-tabs-label-to-selection-indicator-compact"
+- "--mod-tabs-selection-indicator-border-radius"
+- "--mod-tabs-selection-indicator-color-disabled"
+- "--mod-tabs-selection-indicator-thickness"
+- "--mod-tabs-side-to-icon"
+- "--mod-tabs-side-to-icon-compact"

.changeset/ripe-toys-invent.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Adds custom tokens for Tabs in Spectrum 2. This is intended to be a temporary change until the tokens have been added to the spectrum-tokens package.

components/tabs/dist/metadata.json

@@ -2,57 +2,41 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Tabs",
-    ".spectrum-Tabs .is-selected:before",
-    ".spectrum-Tabs .is-selected:focus",
-    ".spectrum-Tabs .is-selected:focus-visible",
-    ".spectrum-Tabs .spectrum-Tabs-item .spectrum-Icon",
-    ".spectrum-Tabs .spectrum-Tabs-item .spectrum-Tabs-itemLabel",
+    ".spectrum-Tabs .spectrum-Picker-button",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected .spectrum-Icon",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Icon",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--horizontal",
     ".spectrum-Tabs--horizontal .spectrum-Tabs-item",
-    ".spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)",
     ".spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--horizontal.spectrum-Tabs--compact",
-    ".spectrum-Tabs--quiet",
-    ".spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--vertical",
     ".spectrum-Tabs--vertical .spectrum-Icon",
     ".spectrum-Tabs--vertical .spectrum-Tabs-item",
-    ".spectrum-Tabs--vertical .spectrum-Tabs-item:before",
     ".spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--vertical-right",
     ".spectrum-Tabs--vertical-right .spectrum-Icon",
     ".spectrum-Tabs--vertical-right .spectrum-Tabs-item",
-    ".spectrum-Tabs--vertical-right .spectrum-Tabs-item:before",
     ".spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator",
-    ".spectrum-Tabs--vertical-right.spectrum-Tabs--quiet",
-    ".spectrum-Tabs--vertical-right:dir(rtl)",
-    ".spectrum-Tabs--vertical.spectrum-Tabs--quiet",
-    ".spectrum-Tabs--vertical:dir(rtl)",
     ".spectrum-Tabs-item",
     ".spectrum-Tabs-item .spectrum-Icon",
     ".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-item.is-disabled",
     ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel",
+    ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs-item.is-selected",
+    ".spectrum-Tabs-item.is-selected.is-disabled",
+    ".spectrum-Tabs-item.is-selected:focus-visible",
+    ".spectrum-Tabs-item.is-selected:hover",
     ".spectrum-Tabs-item:before",
     ".spectrum-Tabs-item:focus-visible",
     ".spectrum-Tabs-item:focus-visible:before",
     ".spectrum-Tabs-item:hover",
     ".spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-itemLabel:empty",
     ".spectrum-Tabs-selectionIndicator",
-    ".spectrum-Tabs.spectrum-Tabs--compact",
-    ".spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL",
-    ".spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS",
-    ".spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL",
-    ".spectrum-Tabs.spectrum-Tabs--emphasized",
-    ".spectrum-Tabs.spectrum-Tabs--quiet",
-    ".spectrum-Tabs.spectrum-Tabs--sizeL",
-    ".spectrum-Tabs.spectrum-Tabs--sizeS",
-    ".spectrum-Tabs.spectrum-Tabs--sizeXL",
-    ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before",
-    "[dir=\"rtl\"] .spectrum-Tabs--vertical",
-    "[dir=\"rtl\"] .spectrum-Tabs--vertical-right"
+    ".spectrum-Tabs.spectrum-Tabs--compact"
   ],
   "modifiers": [
     "--mod-tabs-animation-duration",
@@ -62,14 +46,10 @@
     "--mod-tabs-color",
     "--mod-tabs-color-disabled",
     "--mod-tabs-color-hover",
-    "--mod-tabs-color-hover-emphasized",
     "--mod-tabs-color-key-focus",
-    "--mod-tabs-color-key-focus-emphasized",
     "--mod-tabs-color-selected",
-    "--mod-tabs-color-selected-emphasized",
-    "--mod-tabs-divider-background-color",
-    "--mod-tabs-divider-border-radius",
-    "--mod-tabs-divider-size",
+    "--mod-tabs-color-selected-hover",
+    "--mod-tabs-color-selected-key-focus",
     "--mod-tabs-focus-indicator-border-radius",
     "--mod-tabs-focus-indicator-color",
     "--mod-tabs-focus-indicator-gap",
@@ -80,24 +60,28 @@
     "--mod-tabs-font-weight",
     "--mod-tabs-icon-size",
     "--mod-tabs-icon-to-text",
+    "--mod-tabs-item-border-radius",
     "--mod-tabs-item-height",
     "--mod-tabs-item-height-compact",
     "--mod-tabs-item-horizontal-spacing",
-    "--mod-tabs-item-vertical-spacing",
+    "--mod-tabs-item-horizontal-spacing-compact",
+    "--mod-tabs-label-to-selection-indicator",
+    "--mod-tabs-label-to-selection-indicator-compact",
     "--mod-tabs-line-height",
-    "--mod-tabs-list-background-direction",
-    "--mod-tabs-list-background-direction-vertical",
-    "--mod-tabs-list-background-direction-vertical-right",
+    "--mod-tabs-selection-indicator-border-radius",
     "--mod-tabs-selection-indicator-color",
-    "--mod-tabs-selection-indicator-color-emphasized",
+    "--mod-tabs-selection-indicator-color-disabled",
+    "--mod-tabs-selection-indicator-thickness",
+    "--mod-tabs-side-to-icon",
+    "--mod-tabs-side-to-icon-compact",
     "--mod-tabs-start-to-edge",
-    "--mod-tabs-start-to-item-quiet",
     "--mod-tabs-top-to-icon",
     "--mod-tabs-top-to-icon-compact",
     "--mod-tabs-top-to-text",
     "--mod-tabs-top-to-text-compact"
   ],
   "component": [
+    "--spectrum-tab-selection-indicator-thickness",
     "--spectrum-tabs-animation-duration",
     "--spectrum-tabs-animation-ease",
     "--spectrum-tabs-bottom-to-text",
@@ -106,9 +90,8 @@
     "--spectrum-tabs-color-hover",
     "--spectrum-tabs-color-key-focus",
     "--spectrum-tabs-color-selected",
-    "--spectrum-tabs-divider-background-color",
-    "--spectrum-tabs-divider-border-radius",
-    "--spectrum-tabs-divider-size",
+    "--spectrum-tabs-color-selected-hover",
+    "--spectrum-tabs-color-selected-key-focus",
     "--spectrum-tabs-focus-indicator-border-radius",
     "--spectrum-tabs-focus-indicator-color",
     "--spectrum-tabs-focus-indicator-gap",
@@ -119,103 +102,73 @@
     "--spectrum-tabs-font-weight",
     "--spectrum-tabs-icon-size",
     "--spectrum-tabs-icon-to-text",
+    "--spectrum-tabs-item-border-radius",
     "--spectrum-tabs-item-height",
     "--spectrum-tabs-item-horizontal-spacing",
-    "--spectrum-tabs-item-vertical-spacing",
+    "--spectrum-tabs-label-to-selection-indicator",
     "--spectrum-tabs-line-height",
-    "--spectrum-tabs-list-background-direction",
+    "--spectrum-tabs-selection-indicator-border-radius",
     "--spectrum-tabs-selection-indicator-color",
+    "--spectrum-tabs-selection-indicator-color-disabled",
+    "--spectrum-tabs-selection-indicator-thickness",
+    "--spectrum-tabs-side-to-icon",
     "--spectrum-tabs-start-to-edge",
     "--spectrum-tabs-top-to-icon",
     "--spectrum-tabs-top-to-text"
   ],
   "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-animation-ease-in-out",
-    "--spectrum-border-width-200",
+    "--spectrum-corner-radius-0",
     "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-full",
     "--spectrum-default-font-style",
+    "--spectrum-disabled-border-color",
+    "--spectrum-disabled-content-color",
     "--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-75",
-    "--spectrum-gray-200",
-    "--spectrum-gray-500",
     "--spectrum-line-height-100",
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-content-color-hover",
+    "--spectrum-neutral-content-color-key-focus",
     "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-neutral-subdued-content-color-down",
     "--spectrum-neutral-subdued-content-color-hover",
     "--spectrum-neutral-subdued-content-color-key-focus",
     "--spectrum-regular-font-weight",
     "--spectrum-sans-font-family-stack",
-    "--spectrum-tab-item-bottom-to-text-extra-large",
-    "--spectrum-tab-item-bottom-to-text-large",
+    "--spectrum-spacing-200",
+    "--spectrum-spacing-75",
+    "--spectrum-tab-item-bottom-to-text-compact-medium",
     "--spectrum-tab-item-bottom-to-text-medium",
-    "--spectrum-tab-item-bottom-to-text-small",
-    "--spectrum-tab-item-compact-height-extra-large",
-    "--spectrum-tab-item-compact-height-large",
     "--spectrum-tab-item-compact-height-medium",
-    "--spectrum-tab-item-compact-height-small",
-    "--spectrum-tab-item-focus-indicator-gap-extra-large",
-    "--spectrum-tab-item-focus-indicator-gap-large",
-    "--spectrum-tab-item-focus-indicator-gap-medium",
-    "--spectrum-tab-item-focus-indicator-gap-small",
-    "--spectrum-tab-item-height-extra-large",
-    "--spectrum-tab-item-height-large",
     "--spectrum-tab-item-height-medium",
-    "--spectrum-tab-item-height-small",
-    "--spectrum-tab-item-start-to-edge-extra-large",
-    "--spectrum-tab-item-start-to-edge-large",
+    "--spectrum-tab-item-side-to-workflow-icon-compact-medium",
+    "--spectrum-tab-item-side-to-workflow-icon-medium",
     "--spectrum-tab-item-start-to-edge-medium",
-    "--spectrum-tab-item-start-to-edge-small",
-    "--spectrum-tab-item-to-tab-item-horizontal-extra-large",
-    "--spectrum-tab-item-to-tab-item-horizontal-large",
+    "--spectrum-tab-item-to-tab-item-compact-horizontal-medium",
     "--spectrum-tab-item-to-tab-item-horizontal-medium",
-    "--spectrum-tab-item-to-tab-item-horizontal-small",
-    "--spectrum-tab-item-to-tab-item-vertical-extra-large",
-    "--spectrum-tab-item-to-tab-item-vertical-large",
-    "--spectrum-tab-item-to-tab-item-vertical-medium",
-    "--spectrum-tab-item-to-tab-item-vertical-small",
-    "--spectrum-tab-item-top-to-text-compact-extra-large",
-    "--spectrum-tab-item-top-to-text-compact-large",
     "--spectrum-tab-item-top-to-text-compact-medium",
-    "--spectrum-tab-item-top-to-text-compact-small",
-    "--spectrum-tab-item-top-to-text-extra-large",
-    "--spectrum-tab-item-top-to-text-large",
     "--spectrum-tab-item-top-to-text-medium",
-    "--spectrum-tab-item-top-to-text-small",
-    "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large",
-    "--spectrum-tab-item-top-to-workflow-icon-compact-large",
     "--spectrum-tab-item-top-to-workflow-icon-compact-medium",
-    "--spectrum-tab-item-top-to-workflow-icon-compact-small",
-    "--spectrum-tab-item-top-to-workflow-icon-extra-large",
-    "--spectrum-tab-item-top-to-workflow-icon-large",
     "--spectrum-tab-item-top-to-workflow-icon-medium",
-    "--spectrum-tab-item-top-to-workflow-icon-small",
     "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75"
+    "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [],
+  "passthroughs": ["--mod-picker-block-size"],
   "high-contrast": [
+    "--highcontrast-tabs-background-color-selected",
     "--highcontrast-tabs-color",
     "--highcontrast-tabs-color-disabled",
     "--highcontrast-tabs-color-hover",
     "--highcontrast-tabs-color-key-focus",
     "--highcontrast-tabs-color-selected",
-    "--highcontrast-tabs-divider-background-color",
-    "--highcontrast-tabs-focus-indicator-background-color",
+    "--highcontrast-tabs-color-selected-hover",
+    "--highcontrast-tabs-color-selected-key-focus",
     "--highcontrast-tabs-focus-indicator-color",
-    "--highcontrast-tabs-selection-indicator-color"
+    "--highcontrast-tabs-selection-indicator-color",
+    "--highcontrast-tabs-selection-indicator-color-disabled"
   ]
 }