Skip to content

Commit

Permalink
fix: adjust more complex var whitespacing
Browse files Browse the repository at this point in the history
  • Loading branch information
@castastrophe
castastrophe committed Mar 22, 2024
1 parent 0cef269 commit 2c63ab0
Show file tree
Hide file tree
Showing 13 changed files with 248 additions and 594 deletions.
28 changes: 3 additions & 25 deletions .github/actions/file-diff/index.js
View file
Expand Up @@ -85,8 +85,6 @@ async function run() {
`**Total size**: ${bytesToSize(overallHeadSize)}<sup>*</sup>`,
];

let summaryTable = [];

if (sections.length === 0) {
summary.push(...["", " 🎉 No changes detected in any packages"]);
} else {
Expand All @@ -105,15 +103,11 @@ async function run() {
summary.push(
changeSummary,
"",
"<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed <a href=\"#details\">Details</a> section below.</em></small>",
""
);
}

markdown.push(
"<a name=\"details\"></a>",
`<details>`,
`<summary><b>Details</b></summary>`,
""
);

Expand Down Expand Up @@ -151,10 +145,6 @@ async function run() {
) {
data.push(printChange(headMainSize, baseMainSize));
}

if (data.length > 0) {
summaryTable.push([name, bytesToSize(headMainSize), data]);
}
}


Expand All @@ -180,7 +170,7 @@ async function run() {
isRemoved(headByteSize, baseByteSize) ? " - " : bytesToSize(headByteSize),
...(hasBase ? [
bytesToSize(baseByteSize),
isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
] : []),
]
];
Expand All @@ -193,18 +183,7 @@ async function run() {
markdown.push(...md);
});

markdown.push("", `</details>`);
}

if (summaryTable.length > 0) {
// Add the headings to the summary table if it contains data
summaryTable = [
["Package", "Size", ...(hasBase ? ["Δ"] : [])],
["-", "-", ...(hasBase ? ["-"] : [])],
...summaryTable,
];

summary.push(...summaryTable.map((row) => `| ${row.join(" | ")} |`));
markdown.push("");
}

markdown.push(
Expand Down Expand Up @@ -321,9 +300,8 @@ const makeTable = function (PACKAGES, filePath, path) {
// Check if a minified output of this file exists
if (existsSync(join(dirname(packagePath), main.replace(/\.css$/, ".min.css")))) {
mainFile = mainFile.replace(/\.css$/, ".min.css");
} else {

}
}
}

const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
Expand Down
8 changes: 7 additions & 1 deletion .prettierrc
View file
@@ -1,4 +1,10 @@
{
"tabWidth": 2,
"useTabs": true
"useTabs": true,
"overrides": [{
"files": ["*.css"],
"options": {
"printWidth": 500
}
}]
}
10 changes: 2 additions & 8 deletions components/asset/index.css
View file
Expand Up @@ -38,17 +38,11 @@ governing permissions and limitations under the License.
}

.spectrum-Asset-folderBackground {
fill: var(
--highcontrast-asset-folder-background-color,
var(--mod-asset-folder-background-color, var(--spectrum-gray-300))
);
fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-300)));
}

.spectrum-Asset-fileBackground {
fill: var(
--highcontrast-asset-file-background-color,
var(--mod-asset-file-background-color, var(--spectrum-gray-50))
);
fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-50)));
}

.spectrum-Asset-folderOutline,
Expand Down
137 changes: 39 additions & 98 deletions components/card/index.css
View file
Expand Up @@ -107,14 +107,8 @@ governing permissions and limitations under the License.
border: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid
transparent;
border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
border-color: var(
--highcontrast-card-border-color,
var(--mod-card-border-color, var(--spectrum-card-border-color))
);
background-color: var(
--highcontrast-card-background-color,
var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color))
);
border-color: var(--highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color)));
background-color: var(--highcontrast-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color)));

&::before {
content: "";
Expand Down Expand Up @@ -178,17 +172,12 @@ governing permissions and limitations under the License.
}

&:hover {
border-color: var(
--highcontrast-card-border-color-hover,
var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover))
);
border-color: var(--highcontrast-card-border-color-hover, var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)));
}

&.is-selected {
border-color: var(
--highcontrast-card-border-color-selected,
var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))
);
border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));

&::before {
background-color: rgba(
var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)),
Expand All @@ -200,15 +189,8 @@ governing permissions and limitations under the License.
&.is-drop-target {
--mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color));

border-color: var(
--highcontrast-card-border-color-selected,
var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))
);
box-shadow: 0 0 0 1px
var(
--highcontrast-card-border-color-selected,
var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))
);
border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
background-color: var(--mod-card-background-color, var(--spectrum-card-background-color));
}

