Skip to content

Commit 4fe7627

Browse files
castastrophecastastrophe
committed
chore: update infra to use esm syntax
1 parent 8c0c14b commit 4fe7627

Some content is hidden

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

45 files changed

+1573
-1555
lines changed

‎.github/QUICK-START.md

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,88 @@ Install the components you want along with their dependencies. Here's an example
1010
yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button
1111
```
1212

13-
Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
13+
Spectrum CSS components utilize custom properties in order to express our design language through a set of core tokens. We leverage the `@adobe/spectrum-tokens` data as a source of this design data and convert it into a set of CSS custom properties. This allows us to use the tokens in our components and to create a consistent design language across all of our components.
14+
15+
Some of these tokens have different values depending on the visual language or scale being used. The default values for all tokens are set to the default values for the light theme and medium scale.
16+
17+
To force the dark theme, you can add `color-scheme: dark` to your container element. Doing this will force the dark value to be used for all tokens that have one. This can be done at any level of the DOM and by leveraging the cascade, the color schemes can be nested or changed at any level. For example, if you want to force the dark theme for a specific component, you can add `color-scheme: dark` to that component's container element.
1418

1519
```html
16-
<html class="spectrum spectrum--medium spectrum--light"></html>
20+
<style>
21+
:root {
22+
/* Allow user preference to control the color scheme at first */
23+
color-scheme: light dark;
24+
}
25+
</style>
26+
<div class="container" style="color-scheme: dark">
27+
<p>A dark themed container</p>
28+
<div class="container" style="color-scheme: light">
29+
<p>A light themed container</p>
30+
</div>
31+
</div>
32+
```
33+
34+
The design language also includes a set of token values that represent different device sizes. At the moment, these values are only defined as "medium" and "large", with "medium" as the default which maps generally to a desktop or laptop screen. The "large" value is intended for smaller devices, such as phones and tablets. The default value for all tokens is set to the default value for the medium scale. To force the large scale, you can update the cascading layers inheritance:
35+
36+
```css
37+
@layers defaults, medium;
38+
39+
@media screen and (min-width: 768px) {
40+
@layers defaults, large;
41+
}
1742
```
1843

44+
What's happening here is that the `defaults` layer is being overridden by the `large` layer when the screen size is greater than 768px. This means that all tokens that have a value for the `large` scale will be used instead of the default value. The most useful feature of this approach is that each application can make their own decision about which scale to leverage and at what screen size. This allows for a lot of flexibility in how the design language is applied to different applications.
45+
1946
Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
2047

2148
```html
2249
<head>
23-
<!-- Include global tokens depedency first -->
24-
<link
25-
rel="stylesheet"
26-
href="node_modules/@spectrum-css/tokens/dist/index.css"
27-
/>
28-
29-
<!-- Include index.css for the components you're using -->
30-
<link
31-
rel="stylesheet"
32-
href="node_modules/@spectrum-css/button/dist/index.css"
33-
/>
50+
<!-- Include global tokens depedency first -->
51+
<link
52+
rel="stylesheet"
53+
href="node_modules/@spectrum-css/tokens/dist/index.css"
54+
/>
55+
56+
<!-- Include index.css for the components you're using -->
57+
<link
58+
rel="stylesheet"
59+
href="node_modules/@spectrum-css/button/dist/index.css"
60+
/>
3461
</head>
3562
```
3663

3764
Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
3865

3966
```html
4067
<button
41-
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
68+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
4269
>
43-
<span class="spectrum-Button-label">Button</span>
70+
<span class="spectrum-Button-label">Button</span>
4471
</button>
4572
```
4673

4774
To put it all together, your final html file will look like this:
4875

4976
```html
5077
<html class="spectrum spectrum--light spectrum--medium">
51-
<head>
52-
<link
53-
rel="stylesheet"
54-
href="node_modules/@spectrum-css/tokens/dist/index.css"
55-
/>
56-
<link
57-
rel="stylesheet"
58-
href="node_modules/@spectrum-css/button/dist/index.css"
59-
/>
60-
</head>
61-
<body>
62-
<button
63-
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64-
>
65-
<span class="spectrum-Button-label">Button</span>
66-
</button>
67-
</body>
78+
<head>
79+
<link
80+
rel="stylesheet"
81+
href="node_modules/@spectrum-css/tokens/dist/index.css"
82+
/>
83+
<link
84+
rel="stylesheet"
85+
href="node_modules/@spectrum-css/button/dist/index.css"
86+
/>
87+
</head>
88+
<body>
89+
<button
90+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
91+
>
92+
<span class="spectrum-Button-label">Button</span>
93+
</button>
94+
</body>
6895
</html>
6996
```
7097

‎.github/actions/file-diff/index.js

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

14-
const { existsSync } = require("fs");
15-
const { join, sep } = require("path");
14+
import { existsSync } from "fs";
15+
import { join, sep } from "path";
1616

17-
const core = require("@actions/core");
17+
import core from "@actions/core";
1818

19-
const {
20-
fetchFilesAndSizes,
21-
bytesToSize,
19+
import {
2220
addComment,
23-
} = require("./utilities.js");
21+
bytesToSize,
22+
fetchFilesAndSizes,
23+
} from "./utilities.js";
2424

2525
async function run() {
2626
try {
@@ -415,7 +415,9 @@ const makeTable = function (PACKAGES, filePath, rootPath) {
415415
let mainFile = "index.css";
416416
if (existsSync(packagePath)) {
417417
// If the package.json exists, read in the main file
418-
const { main } = require(packagePath) ?? {};
418+
const packageContent = fs.readFileSync(packagePath, "utf8") ?? "{}";
419+
const { main } = JSON.parse(packageContent);
420+
419421
// If the main file is a string, use it as the main file
420422
if (typeof main === "string") {
421423
// Strip out the path to the dist folder from the main file

‎.github/actions/file-diff/utilities.js

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

14-
const { statSync, existsSync, readdirSync } = require("fs");
15-
const { join, relative } = require("path");
14+
import { existsSync, readdirSync, statSync } from "fs";
15+
import { join, relative } from "path";
1616

17-
const github = require("@actions/github");
18-
const glob = require("@actions/glob");
17+
import { context, getOctokit } from "@actions/github";
18+
import { create } from "@actions/glob";
1919

2020
/**
2121
* List all files in the directory to help with debugging
@@ -39,7 +39,7 @@ function debugEmptyDirectory(path, pattern, { core }) {
3939
if (dirent.isFile()) {
4040
const file = join(path, dirent.name);
4141
if (dirent.name.startsWith(".")) return;
42-
core.info(`- ${relative(path, file)} | ${exports.bytesToSize(statSync(file).size)}`);
42+
core.info(`- ${relative(path, file)} | ${bytesToSize(statSync(file).size)}`);
4343
} else if (dirent.isDirectory()) {
4444
const dir = join(path, dirent.name);
4545
if (dirent.name.startsWith(".") || dirent.name === "node_modules") return;
@@ -61,7 +61,7 @@ function debugEmptyDirectory(path, pattern, { core }) {
6161
* @param {number} bytes
6262
* @returns {string} The size in human readable format
6363
*/
64-
exports.bytesToSize = function (bytes) {
64+
export function bytesToSize (bytes) {
6565
if (!bytes) return "-";
6666
if (bytes === 0) return "0";
6767

@@ -77,7 +77,7 @@ exports.bytesToSize = function (bytes) {
7777
}
7878

7979
return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i];
80-
};
80+
}
8181

8282
/** @typedef {import('@octokit/rest').RestEndpointMethodTypes['issues']} Issues */
8383
/**
@@ -86,20 +86,20 @@ exports.bytesToSize = function (bytes) {
8686
* @param {string} token - The GitHub token to use for authentication
8787
* @returns {Promise<Issues['createComment']['response'] | Issues['updateComment']['response']>}
8888
*/
89-
exports.addComment = async function ({ search, content, token }) {
89+
export async function addComment ({ search, content, token }) {
9090
/**
9191
* @description Set up the octokit client
9292
* @type ReturnType<import('@actions/github').getOctokit>
9393
*/
94-
const octokit = new github.getOctokit(token);
94+
const octokit = new getOctokit(token);
9595

9696
// Fetch data about the action that triggered the workflow
9797
/** @type import('@actions/github/lib/interfaces').WebhookPayload['pull_request'] */
98-
const pullRequest = github.context.payload.pull_request;
98+
const pullRequest = context.payload.pull_request;
9999
/** @type string */
100-
const owner = github.context.payload.repository.owner.login;
100+
const owner = context.payload.repository.owner.login;
101101
/** @type string */
102-
const repo = github.context.payload.repository.name;
102+
const repo = context.payload.repository.name;
103103

104104
if (!pullRequest) {
105105
core.warning(`No pull request found in the context, skipping comment`);
@@ -141,7 +141,7 @@ exports.addComment = async function ({ search, content, token }) {
141141
}
142142

143143
return octokit.rest.issues[action](commentData);
144-
};
144+
}
145145

146146
/**
147147
* Use the provided glob pattern to fetch the files and their sizes from the
@@ -150,11 +150,11 @@ exports.addComment = async function ({ search, content, token }) {
150150
* @param {string[]} patterns
151151
* @returns {Promise<Map<string, number>>} - Returns the relative path and size of the files
152152
*/
153-
exports.fetchFilesAndSizes = async function (rootPath, patterns = [], { core }) {
153+
export async function fetchFilesAndSizes (rootPath, patterns = [], { core }) {
154154
if (!existsSync(rootPath)) return new Map();
155155

156156
/** @type import('@actions/glob').Globber */
157-
const globber = await glob.create(patterns.map((f) => join(rootPath, f)).join("\n"));
157+
const globber = await create(patterns.map((f) => join(rootPath, f)).join("\n"));
158158

159159
/** @type Awaited<ReturnType<import('@actions/glob').Globber['glob']>> */
160160
const files = await globber.glob();
@@ -178,4 +178,4 @@ exports.fetchFilesAndSizes = async function (rootPath, patterns = [], { core })
178178
})
179179
.filter(Boolean),
180180
);
181-
};
181+
}

‎.prettierrc

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
{
2-
"tabWidth": 2,
3-
"useTabs": true,
4-
"overrides": [
5-
{
6-
"files": "*.css",
7-
"options": {
8-
"printWidth": 500
9-
}
10-
}
11-
]
2+
"tabWidth": 2,
3+
"useTabs": false
124
}

0 commit comments

Comments
 (0)