Skip to content

[POC] Removing modifiers #4187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: spectrum-two
Choose a base branch
from
+4,398 −7,476
Draft

[POC] Removing modifiers #4187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a863cc4
feat: remove modifiers from the API
castastrophe Aug 29, 2025
7584670
feat(commons): remove need for commons package
castastrophe Sep 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .changeset/pre.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"@spectrum-css/colorslider": "8.0.1",
"@spectrum-css/colorwheel": "6.0.1",
"@spectrum-css/combobox": "4.0.1",
"@spectrum-css/commons": "11.0.0",
"@spectrum-css/contextualhelp": "5.0.1",
"@spectrum-css/datepicker": "4.0.1",
"@spectrum-css/dial": "5.0.1",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/blocks/ColorPalette.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard
<SwatchSet
className="swatch-set"
key={`${color}-${value}`}
style={{ "--mod-swatch-size": `${size}px` }}
style={{ "--spectrum-swatch-size": `${size}px` }}
>
<Body className="swatch-label" size="s">
{value}
Expand Down
21 changes: 13 additions & 8 deletions .storybook/blocks/PropertiesTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import React, { useContext } from 'react';
import { Table } from "./Layouts.jsx";
import { ThemeContainer } from "./ThemeContainer.jsx";
import { Body, Code, LinkableHeading } from "./Typography.jsx";
import styles from "@spectrum-css/bundle/dist/index.module.css";

/**
* Displays the modifiable custom properties for a component based on the metadata provided in the story.
* The story metadata object is imported from the "metadata.json" file in the component's directory.
*
* If the metadata object does not contain a "modifiers" array, this component will not render.
* If the metadata object does not contain a "component" array, this component will not render.
*
* Usage of this doc block within MDX template(s):
* <PropertiesTable />
Expand All @@ -23,14 +22,20 @@ export const PropertiesTable = () => {
const metadata = storyMeta?.csfFile?.meta?.parameters?.metadata ?? {};

if (!packageJson?.name) return;
if (!metadata?.modifiers || !metadata?.modifiers.length) return;
if (!metadata?.component || !metadata?.component.length) return;

return (
<ThemeContainer color="light" display="contents">
<LinkableHeading id="modifiable-properties" size="m">
<a aria-hidden="true" href="#modifiable-properties" tabIndex="-1" target="_self" onClick={() => {
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
}}></a>
<a
aria-hidden="true"
href="#modifiable-properties"
tabIndex="-1"
target="_self"
onClick={() => {
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
}}
></a>
Modifiable custom properties
</LinkableHeading>
<Body>
Expand All @@ -39,10 +44,10 @@ export const PropertiesTable = () => {
</Body>
<Table
headers={["Property"]}
rows={metadata?.modifiers.map((propertyName) => [
rows={metadata?.component.map((propertyName) => [
<Code backgroundColor={"transparent"} size="s">
{propertyName}
</Code>
</Code>,
])}
/>
</ThemeContainer>
Expand Down
18 changes: 9 additions & 9 deletions .storybook/foundations/drop-shadow/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ governing permissions and limitations under the License.
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
var(--spectrum-drop-shadow-emphasized-default-blur)
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
var(--spectrum-drop-shadow-emphasized-default-color);
}

.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-default-x)
var(--spectrum-drop-shadow-emphasized-default-y)
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
var(--spectrum-drop-shadow-emphasized-default-color)
);
}

Expand All @@ -46,23 +46,23 @@ governing permissions and limitations under the License.
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
}

.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
box-shadow:
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
var(--spectrum-drop-shadow-emphasized-hover-blur)
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
var(--spectrum-drop-shadow-emphasized-hover-color);
}

.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-emphasized-hover-x)
var(--spectrum-drop-shadow-emphasized-hover-y)
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
var(--spectrum-drop-shadow-emphasized-hover-color)
);
}

Expand All @@ -71,23 +71,23 @@ governing permissions and limitations under the License.
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
}

.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
box-shadow:
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
var(--spectrum-drop-shadow-elevated-blur)
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
var(--spectrum-drop-shadow-elevated-color);
}

.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
filter: drop-shadow(
var(--spectrum-drop-shadow-elevated-x)
var(--spectrum-drop-shadow-elevated-y)
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
var(--spectrum-drop-shadow-elevated-color)
);
}

Expand All @@ -96,7 +96,7 @@ governing permissions and limitations under the License.
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
/* adjustment because color tokens do not work properly on foundations pages */
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
}

