diff --git a/.eslintrc b/.eslintrc
index 70bfec2166b..a3b64a833da 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -19,6 +19,7 @@
"semi": ["warn", "always"],
"space-before-blocks": ["warn", "always"]
},
+ "ignorePatterns": ["!.storybook"],
"overrides": [
{
"files": ["*.json"],
diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md
index 4b97fcab7e8..6be1504669e 100644
--- a/.github/QUICK-START.md
+++ b/.github/QUICK-START.md
@@ -10,12 +10,35 @@ Install the components you want along with their dependencies. Here's an example
yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button
```
-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 `` 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:
+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.
+
+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.
+
+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.
```html
-
+
+
+
A dark themed container
+
+
A light themed container
+
+
```
+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:
+
+```html
+
+```
+
+This will override the default value for all tokens to the value for the large scale.
+
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 `` tag:
```html
@@ -23,7 +46,7 @@ Use the `index.css` files in your project to include component and global styles
@@ -51,7 +74,7 @@ To put it all together, your final html file will look like this:
{
- const {
- loaded = {},
- } = context;
-
useEffect(() => {
// Inject the sprite sheets into the document
let sprite = document.getElementById("spritesheets");
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
index bd22ac68401..68d42c5ed33 100644
--- a/.storybook/decorators/utilities.js
+++ b/.storybook/decorators/utilities.js
@@ -116,7 +116,7 @@ export const Container = ({
if (withBorder) {
borderStyles["padding-inline"] = "24px";
borderStyles["padding-block"] = "24px";
- borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)";
+ borderStyles["border"] = "1px solid color-mix(in srgb, var(--spectrum-gray-600) 20%, transparent)";
borderStyles["border-radius"] = "4px";
gap = 80;
}
@@ -158,6 +158,7 @@ export const Container = ({
"row-gap": "24px",
"align-items": heading && level > 1 ? "flex-start" : undefined,
"justify-content": direction === "column" ? "center" : "flex-start",
+ "background": level === 1 && !isDocs ? "var(--spectrum-background-base-color)" : undefined,
...borderStyles,
...wrapperStyles,
})}
diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
index 391031de906..3c41d3ea76d 100644
--- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js
+++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
@@ -1,5 +1,7 @@
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+
import "./index.css";
export default {
@@ -35,11 +37,8 @@ const DropShadowBackground = (
context,
) => html`