feat(button): migrate to Spectrum 2

.changeset/nine-kings-repair.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/button": major
+---
+
+#### Spectrum 2 migration
+Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
+- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
+- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
+- The `.spectrum-Button--fill` class is no longer needed and has been removed.
+
+The following `--mod` custom properties have been renamed:
+- `--mod-line-height-100` has been renamed to `--mod-button-line-height`
+- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`
+- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
+- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`

.storybook/assets/base.css

@@ -36,6 +36,14 @@ body {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
+.spectrum .spectrum-examples-static-black {
+	background: var(--spectrum-examples-gradient-static-black);
+}
+
+.spectrum .spectrum-examples-static-white {
+	background: var(--spectrum-examples-gradient-static-white)
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

.storybook/main.js

@@ -10,6 +10,7 @@ const componentPkgs = readdirSync(componentsPath, {
 
 module.exports = {
 	stories: [
+		"../components/*/stories/*.mdx",
 		"../components/*/stories/*.stories.js",
 		"./guides/*.mdx",
 		"./foundations/*/*.mdx",

.storybook/manager.js

@@ -50,7 +50,7 @@ addons.setConfig({
 	sidebar: {
 		showRoots: false,
 		filters: {
-			patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')),
+			patterns: (item) => !item.id.includes('forced-colors') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)),
 		}
 	},
 });

components/button/metadata/button-accent.yml

@@ -8,29 +8,29 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### x/x/2024 - Version 13.0.0
+      ### Version 13.0.0
       #### Spectrum 2 release
-      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
-      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
-      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
-      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
-
-      ### Versions prior to 13.0.0
-      #### Fill or Outline class required
-      All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
-      #### CTA replaced by Accent with Fill
-      Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
+      Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
+      - Outline buttons are no longer available in accent and negative options — use the filled variant instead.
+      - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
+      - The `.spectrum-Button--fill` class is no longer needed and has been removed.
+
+      The following `--mod` custom properties have been renamed:
+      - `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+      - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`.
+
+      ### Version 11.0.0
+      #### Remove focus-ring class
+      We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 
+      ### Version 10.0.0
       #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      #### T-shirt sizing
-      Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
       #### Change workflow icon size
-
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
       | Button classname           | Workflow icon classname           |
@@ -40,8 +40,17 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      #### Remove focus-ring class
-      We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
+      ### Version 6.0.0
+      #### Fill or Outline class required
+      All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
+
+      #### CTA replaced by Accent with Fill
+      Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
+
+      ### Version 3.0.0
+      #### T-shirt sizing
+      Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
+
 examples:
   - id: button-accent
     name: Sizing
@@ -50,18 +59,18 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS">
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS">
             <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -70,18 +79,18 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--accent">
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--accent">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -91,18 +100,18 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL">
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL">
             <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -112,18 +121,18 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL">
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL">
             <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -136,18 +145,18 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
+          <button class="spectrum-Button spectrum-Button--accent" disabled>
             <span class="spectrum-Button-label">Button</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
+          <button class="spectrum-Button spectrum-Button--accent" disabled>
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
+          <button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -182,18 +191,18 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent">
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
@@ -248,18 +257,18 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled>
             <span class="spectrum-Button-label">Button</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled>
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>