.spectrum-Foundations-Example-swatch-container {
Expand Down
2 changes: 1 addition & 1 deletion .storybook/guides/releasing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks";

This project versions components independently, meaning each component has its own version number, updated independently of other components. We follow [semantic versioning](https://semver.org/) and as such, each release is versioned according to the following rules:

- **Major**: Breaking changes such as API changes, the removal of features, or changes to `--mod` custom properties
- **Major**: Breaking changes such as API changes, the removal of features, or changes to custom properties
- **Minor**: New features or enhancements
- **Patch**: Bug fixes or minor improvements

Expand Down
129 changes: 27 additions & 102 deletions components/accordion/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,48 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Accordion",
".spectrum-Accordion--compact",
".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
".spectrum-Accordion--quiet",
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active",
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover",
".spectrum-Accordion--sizeL",
".spectrum-Accordion--sizeS",
".spectrum-Accordion--sizeXL",
".spectrum-Accordion--spacious",
".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:is(:hover, :active)",
".spectrum-Accordion-item",
".spectrum-Accordion-item.is-disabled",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent:is(:hover, :active, :focus-visible)",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:is(:hover, :active, :focus-visible)",
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
".spectrum-Accordion-item:first-child",
".spectrum-Accordion-itemContent",
".spectrum-Accordion-itemDirectActions",
".spectrum-Accordion-itemHeader",
".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
".spectrum-Accordion-itemHeader:active",
".spectrum-Accordion-itemHeader:focus-visible",
".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)",
".spectrum-Accordion-itemHeader:hover",
".spectrum-Accordion-itemHeading",
".spectrum-Accordion-itemIndicator",
".spectrum-Accordion-itemTitle",
".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
".spectrum-Accordion:dir(rtl)",
".spectrum-Accordion:lang(ja)",
".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"
".spectrum-Accordion.is-open:dir(rtl) > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
".spectrum-Accordion:dir(rtl) .spectrum-Accordion-itemIndicator",
".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemContent",
".spectrum-Accordion:lang(ja) .spectrum-Accordion-itemHeader",
".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemContent",
".spectrum-Accordion:lang(ko) .spectrum-Accordion-itemHeader",
".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemContent",
".spectrum-Accordion:lang(zh) .spectrum-Accordion-itemHeader",
".spectrum-Accordion:where(.spectrum-Accordion--compact)",
".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeL)",
".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeS)",
".spectrum-Accordion:where(.spectrum-Accordion--compact):where(.spectrum-Accordion--sizeXL)",
".spectrum-Accordion:where(.spectrum-Accordion--noInlinePadding)",
".spectrum-Accordion:where(.spectrum-Accordion--quiet)",
".spectrum-Accordion:where(.spectrum-Accordion--sizeL)",
".spectrum-Accordion:where(.spectrum-Accordion--sizeS)",
".spectrum-Accordion:where(.spectrum-Accordion--sizeXL)",
".spectrum-Accordion:where(.spectrum-Accordion--spacious)",
".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeL)",
".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeS)",
".spectrum-Accordion:where(.spectrum-Accordion--spacious):where(.spectrum-Accordion--sizeXL)"
],
"component": [
"--spectrum-accordion-animation-duration",
"--spectrum-accordion-background-color-default",
"--spectrum-accordion-background-color-down",
"--spectrum-accordion-background-color-hover",
"--spectrum-accordion-background-color-key-focus",
"--spectrum-accordion-bottom-to-text-compact-extra-large",
"--spectrum-accordion-bottom-to-text-compact-large",
"--spectrum-accordion-bottom-to-text-compact-medium",
Expand All @@ -118,7 +70,6 @@
"--spectrum-accordion-disclosure-indicator-to-text-medium",
"--spectrum-accordion-disclosure-indicator-to-text-small",
"--spectrum-accordion-disclosure-indicator-to-text-space",
"--spectrum-accordion-divider-color",
"--spectrum-accordion-divider-thickness",
"--spectrum-accordion-edge-to-content-area",
"--spectrum-accordion-edge-to-content-area-extra-large",
Expand All @@ -127,37 +78,12 @@
"--spectrum-accordion-edge-to-content-area-small",
"--spectrum-accordion-edge-to-disclosure-indicator-space",
"--spectrum-accordion-edge-to-text",
"--spectrum-accordion-edge-to-text-space",
"--spectrum-accordion-item-content-area-bottom-to-content",
"--spectrum-accordion-item-content-area-top-to-content",
"--spectrum-accordion-item-content-color",
"--spectrum-accordion-item-content-font",
"--spectrum-accordion-item-content-font-size",
"--spectrum-accordion-item-content-font-style",
"--spectrum-accordion-item-content-font-weight",
"--spectrum-accordion-item-content-line-height",
"--spectrum-accordion-item-direct-actions-height",
"--spectrum-accordion-item-direct-actions-spacing",
"--spectrum-accordion-item-direct-actions-vertical-spacing",
"--spectrum-accordion-item-focus-indicator-color",
"--spectrum-accordion-item-focus-indicator-gap",
"--spectrum-accordion-item-focus-indicator-thickness",
"--spectrum-accordion-item-header-bottom-to-text-space",
"--spectrum-accordion-item-header-color-default",
"--spectrum-accordion-item-header-color-down",
"--spectrum-accordion-item-header-color-hover",
"--spectrum-accordion-item-header-color-key-focus",
"--spectrum-accordion-item-header-cursor",
"--spectrum-accordion-item-header-font",
"--spectrum-accordion-item-header-font-size",
"--spectrum-accordion-item-header-font-style",
"--spectrum-accordion-item-header-font-weight",
"--spectrum-accordion-item-header-line-height",
"--spectrum-accordion-item-header-to-direct-actions-space",
"--spectrum-accordion-item-header-top-to-text-space",
"--spectrum-accordion-item-min-block-size",
"--spectrum-accordion-item-minimum-height",
"--spectrum-accordion-item-minimum-width",
"--spectrum-accordion-item-width",
"--spectrum-accordion-minimum-width",
"--spectrum-accordion-top-to-disclosure-indicator",
Expand Down Expand Up @@ -230,7 +156,6 @@
"--spectrum-font-size-400",
"--spectrum-gray-200",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
Expand Down
Loading
Loading