Expand Down Expand Up @@ -296,31 +278,19 @@ governing permissions and limitations under the License.
.spectrum-Card-body {
/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
and will be removed in a future version. */
padding-block-start: var(
--mod-card-body-padding-block-start,
var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top))
);
padding-inline-end: var(
--mod-card-body-padding-inline-end,
calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
)
);
padding-inline-start: var(
--mod-card-body-padding-inline-start,
calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
)
);
padding-block-end: var(
--mod-card-body-padding-block-end,
calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
)
);
padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)));
padding-inline-end: var(--mod-card-body-padding-inline-end, calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
));
padding-inline-start: var(--mod-card-body-padding-inline-start, calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
));
padding-block-end: var(--mod-card-body-padding-block-end, calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
));
}

.spectrum-Card-preview {
Expand All @@ -331,10 +301,7 @@ governing permissions and limitations under the License.
border-end-start-radius: 0;
display: flex;
align-items: center;
color: var(
--highcontrast-card-body-font-color,
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
);
color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)));
}

.spectrum-Card-title {
Expand All @@ -344,18 +311,12 @@ governing permissions and limitations under the License.
font-weight: var(--mod-card-title-font-weight, var(--spectrum-card-title-font-weight));
font-style: var(--mod-card-title-font-style, var(--spectrum-card-title-font-style));
line-height: var(--mod-card-title-line-height, var(--spectrum-card-title-line-height));
color: var(
--highcontrast-card-title-font-color,
var(--mod-card-title-font-color, var(--spectrum-card-title-font-color))
);
color: var(--highcontrast-card-title-font-color, var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)));
}

.spectrum-Card-subtitle {
padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right));
color: var(
--highcontrast-card-title-font-color,
var(--mod-card-title-font-color, var(--spectrum-card-title-font-color))
);
color: var(--highcontrast-card-title-font-color, var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)));
text-transform: none;
}

Expand All @@ -370,47 +331,29 @@ governing permissions and limitations under the License.
font-weight: var(--mod-card-body-font-weight, var(--spectrum-card-body-font-weight));
font-style: var(--mod-card-body-font-style, var(--spectrum-card-body-font-style));
line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
color: var(
--highcontrast-card-body-font-color,
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
);
color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)));
}

.spectrum-Card-footer {
/* Accommodate for wanting less spacing between body and footer */
margin-block-start: var(
--mod-card-footer-margin-block-start,
calc(
-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom)))
)
);
margin-inline-start: var(
--mod-card-footer-margin-inline-start,
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))
);
margin-inline-end: var(
--mod-card-footer-margin-inline-end,
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))
);
padding-block-end: var(
--mod-card-footer-padding-block-end,
calc(
margin-block-start: var(--mod-card-footer-margin-block-start, calc(
-1 * (
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom))
)
);
));
margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
padding-block-end: var(--mod-card-footer-padding-block-end, calc(
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
var(--mod-card-border-width, var(--spectrum-card-border-width))
));

/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
and will be removed in a future version. */
padding-block-start: var(
--mod-card-footer-padding-block-start,
var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top))
);
padding-block-start: var(--mod-card-footer-padding-block-start, var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)));

color: var(
--highcontrast-card-body-font-color,
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
);
color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)));
line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width))
solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
Expand Down Expand Up @@ -441,6 +384,7 @@ governing permissions and limitations under the License.
&::after {
border-width: 0;
}

.spectrum-Card-preview::after {
border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
}
Expand All @@ -450,10 +394,7 @@ governing permissions and limitations under the License.
.spectrum-Card-preview {
border: var(--mod-card-preview-border-width, var(--spectrum-card-preview-border-width))
solid;
border-color: var(
--highcontrast-card-border-color-selected,
var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))
);
border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)));
}
}
}
Expand Down
14 changes: 3 additions & 11 deletions components/dropindicator/index.css
View file
Expand Up @@ -25,10 +25,7 @@ governing permissions and limitations under the License.

.spectrum-DropIndicator {
position: relative;
background: var(
--highcontrast-dropindicator-color,
var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color))
);
background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color)));

&:before,
&:after {
Expand All @@ -37,14 +34,9 @@ governing permissions and limitations under the License.
inline-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size));
block-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size));
border-radius: 50%;
border: var(
--mod-dropindicator-border-size,
var(--spectrum-dropindicator-border-size)) solid;
border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid;
box-sizing: border-box;
border-color: var(
--highcontrast-dropindicator-color,
var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color))
);
border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color)));
}
}

Expand Down

0 comments on commit 2c63ab0

Please sign in to comment.