From 902d0216dc0e91416553d1a8a9dd70aad54eccc4 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 1 Oct 2025 10:20:21 -0400 Subject: [PATCH] feat(accordion): remove modifiers; simplify selectors --- .changeset/big-glasses-check.md | 11 + .cursor/rules/github-description.mdc | 221 ++++++++++++++++++ components/accordion/dist/metadata.json | 50 +--- components/accordion/index.css | 107 +++++---- .../accordion/stories/accordion.stories.js | 2 +- 5 files changed, 286 insertions(+), 105 deletions(-) create mode 100644 .changeset/big-glasses-check.md diff --git a/.changeset/big-glasses-check.md b/.changeset/big-glasses-check.md new file mode 100644 index 00000000000..aaf27a0d5ac --- /dev/null +++ b/.changeset/big-glasses-check.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/accordion": major +--- + +This update removes `--mod-accordion-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. + +- Remove all `--mod-accordion-*` custom property hooks. +- Keep existing class selectors and variants (e.g., `.spectrum-Accordion--compact`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--quiet`, `.is-open`, `.is-disabled`) unchanged. +- Update stories to reflect the removal of the `--mod-accordion-*` override layer. + +Breaking change: the `--mod-accordion-*` override layer is removed. Consumers should set `--spectrum-accordion-*` variables directly where customization is needed. diff --git a/.cursor/rules/github-description.mdc b/.cursor/rules/github-description.mdc index b3de3947ee9..ed717670e5c 100644 --- a/.cursor/rules/github-description.mdc +++ b/.cursor/rules/github-description.mdc @@ -1,3 +1,224 @@ +--- +description: Writing a GitHub pull request +alwaysApply: false +--- +# GitHub description guidelines + +Note for Cursor: If a ticket (GitHub issue or Jira ticket) is not provided by the prompt, prompt the user to supply one before generating the description or pull request content. + +When prompted to create a GitHub description, output the following: + +- Title +- Labels +- Description + +Output results in the chat window in a way that can be copied and pasted into GitHub. + +## GitHub markdown formatting rules + +Use these syntax rules when writing GitHub descriptions: + +- `##` through `######` - Headings (use `##` for main, `###` for secondary, etc.) +- `**text**` - Bold text +- `` `code` `` - Inline code +- ```` ```language` ``` - Language-specific code blocks +- `[text](url)` - Links +- `-` - Bullet points +- `1.` - Numbered list items +- `>` - Blockquotes for important notes +- `~~text~~` - Strikethrough for deprecated content + +## Title format + +- Use the format: `[Component] Brief description of change or issue` +- Keep titles concise but descriptive (under 80 characters) +- Use present tense for the description (e.g., "Add" not "Added") +- For PRs, include the component name in brackets if applicable + +## Description structure + +- Present title, labels, and type before description content +- Include links to related issues, RFCs, or documentation when applicable +- All descriptions must include clear acceptance criteria or expected outcomes +- Provide enough context so anyone can understand the objective +- Use prefixes in titles: [Bug], [Fix], [Docs], [Refactor], [Research], [S2], [Test] + +Examples: + +- [bug]: +- [Bug(component)]: +- [fix]: +- [Fix(component)]: +- [docs]: +- [Docs(component)]: + +## Severity classification + +- SEV1: Critical - System down, data loss, security breach +- SEV2: High - Major feature broken, significant user impact +- SEV3: Medium - Feature partially broken, moderate impact +- SEV4: Low - Minor issues, minimal user impact +- SEV5: Trivial - Cosmetic issues, no functional impact + +## Best practices + +- Link to relevant issues using the format: `#issue-number` +- Include component name in brackets if applicable: `[sp-button]` +- Add relevant labels for easier filtering +- Attach screenshots or videos for visual changes +- Reference design specs or documentation when available +- Use descriptive commit messages when linking to PRs +- Include reproduction steps for bugs +- Add environment information when relevant + +## Acceptance criteria + +- Write criteria in "Given/When/Then" format +- Make criteria specific and testable +- Include edge cases and error scenarios +- Consider accessibility requirements +- Include performance considerations when relevant + +## Labels + +Use the following labels to categorize pull requests. Only use labels that exist in the repository: + +### Priority and release labels + +- `1.0.0`: Issues that should be addressed for a 1.0 release +- `2.0.0`: Issues for 2.0 release +- `Breaking`: Breaking changes + +### Platform and browser labels + +- `Android`: Android-specific issues +- `Browser: Chrome`: Chrome browser issues +- `Browser: Edge (Legacy)`: Issue with pre-chromium Edge +- `Browser: FireFox`: Firefox browser issues +- `Browser: Safari`: Safari browser issues + +### Development and process labels + +- `a11y`: Issues related to accessibility +- `API`: Changes to component APIs or interfaces + +### Additional labels (partial list) + +Note: The repository has 160 labels total. For a complete list, visit [https://github.com/adobe/spectrum-web-components/labels](https://github.com/adobe/spectrum-web-components/labels) + +Common additional labels include: + +- `chore`: Routine tasks, maintenance, or non-feature changes +- `dependencies`: Updates or changes to project dependencies +- `docs`: Documentation updates or improvements +- `enhancement`: Improvements to existing features +- `feature`: New feature implementations +- `i18n`: Internationalization and localization work +- `iOS`: iOS-specific issues and bugs +- `mobile`: Mobile platform issues and responsive design +- `performance`: Performance-related improvements or regressions +- `refactor`: Code restructuring and refactoring work +- `regression`: Previously working functionality that is now broken +- `release`: Release process or versioning changes +- `research`: Tasks requiring investigation or research +- `RFC`: Request for Comments or design discussions +- `testing`: Test implementation or testing infrastructure work + +## Pull request guidelines + +- Use conventional commit messages +- Keep PRs focused and small when possible +- Include tests for new features +- Update documentation when APIs change +- Add screenshots for visual changes +- Link to related issues using keywords like "Fixes #123" or "Closes #456" +- Request reviews from appropriate team members +- Use draft PRs for work in progress + +## Templates + +### Pull request template + +**Note:** All pull requests should include the `ready-for-review` label. + +**When returning the template, check off the author requirements in the Author's checklist section. Do not check off the Manual review test cases or Device review sections as these are for reviewers to complete.** + +```markdown + + +## Description + + + +## Motivation and context + + + +## Related issue(s) + + + +- fixes [Issue Number] + +## Screenshots (if appropriate) + + +## Author's checklist + + + +- [ ] I have read the **[CONTRIBUTING](<(https://github.com/adobe/spectrum-web-components/blob/main/CONTRIBUTING.md)>)** and **[PULL_REQUESTS](<(https://github.com/adobe/spectrum-web-components/blob/main/PULL_REQUESTS.md)>)** documents. +- [ ] I have reviewed at the Accessibility Practices for this feature, see: [Aria Practices](https://www.w3.org/TR/wai-aria-practices/) +- [ ] I have added automated tests to cover my changes. +- [ ] I have included a well-written changeset if my change needs to be published. +- [ ] I have included updated documentation if my change required it. + + +## Reviewer's checklist + +- [ ] Includes a Github Issue with appropriate flag or Jira ticket number without a link +- [ ] Includes thoughtfully written changeset if changes suggested include `patch`, `minor`, or `major` features +- [ ] Automated tests cover all use cases and follow best practices for writing +- [ ] Validated on all supported browsers +- [ ] All VRTs are approved before the author can update Golden Hash + +### Manual review test cases + + + +- [ ] _Descriptive Test Statement_ + + 1. Go [here](url) + 2. Do this action + 3. Expect this result + +- [ ] _Descriptive Test Statement_ + 1. Go [here](url) + 2. Do this action + 3. Expect this result + +### Device review + + + +- [ ] Did it pass in Desktop? +- [ ] Did it pass in (emulated) Mobile? +- [ ] Did it pass in (emulated) iPad? + +``` # GitHub description guidelines Note for Cursor: If a ticket (GitHub issue or Jira ticket) is not provided by the prompt, prompt the user to supply one before generating the description or pull request content. diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index a1f60da66a6..149c2ecc5c8 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -37,55 +37,7 @@ ".spectrum-Accordion:lang(ko)", ".spectrum-Accordion:lang(zh)" ], - "modifiers": [ - "--mod-accordion-animation-duration", - "--mod-accordion-background-color-default", - "--mod-accordion-background-color-down", - "--mod-accordion-background-color-hover", - "--mod-accordion-background-color-key-focus", - "--mod-accordion-content-padding-inline", - "--mod-accordion-corner-radius", - "--mod-accordion-disclosure-indicator-height", - "--mod-accordion-disclosure-indicator-to-text-space", - "--mod-accordion-divider-color", - "--mod-accordion-divider-thickness", - "--mod-accordion-edge-to-content-area", - "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", - "--mod-accordion-item-content-area-bottom-to-content", - "--mod-accordion-item-content-area-top-to-content", - "--mod-accordion-item-content-color", - "--mod-accordion-item-content-disabled-color", - "--mod-accordion-item-content-font", - "--mod-accordion-item-content-font-size", - "--mod-accordion-item-content-font-style", - "--mod-accordion-item-content-font-weight", - "--mod-accordion-item-content-line-height", - "--mod-accordion-item-direct-actions-height", - "--mod-accordion-item-direct-actions-spacing", - "--mod-accordion-item-direct-actions-vertical-spacing", - "--mod-accordion-item-focus-indicator-color", - "--mod-accordion-item-focus-indicator-gap", - "--mod-accordion-item-focus-indicator-thickness", - "--mod-accordion-item-header-bottom-to-text-space", - "--mod-accordion-item-header-color-default", - "--mod-accordion-item-header-color-down", - "--mod-accordion-item-header-color-hover", - "--mod-accordion-item-header-color-key-focus", - "--mod-accordion-item-header-disabled-color", - "--mod-accordion-item-header-font", - "--mod-accordion-item-header-font-size", - "--mod-accordion-item-header-font-style", - "--mod-accordion-item-header-font-weight", - "--mod-accordion-item-header-line-height", - "--mod-accordion-item-header-to-direct-actions-space", - "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-min-block-size", - "--mod-accordion-item-minimum-height", - "--mod-accordion-item-minimum-width", - "--mod-accordion-item-width", - "--mod-accordion-top-to-disclosure-indicator" - ], + "modifiers": [], "component": [ "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", diff --git a/components/accordion/index.css b/components/accordion/index.css index e9372ab6543..2c2bc4e8c15 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -54,29 +54,26 @@ /* Colors */ /* @TODO: use opacity tokens when available */ - --spectrum-accordion-background-color-default: var(--mod-accordion-background-color-default, var(--spectrum-transparent-black-25)); - --spectrum-accordion-background-color-hover: var(--mod-accordion-background-color-hover, var(--spectrum-transparent-black-100)); - --spectrum-accordion-background-color-down: var(--mod-accordion-background-color-down, var(--spectrum-transparent-black-300)); - --spectrum-accordion-background-color-key-focus: var(--mod-accordion-background-color-key-focus, var(--spectrum-transparent-black-100)); + --spectrum-accordion-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-accordion-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-accordion-background-color-down: var(--spectrum-transparent-black-300); + --spectrum-accordion-background-color-key-focus: var(--spectrum-transparent-black-100); - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); - --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); - --spectrum-accordion-item-focus-indicator-color: var(--mod-accordion-item-focus-indicator-color, var(--spectrum-focus-indicator-color)); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-color-default, var(--spectrum-neutral-content-color-default)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-color-hover, var(--spectrum-neutral-content-color-hover)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-color-down, var(--spectrum-neutral-content-color-down)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); + --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); /* Calculated minimum block-size that accounts for density spacing changes and/or increases in font size and line-height. This gives us the block-size of the header with a single line of text. */ - --spectrum-accordion-item-min-block-size: max( - var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)), - var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))) - ); + --spectrum-accordion-item-min-block-size: max(var(--spectrum-accordion-item-minimum-height), var(--spectrum-accordion-item-header-top-to-text-space) + var(--spectrum-accordion-item-header-bottom-to-text-space) + (var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height))); /* Calculated vertical spacing for action button and switch to center them within the accordion item */ - --spectrum-accordion-item-direct-actions-vertical-spacing: calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2); + --spectrum-accordion-item-direct-actions-vertical-spacing: calc((var(--spectrum-accordion-item-min-block-size) - var(--spectrum-accordion-item-direct-actions-height)) / 2); /* Right-to-left adjustments for transforms */ &:dir(rtl) { @@ -209,11 +206,11 @@ --spectrum-accordion-background-color-hover: transparent; --spectrum-accordion-background-color-down: transparent; --spectrum-accordion-background-color-key-focus: transparent; - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-content-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-default: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-hover: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-down: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-key-focus: var(--spectrum-disabled-content-color); } .spectrum-Accordion.spectrum-Accordion--noInlinePadding { @@ -232,13 +229,13 @@ z-index: inherit; position: relative; margin: 0; - min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); - min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); - inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); - border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + min-block-size: var(--spectrum-accordion-item-min-block-size); + min-inline-size: var(--spectrum-accordion-item-minimum-width); + inline-size: var(--spectrum-accordion-item-width); + border-block-end: var(--spectrum-accordion-divider-thickness) solid var(--spectrum-accordion-divider-color); &:first-child { - border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + border-block-start: var(--spectrum-accordion-divider-thickness) solid var(--spectrum-accordion-divider-color); } } @@ -250,25 +247,25 @@ } .spectrum-Accordion-itemIndicator { - inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); + inline-size: var(--spectrum-accordion-disclosure-indicator-height); + block-size: var(--spectrum-accordion-disclosure-indicator-height); transform: var(--spectrum-logical-rotation); - transition: transform ease var(--mod-accordion-animation-duration, var(--spectrum-accordion-animation-duration)); + transition: transform ease var(--spectrum-accordion-animation-duration); flex-shrink: 0; - margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); - margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); + margin-block-start: var(--spectrum-accordion-top-to-disclosure-indicator); + margin-inline: var(--spectrum-accordion-edge-to-disclosure-indicator-space) var(--spectrum-accordion-disclosure-indicator-to-text-space); } .spectrum-Accordion-itemContent { display: none; - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-content-padding-inline, var(--spectrum-accordion-content-padding-inline)); + padding-block: var(--spectrum-accordion-item-content-area-top-to-content) var(--spectrum-accordion-item-content-area-bottom-to-content); + padding-inline: var(--spectrum-accordion-content-padding-inline); color: var(--spectrum-accordion-item-content-color); - font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); - font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); - font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); - font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font)); - line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); + font-weight: var(--spectrum-accordion-item-content-font-weight); + font-style: var(--spectrum-accordion-item-content-font-style); + font-size: var(--spectrum-accordion-item-content-font-size); + font-family: var(--spectrum-accordion-item-content-font); + line-height: var(--spectrum-accordion-item-content-line-height); } .spectrum-Accordion-itemTitle { @@ -276,10 +273,10 @@ display: flex; align-items: center; - min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); + min-block-size: var(--spectrum-accordion-item-min-block-size); box-sizing: border-box; /* respect min-block-size but include padding */ - padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); + padding-block: var(--spectrum-accordion-item-header-top-to-text-space) var(--spectrum-accordion-item-header-bottom-to-text-space); + padding-inline-end: var(--spectrum-accordion-edge-to-text-space); } /* Focusable button that expands/collapses the accordion item. */ @@ -293,16 +290,16 @@ justify-content: flex-start; /* start spacing controlled by edge to disclosure icon spacing */ - padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + padding-inline: 0 var(--spectrum-accordion-edge-to-content-area); padding-block: 0; /* reset user-agent styles */ - line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); + line-height: var(--spectrum-accordion-item-header-line-height); text-overflow: ellipsis; cursor: var(--spectrum-accordion-item-header-cursor); - font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); - font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); - font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); - font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); + font-size: var(--spectrum-accordion-item-header-font-size); + font-weight: var(--spectrum-accordion-item-header-font-weight); + font-style: var(--spectrum-accordion-item-header-font-style); + font-family: var(--spectrum-accordion-item-header-font); /* Reset styling of button element */ appearance: none; @@ -319,11 +316,11 @@ } &:focus-visible { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: var(--spectrum-accordion-corner-radius); background-color: var(--spectrum-accordion-background-color-key-focus); color: var(--spectrum-accordion-item-header-color-key-focus); - outline: var(--mod-accordion-item-focus-indicator-thickness, var(--spectrum-accordion-item-focus-indicator-thickness)) solid var(--spectrum-accordion-item-focus-indicator-color); - outline-offset: var(--mod-accordion-item-focus-indicator-gap, var(--spectrum-accordion-item-focus-indicator-gap)); + outline: var(--spectrum-accordion-item-focus-indicator-thickness) solid var(--spectrum-accordion-item-focus-indicator-color); + outline-offset: var(--spectrum-accordion-item-focus-indicator-gap); } /* higher specificity to maintain active styles over @media hover styles */ @@ -334,17 +331,17 @@ &:has(+ .spectrum-Accordion-itemDirectActions) { /* set spacing between header and direct actions, whether or not noInlinePadding variant is used */ - margin-inline-end: var(--mod-accordion-item-header-to-direct-actions-space, var(--spectrum-accordion-item-header-to-direct-actions-space)); + margin-inline-end: var(--spectrum-accordion-item-header-to-direct-actions-space); } } .spectrum-Accordion-itemDirectActions { - margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + margin-inline-end: var(--spectrum-accordion-edge-to-content-area); display: inline-flex; - gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); + gap: var(--spectrum-accordion-item-direct-actions-spacing); /* margin needs to be set on top and bottom to keep compact XL items vertically centered and prevent them from growing vertically */ - margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); + margin-block: var(--spectrum-accordion-item-direct-actions-vertical-spacing); } .spectrum-Accordion-item.is-open { @@ -360,7 +357,7 @@ .spectrum-Accordion--quiet .spectrum-Accordion-itemHeader { &:hover, &:active { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: var(--spectrum-accordion-corner-radius); } } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index fea676f489e..1b19feee243 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -161,7 +161,7 @@ CustomWidth.storyName = "Custom width"; CustomWidth.args = { items: longerContent, customStyles: { - "--mod-accordion-item-width": "auto", + "--spectrum-accordion-item-width": "auto", }, }; CustomWidth.parameters = {