Skip to content

Commit 9848be0

Browse files
castastrophecastastrophe
committed
Merge branch 'main' into feat-deprecating-old-token-packages
2 parents 41aa824 + a290816 commit 9848be0

File tree

8 files changed

+247
-38
lines changed

8 files changed

+247
-38
lines changed

‎.storybook/manager.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import logo from "./assets/logo.svg";
77
import pkg from "./package.json";
88

99
// Load global styles
10-
import "@spectrum-css/vars/dist/spectrum-global.css";
11-
import "@spectrum-css/vars/dist/spectrum-light.css";
12-
import "@spectrum-css/vars/dist/spectrum-medium.css";
10+
import "@spectrum-css/vars/css/globals/index.css";
11+
import "@spectrum-css/vars/css/components/index.css";
1312

14-
import "./global.js";
13+
import "@spectrum-css/vars/css/scales/spectrum-medium.css";
14+
import "@spectrum-css/vars/css/themes/spectrum-light.css";
1515

16-
import "@spectrum-css/tokens";
16+
import "./global.js";
1717

1818
addons.setConfig({
1919
theme: create({

‎components/card/index.css

Lines changed: 61 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ governing permissions and limitations under the License.
1818
--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
1919
--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
2020
--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
21-
--spectrum-card-footer-margin-top: var(--spectrum-spacing-100);
21+
--spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
2222
--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
2323

2424
--spectrum-card-border-width: var(--spectrum-border-width-100);
@@ -367,9 +367,9 @@ governing permissions and limitations under the License.
367367
);
368368
box-sizing: border-box;
369369

370-
display: flex;
371-
align-items: center;
372-
justify-content: center;
370+
display: flex;
371+
align-items: center;
372+
justify-content: center;
373373

374374
border-start-start-radius: calc(
375375
var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
@@ -408,21 +408,35 @@ governing permissions and limitations under the License.
408408
}
409409

410410
.spectrum-Card-body {
411+
/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
412+
and will be removed in a future version. */
411413
padding-block-start: var(
412-
--mod-card-title-padding-top,
413-
var(--spectrum-card-title-padding-top)
414+
--mod-card-body-padding-block-start,
415+
var(
416+
--mod-card-title-padding-top,
417+
var(--spectrum-card-title-padding-top)
418+
)
414419
);
415-
padding-inline-end: calc(
416-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
420+
padding-inline-end: var(
421+
--mod-card-body-padding-inline-end,
422+
calc(
423+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
417424
var(--mod-card-border-width, var(--spectrum-card-border-width))
425+
)
418426
);
419-
padding-inline-start: calc(
420-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
427+
padding-inline-start: var(
428+
--mod-card-body-padding-inline-start,
429+
calc(
430+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
421431
var(--mod-card-border-width, var(--spectrum-card-border-width))
432+
)
422433
);
423-
padding-block-end: calc(
424-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
434+
padding-block-end: var(
435+
--mod-card-body-padding-block-end,
436+
calc(
437+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
425438
var(--mod-card-border-width, var(--spectrum-card-border-width))
439+
)
426440
);
427441
}
428442

@@ -526,25 +540,47 @@ governing permissions and limitations under the License.
526540

527541
.spectrum-Card-footer {
528542
/* Accommodate for wanting less spacing between body and footer */
529-
margin-block-start: calc(
530-
-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
531-
var(
532-
--mod-card-content-margin-bottom,
533-
var(--spectrum-card-content-margin-bottom)
534-
))
543+
margin-block-start: var(
544+
--mod-card-footer-margin-block-start,
545+
calc(
546+
-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
547+
var(
548+
--mod-card-content-margin-bottom,
549+
var(--spectrum-card-content-margin-bottom)
550+
))
551+
)
535552
);
536553
margin-inline-start: var(
537-
--mod-card-body-spacing,
538-
var(--spectrum-card-body-spacing)
554+
--mod-card-footer-margin-inline-start,
555+
var(
556+
--mod-card-body-spacing,
557+
var(--spectrum-card-body-spacing)
558+
)
539559
);
540560
margin-inline-end: var(
541-
--mod-card-body-spacing,
542-
var(--spectrum-card-body-spacing)
561+
--mod-card-footer-margin-inline-end,
562+
var(
563+
--mod-card-body-spacing,
564+
var(--spectrum-card-body-spacing)
565+
)
543566
);
544-
padding-block-end: calc(
545-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
567+
padding-block-end: var(
568+
--mod-card-footer-padding-block-end,
569+
calc(
570+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
546571
var(--mod-card-border-width, var(--spectrum-card-border-width))
572+
)
573+
);
574+
/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
575+
and will be removed in a future version. */
576+
padding-block-start: var(
577+
--mod-card-footer-padding-block-start,
578+
var(
579+
--mod-card-footer-margin-top,
580+
var(--spectrum-card-footer-padding-top)
581+
)
547582
);
583+
548584
color: var(
549585
--highcontrast-card-body-font-color,
550586
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
@@ -553,16 +589,11 @@ governing permissions and limitations under the License.
553589
--mod-card-body-line-height,
554590
var(--spectrum-card-body-line-height)
555591
);
556-
557592
border-block-start: var(
558593
--mod-card-border-width,
559594
var(--spectrum-card-border-width)
560595
)
561596
solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
562-
padding-block-start: var(
563-
--mod-card-footer-margin-top,
564-
var(--spectrum-card-footer-margin-top)
565-
);
566597
}
567598

568599
.spectrum-Card-header {
@@ -669,7 +700,7 @@ governing permissions and limitations under the License.
669700
}
670701

671702
/* Use ::after to show the selection outline so that the border doesn't
672-
* affect the layout of the content within the preview. */
703+
affect the layout of the content within the preview. */
673704
&::after {
674705
content: "";
675706
block-size: 100%;

‎components/card/metadata/mods.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
| `--mod-card-body-font-style` |
1919
| `--mod-card-body-font-weight` |
2020
| `--mod-card-body-line-height` |
21+
| `--mod-card-body-padding-block-end` |
22+
| `--mod-card-body-padding-block-start` |
23+
| `--mod-card-body-padding-inline-end` |
24+
| `--mod-card-body-padding-inline-start` |
2125
| `--mod-card-body-spacing` |
2226
| `--mod-card-border-color` |
2327
| `--mod-card-border-color-hover` |
@@ -29,7 +33,12 @@
2933
| `--mod-card-divider-color` |
3034
| `--mod-card-focus-indicator-color` |
3135
| `--mod-card-focus-indicator-width` |
36+
| `--mod-card-footer-margin-block-start` |
37+
| `--mod-card-footer-margin-inline-end` |
38+
| `--mod-card-footer-margin-inline-start` |
3239
| `--mod-card-footer-margin-top` |
40+
| `--mod-card-footer-padding-block-end` |
41+
| `--mod-card-footer-padding-block-start` |
3342
| `--mod-card-horizontal-body-padding` |
3443
| `--mod-card-horizontal-preview-padding` |
3544
| `--mod-card-minimum-width` |

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"build:site": "gulp buildDocs -LLL",
3131
"cache:clean": "nx reset",
3232
"ci": "yarn build:all",
33-
"ci:storybook": "nx run-many --projects @spectrum-css/preview --target storybook",
33+
"ci:storybook": "nx run-many --projects @spectrum-css/preview --target build",
3434
"clean": "yarn cache:clean && run-p clean:*",
3535
"clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
3636
"clean:docs": "rimraf dist",

‎tools/component-builder-simple/css/index.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,88 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
const gulp = require("gulp");
14+
const logger = require("gulplog");
15+
const colors = require("colors");
16+
const path = require("path");
17+
const through = require("through2");
1418
const postcss = require("gulp-postcss");
1519
const concat = require("gulp-concat");
20+
const postcssReal = require("postcss");
21+
const fsp = require("fs").promises;
22+
const { parse } = require("postcss-values-parser");
1623
const processorsFunction = require("./processors").getProcessors;
1724
const processors = processorsFunction();
1825

26+
function getTokensUsedInValueNode(node, usedTokens) {
27+
usedTokens = usedTokens ?? [];
28+
if (node.nodes) {
29+
node.nodes.forEach((subNode) => {
30+
if (subNode.type === "word" && subNode.value.startsWith("--")) {
31+
usedTokens.push(subNode.value);
32+
} else if (subNode.type === "func") {
33+
getTokensUsedInValueNode(subNode, usedTokens);
34+
}
35+
});
36+
}
37+
return usedTokens;
38+
}
39+
40+
function getTokensUsedInCSS(root, coreTokens, componentTokens) {
41+
let usedTokens = [];
42+
let coreTokensUsed = {};
43+
let componentTokensUsed = {};
44+
45+
root.walkRules((rule) => {
46+
rule.walkDecls((decl) => {
47+
let matches = decl.value.match(/var\(.*?\)/g);
48+
if (matches) {
49+
let parsed = parse(decl.value);
50+
parsed.nodes.forEach((node) => {
51+
const usedTokensInValue = getTokensUsedInValueNode(node);
52+
usedTokensInValue.forEach((tokenName) => {
53+
if (coreTokens[tokenName]) {
54+
coreTokensUsed[tokenName] = (coreTokensUsed[tokenName] ?? 0) + 1;
55+
} else if (componentTokens[tokenName]) {
56+
componentTokensUsed[tokenName] =
57+
(componentTokensUsed[tokenName] ?? 0) + 1;
58+
}
59+
if (usedTokens.indexOf(tokenName) === -1) {
60+
usedTokens.push(tokenName);
61+
}
62+
});
63+
});
64+
}
65+
});
66+
});
67+
68+
return { usedTokens, coreTokensUsed, componentTokensUsed };
69+
}
70+
71+
function getTokensDefinedInCSS(root) {
72+
let variables = {};
73+
74+
root.walkRules((rule) => {
75+
rule.walkDecls((decl) => {
76+
if (decl.prop.startsWith("--")) {
77+
variables[decl.prop] = decl.value;
78+
}
79+
});
80+
});
81+
82+
return variables;
83+
}
84+
85+
async function getCoreTokens() {
86+
const fetchOptions = {
87+
paths: [process.cwd(), path.join(process.cwd(), "../../")],
88+
};
89+
/* Resolve core tokens first from the current working directory, or if not found, from the root of the monorepo */
90+
const coreTokensFile = require.resolve("@spectrum-css/tokens", fetchOptions);
91+
let contents = await fsp.readFile(coreTokensFile, "utf8");
92+
let root = postcssReal.parse(contents);
93+
return getTokensDefinedInCSS(root);
94+
}
95+
1996
function buildCSS() {
2097
return gulp
2198
.src([
@@ -77,10 +154,84 @@ function buildExpressTheme() {
77154
.pipe(gulp.dest("dist/themes/"));
78155
}
79156

157+
let coreTokens = null;
158+
function checkCSS(glob) {
159+
return gulp
160+
.src(glob)
161+
.pipe(concat("index-combined.css"))
162+
.pipe(
163+
through.obj(async function doBake(file, enc, cb) {
164+
// Fetch core tokes once during the build
165+
if (coreTokens === null) {
166+
coreTokens = await getCoreTokens();
167+
}
168+
169+
let pkg = JSON.parse(await fsp.readFile(path.join("package.json")));
170+
171+
// Parse only once
172+
let root = postcssReal.parse(file.contents);
173+
174+
// Get tokens defined inside of the component
175+
let componentTokens = getTokensDefinedInCSS(root);
176+
177+
// Find all tokens used in the component
178+
let { usedTokens } = getTokensUsedInCSS(
179+
root,
180+
coreTokens,
181+
componentTokens
182+
);
183+
184+
// Make sure the component doesn't use any undefined tokens
185+
usedTokens.forEach((tokenName) => {
186+
if (
187+
!coreTokens[tokenName] &&
188+
!componentTokens[tokenName] &&
189+
!tokenName.startsWith("--mod") &&
190+
!tokenName.startsWith("--highcontrast")
191+
) {
192+
tokenName = `${tokenName}`.cyan;
193+
logger.warn(
194+
`${"◆".yellow} ${pkg.name} uses ${
195+
"undefined".underline
196+
} token ${tokenName}`
197+
);
198+
}
199+
});
200+
201+
// 2023-05-10: Should remove this to allow for more cascading values to influence nested components
202+
// Make sure all tokens defined in the component are used
203+
Object.keys(componentTokens).forEach((tokenName) => {
204+
if (!usedTokens.includes(tokenName)) {
205+
tokenName = `${tokenName}`.cyan;
206+
logger.warn(
207+
`${"◆".yellow} ${
208+
pkg.name
209+
} defines ${tokenName}, but does not use it ${
210+
"internally".italic
211+
}`
212+
);
213+
}
214+
});
215+
216+
cb(null);
217+
})
218+
);
219+
}
220+
221+
function checkSourceCSS() {
222+
return checkCSS(["themes/*.css", "index.css"]);
223+
}
224+
225+
function checkBuiltCSS() {
226+
return checkCSS("dist/index.css");
227+
}
228+
80229
exports.buildCSS = gulp.series(
230+
checkSourceCSS,
81231
gulp.parallel(
82232
buildCSS,
83233
buildCSSWithoutThemes,
84234
gulp.series(buildCSSThemes, buildCSSThemeIndex, buildExpressTheme)
85235
),
236+
checkBuiltCSS
86237
);

‎tools/component-builder-simple/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ const build = gulp.series(clean, css.buildCSS, function copyIndex() {
3131
.pipe(gulp.dest("dist/"));
3232
});
3333

34-
exports.default = exports.build = build;
34+
exports.default = build;
35+
exports.build = build;
36+
exports.buildLite = build;
37+
exports.buildMedium = build;
38+
exports.buildHeavy = build;
3539
exports.clean = clean;
3640
exports.buildCSS = build;

‎tools/component-builder/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The following tasks are available:
1010

1111
- `gulp clean` - Clean everything
1212
- `gulp build` - Build everything
13+
- `gulp buildLite` - Clean, then build CSS custom properties only (`index.vars`)
14+
- `gulp buildHeavy` - Clean, then build CSS for all strategies
1315
- `gulp buildCSS` - Build CSS for all strategies
1416
- `gulp buildDocs` - Build documentation only
1517

0 commit comments

Comments
 (0)