Skip to content

Commit ac835a9

Browse files
castastrophecastastrophe
committed
chore: update infra to use esm syntax
1 parent e051821 commit ac835a9

File tree

83 files changed

+19178
-19555
lines changed

Some content is hidden

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

83 files changed

+19178
-19555
lines changed

‎.changeset/pre.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@
8888
"@spectrum-css/typography": "8.0.1",
8989
"@spectrum-css/underlay": "6.0.1",
9090
"@spectrum-css/well": "7.0.1",
91-
"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
9291
"@spectrum-tools/stylelint-no-missing-var": "2.0.1",
9392
"@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2",
9493
"@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.3",

‎.eslintrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"semi": ["warn", "always"],
2020
"space-before-blocks": ["warn", "always"]
2121
},
22+
"ignorePatterns": ["!.storybook"],
2223
"overrides": [
2324
{
2425
"files": ["*.json"],

‎.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

‎.storybook/assets/base.css

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
2-
31
/*!
42
* Copyright 2024 Adobe. All rights reserved.
53
*
@@ -13,40 +11,42 @@
1311
* governing permissions and limitations under the License.
1412
*/
1513

16-
body {
14+
:root {
1715
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
1816
--spectrum-font-style: var(--spectrum-default-font-style);
1917
--spectrum-font-size: var(--spectrum-font-size-100);
2018

21-
margin: 0;
22-
23-
font-family: var(--spectrum-font-family);
24-
font-size: var(--spectrum-font-size);
25-
font-style: var(--spectrum-font-style);
26-
27-
color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34));
28-
background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
29-
}
30-
31-
.spectrum {
3219
/* Gradient that changes with the color theme. */
3320
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
3421

3522
/* Gradients that do not change with the color theme, for use in static color backgrounds. */
3623
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
3724
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
3825

39-
color: var(--spectrum-neutral-content-color-default);
40-
background-color: var(--spectrum-background-base-color);
41-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
26+
color-scheme: light dark;
4227
}
4328

44-
.spectrum .spectrum-examples-static-black {
45-
background: var(--spectrum-examples-gradient-static-black);
29+
body {
30+
margin: 0;
31+
32+
font-family: var(--spectrum-font-family);
33+
font-size: var(--spectrum-font-size);
34+
font-style: var(--spectrum-font-style);
4635
}
4736

48-
.spectrum .spectrum-examples-static-white {
49-
background: var(--spectrum-examples-gradient-static-white);
37+
body,
38+
.docs-story {
39+
color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34));
40+
background: var(--spectrum-background-base-color, rgb(230, 230, 230));
41+
-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
42+
}
43+
44+
.spectrum-examples-static-black {
45+
background: var(--spectrum-examples-gradient-static-black) !important;
46+
}
47+
48+
.spectrum-examples-static-white {
49+
background: var(--spectrum-examples-gradient-static-white) !important;
5050
}
5151

5252
/* Hide the SVG elements that only include references */
@@ -68,7 +68,7 @@ svg:has(symbol):not(:has(use)) {
6868
line-height: normal;
6969
letter-spacing: normal;
7070
text-transform: none;
71-
border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
71+
border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
7272
}
7373

7474
/* Force the modal wrapper to be contained by the frame not the viewport */
@@ -83,5 +83,3 @@ svg:has(symbol):not(:has(use)) {
8383
story view), due to Storybook's inline style that sets overflow: auto */
8484
overflow: visible !important;
8585
}
86-
87-
/* stylelint-enable selector-class-pattern */

