Skip to content

Commit 21c4ee4

Browse files
castastrophecastastrophe
committed
feat: remove modifiers from the API
1 parent e71278b commit 21c4ee4

File tree

210 files changed

+3717
-6195
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

210 files changed

+3717
-6195
lines changed

‎.storybook/blocks/ColorPalette.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard
5252
<SwatchSet
5353
className="swatch-set"
5454
key={`${color}-${value}`}
55-
style={{ "--mod-swatch-size": `${size}px` }}
55+
style={{ "--spectrum-swatch-size": `${size}px` }}
5656
>
5757
<Body className="swatch-label" size="s">
5858
{value}

‎.storybook/blocks/PropertiesTable.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import React, { useContext } from 'react';
44
import { Table } from "./Layouts.jsx";
55
import { ThemeContainer } from "./ThemeContainer.jsx";
66
import { Body, Code, LinkableHeading } from "./Typography.jsx";
7-
import styles from "@spectrum-css/bundle/dist/index.module.css";
87

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

2524
if (!packageJson?.name) return;
26-
if (!metadata?.modifiers || !metadata?.modifiers.length) return;
25+
if (!metadata?.component || !metadata?.component.length) return;
2726

2827
return (
2928
<ThemeContainer color="light" display="contents">
3029
<LinkableHeading id="modifiable-properties" size="m">
31-
<a aria-hidden="true" href="#modifiable-properties" tabIndex="-1" target="_self" onClick={() => {
32-
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
33-
}}></a>
30+
<a
31+
aria-hidden="true"
32+
href="#modifiable-properties"
33+
tabIndex="-1"
34+
target="_self"
35+
onClick={() => {
36+
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
37+
}}
38+
></a>
3439
Modifiable custom properties
3540
</LinkableHeading>
3641
<Body>
@@ -39,10 +44,10 @@ export const PropertiesTable = () => {
3944
</Body>
4045
<Table
4146
headers={["Property"]}
42-
rows={metadata?.modifiers.map((propertyName) => [
47+
rows={metadata?.component.map((propertyName) => [
4348
<Code backgroundColor={"transparent"} size="s">
4449
{propertyName}
45-
</Code>
50+
</Code>,
4651
])}
4752
/>
4853
</ThemeContainer>

‎.storybook/foundations/drop-shadow/index.css‎

Lines changed: 27 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -13,103 +13,76 @@ governing permissions and limitations under the License.
1313
/* stylelint-disable spectrum-tools/no-unknown-custom-properties */
1414

1515
.spectrum-Foundations-Example-DropShadow-swatch {
16-
block-size: 150px;
17-
inline-size: 150px;
18-
background-color: var(--spectrum-gray-25);
19-
border-radius: var(--spectrum-corner-radius-large-default);
20-
border: transparent;
16+
block-size: 150px;
17+
inline-size: 150px;
18+
background-color: var(--spectrum-gray-25);
19+
border-radius: var(--spectrum-corner-radius-large-default);
20+
border: transparent;
2121
}
2222

2323
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch {
24-
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
24+
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
2525
}
2626

2727
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow {
28-
box-shadow:
29-
var(--spectrum-drop-shadow-emphasized-default-x)
30-
var(--spectrum-drop-shadow-emphasized-default-y)
31-
var(--spectrum-drop-shadow-emphasized-default-blur)
32-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
28+
box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--spectrum-drop-shadow-emphasized-default-color);
3329
}
3430

3531
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
36-
filter: drop-shadow(
37-
var(--spectrum-drop-shadow-emphasized-default-x)
38-
var(--spectrum-drop-shadow-emphasized-default-y)
39-
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
40-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
41-
);
32+
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(--spectrum-drop-shadow-emphasized-default-color));
4233
}
4334

4435
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
4536
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
4637
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
4738
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
48-
/* adjustment because color tokens do not work properly on foundations pages */
49-
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
39+
/* adjustment because color tokens do not work properly on foundations pages */
40+
--spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
5041
}
5142

5243
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
53-
box-shadow:
54-
var(--spectrum-drop-shadow-emphasized-hover-x)
55-
var(--spectrum-drop-shadow-emphasized-hover-y)
56-
var(--spectrum-drop-shadow-emphasized-hover-blur)
57-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
44+
box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--spectrum-drop-shadow-emphasized-hover-color);
5845
}
5946

6047
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
61-
filter: drop-shadow(
62-
var(--spectrum-drop-shadow-emphasized-hover-x)
63-
var(--spectrum-drop-shadow-emphasized-hover-y)
64-
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
65-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
66-
);
48+
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(--spectrum-drop-shadow-emphasized-hover-color));
6749
}
6850

