Skip to content

Commit 0db64de

Browse files
castastrophecastastrophe
committed
feat(tokens): optimize token color contexts
1 parent d3b5702 commit 0db64de

File tree

144 files changed

+2482
-24831
lines changed

Some content is hidden

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

144 files changed

+2482
-24831
lines changed

‎.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: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,43 @@ 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>
1732
```
1833

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 load the CSS overrides for the large scale:
35+
36+
```html
37+
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/css/mobile.css" />
38+
```
39+
40+
This will override the default value for all tokens to the value for the large scale.
41+
1942
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:
2043

2144
```html
2245
<head>
2346
<!-- Include global tokens depedency first -->
2447
<link
2548
rel="stylesheet"
26-
href="node_modules/@spectrum-css/tokens/dist/index.css"
49+
href="node_modules/@spectrum-css/tokens/dist/css/index.css"
2750
/>
2851

2952
<!-- Include index.css for the components you're using -->
@@ -51,7 +74,7 @@ To put it all together, your final html file will look like this:
5174
<head>
5275
<link
5376
rel="stylesheet"
54-
href="node_modules/@spectrum-css/tokens/dist/index.css"
77+
href="node_modules/@spectrum-css/tokens/dist/css/index.css"
5578
/>
5679
<link
5780
rel="stylesheet"

‎.storybook/assets/base.css‎

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

14-
body {
14+
:root {
1515
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
1616
--spectrum-font-style: var(--spectrum-default-font-style);
1717
--spectrum-font-size: var(--spectrum-font-size-100);
1818

19+
/* Gradient that changes with the color theme. */
20+
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
21+
22+
/* Gradients that do not change with the color theme, for use in static color backgrounds. */
23+
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
24+
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
25+
26+
color-scheme: light dark;
27+
}
28+
29+
body {
1930
margin: 0;
2031

2132
font-family: var(--spectrum-font-family);
2233
font-size: var(--spectrum-font-size);
2334
font-style: var(--spectrum-font-style);
24-
25-
color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34));
26-
background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
2735
}
2836

29-
.spectrum {
30-
color: var(--spectrum-neutral-content-color-default);
31-
background-color: var(--spectrum-background-base-color);
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));
3241
-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
3342
}
3443