‎.storybook/decorators/context.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,6 @@ export const withContextWrapper = makeDecorator({
4747
// Start by attaching the appropriate tokens to the container
4848
toggleStyles(document.body, "tokens", tokens, true);
4949

50-
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
51-
document.body.classList.add("spectrum");
52-
5350
for (const container of fetchContainers(id, isDocs, isTesting)) {
5451
// Check if the container is a testing wrapper to prevent applying colors around the testing grid
5552
const isTestingWrapper = isTesting ? container.matches("body:has([data-testing-preview]),[data-testing-preview]") : false;
@@ -71,9 +68,6 @@ export const withContextWrapper = makeDecorator({
7168
// If we can't determine the static key, we can't use the static color
7269
if (!staticKey) hasStaticElement = false;
7370

74-
// Every container gets the spectrum class
75-
container.classList.toggle("spectrum", true);
76-
7771
// Let the static color override the color if it's set
7872
if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) {
7973
color = staticColorSettings[staticKey].color;
@@ -85,13 +79,8 @@ export const withContextWrapper = makeDecorator({
8579
color = "light";
8680
}
8781

88-
for (let c of ["light", "dark"]) {
89-
container.classList.toggle(`spectrum--${c}`, c === color);
90-
}
91-
92-
for (const s of ["medium", "large"]) {
93-
container.classList.toggle(`spectrum--${s}`, s === scale);
94-
}
82+
container.style.setProperty("color-scheme", color);
83+
container.classList.toggle("spectrum--large", scale === "large");
9584

9685
if (!isTestingWrapper) {
9786
if (hasStaticElement && staticKey && staticColorSettings[staticKey]) {

‎.storybook/decorators/icon-sprites.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ export const withIconSpriteSheet = makeDecorator({
1010
name: "withIconSpriteSheet",
1111
parameterName: "spritesheet",
1212
wrapper: (StoryFn, context) => {
13-
const {
14-
loaded = {},
15-
} = context;
16-
1713
useEffect(() => {
1814
// Inject the sprite sheets into the document
1915
let sprite = document.getElementById("spritesheets");

‎.storybook/decorators/utilities.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const Container = ({
116116
if (withBorder) {
117117
borderStyles["padding-inline"] = "24px";
118118
borderStyles["padding-block"] = "24px";
119-
borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)";
119+
borderStyles["border"] = "1px solid color-mix(in srgb, var(--spectrum-gray-600) 20%, transparent)";
120120
borderStyles["border-radius"] = "4px";
121121
gap = 80;
122122
}
@@ -158,6 +158,7 @@ export const Container = ({
158158
"row-gap": "24px",
159159
"align-items": heading && level > 1 ? "flex-start" : undefined,
160160
"justify-content": direction === "column" ? "center" : "flex-start",
161+
"background": level === 1 && !isDocs ? "var(--spectrum-background-base-color)" : undefined,
161162
...borderStyles,
162163
...wrapperStyles,
163164
})}

‎.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414
handles: ["click .spectrum-ActionButton:not([disabled])"],
1515
},
1616
},
17-
tags: ['!dev'],
17+
tags: ["!dev"],
1818
};
1919

2020
const ActionButton = (args, context) => html`

‎.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ export default {
1212
},
1313
parameters: {
1414
actions: {
15-
handles: ['click input[type="checkbox"]'],
15+
handles: ["click input[type=\"checkbox\"]"],
1616
},
1717
},
18-
tags: ['!dev'],
18+
tags: ["!dev"],
1919
};
2020

2121
const Checkbox = (args = {}, context = {}) => html`
@@ -82,7 +82,7 @@ const CheckboxTable = (args, context) => {
8282
</tbody>
8383
</table>
8484
`;
85-
}
85+
};
8686

8787
export const CheckboxExamples = CheckboxTable.bind({});
8888
CheckboxExamples.args = {};

‎.storybook/foundations/drop-shadow/drop-shadow.stories.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
3+
import { styleMap } from "lit/directives/style-map.js";
4+
35
import "./index.css";
46

57
export default {
@@ -28,17 +30,15 @@ const DropShadowSwatch = ({
2830

2931
const DropShadowBackground = (
3032
{
31-
rootClass = "spectrum-Foundations-Example-swatch-container",
3233
color,
3334
...args
3435
},
3536
context,
3637
) => html`
3738
<div
38-
class=${classMap({
39-
[rootClass]: true,
40-
"spectrum--light": color === "light",
41-
"spectrum--dark": color === "dark",
39+
class="spectrum-Foundations-Example-swatch-container"
40+
style=${styleMap({
41+
"color-scheme": color,
4242
})}
4343
>
4444
${DropShadowSwatch(args, context)}

0 commit comments

Comments
 (0)