Skip to content

Commit 5b4bd5f

Browse files
authored
feat(asset): remove modifiers from the API [SWC-1264] (#4257)
1 parent 99c577c commit 5b4bd5f

File tree

4 files changed

+12
-36
lines changed

4 files changed

+12
-36
lines changed

.changeset/big-glasses-check.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"@spectrum-css/accordion": major
33
"@spectrum-css/actionbar": major
44
"@spectrum-css/actiongroup": major
5+
"@spectrum-css/asset": major
56
"@spectrum-css/well": major
67
---
78

components/asset/dist/metadata.json

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,13 @@
1010
".spectrum-Asset-folderOutline",
1111
".spectrum-Asset-image"
1212
],
13-
"modifiers": [
14-
"--mod-asset-file-background-color",
15-
"--mod-asset-folder-background-color",
16-
"--mod-asset-icon-margin",
17-
"--mod-asset-icon-max-width",
18-
"--mod-asset-icon-min-width",
19-
"--mod-asset-icon-outline-color"
20-
],
21-
"component": [
22-
"--spectrum-asset-file-background",
23-
"--spectrum-asset-file-outline",
24-
"--spectrum-asset-folder-background",
25-
"--spectrum-asset-folder-outline"
26-
],
13+
"modifiers": [],
14+
"component": [],
2715
"global": [
28-
"--spectrum-animation-duration-100",
2916
"--spectrum-gray-200",
3017
"--spectrum-gray-25",
3118
"--spectrum-gray-500"
3219
],
3320
"passthroughs": [],
34-
"high-contrast": ["--highcontrast-asset-icon-background-color"]
21+
"high-contrast": []
3522
}

components/asset/index.css

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@
1212
*/
1313

1414
.spectrum-Asset {
15-
--spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)));
16-
--spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)));
17-
--spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
18-
--spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
19-
2015
display: flex;
2116
align-items: center;
2217
justify-content: center;
@@ -29,34 +24,27 @@
2924
max-inline-size: 100%;
3025
max-block-size: 100%;
3126
object-fit: contain;
32-
transition: opacity var(--spectrum-animation-duration-100);
3327
}
3428

3529
.spectrum-Asset-folder,
3630
.spectrum-Asset-file {
37-
inline-size: clamp(var(--mod-asset-icon-min-width, 48px), 100%, var(--mod-asset-icon-max-width, 80px));
31+
inline-size: clamp(48px, 100%, 80px);
3832
block-size: 100%;
39-
margin: var(--mod-asset-icon-margin, 20px);
33+
margin: 20px;
4034
}
4135

4236
.spectrum-Asset-folderBackground {
43-
fill: var(--spectrum-asset-folder-background);
37+
fill: var(--spectrum-gray-200);
4438
}
4539

4640
.spectrum-Asset-fileBackground {
47-
fill: var(--spectrum-asset-file-background);
41+
fill: var(--spectrum-gray-25);
4842
}
4943

5044
.spectrum-Asset-folderOutline {
51-
fill: var(--spectrum-asset-folder-outline);
45+
fill: var(--spectrum-gray-500);
5246
}
5347

5448
.spectrum-Asset-fileOutline {
55-
fill: var(--spectrum-asset-file-outline);
56-
}
57-
58-
@media (forced-colors: active) {
59-
.spectrum-Asset {
60-
--highcontrast-asset-icon-background-color: currentColor;
61-
}
49+
fill: var(--spectrum-gray-500);
6250
}

components/asset/stories/asset.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ export default {
3939
packageJson,
4040
metadata,
4141
status: {
42-
type: "unmigrated",
42+
type: "migrated",
4343
},
4444
},
45-
tags: ["unmigrated"],
45+
tags: ["migrated"],
4646
};
4747

4848
export const Default = AssetGroup.bind({});

0 commit comments

Comments
 (0)