6951
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
7052
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
7153
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
7254
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
73-
/* adjustment because color tokens do not work properly on foundations pages */
74-
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
55+
/* adjustment because color tokens do not work properly on foundations pages */
56+
--spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
7557
}
7658

7759
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
78-
box-shadow:
79-
var(--spectrum-drop-shadow-elevated-x)
80-
var(--spectrum-drop-shadow-elevated-y)
81-
var(--spectrum-drop-shadow-elevated-blur)
82-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
60+
box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--spectrum-drop-shadow-elevated-color);
8361
}
8462

8563
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
86-
filter: drop-shadow(
87-
var(--spectrum-drop-shadow-elevated-x)
88-
var(--spectrum-drop-shadow-elevated-y)
89-
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
90-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
91-
);
64+
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(--spectrum-drop-shadow-elevated-color));
9265
}
9366

9467
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
9568
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
9669
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
9770
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
98-
/* adjustment because color tokens do not work properly on foundations pages */
99-
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
71+
/* adjustment because color tokens do not work properly on foundations pages */
72+
--spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
10073
}
10174

10275
.spectrum-Foundations-Example-swatch-container {
103-
background-color: var(--spectrum-gray-25);
104-
block-size: 200px;
105-
inline-size: 300px;
106-
display: flex;
107-
align-items: center;
108-
justify-content: center;
76+
background-color: var(--spectrum-gray-25);
77+
block-size: 200px;
78+
inline-size: 300px;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
10982
}
11083

11184
.spectrum-Foundations-Example-variant-container {
112-
background-color: var(--spectrum-gray-25);
113-
display: flex;
114-
flex-direction: row;
85+
background-color: var(--spectrum-gray-25);
86+
display: flex;
87+
flex-direction: row;
11588
}

‎.storybook/guides/releasing.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks";
88

99
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:
1010

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

‎components/accordion/dist/metadata.json‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,55 +37,6 @@
3737
".spectrum-Accordion:lang(ko)",
3838
".spectrum-Accordion:lang(zh)"
3939
],
40-
"modifiers": [
41-
"--mod-accordion-animation-duration",
42-
"--mod-accordion-background-color-default",
43-
"--mod-accordion-background-color-down",
44-
"--mod-accordion-background-color-hover",
45-
"--mod-accordion-background-color-key-focus",
46-
"--mod-accordion-content-padding-inline",
47-
"--mod-accordion-corner-radius",
48-
"--mod-accordion-disclosure-indicator-height",
49-
"--mod-accordion-disclosure-indicator-to-text-space",
50-
"--mod-accordion-divider-color",
51-
"--mod-accordion-divider-thickness",
52-
"--mod-accordion-edge-to-content-area",
53-
"--mod-accordion-edge-to-disclosure-indicator-space",
54-
"--mod-accordion-edge-to-text-space",
55-
"--mod-accordion-item-content-area-bottom-to-content",
56-
"--mod-accordion-item-content-area-top-to-content",
57-
"--mod-accordion-item-content-color",
58-
"--mod-accordion-item-content-disabled-color",
59-
"--mod-accordion-item-content-font",
60-
"--mod-accordion-item-content-font-size",
61-
"--mod-accordion-item-content-font-style",
62-
"--mod-accordion-item-content-font-weight",
63-
"--mod-accordion-item-content-line-height",
64-
"--mod-accordion-item-direct-actions-height",
65-
"--mod-accordion-item-direct-actions-spacing",
66-
"--mod-accordion-item-direct-actions-vertical-spacing",
67-
"--mod-accordion-item-focus-indicator-color",
68-
"--mod-accordion-item-focus-indicator-gap",
69-
"--mod-accordion-item-focus-indicator-thickness",
70-
"--mod-accordion-item-header-bottom-to-text-space",
71-
"--mod-accordion-item-header-color-default",
72-
"--mod-accordion-item-header-color-down",
73-
"--mod-accordion-item-header-color-hover",
74-
"--mod-accordion-item-header-color-key-focus",
75-
"--mod-accordion-item-header-disabled-color",
76-
"--mod-accordion-item-header-font",
77-
"--mod-accordion-item-header-font-size",
78-
"--mod-accordion-item-header-font-style",
79-
"--mod-accordion-item-header-font-weight",
80-
"--mod-accordion-item-header-line-height",
81-
"--mod-accordion-item-header-to-direct-actions-space",
82-
"--mod-accordion-item-header-top-to-text-space",
83-
"--mod-accordion-item-min-block-size",
84-
"--mod-accordion-item-minimum-height",
85-
"--mod-accordion-item-minimum-width",
86-
"--mod-accordion-item-width",
87-
"--mod-accordion-top-to-disclosure-indicator"
88-
],
8940
"component": [
9041
"--spectrum-accordion-animation-duration",
9142
"--spectrum-accordion-background-color-default",

0 commit comments

Comments
 (0)