35-
.spectrum .spectrum-examples-static-black {
36-
background: var(--spectrum-examples-gradient-static-black);
44+
.spectrum-examples-static-black {
45+
background: var(--spectrum-examples-gradient-static-black) !important;
3746
}
3847

39-
.spectrum .spectrum-examples-static-white {
40-
background: var(--spectrum-examples-gradient-static-white);
48+
.spectrum-examples-static-white {
49+
background: var(--spectrum-examples-gradient-static-white) !important;
4150
}
4251

4352
/* Hide the SVG elements that only include references */

‎.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", "spectrum--light", "spectrum--medium");
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/drop-shadow/drop-shadow.stories.js‎

Lines changed: 4 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 {
@@ -35,11 +37,8 @@ const DropShadowBackground = (
3537
context,
3638
) => html`
3739
<div
38-
class=${classMap({
39-
[rootClass]: true,
40-
"spectrum--light": color === "light",
41-
"spectrum--dark": color === "dark",
42-
})}
40+
class=${classMap({ [rootClass]: true })}
41+
style=${styleMap({ "color-scheme": color })}
4342
>
4443
${DropShadowSwatch(args, context)}
4544
</div>

‎.storybook/foundations/drop-shadow/index.css‎

Lines changed: 26 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -10,106 +10,57 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
/* stylelint-disable spectrum-tools/no-unknown-custom-properties */
14-
1513
.spectrum-Foundations-Example-DropShadow-swatch {
16-
block-size: 150px;
17-
inline-size: 150px;
18-
background-color: var(--spectrum-gray-25);
19-
border-radius: var(--spectrum-corner-radius-large-default);
20-
border: transparent;
14+
block-size: 150px;
15+
inline-size: 150px;
16+
17+
/* matches dark mode design spec rgb(34, 34, 34) */
18+
background-color: var(--spectrum-gray-25);
19+
border-radius: var(--spectrum-corner-radius-large-default);
20+
border: transparent;
2121
}
2222

23-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch {
24-
background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
23+
@media (prefers-color-scheme: dark) {
24+
.spectrum-Foundations-Example-DropShadow-swatch {
25+
background-color: var(--spectrum-gray-75);
26+
}
2527
}
2628

2729
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow {
28-
box-shadow:
29-
var(--spectrum-drop-shadow-emphasized-default-x)
30-
var(--spectrum-drop-shadow-emphasized-default-y)
31-
var(--spectrum-drop-shadow-emphasized-default-blur)
32-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
30+
box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
3331
}
3432

3533
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
36-
filter: drop-shadow(
37-
var(--spectrum-drop-shadow-emphasized-default-x)
38-
var(--spectrum-drop-shadow-emphasized-default-y)
39-
calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
40-
var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
41-
);
42-
}
43-
44-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
45-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
46-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
47-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
48-
/* adjustment because color tokens do not work properly on foundations pages */
49-
--mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
34+
filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)));
5035
}
5136

5237
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
53-
box-shadow:
54-
var(--spectrum-drop-shadow-emphasized-hover-x)
55-
var(--spectrum-drop-shadow-emphasized-hover-y)
56-
var(--spectrum-drop-shadow-emphasized-hover-blur)
57-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
38+
box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
5839
}
5940

6041
.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
61-
filter: drop-shadow(
62-
var(--spectrum-drop-shadow-emphasized-hover-x)
63-
var(--spectrum-drop-shadow-emphasized-hover-y)
64-
calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
65-
var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
66-
);
67-
}
68-
69-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
70-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
71-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
72-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
73-
/* adjustment because color tokens do not work properly on foundations pages */
74-
--mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
42+
filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)));
7543
}
7644

7745
.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
78-
box-shadow:
79-
var(--spectrum-drop-shadow-elevated-x)
80-
var(--spectrum-drop-shadow-elevated-y)
81-
var(--spectrum-drop-shadow-elevated-blur)
82-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
46+
box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
8347
}
8448

8549
.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
86-
filter: drop-shadow(
87-
var(--spectrum-drop-shadow-elevated-x)
88-
var(--spectrum-drop-shadow-elevated-y)
89-
calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
90-
var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
91-
);
92-
}
93-
94-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
95-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
96-
.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
97-
.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
98-
/* adjustment because color tokens do not work properly on foundations pages */
99-
--mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
50+
filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)));
10051
}
10152

10253
.spectrum-Foundations-Example-swatch-container {
103-
background-color: var(--spectrum-gray-25);
104-
block-size: 200px;
105-
inline-size: 300px;
106-
display: flex;
107-
align-items: center;
108-
justify-content: center;
54+
background-color: var(--spectrum-gray-25);
55+
block-size: 200px;
56+
inline-size: 300px;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
10960
}
11061

11162
.spectrum-Foundations-Example-variant-container {
112-
background-color: var(--spectrum-gray-25);
113-
display: flex;
114-
flex-direction: row;
63+
background-color: var(--spectrum-gray-25);
64+
display: flex;
65+
flex-direction: row;
11566
}

‎.storybook/manager.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
import { addons } from "@storybook/manager-api";
22
import { create } from "@storybook/theming";
3-
import { startCase } from "lodash";
43

54
import "./assets/index.css";
65

76
import logo from "./assets/logo.svg";
8-
import pkg from "./package.json";
9-
10-
const root = document.body ?? document.documentElement;
11-
if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
127

138
addons.setConfig({
149
theme: create({
1510
base: "light",
1611

1712
brandTitle: "Adobe | Spectrum CSS",
18-
brandUrl: pkg.homepage ?? "https://opensource.adobe.com/spectrum-css",
13+
brandUrl: "https://opensource.adobe.com/spectrum-css",
1914
brandImage: logo,
2015
brandTarget: "_self",
2116

@@ -63,8 +58,4 @@ addons.setConfig({
6358

6459
// gridCellSize?: number;
6560
}),
66-
sidebar: {
67-
showRoots: false,
68-
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
69-
},
7061
});

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Start by including the base set of variables:
6060

6161
```css
6262
/* Include tokens */
63-
@import "node_modules/@spectrum-css/tokens/dist/index.css";
63+
@import "node_modules/@spectrum-css/tokens/dist/css/index.css";
6464

6565
@import "node_modules/@spectrum-css/page/dist/index.css";
6666
@import "node_modules/@spectrum-css/typography/dist/index.css";

0 commit comments

Comments
 (0)